/* ==========================================================================
   1. BRAND THEME CONFIGURATIONS & RESET
   ========================================================================== */
:root {
    /* Color Palette */
    --primary-color: #006dc9;       /* Deep Academic Green */
    --secondary-color: #0f3a2c;     /* Darker Green Accent */
    --accent-gold: #e0aa3e;        /* Premium Heritage Gold */
    --accent-gold-light: #f7c566;  /* Soft Gold for highlights */
    
    /* Functional UI Colors */
    --text-main: #0f141a;          /* Dark slate for high readability */
    --text-muted: #626366;         /* Subtle text for dates/metadata */
    --bg-body: #f8f9fa;            /* Light page backdrop */
    --bg-white: #ffffff;           /* Clean container blocks */
    --border-color: #eaedf1;       /* Soft structural divides */
    
    /* Layout Dimensions */
    --max-width: 90%;
    --transition-speed: 0.3s;
    --hero-primary: #114232;
    --hero-gold: #ffa705;
    --hero-gold-light: #f5aa00;
    --hero-secondary: #00ff43;
    --hero-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base resets for cross-browser consistency */
*{margin:0;padding:0;list-style:none;font-family:"Noto Serif Bengali", serif;box-sizing:border-box}
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.5;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed) ease;
}

/* Global Content Centering Wrapper */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Material Symbols Vertically Aligned Fix */
.material-symbols-outlined {
    font-size: 18px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   2. TOP HEADER SECTION (Contact & Quick Portals)
   ========================================================================== */
.top-header {
    background-color: #13113a;
    color: #ffffff;
    font-size: 13px;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.08); */
    width: 100%;
    display: inline-block;
    float: left;
    position: relative;
}

.th-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-section, 
.registration-section {
    display: flex;
    gap: 10px;
    align-items: center;
}

.contact-section li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
}

.contact-section li span {
    color: var(--accent-gold-light);
}

.registration-section li {
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: color var(--transition-speed);
    padding: 10px 15px;
}
.registration-section li:last-child{
    background: var(--act-amber);
    color: #fff !important;
}
.registration-section li:hover {
    color: var(--accent-gold-light);
}

/* ==========================================================================
   3. MAIN HEADER SECTION (Logo, Desktop Navigation, & Actions)
   ========================================================================== */
.header {
    background-color: var(--bg-white);
    padding: 10px 0;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--primary-color);
    display: inline-block;
    width: 100%;
    float: left;
}

.header-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Logo Sizing */
.logo-section .main-logo {
    height: 75px;
    width: auto;
    display: block;
}

/* Main Navigation Menu */
.main-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

.main-menu a {
    display: block;
    padding: 10px 14px;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-main);
    border-radius: 4px;
}

.main-menu a:hover {
    color: var(--primary-color);
    background-color: rgba(17, 66, 50, 0.05);
}

/* Header UI Buttons System */
.header-action {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ha-button a, 
.mode-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    /* background-color: var(--bg-body); */
    /* border: 1px solid var(--border-color); */
    border-radius: 50%;
    color: var(--text-muted);
    transition: all var(--transition-speed) ease;
}

.ha-button a:hover, 
.mode-button a:hover {
    /* background-color: var(--primary-color); */
    color: var(--primary-color);
    /* border-color: var(--primary-color); */
}

/* Dedicated Structural Style for Donation Action Item */
.ha-button:last-child a {
    width: auto;
    height: auto;
    padding: 8px 18px;
    border-radius: 4px;
    background-color: #13113a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}

.ha-button:last-child a:hover {
    background-color: var(--primary-color);
}

/* Dark/Light Toggles Container setup */
.mode-button {
    display: flex;
    gap: 4px;
}

/* Hide light button icon layout context by default (for toggle control logic later) */
.light-button {
    display: none;
}

/* ==========================================================================
   4. CORE MAIN CONTENT FRAMEWORK
   ========================================================================== */
.main_content {
    float: left;
    width: 100%;
    display: inline-block;
    clear: both;
    position: relative;
}

.main_content h1 {
    font-size: 28px;
    color: #ffffff;
    font-weight: 700;
}


/* ==========================================================================
   5. TABLET RESPONSIVE BREAKPOINT (Under 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .header-grid {
        position: relative;
    }

    /* Wrap navigation link blocks for layout safety */
    .menu-section {
        order: 3;
    }

    .main-menu {
        gap: 2px;
    }

    .main-menu a {
        padding: 8px 10px;
        font-size: 13px;
    }
}


/* ==========================================================================
   6. MOBILE RESPONSIVE BREAKPOINT (Under 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Top Header Adjustments */
    .th-grid {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .contact-section {
        flex-direction: column;
        gap: 4px;
    }

    /* Main Header Grid Stack restructuring */
    .header-grid {
        flex-wrap: wrap;
    }

    /* Keep branding and actions side-by-side */
    .logo-section {
        flex: 1;
    }

    .header-action {
        gap: 8px;
    }

    /* Transform Main Navigation row into a clean, horizontal scroll system for phone sizes */
    .menu-section {
        width: 100%;
        border-top: 1px solid var(--border-color);
        padding-top: 10px;
        margin-top: 5px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .main-menu {
        display: flex;
        width: max-content;
        padding-bottom: 4px;
    }

    .main-menu li {
        display: inline-block;
    }

    .main-menu a {
        white-space: nowrap;
        padding: 6px 12px;
    }
    
    /* Slightly optimize action elements for compact phone profiles */
    .ha-button a, .mode-button a {
        width: 34px;
        height: 34px;
    }
    
    .ha-button:last-child a {
        width: auto;
        height: auto;
        padding: 6px 14px;
        font-size: 12px;
    }
}

/* ==========================================================================
   RECENT EVENTS ECOSYSTEM STYLES
   ========================================================================== */
:root {
    --evt-primary: #152232;         /* Deep Academic Green */
    --evt-secondary: #007bdd;       /* Darker Green Accent */
    --evt-gold: #d95000;            /* Heritage Gold */
    --evt-gold-light: #ffc14c;      /* Soft Accent Gold */
    --evt-text-dark: #2c3e50;       /* High Readability Text */
    --evt-text-muted: #64748b;      /* Slate for excerpts */
    --evt-bg-card: #ffffff;         /* White base container */
    --evt-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
    --evt-radius: 12px;
}

.recent-events-section {
    padding: 80px 0;
    background-color: #f8fafc; /* Subtle grey tone change to separate from hero */
}

.events-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section Typography Headers */
.section-header-block {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px auto;
}

.section-header-block .section-subtitle {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--evt-gold);
    font-weight: 700;
    margin-bottom: 10px;
}

.section-header-block .section-title {
    font-size: 2.2rem;
    color: var(--evt-primary);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 15px;
}

.section-header-block .section-lead-text {
    font-size: 1rem;
    color: var(--evt-text-muted);
    line-height: 1.6;
}

/* Featured Horizontal Event Card */
.featured-event-card {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Asymmetric grid allocation */
    background-color: var(--evt-bg-card);
    border-radius: var(--evt-radius);
    overflow: hidden;
    box-shadow: var(--evt-shadow);
    border: 1px solid #e2e8f0;
}

/* Image Panel Container */
.event-image-panel {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 380px;
    overflow: hidden;
}

.event-display-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-event-card:hover .event-display-img {
    transform: scale(1.03); /* Subtle fluid growth on hover */
}

/* Corner Floating Calendar Badge */
.event-date-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--evt-primary);
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(17, 66, 50, 0.3);
    z-index: 5;
}

.event-date-badge .badge-day {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.event-date-badge .badge-month {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-top: 2px;
    color: var(--evt-gold-light);
}

/* Content Panel Elements */
.event-content-panel {
    padding: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--evt-gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.event-meta-tag span {
    font-size: 16px;
}

.event-display-title {
    font-size: 1.65rem;
    color: var(--evt-primary);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
}

.event-excerpt-text {
    font-size: 1rem;
    color: var(--evt-text-muted);
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Event Action Buttons row structural breakdown */
.event-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.evt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.evt-btn span {
    font-size: 22px;
}

/* Primary Action Button Context */
.evt-btn-primary {
    background-color: var(--evt-primary);
    color: #ffffff;
    border: 2px solid transparent;
    box-shadow: 0 4px 12px rgba(17, 66, 50, 0.15);
}

.evt-btn-primary:hover {
    background-color: var(--evt-secondary);
    transform: translateY(-1px);
}

/* Secondary Action Button Context */
.evt-btn-secondary {
    background-color: transparent;
    color: var(--evt-primary);
    border: 2px solid #cbd5e1;
}

.evt-btn-secondary:hover {
    background-color: #f1f5f9;
    border-color: var(--evt-primary);
    color: var(--evt-secondary);
}

/* ==========================================================================
   RESPONSIVE LAYOUT BREAKPOINTS
   ========================================================================== */
@media (max-width: 992px) {
    .featured-event-card {
        grid-template-columns: 1fr; /* Stack into single column framework */
    }
    
    .event-image-panel {
        height: 300px;
        min-height: auto;
    }
    
    .event-content-panel {
        padding: 30px;
    }
}

@media (max-width: 576px) {
    .recent-events-section {
        padding: 50px 0;
    }

    .section-header-block .section-title {
        font-size: 1.75rem;
    }

    .event-display-title {
        font-size: 1.35rem;
    }

    .event-actions-row {
        flex-direction: column; /* Force full-width single column links on phones */
    }

    .evt-btn {
        width: 100%;
    }
}
        
        
        










/* ==========================================================================
   ALUMNI FEATURED SOCIAL ACTIVITY LOGIC
   ========================================================================== */

:root {
    --act-bg-dark: #0b131c;       /* Matches counter block base canvas */
    --act-surface: #152232;       /* Elevated layer color */
    --act-amber: #e17700;         /* Theme orange accent */
    --act-navy-border: #1e3045;   /* Clean structure separation line */
    --act-white: #ffffff;         /* Text high-readability value */
    --act-slate-grey: #a0b4cc;    /* Secondary text shade */
}

.recent-activity-feature {
    padding: 100px 0;
    background-color: var(--act-bg-dark);
    color: var(--act-white);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border-top: 1px solid var(--act-navy-border);
    border-bottom: 1px solid var(--act-navy-border);
}

.act-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Two-Column Flex/Grid Split System */
.act-split-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ==========================================================================
   LEFT SIDE VISUAL PRESENTATION
   ========================================================================== */
.act-visual-panel {
    position: relative;
}

.act-image-frame {
    position: relative;
    width: 100%;
    height: 480px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--act-navy-border);
}

.act-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle overlay vignetting to improve card depth */
.act-image-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 19, 28, 0.5) 0%, rgba(0,0,0,0) 50%);
}

.act-image-frame:hover .act-featured-img {
    transform: scale(1.03);
}

/* Floating Verification Tag */
.act-floating-badge {
    position: absolute;
    bottom: 25px;
    left: 25px;
    background-color: rgba(21, 34, 50, 0.9);
    border: 1px solid var(--act-amber);
    backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--act-white);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.act-floating-badge span {
    font-size: 16px;
    color: var(--act-amber);
}

/* ==========================================================================
   RIGHT SIDE CONTROLS AND CONTENT TEXT
   ========================================================================== */
.act-content-panel {
    display: flex;
    flex-direction: column;
}

.act-meta-tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--act-amber);
    font-weight: 700;
    margin-bottom: 12px;
}

.act-main-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.act-narrative {
    font-size: 1.05rem;
    color: var(--act-slate-grey);
    line-height: 1.65;
    margin: 0 0 30px 0;
}

/* Progress Bar Implementation */
.act-progress-module {
    background-color: var(--act-surface);
    border: 1px solid var(--act-navy-border);
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 35px;
}

.act-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.act-prog-title { color: var(--act-white); }
.act-prog-percentage { color: var(--act-amber); }

.act-progress-bar-track {
    width: 100%;
    height: 6px;
    background-color: var(--act-bg-dark);
    border-radius: 10px;
    overflow: hidden;
}

.act-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #b86200, var(--act-amber));
    border-radius: 10px;
}

/* Stats Counter Row Block Layout */
.act-stats-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.act-stat-block {
    background-color: var(--act-surface);
    border-left: 3px solid var(--act-amber);
    padding: 15px;
    border-radius: 0 8px 8px 0;
}

.act-stat-number {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--act-white);
    line-height: 1.1;
    margin-bottom: 4px;
}

.act-stat-label {
    font-size: 12px;
    color: var(--act-slate-grey);
    font-weight: 500;
}

/* Buttons and Action Links Row */
.act-action-row {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.act-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--act-amber);
    color: var(--act-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.act-primary-btn span.material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.act-primary-btn:hover {
    background-color: #f58200;
}

.act-primary-btn:hover span.material-symbols-outlined {
    transform: translateX(4px);
}

.act-secondary-link {
    color: var(--act-slate-grey);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px dashed var(--act-navy-border);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.act-secondary-link:hover {
    color: var(--act-white);
    border-color: var(--act-white);
}

/* ==========================================================================
   RESPONSIVE LAYOUT BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
    .act-split-wrapper { gap: 40px; }
    .act-main-title { font-size: 1.9rem; }
    .act-image-frame { height: 420px; }
}

@media (max-width: 768px) {
    .act-split-wrapper { grid-template-columns: 1fr; gap: 40px; }
    .act-image-frame { height: 320px; }
    .act-content-panel { order: 2; }
    .act-visual-panel { order: 1; }
}

@media (max-width: 480px) {
    .recent-activity-feature { padding: 60px 0; }
    .act-main-title { font-size: 1.6rem; }
    .act-stats-matrix { grid-template-columns: 1fr; gap: 12px; }
    .act-action-row { flex-direction: column; align-items: flex-start; gap: 15px; }
    .act-primary-btn { width: 100%; justify-content: center; }
}
















/* ==========================================================================
   ALUMNI COUNT COUNTER ARCHITECTURE (Strict Color Mapping)
   ========================================================================== */
:root {
    --clr-main-dark: #182738;    /* Deep Blue Night - Section Background */
    --clr-charcoal: #313131;     /* Text Gray Accent */
    --clr-amber: #e17700;        /* Core Accent / Icon Highlights */
    --clr-ocean: #007bdd;        /* Depth Blue Details */
    --clr-teal: #009ab7;         /* Secondary Fluid Accent */
    --clr-pure-white: #ffffff;   /* Primary Data and Labels */
    --clr-off-white: #f8f8f8;    /* Sub-text contrast fallback */
    --clr-neutral-light: #f2f2f2;/* Decorative Borders */
    --clr-border-grey: #e1e1e1;  /* Soft Lines */
}

.alumni-counter-section {
    background-color: var(--clr-main-dark);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

/* Subtle background accent flare */
.alumni-counter-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0,154,183,0.1) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
}

.counter-grid-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Counter Metric Card Elements */
.counter-card-node {
    text-align: center;
    padding: 25px 15px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(225, 225, 225, 0.08);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

.counter-card-node:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 154, 183, 0.3);
}

/* Icon Wrap Container */
.counter-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(225, 119, 0, 0.12); /* Semi-transparent Amber background */
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

.counter-icon-wrap span {
    font-size: 28px;
    color: var(--clr-amber);
}

.counter-card-node:hover .counter-icon-wrap {
    background-color: var(--clr-amber);
}

.counter-card-node:hover .counter-icon-wrap span {
    color: var(--clr-pure-white);
}

/* Large Numbers Typography */
.counter-numeric-display {
    font-size: 2.85rem;
    font-weight: 800;
    color: var(--clr-pure-white);
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.counter-numeric-display .stat-suffix {
    color: var(--clr-teal);
    margin-left: 2px;
}

/* Content Text Descriptions */
.counter-metric-label {
    font-size: 1.1rem;
    color: var(--clr-pure-white);
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.counter-metric-desc {
    font-size: 0.88rem;
    color: var(--clr-off-white);
    opacity: 0.75;
    line-height: 1.5;
}

/* ==========================================================================
   RESPONSIVE LAYOUT BREAKPOINTS
   ========================================================================== */
@media (max-width: 992px) {
    .counter-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2x2 Layout Matrix for Medium Viewports */
        gap: 25px;
    }
}

@media (max-width: 576px) {
    .alumni-counter-section {
        padding: 50px 0;
    }
    
    .counter-grid-container {
        grid-template-columns: 1fr; /* Full Stack Single Column for Phones */
        gap: 20px;
    }

    .counter-numeric-display {
        font-size: 2.4rem;
    }
}















/* ==========================================================================
   EDUCATION AND LEARNING ECOSYSTEM STYLES
   ========================================================================== */
:root {
    --edu-dark-blue: #182738;    /* Deep Blue Night Heading Base */
    --edu-charcoal: #313131;     /* Card Typography Body Accent */
    --edu-amber: #e17700;        /* Orange Accent Links */
    --edu-ocean: #007bdd;        /* Ocean Focus Highlights */
    --edu-teal: #009ab7;         /* Secondary Accent Highlights */
    --edu-white: #ffffff;        /* Primary Structural Blocks */
    --edu-bg-light: #f8f8f8;     /* Inner Section Underlays */
    --edu-border-grey: #e1e1e1;  /* Structural Bounds border line */
}

.edu-learning-section {
    padding: 80px 0;
    background-color: var(--edu-bg-light);
    border-top: 1px solid var(--edu-border-grey);
}

.edu-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Text Alignments */
.edu-section-intro {
    margin-bottom: 50px;
}

.edu-section-intro .edu-tagline {
    display: block;
    font-size: 13px;
    color: var(--edu-amber);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 8px;
}

.edu-section-intro .edu-heading {
    font-size: 2.2rem;
    color: var(--edu-dark-blue);
    font-weight: 800;
    margin-bottom: 12px;
}

.edu-section-intro .edu-subtext {
    font-size: 1rem;
    color: var(--edu-charcoal);
    max-width: 700px;
    line-height: 1.6;
    opacity: 0.85;
}

/* Two Column Split Setup Matrix */
.edu-split-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Asymmetrical split */
    gap: 40px;
    align-items: start;
}

/* ==========================================================================
   LEFT COLUMN: Feed Stream Card Components
   ========================================================================== */
.edu-left-stream {
    background-color: var(--edu-white);
    padding: 35px;
    border-radius: 12px;
    border: 1px solid var(--edu-border-grey);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.stream-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--edu-bg-light);
}

.stream-header .icon-live {
    color: var(--edu-ocean);
    font-size: 24px;
}

.stream-header h3 {
    font-size: 1.35rem;
    color: var(--edu-dark-blue);
    font-weight: 700;
}

.stream-links-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Individual Link Card Components */
.stream-query-card {
    display: block;
    padding: 20px;
    background-color: var(--edu-bg-light);
    border-left: 4px solid var(--edu-border-grey);
    border-radius: 0 8px 8px 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stream-query-card .query-meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--edu-charcoal);
    opacity: 0.65;
    margin-bottom: 8px;
    font-weight: 600;
}

.stream-query-card .query-title {
    font-size: 1.05rem;
    color: var(--edu-dark-blue);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
    transition: color 0.2s ease;
}

.stream-query-card .query-cta {
    display: inline-block;
    font-size: 13px;
    color: var(--edu-ocean);
    font-weight: 700;
}

/* Hover States for Stream Elements */
.stream-query-card:hover {
    background-color: var(--edu-white);
    border-left-color: var(--edu-amber);
    box-shadow: 0 8px 20px rgba(24, 39, 56, 0.06);
    transform: translateX(4px);
}

.stream-query-card:hover .query-title {
    color: var(--edu-amber);
}

/* ==========================================================================
   RIGHT COLUMN: Asymmetric Grid Modules Layout
   ========================================================================== */
.edu-right-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid-topic-item {
    display: flex;
    background-color: var(--edu-white);
    padding: 30px 25px;
    border-radius: 12px;
    border: 1px solid var(--edu-border-grey);
    min-height: 200px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.topic-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.topic-content span {
    font-size: 32px;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.topic-content h4 {
    font-size: 1.15rem;
    color: var(--edu-dark-blue);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
}

.topic-content .topic-desc {
    font-size: 0.88rem;
    color: var(--edu-charcoal);
    line-height: 1.4;
    opacity: 0.8;
}

/* Theme Variant Accents */
.topic-accent-blue span { color: var(--edu-ocean); }
.topic-accent-blue:hover { border-top: 4px solid var(--edu-ocean); }

.topic-accent-amber span { color: var(--edu-amber); }
.topic-accent-amber:hover { border-top: 4px solid var(--edu-amber); }

.topic-accent-teal span { color: var(--edu-teal); }
.topic-accent-teal:hover { border-top: 4px solid var(--edu-teal); }

.topic-accent-charcoal span { color: var(--edu-charcoal); }
.topic-accent-charcoal:hover { border-top: 4px solid var(--edu-charcoal); }

/* General Grid Card Hover Actions */
.grid-topic-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06);
    background-color: var(--edu-white);
}

.grid-topic-item:hover .topic-content span {
    transform: scale(1.1);
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM MEDIA QUERY SPLITS
   ========================================================================== */
@media (max-width: 992px) {
    .edu-split-layout {
        grid-template-columns: 1fr; /* Drop side-by-side framework on tablets */
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .edu-learning-section {
        padding: 50px 0;
    }

    .edu-section-intro .edu-heading {
        font-size: 1.75rem;
    }

    .edu-left-stream {
        padding: 20px;
    }

    .edu-right-grid {
        grid-template-columns: 1fr; /* Collapse grid into single vertical stack on small phones */
        gap: 15px;
    }

    .grid-topic-item {
        min-height: auto;
        padding: 20px;
    }
}














/* ==========================================================================
   DEPARTMENT SPECIFIC COURSE GRID STYLES
   ========================================================================== */
:root {
    --dp-dark-blue: #182738;     /* Deep Night Blue base heading elements */
    --dp-charcoal: #313131;      /* Body Typography Content shade */
    --dp-amber: #e17700;         /* Core Highlight active indicator */
    --dp-ocean: #007bdd;         /* Secondary Badge Context coloring */
    --dp-teal: #009ab7;          /* Complementary Accent highlights */
    --dp-white: #ffffff;         /* Elevated surfaces base */
    --dp-bg-light: #f8f8f8;      /* Neutral underlying row layouts */
    --dp-border-grey: #e1e1e1;   /* Soft separation borders */
}

.dept-learning-section {
    padding: 80px 0;
    background-color: var(--dp-white);
    border-bottom: 1px solid var(--dp-border-grey);
}

.dept-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Introduction block headers alignments */
.dept-intro-block {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

.dept-intro-block .dept-tagline {
    display: block;
    font-size: 13px;
    color: var(--dp-amber);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.dept-intro-block .dept-heading {
    font-size: 2.2rem;
    color: var(--dp-dark-blue);
    font-weight: 800;
    margin-bottom: 12px;
}

.dept-intro-block .dept-subtext {
    font-size: 1rem;
    color: var(--dp-charcoal);
    line-height: 1.6;
    opacity: 0.85;
}

/* Navigation Selection Buttons controls strip */
.filter-controls-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 50px;
    border-bottom: 2px solid var(--dp-bg-light);
    padding-bottom: 20px;
}

.filter-btn {
    background-color: var(--dp-bg-light);
    color: var(--dp-charcoal);
    border: 1px solid var(--dp-border-grey);
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.filter-btn:hover {
    background-color: var(--dp-dark-blue);
    color: var(--dp-white);
    border-color: var(--dp-dark-blue);
}

/* Active Highlight condition state class assignment */
.filter-btn.active-filter {
    background-color: var(--dp-amber);
    color: var(--dp-white);
    border-color: var(--dp-amber);
    box-shadow: 0 4px 12px rgba(225, 119, 0, 0.2);
}

/* ==========================================================================
   INTERACTIVE REPLICATING CARD ELEMENT WRAPPERS
   ========================================================================== */
.subjects-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.subject-card-item {
    display: flex;
    flex-direction: column;
    background-color: var(--dp-bg-light);
    border: 1px solid var(--dp-border-grey);
    padding: 30px;
    border-radius: 10px;
    position: relative;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Corner Floating Program Badges layout configurations */
.subj-badge {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
}

.category-honors { background-color: rgba(0, 123, 221, 0.1); color: var(--nav-ocean, var(--dp-ocean)); }
.category-masters { background-color: rgba(225, 119, 0, 0.1); color: var(--dp-amber); }
.category-preliminary { background-color: rgba(0, 154, 183, 0.1); color: var(--dp-teal); }

/* Subject Meta Tracking details text row design */
.subj-code {
    font-size: 13px;
    font-weight: 700;
    color: var(--dp-amber);
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.subj-title {
    font-size: 1.15rem;
    color: var(--dp-dark-blue);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 25px;
    flex-grow: 1; /* Pushes action link button cleanly down into grid alignment bounds */
}

.subj-link-action {
    font-size: 13px;
    color: var(--dp-charcoal);
    font-weight: 700;
    transition: color 0.2s ease;
}

/* Universal hover state transitions actions logic */
.subject-card-item:hover {
    background-color: var(--dp-white);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(24, 39, 56, 0.08);
    border-color: var(--dp-dark-blue);
}

.subject-card-item:hover .subj-link-action {
    color: var(--dp-amber);
}

/* ==========================================================================
   RESPONSIVE LAYOUT MATRIX CONVERSION QUERIES
   ========================================================================== */
@media (max-width: 992px) {
    .subjects-grid-wrapper {
        grid-template-columns: repeat(2, 1fr); /* 2 Columns on intermediate tablets */
        gap: 20px;
    }
}

@media (max-width: 650px) {
    .filter-controls-wrapper {
        flex-direction: column; /* Flat vertical line adjustments for micro screens */
        align-items: stretch;
    }
    
    .filter-btn {
        text-align: center;
    }

    .subjects-grid-wrapper {
        grid-template-columns: 1fr; /* Uniform stack allocation on phones */
    }
}













/* ==========================================================================
   INTERACTIVE ACADEMIC QUIZ CONTAINER STYLES
   ========================================================================== */
:root {
    --qz-dark-blue: #182738;     /* Deep Night Blue heading background anchors */
    --qz-charcoal: #313131;      /* Standard reading typography color */
    --qz-amber: #e17700;         /* Primary Accent Focus highlights */
    --qz-ocean: #007bdd;         /* Selection interactive highlights */
    --qz-teal: #009ab7;          /* Decorative complementary elements */
    --qz-white: #ffffff;         /* Component backdrop surface */
    --qz-bg-light: #f8f8f8;      /* Page block variations separation background */
    --qz-border-grey: #e1e1e1;   /* Structural divide separations */
    --qz-success: #2e7d32;       /* Correct Option Evaluated Base */
    --qz-error: #c62828;         /* Incorrect Selection Highlight */
}

.home-quiz-section {
    padding: 80px 0;
    background-color: var(--qz-bg-light);
    border-bottom: 1px solid var(--qz-border-grey);
}

.quiz-container {
    width: 100%;
    max-width: 900px; /* Reduced width limit for improved reading span tracking lines */
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Text Alignments Block */
.quiz-intro-block {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

.quiz-intro-block .quiz-tagline {
    display: block;
    font-size: 13px;
    color: var(--qz-amber);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.quiz-intro-block .quiz-heading {
    font-size: 2.2rem;
    color: var(--qz-dark-blue);
    font-weight: 800;
    margin-bottom: 12px;
}

.quiz-intro-block .quiz-subtext {
    font-size: 1rem;
    color: var(--qz-charcoal);
    line-height: 1.6;
    opacity: 0.85;
}

/* Master Form Interactive Container Box */
.quiz-card-wrapper {
    background-color: var(--qz-white);
    border: 1px solid var(--qz-border-grey);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(24, 39, 56, 0.03);
}

/* Individual Question Item Node Blocks */
.quiz-question-node {
    margin-bottom: 35px;
    padding-bottom: 30px;
    border-bottom: 1px dashed var(--qz-border-grey);
}

.quiz-question-node:last-child {
    border-bottom: none;
    margin-bottom: 40px;
    padding-bottom: 0;
}

.question-text-title {
    font-size: 1.15rem;
    color: var(--qz-dark-blue);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 18px;
    display: flex;
    gap: 8px;
}

.question-text-title .question-num {
    color: var(--qz-amber);
}

/* Custom 4-Option Radio Selection Grid */
.options-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.option-choice-label {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--qz-bg-light);
    border: 1px solid var(--qz-border-grey);
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--qz-charcoal);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.option-choice-label:hover {
    background-color: rgba(0, 123, 221, 0.04);
    border-color: var(--qz-ocean);
}

/* Custom Checkpoint Radio Inputs Overrides Configuration */
.option-choice-label input[type="radio"] {
    accent-color: var(--qz-amber);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Styled Highlight States for Selected Active Radios */
.option-choice-label.selected-active {
    background-color: rgba(0, 123, 221, 0.08);
    border-color: var(--qz-ocean);
    color: var(--qz-dark-blue);
}

/* Post Evaluation Design System Classes */
.option-choice-label.eval-correct {
    background-color: rgba(46, 125, 50, 0.1) !important;
    border-color: var(--qz-success) !important;
    color: var(--qz-success) !important;
}

.option-choice-label.eval-incorrect {
    background-color: rgba(198, 40, 40, 0.08) !important;
    border-color: var(--qz-error) !important;
    color: var(--qz-error) !important;
}

/* ==========================================================================
   QUIZ ACTIONS AND FOOTER CONTROL ELEMENTS
   ========================================================================== */
.quiz-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.qz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

.qz-btn span { font-size: 18px; }

.qz-btn-submit {
    background-color: var(--qz-amber);
    color: var(--qz-white);
    box-shadow: 0 4px 12px rgba(225, 119, 0, 0.2);
}
.qz-btn-submit:hover {
    background-color: #c46600;
}

.qz-btn-reset {
    background-color: var(--qz-dark-blue);
    color: var(--qz-white);
}
.qz-btn-reset:hover {
    background-color: #0f1a26;
}

.qz-btn-nav {
    background-color: transparent;
    color: var(--qz-ocean);
    border-color: var(--qz-border-grey);
    margin-left: auto; /* Aligns redirection shortcut cleanly right side */
}
.qz-btn-nav:hover {
    background-color: var(--qz-bg-light);
    border-color: var(--qz-ocean);
}

/* Score Summary Output Block Display Panels layout */
.quiz-result-feedback-box {
    display: none; /* Controlled via jQuery execution actions */
    align-items: center;
    gap: 20px;
    margin-top: 35px;
    padding: 25px;
    background-color: var(--qz-dark-blue);
    color: var(--qz-white);
    border-radius: 8px;
    border-left: 6px solid var(--qz-amber);
    animation: slideUpIn 0.4s ease forwards;
}

.result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: rgba(225, 119, 0, 0.15);
}
.result-icon span { font-size: 32px; color: var(--qz-amber); }

.result-text-details h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.result-text-details h3 span { color: var(--qz-amber); }
.result-text-details p { font-size: 0.92rem; opacity: 0.85; line-height: 1.4; }

@keyframes slideUpIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   RESPONSIVE LAYOUT CONVERSIONS FOR SMALL METRICS
   ========================================================================== */
@media (max-width: 768px) {
    .quiz-card-wrapper { padding: 25px 20px; }
    .options-list-grid { grid-template-columns: 1fr; gap: 10px; }
    .quiz-actions-row { flex-direction: column; align-items: stretch; }
    .qz-btn-nav { margin-left: 0; text-align: center; }
    .quiz-result-feedback-box { flex-direction: column; text-align: center; }
}










/* ==========================================================================
   ALUMNI CAREER CLUBS MATRIX STYLES (Strict Color Scheme Integration)
   ========================================================================== */
:root {
    --cc-dark-blue: #182738;     /* Deep Night Blue heading text color */
    --cc-charcoal: #313131;      /* Standard narrative text color */
    --cc-amber: #e17700;         /* Primary Active Border & Highlight Accent */
    --cc-ocean: #007bdd;         /* Subtle Icon Detail colors */
    --cc-teal: #009ab7;          /* Decorative elements overlay fallback */
    --cc-white: #ffffff;         /* Primary container card backgrounds */
    --cc-bg-light: #f8f8f8;      /* Section structural backdrop */
    --cc-border-grey: #e1e1e1;   /* Soft hairline container dividing parameters */
}

.career-clubs-section {
    padding: 80px 0;
    background-color: var(--cc-white);
    border-bottom: 1px solid var(--cc-border-grey);
}

.clubs-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Text Alignments Block */
.clubs-intro-block {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.clubs-intro-block .clubs-tagline {
    display: block;
    font-size: 13px;
    color: var(--cc-amber);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.clubs-intro-block .clubs-heading {
    font-size: 2.2rem;
    color: var(--cc-dark-blue);
    font-weight: 800;
    margin-bottom: 12px;
}

.clubs-intro-block .clubs-subtext {
    font-size: 1rem;
    color: var(--cc-charcoal);
    line-height: 1.6;
    opacity: 0.85;
}

/* Grid Matrix Setup: Auto-collapsing 4 Column Layout */
.clubs-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Replicating Card Element - Enforces full anchor clickable block context */
.club-card-node {
    display: flex;
    flex-direction: column;
    background-color: var(--cc-bg-light);
    border: 1px solid var(--cc-border-grey);
    border-radius: 10px;
    padding: 30px 25px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Top Icon Presentation Avatar Blocks */
.club-icon-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--cc-white);
    border-radius: 8px;
    border: 1px solid var(--cc-border-grey);
    margin-bottom: 20px;
    color: var(--cc-ocean);
    transition: all 0.3s ease;
}

.club-icon-avatar span {
    font-size: 24px;
}

/* Card Body Content Elements */
.club-body-content {
    flex-grow: 1; /* Automatically forces the mentor footer to the card base */
    display: flex;
    flex-direction: column;
}

.club-body-content .club-subtitle {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cc-amber);
    margin-bottom: 6px;
}

.club-body-content .club-title {
    font-size: 1.25rem;
    color: var(--cc-dark-blue);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}

.club-body-content .club-excerpt {
    font-size: 0.9rem;
    color: var(--cc-charcoal);
    line-height: 1.5;
    opacity: 0.85;
    margin-bottom: 25px;
}

/* Mentor Section Card Footers */
.club-mentor-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px dashed var(--cc-border-grey);
    color: var(--cc-charcoal);
}

.club-mentor-footer span {
    font-size: 20px;
    color: var(--cc-teal);
    opacity: 0.8;
}

.mentor-details {
    display: flex;
    flex-direction: column;
}

.mentor-details .mentor-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: #888888;
}

.mentor-details .mentor-name {
    font-size: 0.85rem;
    color: var(--cc-dark-blue);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1px;
}

/* ==========================================================================
   INTERACTIVE HOVER STATES RESPONSIVENESS
   ========================================================================== */
.club-card-node:hover {
    background-color: var(--cc-white);
    transform: translateY(-6px);
    border-color: var(--cc-dark-blue);
    box-shadow: 0 15px 35px rgba(24, 39, 56, 0.08);
}

.club-card-node:hover .club-icon-avatar {
    background-color: var(--cc-amber);
    color: var(--cc-white);
    border-color: var(--cc-amber);
}

/* ==========================================================================
   RESPONSIVE LAYOUT BREAKPOINTS CONTROLS
   ========================================================================== */
@media (max-width: 1100px) {
    .clubs-grid-wrapper {
        grid-template-columns: repeat(2, 1fr); /* Shifts to 2x2 grid format on tablets */
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .career-clubs-section {
        padding: 50px 0;
    }

    .clubs-intro-block .clubs-heading {
        font-size: 1.75rem;
    }

    .clubs-grid-wrapper {
        grid-template-columns: 1fr; /* Stacks to a clean single column on mobile devices */
        gap: 15px;
    }
    
    .club-card-node {
        padding: 25px 20px;
    }
}




















/* ==========================================================================
   TOP 10 WRITERS LEADERBOARD ARCHITECTURE STYLES
   ========================================================================== */
:root {
    --wb-dark-blue: #182738;     /* Deep Night Blue header accents */
    --wb-charcoal: #313131;      /* Standard narrative body text */
    --wb-amber: #e17700;         /* Star highlights, top ranks, and primary accents */
    --wb-ocean: #007bdd;         /* Secondary accent highlights */
    --wb-teal: #009ab7;          /* Complementary detail points */
    --wb-white: #ffffff;         /* Block backdrop layouts */
    --wb-bg-light: #f8f8f8;      /* Light alternative tracking surfaces */
    --wb-border-grey: #e1e1e1;   /* Panel dividing parameters lines */
}

.top-writers-section {
    padding: 80px 0;
    background-color: var(--wb-bg-light);
    border-bottom: 1px solid var(--wb-border-grey);
}

.writers-container {
    width: 100%;
    max-width: 1000px; /* Centered width constraints for balanced list readability */
    margin: 0 auto;
    padding: 0 20px;
}

/* Introduction block titles alignments */
.writers-intro-block {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.writers-intro-block .writers-tagline {
    display: block;
    font-size: 13px;
    color: var(--wb-amber);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.writers-intro-block .writers-heading {
    font-size: 2.2rem;
    color: var(--wb-dark-blue);
    font-weight: 800;
    margin-bottom: 12px;
}

.writers-intro-block .writers-subtext {
    font-size: 1rem;
    color: var(--wb-charcoal);
    line-height: 1.6;
    opacity: 0.85;
}

/* ==========================================================================
   PART A: PODIUM CARDS DISPLAY MATRIX (TOP 3 WRITERS)
   ========================================================================== */
.podium-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr; /* Middle Champion card expands slightly larger */
    gap: 20px;
    align-items: end; /* Ground all podium cards to baseline tracking */
    margin-bottom: 40px;
}

.podium-card {
    background-color: var(--wb-white);
    border: 1px solid var(--wb-border-grey);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(24, 39, 56, 0.02);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.podium-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(24, 39, 56, 0.06);
}

/* Crown / Numeric Badging items definitions */
.podium-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    background-color: var(--wb-white);
    border: 2px solid var(--wb-border-grey);
    color: var(--wb-charcoal);
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-first {
    border-top: 4px solid var(--wb-amber);
    box-shadow: 0 10px 30px rgba(225, 119, 0, 0.06);
    background-color: #fffdfa; /* Warm white tint highlight for Rank 1 */
}

.rank-first .podium-badge-crown {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--wb-amber);
    color: var(--wb-white);
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 20px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.rank-first .podium-badge-crown span { font-size: 14px; }

/* Avatars Profile Graphics Controls */
.writer-avatar-wrap {
    width: 90px;
    height: 90px;
    margin: 0 auto 15px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--wb-white);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.rank-first .writer-avatar-wrap {
    width: 110px;
    height: 110px;
    border-color: var(--wb-amber);
}

.writer-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Details Typography blocks */
.writer-name {
    font-size: 1.2rem;
    color: var(--wb-dark-blue);
    font-weight: 700;
    margin-bottom: 4px;
}

.writer-designation {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.designation-teacher { background-color: rgba(0, 123, 221, 0.08); color: var(--wb-ocean); }
.designation-student { background-color: rgba(49, 49, 49, 0.06); color: var(--wb-charcoal); }

/* Star review matrices */
.rating-stars-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 15px;
}

.rating-stars-row span {
    font-size: 18px;
    color: #cbd5e1; /* Gray background stars */
}

.rating-stars-row span.filled {
    color: var(--wb-amber);
}

.score-numeric-badge {
    font-size: 12px;
    font-weight: 700;
    background-color: var(--wb-charcoal);
    color: var(--wb-white);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
}

/* User metric score meta segments indicators */
.writer-meta-metrics {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.metric-pill {
    font-size: 12px;
    background-color: var(--wb-bg-light);
    border: 1px solid var(--wb-border-grey);
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--wb-charcoal);
}

/* ==========================================================================
   PART B: STREAMLINED LIST ROWS VIEWPORT (RANKS 4-10)
   ========================================================================== */
.leaderboard-list-wrapper {
    background-color: var(--wb-white);
    border: 1px solid var(--wb-border-grey);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.01);
}

.list-row-item {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    border-bottom: 1px solid var(--wb-border-grey);
    transition: background-color 0.2s ease;
}

.list-row-item:last-child {
    border-bottom: none;
}

.list-row-item:hover {
    background-color: rgba(0, 154, 183, 0.02); /* Soft teal layout glow on hover */
}

.list-rank-num {
    font-size: 0.95rem;
    font-weight: 800;
    color: #94a3b8;
    width: 40px;
}

.list-writer-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
    border: 1px solid var(--wb-border-grey);
}

.list-profile-info {
    flex-grow: 1; /* Pushes alternative statistic data structures to the right side */
}

.list-writer-name {
    font-size: 1.05rem;
    color: var(--wb-dark-blue);
    font-weight: 700;
}

.list-profile-info .writer-designation {
    margin-bottom: 0;
    margin-top: 3px;
    font-size: 10px;
}

.list-rating-block {
    margin-right: 40px;
}

.stars-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--wb-charcoal);
}

.stars-mini span {
    color: var(--wb-amber);
    font-size: 18px;
}

.list-stats-block {
    font-size: 0.9rem;
    color: var(--wb-charcoal);
    display: flex;
    gap: 15px;
    text-align: right;
}

.list-stats-block strong {
    color: var(--wb-dark-blue);
}

.list-stats-block .stat-segment-separator {
    color: var(--wb-border-grey);
    user-select: none;
}

/* ==========================================================================
   RESPONSIVE DESIGN VIEWPORT ADJUSTMENT QUERIES
   ========================================================================== */
@media (max-width: 850px) {
    .podium-grid-wrapper {
        grid-template-columns: 1fr; /* Drop side-by-side podium flow; linear stack instead */
        gap: 30px;
    }
    
    .rank-first {
        grid-row: 1; /* Force layout to draw rank 1 back to top on mobile viewports */
    }
    
    .podium-card {
        padding: 25px;
    }
}

@media (max-width: 650px) {
    .list-row-item {
        flex-wrap: wrap; /* Enable content wrapping layout for phone viewports */
        padding: 20px;
        gap: 10px;
    }

    .list-profile-info {
        width: calc(100% - 100px); /* Fill space beside avatar */
    }

    .list-rating-block {
        width: 100%;
        margin-right: 0;
        padding-left: 60px;
    }

    .list-stats-block {
        width: 100%;
        text-align: left;
        padding-left: 60px;
        border-top: 1px dashed var(--wb-border-grey);
        padding-top: 8px;
        margin-top: 2px;
    }
}











/* ==========================================================================
   TIMELINE EVENTS ARCHIVE GRID STYLES
   ========================================================================== */
:root {
    --eg-dark-blue: #182738;     /* Deep Night Blue header typography */
    --eg-charcoal: #313131;      /* Narrative paragraph block color */
    --eg-amber: #e17700;         /* Numbers indicators and highlight accents */
    --eg-ocean: #007bdd;         /* Metadata links and tag accents */
    --eg-teal: #009ab7;          /* Decorative background accent tints */
    --eg-white: #ffffff;         /* Main container card background surfaces */
    --eg-bg-light: #f8f8f8;      /* Primary underlay grid background */
    --eg-border-grey: #e1e1e1;   /* Soft layout separation bounds */
}

.events-grid-section {
    padding: 80px 0;
    background-color: var(--eg-bg-light);
    border-bottom: 1px solid var(--eg-border-grey);
}

.evg-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Text Alignments Block */
.evg-intro-block {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.evg-intro-block .evg-tagline {
    display: block;
    font-size: 13px;
    color: var(--eg-amber);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.evg-intro-block .evg-heading {
    font-size: 2.2rem;
    color: var(--eg-dark-blue);
    font-weight: 800;
    margin-bottom: 12px;
}

.evg-intro-block .evg-subtext {
    font-size: 1rem;
    color: var(--eg-charcoal);
    line-height: 1.6;
    opacity: 0.85;
}

/* ==========================================================================
   THE ASYMMETRIC GRID BUILDER FRAMEWORK
   ========================================================================== */
.events-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Column track on Desktop layouts */
    gap: 30px;
}

/* Base Card Node Layout Properties */
.evg-card {
    background-color: var(--eg-white);
    border: 1px solid var(--eg-border-grey);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(24, 39, 56, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Spotlight Card Multi-row Extension Rules */
.card-spotlight {
    grid-column: span 1;
    grid-row: span 2; /* Occupies double vertical height blocks on desktop grids */
    border-bottom: 4px solid var(--eg-amber);
}

/* Huge Floating Sequential Number Trackers */
.evg-numerical-tracker {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(24, 39, 56, 0.08); /* Semi-transparent integration background watermark */
    line-height: 1;
    z-index: 5;
    letter-spacing: -2px;
    transition: color 0.3s ease;
}

.evg-card:hover .evg-numerical-tracker {
    color: var(--eg-amber); /* Shifts to vibrant amber brand highlight color on hover */
}

/* Image Frames Graphic Containers */
.evg-img-frame {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: var(--eg-dark-blue);
}

.card-spotlight .evg-img-frame {
    height: 280px; /* Elevated spotlight visual banner size limits */
}

.evg-blur-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.evg-card:hover .evg-blur-img {
    transform: scale(1.04);
    opacity: 0.9;
}

/* Floating Inline Date Tags */
.evg-date-tag {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background-color: rgba(24, 39, 56, 0.85);
    color: var(--eg-white);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

/* Inner Text Segment Panels Layout */
.evg-content-box {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.evg-category-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--eg-ocean);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.evg-title {
    font-size: 1.2rem;
    color: var(--eg-dark-blue);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 12px;
}

.card-spotlight .evg-title {
    font-size: 1.45rem; /* Larger font scale adjustment specifically for the spotlight card */
}

.evg-excerpt {
    font-size: 0.9rem;
    color: var(--eg-charcoal);
    line-height: 1.5;
    opacity: 0.85;
    margin-bottom: 20px;
    flex-grow: 1; /* Pushes the bottom anchor link into a uniform alignment row */
}

.evg-action-link {
    display: inline-block;
    font-size: 13px;
    color: var(--eg-dark-blue);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Card Interaction Hover Transitions Animations Matrix */
.evg-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(24, 39, 56, 0.08);
    border-color: var(--eg-dark-blue);
}

.evg-card:hover .evg-action-link {
    color: var(--eg-amber);
}

/* ==========================================================================
   RESPONSIVE LAYOUT CONVERSION QUERIES
   ========================================================================== */
@media (max-width: 992px) {
    .events-mosaic-grid {
        grid-template-columns: repeat(2, 1fr); /* Redraws to 2 columns on standard tablet screens */
        gap: 20px;
    }
    
    .card-spotlight {
        grid-column: span 2; /* Spotlight block stretches wide horizontally across tablet widths */
        grid-row: span 1;
    }
}

@media (max-width: 650px) {
    .events-grid-section {
        padding: 50px 0;
    }

    .evg-intro-block {
        margin-bottom: 35px;
    }

    .evg-intro-block .evg-heading {
        font-size: 1.75rem;
    }

    .events-mosaic-grid {
        grid-template-columns: 1fr; /* Drops down to a clean single column stack layout on smartphones */
        gap: 15px;
    }

    .card-spotlight {
        grid-column: span 1;
    }

    .card-spotlight .evg-img-frame {
        height: 200px; /* Restores normal image framing size scales on small phones */
    }

    .evg-content-box {
        padding: 20px;
    }
}

















/* ==========================================================================
   DYNAMIC MULTIMEDIA GALLERY STYLES (DARK REVOLUTION THEME)
   ========================================================================== */
:root {
    --gal-dark-blue: #182738;    /* Deep Night Blue container card surfaces */
    --gal-deep-charcoal: #111c28;/* Ultra Dark Core section background */
    --gal-amber: #e17700;        /* Core Highlight / Active state tracking */
    --gal-ocean: #007bdd;        /* Overlay details focus tinting */
    --gal-white: #ffffff;        /* High contrast title text elements */
    --gal-muted-text: #9cb1c9;   /* Soft readable gray-blue text for paragraphs */
    --gal-border-dark: #243547;  /* Deep clean bounding hairlines */
}

.media-gallery-section {
    padding: 80px 0;
    background-color: var(--gal-deep-charcoal); /* Changed to ultra dark backdrop */
    border-bottom: 1px solid var(--gal-border-dark);
}

.gal-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Description Block Element Alignments */
.gal-intro-block {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.gal-intro-block .gal-tagline {
    display: block;
    font-size: 13px;
    color: var(--gal-amber);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.gal-intro-block .gal-heading {
    font-size: 2.2rem;
    color: var(--gal-white); /* Switched to white for contrast against dark background */
    font-weight: 800;
    margin-bottom: 12px;
}

.gal-intro-block .gal-subtext {
    font-size: 1rem;
    color: var(--gal-muted-text); /* Muted slate tone for easy reading */
    line-height: 1.6;
}

/* ==========================================================================
   MOSAIC MEDIA CONNECTOR GRID ARCHITECTURE
   ========================================================================== */
.gallery-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gallery-item-node {
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--gal-dark-blue);
    border: 1px solid var(--gal-border-dark);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Enhanced shadow depth for dark mode */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modifier Class supporting asymmetric column widths extensions */
.gallery-item-node.grid-col-2 {
    grid-column: span 2;
}

.media-preview-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 250px;
    display: flex;
}

.gal-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85; /* Sits subtly dark on baseline to maximize overlay impact */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Hover Action Interactive Cover Overlays Layout */
.media-hover-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(17, 28, 40, 0.9); /* High opacity dark background mask */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.media-hover-overlay .icon-type {
    font-size: 40px;
    color: var(--gal-amber);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.media-hover-overlay .hover-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--gal-white);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Interaction Hover States Sequences animations mapping */
.gallery-item-node:hover {
    border-color: var(--gal-amber); /* Amber border highlight on hover selection */
    box-shadow: 0 12px 30px rgba(225, 119, 0, 0.15);
}

.gallery-item-node:hover .gal-asset {
    transform: scale(1.04);
    opacity: 1;
}

.gallery-item-node:hover .media-hover-overlay {
    opacity: 1;
}

.gallery-item-node:hover .media-hover-overlay .icon-type {
    transform: scale(1.1);
}

/* ==========================================================================
   DYNAMIC LIGHTBOX WINDOW DISPLAY COMPONENT ARCHITECTURE
   ========================================================================== */
.gallery-lightbox-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(7, 12, 18, 0.99); /* Near pitch black theater mode backdrop */
    z-index: 999999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
}

/* Modal Interaction Trigger Control Buttons */
.lightbox-close-btn {
    position: absolute;
    top: 25px; right: 35px;
    background: none; border: none;
    color: var(--gal-white);
    font-size: 45px; cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 100;
}
.lightbox-close-btn:hover { color: var(--gal-amber); transform: scale(1.1); }

.lightbox-nav-btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gal-white);
    width: 60px; height: 60px;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s ease;
    z-index: 100;
}
.lightbox-nav-btn span { font-size: 24px; font-weight: bold; }
.lightbox-nav-btn:hover { background-color: var(--gal-amber); border-color: var(--gal-amber); }

.btn-prev { left: 35px; padding-right: 4px; }
.btn-next { right: 35px; padding-left: 4px; }

/* Central Focal Presentation Screen Zone Layout */
.lightbox-viewport-stage {
    position: relative;
    width: 100%;
    max-width: 950px;
    height: calc(100% - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-media-render-zone {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightboxFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lightbox-media-render-zone img,
.lightbox-media-render-zone video {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

/* Transparent Dark Base Caption Overlay Text Box */
.lightbox-caption-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background-color: rgba(24, 39, 56, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 3px solid var(--gal-amber);
    padding: 15px 25px;
    box-sizing: border-box;
    border-radius: 0 0 4px 4px;
}

.lightbox-caption-overlay .caption-text-content {
    margin: 0; font-size: 0.95rem;
    color: var(--gal-white);
    line-height: 1.4;
    font-weight: 500;
}

/* ==========================================================================
   BOTTOM HORIZONTAL CAROUSEL THUMBNAILS STRIP
   ========================================================================== */
.lightbox-thumbnails-carousel-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 800px;
    height: 80px;
    margin-top: 25px;
    overflow-x: auto;
    padding-bottom: 5px;
}

/* Individual Thumbnail Navigation Track Element Nodes Card */
.thumb-track-item {
    width: 80px; height: 55px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.3;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.thumb-track-item:hover { opacity: 0.7; }
.thumb-track-item.thumb-active {
    opacity: 1;
    border-color: var(--gal-amber);
    transform: scale(1.05);
}

@keyframes lightboxFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM MEDIA BREAKPOINTS CONTROLS
   ========================================================================== */
@media (max-width: 992px) {
    .gallery-mosaic-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-item-node.grid-col-2 { grid-column: span 1; }
    .btn-prev { left: 15px; } .btn-next { right: 15px; }
    .lightbox-nav-btn { width: 45px; height: 45px; }
}

@media (max-width: 600px) {
    .media-gallery-section { padding: 50px 0; }
    .gal-intro-block .gal-heading { font-size: 1.75rem; }
    .gallery-mosaic-grid { grid-template-columns: 1fr; gap: 15px; }
    .lightbox-viewport-stage { height: calc(100% - 130px); }
    .lightbox-close-btn { top: 15px; right: 20px; font-size: 35px; }
    .lightbox-thumbnails-carousel-strip { display: none; }
}







/* ==========================================================================
   CURRENT HON'BLE TEACHERS FACULTY DIRECTORY STYLES
   ========================================================================== */
:root {
    --fac-dark-blue: #182738;     /* Deep Night Blue headings text color */
    --fac-charcoal: #313131;      /* Standard informative body text color */
    --fac-amber: #e17700;         /* Primary Brand Highlight Accent */
    --fac-ocean: #007bdd;         /* Interactive anchor and link highlights */
    --fac-teal: #009ab7;          /* Decorative accents fallback color */
    --fac-white: #ffffff;         /* Content card baseline backdrop panels */
    --fac-bg-light: #f8f8f8;      /* Structural alternative background row */
    --fac-border-grey: #e1e1e1;   /* Framing dividing line hair parameters */
}

.faculty-directory-section {
    padding: 80px 0;
    background-color: var(--fac-bg-light); /* Off-white surface background variation */
    border-bottom: 1px solid var(--fac-border-grey);
}

.fac-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Text Alignments Block */
.fac-intro-block {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.fac-intro-block .fac-tagline {
    display: block;
    font-size: 13px;
    color: var(--fac-amber);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.fac-intro-block .fac-heading {
    font-size: 2.2rem;
    color: var(--fac-dark-blue);
    font-weight: 800;
    margin-bottom: 12px;
}

.fac-intro-block .fac-subtext {
    font-size: 1rem;
    color: var(--fac-charcoal);
    line-height: 1.6;
    opacity: 0.85;
}

/* Grid Matrix Setup: 4 Columns desktop display flow layout */
.faculty-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Individual Teacher Faculty Profile Node Card */
.faculty-card-node {
    display: flex;
    flex-direction: column;
    background-color: var(--fac-white);
    border: 1px solid var(--fac-border-grey);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(24, 39, 56, 0.02);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Top Avatar Graphics Display Frames Elements */
.faculty-avatar-frame {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background-color: var(--fac-dark-blue);
}

.faculty-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Floating Special Status Ribbon Badges */
.fac-status-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background-color: var(--fac-amber);
    color: var(--fac-white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Inner Core Body Text Elements */
.faculty-body-content {
    padding: 25px 20px;
    flex-grow: 1; /* Automatically anchors cards footer items to precise matching rows */
    display: flex;
    flex-direction: column;
}

.faculty-name {
    font-size: 1.15rem;
    color: var(--fac-dark-blue);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
}

.faculty-designation {
    font-size: 0.9rem;
    color: var(--fac-amber);
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}

/* Communications Lists Parameters Styles */
.faculty-contact-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto; /* Alignment lock for communications lines values */
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--fac-charcoal);
    font-size: 0.88rem;
    transition: color 0.2s ease;
}

.contact-link span.material-symbols-outlined {
    font-size: 18px;
    color: var(--fac-ocean);
    opacity: 0.8;
}

.contact-link .contact-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Gracefully truncates overly long emails on tight responsive metrics */
}

.contact-link:hover {
    color: var(--fac-ocean);
}

/* Card Interaction Base Footers: Handles Social Identifiers */
.faculty-social-footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--fac-border-grey);
    background-color: rgba(24, 39, 56, 0.02);
}

.fac-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 5px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--fac-charcoal);
    text-decoration: none;
    transition: all 0.2s ease;
}

.fac-social-btn span.material-symbols-outlined {
    font-size: 16px;
}

.fac-social-btn:first-child {
    border-right: 1px solid var(--fac-border-grey);
}

.fac-social-btn:hover {
    background-color: var(--fac-dark-blue);
    color: var(--fac-white);
}

/* Card Frame Interaction Hover States Sequences Animation */
.faculty-card-node:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(24, 39, 56, 0.08);
    border-color: var(--fac-dark-blue);
}

.faculty-card-node:hover .faculty-img {
    transform: scale(1.05);
}

/* ==========================================================================
   RESPONSIVE LAYOUT MATRIX CONVERSIONS FOR TABLETS / MOBILE
   ========================================================================== */
@media (max-width: 1100px) {
    .faculty-grid-wrapper {
        grid-template-columns: repeat(2, 1fr); /* Collapses to 2 columns on tablets */
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .faculty-directory-section {
        padding: 50px 0;
    }

    .fac-intro-block .fac-heading {
        font-size: 1.75rem;
    }

    .faculty-grid-wrapper {
        grid-template-columns: 1fr; /* Stacks to a single column on phone devices */
        gap: 15px;
    }

    .faculty-avatar-frame {
        height: 280px; /* Expands height boundaries slightly for mobile portrait view fields */
    }
}















/* ==========================================================================
   ALUMNI EXECUTIVE BOARD COMPONENT STYLES
   ========================================================================== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
    --ex-bg-dark: #0b131c;       /* Pitch night background split */
    --ex-surface-card: #152232;  /* Slightly illuminated base panel surfaces */
    --ex-amber: #e17700;         /* Primary brand accent tone pop */
    --ex-navy-deep: #1e3045;     /* Structural framing lines divider */
    --ex-white: #ffffff;         /* Dominant clear white text header weights */
    --ex-soft-grey: #a0b4cc;     /* Light slate paragraph read values */
}

.executive-board-section {
    padding: 90px 0;
    background-color: var(--ex-bg-dark); /* Premium dark canvas context layout */
    color: var(--ex-white);
    overflow: hidden;
}

.exec-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Structural Header Alignment Row blocks */
.exec-intro-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px auto;
}

.exec-intro-header .exec-badge-tag {
    display: inline-block;
    font-size: 12px;
    color: var(--ex-amber);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 10px;
}

.exec-intro-header .exec-main-heading {
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 15px;
}

.exec-intro-header .exec-description-text {
    font-size: 1rem;
    color: var(--ex-soft-grey);
    line-height: 1.6;
}

/* Baseline Layout Logic Shared by All Committee Cards */
.exec-card {
    background-color: var(--ex-surface-card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--ex-navy-deep);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.exec-photo-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.exec-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.exec-meta-data {
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.exec-name {
    color: var(--ex-white);
    font-weight: 700;
    margin: 0 0 4px 0;
}

.exec-post {
    font-size: 0.88rem;
    color: var(--ex-amber);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   TIER 1: THE FIRST THREE FOCUS LEADERSHIP CARDS SYSTEM
   ========================================================================== */
.exec-priority-focus-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* Targeted Focus Overrides for Priority Leaders */
.priority-focus-card {
    border-bottom: 4px solid var(--ex-amber); /* Heavy amber anchoring rail line */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.priority-focus-card .exec-photo-wrapper {
    height: 310px;
}

.priority-focus-card .exec-name {
    font-size: 1.3rem;
    line-height: 1.3;
}

/* Overlay Batch Tags specific to focus parameters */
.exec-batch-tag {
    position: absolute;
    top: 15px; left: 15px;
    background-color: rgba(11, 19, 28, 0.85);
    backdrop-filter: blur(4px);
    border-left: 3px solid var(--ex-amber);
    color: var(--ex-white);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 0 6px 6px 0;
}

/* Focus Hover Upgrades */
.priority-focus-card:hover {
    transform: translateY(-8px);
    border-color: var(--ex-amber);
    box-shadow: 0 15px 40px rgba(225, 119, 0, 0.15);
}

.priority-focus-card:hover .exec-img {
    transform: scale(1.04);
}

/* ==========================================================================
   TIER 2: SECONDARY COMMITTEE GENERAL ASSEMBLY MATRIX GRID
   ========================================================================== */
.exec-secondary-matrix-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.standard-member-card {
    display: flex;
    flex-direction: column;
}

.standard-member-card .exec-photo-wrapper {
    height: 180px;
}

.standard-member-card .exec-meta-data {
    padding: 18px 16px;
    text-align: center;
    align-items: center;
}

.standard-member-card .exec-name {
    font-size: 1.05rem;
    margin-bottom: 2px;
}

.standard-member-card .exec-post {
    font-size: 0.8rem;
    color: var(--ex-soft-grey);
    margin-bottom: 12px;
}

.exec-batch-small {
    font-size: 11px;
    color: var(--ex-amber);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.standard-member-card:hover {
    transform: translateY(-4px);
    background-color: var(--ex-navy-deep);
}

/* ==========================================================================
   CIRCULAR INTERACTIVE ROUND SOCIAL IDENTIFIER BUTTONS
   ========================================================================== */
.exec-social-circles {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    flex-wrap: wrap;
}

/* Forces centered circular alignments on secondary cards elements */
.standard-member-card .exec-social-circles {
    justify-content: center;
    margin-top: auto;
}

.social-circle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%; /* Forms the completely round type button layout */
    background-color: var(--ex-bg-dark);
    color: var(--ex-soft-grey);
    text-decoration: none;
    font-size: 14px;
    border: 1px solid var(--ex-navy-deep);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-circle-btn span.material-symbols-outlined {
    font-size: 16px;
}

/* Branded Hover State Dynamic Shifts */
.social-circle-btn:hover {
    color: var(--ex-white);
    transform: scale(1.12) translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.social-circle-btn.fac-fb:hover   { background-color: #1877f2; border-color: #1877f2; }
.social-circle-btn.fac-tw:hover   { background-color: #000000; border-color: #222222; }
.social-circle-btn.fac-inst:hover { background-color: #e1306c; border-color: #e1306c; }
.social-circle-btn.fac-mail:hover { background-color: var(--ex-amber); border-color: var(--ex-amber); }
.social-circle-btn.fac-ph:hover   { background-color: #25d366; border-color: #25d366; }

/* ==========================================================================
   RESPONSIVE DESIGN SCREEN CONVERSIONS BREAKPOINTS CONTROLS
   ========================================================================== */
@media (max-width: 1024px) {
    .exec-priority-focus-group { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    /* Scales priority rows cleanly by rendering item 3 into its own centered block width */
    .exec-priority-focus-group .exec-card:nth-child(3) { grid-column: span 2; max-width: 50%; margin: 0 auto; width: 100%; }
    .exec-secondary-matrix-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .exec-intro-header .exec-main-heading { font-size: 1.85rem; }
    .exec-priority-focus-group { grid-template-columns: 1fr; }
    .exec-priority-focus-group .exec-card:nth-child(3) { grid-column: span 1; max-width: 100%; }
    .exec-secondary-matrix-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .priority-focus-card .exec-photo-wrapper { height: 280px; }
}

@media (max-width: 480px) {
    .exec-secondary-matrix-grid { grid-template-columns: 1fr; }
    .standard-member-card .exec-photo-wrapper { height: 220px; }
}








/* ==========================================================================
   ALUMNI DONATION AND STATISTICS METRIC STYLES (CLEAN WHITE THEME)
   ========================================================================== */

:root {
    --don-bg-light: #f8f8f8;       /* Clean master background canvas split */
    --don-surface-card: #ffffff;  /* High contrast pure white surfaces */
    --don-amber: #e17700;         /* Theme transactional action primary color */
    --don-navy-deep: #182738;     /* Dominant deep night blue for clear typography */
    --don-charcoal: #313131;      /* Standard readable paragraph text color */
    --don-border-grey: #e1e1e1;   /* UI structural framework hairline dividers */
    --don-muted-blue: #007bdd;    /* Minor highlight indicator metrics */
}

.alumni-donation-showcase {
    padding: 100px 0;
    background-color: var(--don-bg-light); /* Switched to bright background track */
    color: var(--don-charcoal);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.don-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Master Grid Alignment Framework */
.don-split-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 65px;
    align-items: flex-start;
}

/* ==========================================================================
   LEFT SIDE CONTENT & TABS ARCHITECTURE
   ========================================================================== */
.don-copy-panel {
    display: flex;
    flex-direction: column;
}

.don-meta-tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--don-amber);
    font-weight: 700;
    margin-bottom: 12px;
}

.don-main-heading {
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--don-navy-deep); /* High contrast header title weight */
    margin: 0 0 18px 0;
    letter-spacing: -0.5px;
}

.don-narrative {
    font-size: 1.05rem;
    color: var(--don-charcoal);
    line-height: 1.65;
    margin: 0 0 35px 0;
    opacity: 0.9;
}

/* Tab Selection Matrix Layout Row */
.don-allocation-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.don-tab-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(24, 39, 56, 0.03); /* Soft subtle gray tint button */
    border: 1px solid var(--don-border-grey);
    color: var(--don-charcoal);
    padding: 14px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    transition: all 0.2s ease;
}

.don-tab-trigger span {
    font-size: 18px;
    color: var(--don-navy-deep);
    opacity: 0.7;
}

.don-tab-trigger:hover {
    background-color: var(--don-surface-card);
    border-color: var(--don-navy-deep);
}

.don-tab-trigger.active {
    background-color: var(--don-surface-card);
    border-color: var(--don-amber);
    box-shadow: 0 4px 12px rgba(225, 119, 0, 0.08);
}

.don-tab-trigger.active span {
    color: var(--don-amber);
    opacity: 1;
}

/* Informative Interactive Output Windows */
.don-tab-display-box {
    background-color: var(--don-surface-card);
    border: 1px solid var(--don-border-grey);
    border-radius: 14px;
    padding: 25px;
    min-height: 140px;
    box-shadow: 0 10px 30px rgba(24, 39, 56, 0.02);
}

.don-panel-content {
    display: none;
    animation: donFadeIn 0.35s ease forwards;
}

.don-panel-content.active {
    display: block;
}

.don-panel-content h4 {
    margin: 0 0 10px 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--don-navy-deep);
}

.don-panel-content p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--don-charcoal);
    line-height: 1.6;
    opacity: 0.85;
}

/* ==========================================================================
   RIGHT SIDE ANALYTICS COUNTER SYSTEM
   ========================================================================== */
.don-metrics-panel {
    position: sticky;
    top: 40px;
}

.don-stats-card {
    background-color: var(--don-surface-card);
    border: 1px solid var(--don-border-grey);
    border-radius: 24px;
    padding: 45px;
    box-shadow: 0 20px 50px rgba(24, 39, 56, 0.06); /* Lighter shadow matrix for clean mode */
    position: relative;
    overflow: hidden;
}

/* Counter Design Subsystem UI Blocks */
.don-hero-counter-wrap {
    text-align: center;
    padding-bottom: 10px;
}

.don-counter-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--don-charcoal);
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
    opacity: 0.7;
}

.don-mega-sum {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--don-navy-deep); /* Dark text color tracking total funds */
    letter-spacing: -1px;
    line-height: 1.1;
}

.don-mega-sum .currency-symbol {
    color: var(--don-amber);
    margin-right: 2px;
}

.don-divider-line {
    height: 1px;
    background-color: var(--don-border-grey);
    margin: 30px 0;
    width: 100%;
}

/* Minor Horizontal Metrics Cells */
.don-minor-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 35px;
}

.don-minor-card {
    background-color: var(--don-bg-light); /* Light cell backgrounds nested */
    border: 1px solid var(--don-border-grey);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
}

.minor-value-wrap {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--don-navy-deep);
    margin-bottom: 4px;
}

.minor-label {
    font-size: 12px;
    color: var(--don-charcoal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

/* Execution CTA Controls Base Rules */
.don-primary-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background-color: var(--don-amber);
    color: var(--don-white);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(225, 119, 0, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    color: #fff;
}

.don-primary-action-btn span.material-symbols-outlined {
    font-size: 20px;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.don-primary-action-btn:hover {
    background-color: #f58200;
    box-shadow: 0 12px 28px rgba(225, 119, 0, 0.4);
}

.don-primary-action-btn:hover span.material-symbols-outlined {
    transform: scale(1.22);
}

.don-primary-action-btn:active {
    transform: scale(0.98);
}

.don-security-stamp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--don-charcoal);
    margin: 15px 0 0 0;
    font-weight: 500;
    opacity: 0.75;
}

.don-security-stamp span {
    font-size: 14px;
    color: var(--don-muted-blue);
}

/* ==========================================================================
   TRANSITION KEYFRAMES & RESPONSIVE BREAKPOINTS
   ========================================================================== */
@keyframes donFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
    .don-split-grid { gap: 40px; }
    .don-main-heading { font-size: 1.9rem; }
    .don-stats-card { padding: 35px; }
    .don-mega-sum { font-size: 2.6rem; }
}

@media (max-width: 768px) {
    .don-split-grid { grid-template-columns: 1fr; gap: 50px; }
    .don-metrics-panel { position: static; }
}

@media (max-width: 480px) {
    .alumni-donation-showcase { padding: 60px 0; }
    .don-main-heading { font-size: 1.6rem; }
    .don-allocation-tabs { grid-template-columns: 1fr; gap: 8px; }
    .don-minor-stats-row { grid-template-columns: 1fr; gap: 12px; }
    .don-stats-card { padding: 25px 20px; }
}



























/* ==========================================================================
   ALUMNI NEWSLETTER SUBSCRIPTION STYLES
   ========================================================================== */

:root {
    --news-bg-dark: #0b131c;       /* Outer canvas match background */
    --news-surface-card: #152232;  /* Slightly illuminated inner panel */
    --news-amber: #e17700;         /* Theme orange accent */
    --news-navy-border: #1e3045;   /* UI structural framework divider lines */
    --news-white: #ffffff;         /* Dominant high-contrast text typography */
    --news-soft-grey: #a0b4cc;     /* Readability support body copy text */
}

.newsletter-subscription-block {
    padding: 60px 0 100px 0;
    background-color: var(--news-bg-dark);
    position: relative;
    overflow: hidden;
}

.news-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Centralized Inner Surface Wrapper Card */
.news-card-inner {
    position: relative;
    background-color: var(--news-surface-card);
    border: 1px solid var(--news-navy-border);
    border-radius: 24px;
    padding: 60px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Highlighting Ambient Backglow Effect */
.news-glow-element {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(225, 119, 0, 0.08) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
    pointer-events: none;
}

/* Two-Column Alignment Structure */
.news-layout-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   LEFT PANEL - NARRATIVE AND BRAND COPY
   ========================================================================== */
.news-text-content {
    display: flex;
    flex-direction: column;
}

.news-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: rgba(225, 119, 0, 0.1);
    border: 1px solid rgba(225, 119, 0, 0.25);
    border-radius: 12px;
    color: var(--news-amber);
    margin-bottom: 20px;
}

.news-icon-badge span {
    font-size: 24px;
}

.news-headline {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--news-white);
    margin: 0 0 14px 0;
    letter-spacing: -0.5px;
}

.news-subtitle {
    font-size: 1.02rem;
    color: var(--news-soft-grey);
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   RIGHT PANEL - SUBMISSION FORM INPUT CONTROLS
   ========================================================================== */
.news-action-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.news-form-element {
    width: 100%;
    margin-bottom: 16px;
}

/* Compound Inline Field Wrapper System */
.news-input-group {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--news-bg-dark);
    border: 1px solid var(--news-navy-border);
    padding: 6px;
    border-radius: 12px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.news-field-icon {
    position: absolute;
    left: 18px;
    color: var(--news-soft-grey);
    font-size: 20px;
    pointer-events: none;
}

/* Accessible hidden utility class */
.news-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.news-input-field {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 12px 16px 12px 48px;
    color: var(--news-white);
    font-size: 0.98rem;
    font-weight: 500;
}

.news-input-field::placeholder {
    color: #5a738e;
}

/* Interactive Input Focused Highlight Track Changes */
.news-input-group:focus-within {
    border-color: var(--news-amber);
    box-shadow: 0 0 0 4px rgba(225, 119, 0, 0.15);
}

/* Primary Form Submit Call to Action Button */
.news-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--news-amber);
    color: var(--news-white);
    border: none;
    outline: none;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.news-submit-btn .btn-arrow {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.news-submit-btn:hover {
    background-color: #f58200;
}

.news-submit-btn:hover .btn-arrow {
    transform: translateX(2px) translateY(-1px) rotate(-15deg);
}

.news-submit-btn:active {
    transform: scale(0.98);
}

/* Privacy Meta Footer Data layout rows */
.news-privacy-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5a738e;
    padding-left: 4px;
}

.news-privacy-notice span {
    font-size: 15px;
    color: #4a627a;
}

.news-privacy-notice .notice-text {
    font-size: 0.8rem;
    margin: 0;
    font-weight: 500;
}

/* ==========================================================================
   RESPONSIVE LAYOUT CONVERSION RESPONSES
   ========================================================================== */
@media (max-width: 1024px) {
    .news-card-inner { padding: 45px; }
    .news-headline { font-size: 1.85rem; }
    .news-layout-split { gap: 40px; }
}

@media (max-width: 768px) {
    .news-layout-split { grid-template-columns: 1fr; gap: 30px; }
    .news-card-inner { padding: 40px 30px; }
}

@media (max-width: 480px) {
    .news-card-inner { padding: 30px 20px; border-radius: 16px; }
    .news-headline { font-size: 1.5rem; }
    .news-input-group { flex-direction: column; background: transparent; border: none; padding: 0; gap: 12px; }
    .news-input-group:focus-within { box-shadow: none; }
    .news-input-field { background-color: var(--news-bg-dark); border: 1px solid var(--news-navy-border); border-radius: 10px; padding: 14px 16px 14px 44px; }
    .news-input-field:focus { border-color: var(--news-amber); }
    .news-field-icon { top: 15px; }
    .news-submit-btn { width: 100%; justify-content: center; padding: 14px; border-radius: 10px; }
    .news-privacy-notice { justify-content: center; text-align: center; }
}






/* ==========================================================================
   PRODUCTION WEBSITE MASTER FOOTER MODULE STYLES
   ========================================================================== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
    --ft-bg-dark: #0b131c;       /* Pitch night primary canvas background */
    --ft-surface-card: #152232;  /* Slightly illuminated internal app buttons */
    --ft-amber: #e17700;         /* Theme orange accent highlight pop */
    --ft-navy-border: #1e3045;   /* Layout framing panel break dividers */
    --ft-white: #ffffff;         /* Title structures clear white weights */
    --ft-slate-grey: #a0b4cc;    /* Anchor descriptions primary text shade */
}

.site-master-footer {
    background-color: var(--ft-bg-dark);
    color: var(--ft-slate-grey);
    padding: 80px 0 30px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border-top: 2px solid var(--ft-navy-border);
    float: left;
    width: 100%;
    clear: both;
}

.ft-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Four Column Responsive Grid Framework Layout */
.ft-main-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr;
    gap: 40px;
    margin-bottom: 50px;
}

.ft-column {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   COLUMN 1 - BRAND IDENTITY ELEMENTS
   ========================================================================== */
.ft-brand-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--ft-white);
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.ft-brand-title span {
    color: var(--ft-amber);
}

.ft-brand-tagline {
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 25px 0;
    opacity: 0.85;
}

/* Rounded Social Buttons Track */
.ft-social-tray {
    display: flex;
    gap: 10px;
}

.ft-social-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--ft-surface-card);
    color: var(--ft-slate-grey);
    text-decoration: none;
    font-size: 15px;
    border: 1px solid var(--ft-navy-border);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ft-social-circle:hover {
    background-color: var(--ft-amber);
    color: var(--ft-white);
    border-color: var(--ft-amber);
    transform: translateY(-3px);
}

/* ==========================================================================
   COLUMNS 2 & 3 - STRUCTURAL LIST LINKS
   ========================================================================== */
.ft-column-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ft-white);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.ft-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ft-link-list li a {
    color: var(--ft-slate-grey);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}

.ft-link-list li a:hover {
    color: var(--ft-amber);
    padding-left: 4px;
}

/* ==========================================================================
   COLUMN 4 - DIGITAL MOBILE MARKET APP BADGES
   ========================================================================== */
.ft-download-text {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.ft-store-badges-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 200px;
}

/* Unified Layout Architecture for App Badges */
.ft-store-badge-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #01060a;
    border: 1px solid var(--ft-navy-border);
    border-radius: 8px;
    padding: 8px 16px;
    color: var(--ft-white);
    text-decoration: none;
    transition: all 0.2s ease;
}

.ft-store-badge-btn .store-brand-icon {
    font-size: 24px;
    color: var(--ft-white);
    transition: color 0.2s ease;
}

.ft-store-badge-btn .store-labels-stack {
    display: flex;
    flex-direction: column;
}

.ft-store-badge-btn .lbl-small {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ft-slate-grey);
    line-height: 1.2;
}

.ft-store-badge-btn .lbl-main {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.ft-store-badge-btn:hover {
    border-color: var(--ft-amber);
    background-color: var(--ft-surface-card);
    transform: translateY(-2px);
}

.ft-store-badge-btn:hover .store-brand-icon {
    color: var(--ft-amber);
}

/* ==========================================================================
   LOWER SYSTEM RAIL BAR: LEGAL & COPYRIGHT ATTR
   ========================================================================== */
.ft-divider-line {
    height: 1px;
    background-color: var(--ft-navy-border);
    margin-bottom: 25px;
    width: 100%;
}

.ft-bottom-legal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.85rem;
}

.ft-copyright-text {
    margin: 0;
}

.ft-site-anchor {
    color: var(--ft-white);
    text-decoration: none;
    font-weight: 600;
}

.ft-site-anchor:hover {
    color: var(--ft-amber);
}

.ft-developer-attribution {
    margin: 0;
}

.ft-developer-attribution .heart-pulse-node {
    color: #ff3333;
    display: inline-block;
    animation: ftHeartbeat 1.4s infinite ease-in-out;
}

.ft-dev-portfolio-link {
    color: var(--ft-white);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dotted var(--ft-navy-border);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ft-dev-portfolio-link:hover {
    color: var(--ft-amber);
    border-color: var(--ft-amber);
}

/* Micro-animations heartbeat script tracking */
@keyframes ftHeartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ==========================================================================
   RESPONSIVE DESIGN SCREEN CONVERSIONS BREAKPOINTS CONTROLS
   ========================================================================== */
@media (max-width: 1024px) {
    .ft-main-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
    }
    .ft-store-badges-wrapper {
        flex-direction: row;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .site-master-footer {
        padding: 60px 0 30px 0;
    }
    .ft-main-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .ft-store-badges-wrapper {
        flex-direction: column;
        max-width: 220px;
    }
    .ft-bottom-legal-row {
        flex-direction: column;
        text-align: center;
    }
}














/* ==========================================================================
   ALUMNI BEST READER RECOGNITION SECTION (CLEAN LIGHT THEME)
   ========================================================================== */

:root {
    --br-bg-light: #f4f7fa;        /* Soft canvas level background alternative */
    --br-surface-card: #ffffff;   /* Pure white cards surfaces */
    --br-amber: #e17700;          /* Brand orange primary focus accent */
    --br-gold: #ffb100;           /* Champion metric gold color */
    --br-navy-deep: #182738;      /* Primary high density dark typography text */
    --br-charcoal: #4a5568;       /* Secondary body information text */
    --br-border-line: #e2e8f0;    /* Structural hairlines borders separator */
}

.best-readers-section {
    padding: 100px 0;
    background-color: var(--br-bg-light);
    color: var(--br-charcoal);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.br-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Context Grouping */
.br-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

.br-badge-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--br-amber);
    margin-bottom: 12px;
}

.br-main-title {
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--br-navy-deep);
    letter-spacing: -0.5px;
    margin-bottom: 15px;
}

.br-subtitle {
    font-size: 1rem;
    color: var(--br-charcoal);
    line-height: 1.6;
    opacity: 0.9;
}

/* Generalized Shared Card Frame Logic */
.br-card {
    background-color: var(--br-surface-card);
    border: 1px solid var(--br-border-line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(24, 39, 56, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   TIER 1: 5-COLUMNS PODIUM SYMMETRIC ROW (4 - 2 - 1 - 3 - 5 Arrangement)
   ========================================================================== */
.br-podium-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: flex-end; /* Anchors all podium baselines uniformly */
    margin-bottom: 50px;
}

.podium-card {
    text-align: center;
    padding: 24px 16px;
    position: relative;
}

/* Standardized Avatar Circular Layout Framework */
.br-avatar-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 16px auto;
}

.br-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--br-border-line);
    display: block;
}

/* Rank Float Ring Badges */
.br-rank-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--br-navy-deep);
    color: var(--br-surface-card);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--br-surface-card);
}

/* Typography elements within the podium architecture */
.br-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--br-navy-deep);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.br-batch {
    font-size: 12px;
    color: var(--br-charcoal);
    opacity: 0.8;
    display: block;
    margin-bottom: 14px;
}

/* Score Marker Indicator Pill Blocks */
.br-score-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f1f5f9;
    border: 1px solid var(--br-border-line);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--br-navy-deep);
}

.br-score-pill span.material-symbols-outlined {
    font-size: 15px;
    color: var(--br-charcoal);
}

/* --------------------------------------------------------------------------
   podium hierarchy scalings & champion override tracks
   -------------------------------------------------------------------------- */
/* Rank 1: Grand Champion Frame Parameters */
.rank-champion {
    border: 2px solid var(--br-gold);
    box-shadow: 0 20px 45px rgba(255, 177, 0, 0.12);
    transform: translateY(-15px); /* Forces element height displacement natively */
    padding: 35px 20px 28px 20px;
    background: linear-gradient(to top, #fffaf0, var(--br-surface-card) 40px);
}

.rank-champion .br-avatar-wrapper { width: 115px; height: 115px; }
.rank-champion .br-img { border-color: var(--br-gold); }
.rank-champion .br-rank-badge { background-color: var(--br-gold); color: var(--br-navy-deep); }
.rank-champion .br-name { font-size: 1.25rem; }

.br-champion-crown {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--br-gold);
    background-color: var(--br-surface-card);
    border: 1px solid var(--br-gold);
    border-radius: 50%;
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(255, 177, 0, 0.2);
}

.br-champion-crown span { font-size: 22px; font-weight: bold; }

.br-champion-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--br-amber);
    margin-bottom: 4px;
}

.champion-score {
    background-color: rgba(255, 177, 0, 0.1);
    border-color: rgba(255, 177, 0, 0.25);
    color: #b37d00;
}

.champion-score span.material-symbols-outlined { color: var(--br-gold); }

/* Rank 2 & 3 Heights scaling normalization structural hooks */
.rank-2, .rank-3 { transform: translateY(-5px); }

/* Hover transitions tracking actions */
.podium-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(24, 39, 56, 0.08);
}
.rank-champion:hover {
    transform: translateY(-20px) scale(1.02);
    box-shadow: 0 25px 50px rgba(255, 177, 0, 0.18);
}

/* ==========================================================================
   TIER 2: SECONDARY RECOGNITION ASSEMBLY MATRIX GRID (10 Readers)
   ========================================================================== */
.br-assembly-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.assembly-card {
    display: flex;
    align-items: center;
    padding: 14px;
    gap: 12px;
}

.br-assembly-header {
    position: relative;
    width: 48px; height: 48px;
    flex-shrink: 0;
}

.br-assembly-img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 1.5px solid var(--br-border-line);
}

.br-mini-rank {
    position: absolute;
    top: -4px; left: -4px;
    background-color: #edf2f7;
    border: 1px solid var(--br-border-line);
    font-size: 9px;
    font-weight: 700;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--br-navy-deep);
}

.br-assembly-meta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.br-assembly-meta h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--br-navy-deep);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.br-assembly-batch {
    font-size: 11px;
    color: var(--br-charcoal);
    opacity: 0.75;
}

.br-mini-score {
    font-size: 11px;
    font-weight: 600;
    color: var(--br-amber);
    margin-top: 1px;
}

.assembly-card:hover {
    background-color: var(--br-surface-card);
    border-color: var(--br-amber);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(24, 39, 56, 0.04);
}

/* ==========================================================================
   RESPONSIVE GRID SYSTEM SCREEN RE-ALIGNMENTS
   ========================================================================== */
@media (max-width: 1100px) {
    .br-podium-row { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    /* Moves lesser podium nodes down gracefully while retaining sequence logic structural positions */
    .rank-4, .rank-5 { grid-column: span 1; transform: none; }
    .rank-4:hover, .rank-5:hover { transform: translateY(-4px); }
    .br-assembly-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 850px) {
    .br-assembly-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .br-main-title { font-size: 1.85rem; }
    .br-podium-row { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto 40px auto; gap: 25px; }
    .podium-card, .rank-2, .rank-3, .rank-champion { transform: none !important; }
    .podium-card:hover, .rank-champion:hover { transform: translateY(-4px) !important; }
    .br-assembly-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .br-assembly-grid { grid-template-columns: 1fr; }
}












        /* ==========================================================================
           CORE STYLING SYSTEM (LIGHT VERSION)
           ========================================================================== */
        :root {
            --ab-bg: #f9fbfd;
            --ab-surface: #ffffff;
            --ab-amber: #e17700;
            --ab-amber-soft: rgba(225, 119, 0, 0.06);
            --ab-navy: #182738;
            --ab-charcoal: #3c4858;
            --ab-muted: #7a8b9e;
            --ab-border: #e2e8f0;
            --ab-shadow: 0 10px 30px rgba(24, 39, 56, 0.04);
        }
        .ab-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Hero Typography Banner */
        .ab-hero-banner {
            background-color: var(--ab-navy);
            padding: 60px 0;
            text-align: center;
        }

        .ab-hero-banner .ab-badge {
            display: inline-block;
            font-size: 12px;
            color: var(--ab-amber);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .ab-hero-banner h1 {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--ab-bg);
            letter-spacing: -0.5px;
        }

        /* Generic Layout Headings */
        .ab-section-title {
            font-size: 2rem;
            font-weight: 800;
            color: var(--ab-navy);
            text-align: center;
            margin-bottom: 40px;
            letter-spacing: -0.5px;
        }

        /* Global Sections Framework */
        .ab-main-section {
            padding: 80px 0;
        }

        .ab-bg-white {
            background-color: var(--ab-surface);
            border-top: 1px solid var(--ab-border);
            border-bottom: 1px solid var(--ab-border);
        }

        /* ==========================================================================
           1. GREETINGS MODULE (TABBED INTERACTIVE LAYOUT)
           ========================================================================== */
        .ab-greetings-card {
            background: var(--ab-surface);
            border: 1px solid var(--ab-border);
            border-radius: 16px;
            box-shadow: var(--ab-shadow);
            overflow: hidden;
        }

        .ab-tabs-row {
            display: flex;
            background-color: #f1f5f9;
            border-bottom: 1px solid var(--ab-border);
        }

        .ab-tab-btn {
            flex: 1;
            padding: 20px;
            background: none;
            border: none;
            outline: none;
            font-size: 15px;
            font-weight: 700;
            color: var(--ab-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.2s ease;
        }

        .ab-tab-btn.active {
            background-color: var(--ab-surface);
            color: var(--ab-amber);
            position: relative;
        }

        .ab-tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -1px; left: 0; right: 0;
            height: 3px;
            background-color: var(--ab-amber);
        }

        .ab-tab-view {
            padding: 45px;
            display: none;
            animation: abFadeIn 0.4s ease forwards;
        }

        .ab-tab-view.active {
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .ab-leader-photo {
            width: 220px;
            height: 220px;
            border-radius: 14px;
            object-fit: cover;
            border: 1px solid var(--ab-border);
            flex-shrink: 0;
        }

        .ab-leader-info h3 {
            font-size: 1.4rem;
            color: var(--ab-navy);
            margin-bottom: 2px;
        }

        .ab-leader-info .ab-post-tag {
            font-size: 13px;
            color: var(--ab-amber);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: block;
            margin-bottom: 15px;
        }

        .ab-leader-info p {
            color: var(--ab-charcoal);
            font-size: 1.02rem;
            margin-bottom: 15px;
            text-align: justify;
        }

        .ab-leader-signature {
            font-weight: 700;
            color: var(--ab-navy);
            font-size: 0.95rem;
        }

        /* ==========================================================================
           2. HISTORICAL TIMELINE (DEPARTMENT & ALUMNI)
           ========================================================================== */
        .ab-history-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
        }

        .ab-history-block h3 {
            font-size: 1.4rem;
            color: var(--ab-navy);
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ab-history-block h3 span { color: var(--ab-amber); }

        .ab-timeline {
            position: relative;
            border-left: 2px solid var(--ab-border);
            padding-left: 25px;
            margin-left: 10px;
        }

        .ab-timeline-node {
            position: relative;
            margin-bottom: 30px;
        }

        .ab-timeline-node:last-child { margin-bottom: 0; }

        .ab-timeline-node::before {
            content: '';
            position: absolute;
            left: -32px; top: 4px;
            width: 12px; height: 12px;
            border-radius: 50%;
            background-color: var(--ab-surface);
            border: 3px solid var(--ab-amber);
        }

        .ab-time-stamp {
            font-size: 13px;
            font-weight: 700;
            color: var(--ab-amber);
            display: block;
            margin-bottom: 4px;
        }

        .ab-timeline-node h4 {
            font-size: 1.1rem;
            color: var(--ab-navy);
            margin-bottom: 6px;
        }

        .ab-timeline-node p {
            font-size: 0.95rem;
            color: var(--ab-charcoal);
            opacity: 0.9;
        }

        /* ==========================================================================
           3. EXECUTIVE COMMITTEE PREVIEW MATRIX
           ========================================================================== */
        .ab-exec-matrix {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-bottom: 40px;
        }

        .ab-member-profile-card {
            background-color: var(--ab-surface);
            border: 1px solid var(--ab-border);
            border-radius: 12px;
            overflow: hidden;
            text-align: center;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .ab-member-profile-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(24, 39, 56, 0.06);
        }

        .ab-mem-img-wrap {
            width: 100%;
            height: 200px;
            overflow: hidden;
            background-color: #f1f5f9;
        }

        .ab-mem-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .ab-mem-details {
            padding: 16px;
        }

        .ab-mem-batch-tag {
            font-size: 11px;
            color: var(--ab-amber);
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 4px;
            display: block;
        }

        .ab-mem-name {
            font-size: 1.05rem;
            color: var(--ab-navy);
            font-weight: 700;
            margin-bottom: 2px;
        }

        .ab-mem-role {
            font-size: 13px;
            color: var(--ab-muted);
            font-weight: 500;
        }

        .ab-center-action-row {
            text-align: center;
        }

        .ab-view-all-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: var(--ab-navy);
            color: var(--ab-surface);
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            padding: 14px 28px;
            border-radius: 8px;
            transition: background-color 0.2s ease;
        }

        .ab-view-all-btn:hover { background-color: var(--ab-amber); }

        /* ==========================================================================
           4. CONSTITUTION & OBJECTIVES (ACCORDION INTERFACE)
           ========================================================================== */
        .ab-accordion-stack {
            max-width: 800px;
            margin: 0 auto;
        }

        .ab-accordion-item {
            background-color: var(--ab-surface);
            border: 1px solid var(--ab-border);
            border-radius: 10px;
            margin-bottom: 12px;
            overflow: hidden;
        }

        .ab-accordion-header {
            width: 100%;
            padding: 20px;
            background: none;
            border: none;
            outline: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: left;
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--ab-navy);
            transition: background-color 0.2s ease;
        }

        .ab-accordion-header:hover {
            background-color: var(--ab-amber-soft);
        }

        .ab-accordion-header .toggle-icon {
            font-size: 20px;
            color: var(--ab-amber);
            transition: transform 0.25s ease;
        }

        .ab-accordion-item.open .toggle-icon {
            transform: rotate(180deg);
        }

        .ab-accordion-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
            background-color: rgba(248, 250, 252, 0.5);
        }

        .ab-accordion-body {
            padding: 20px;
            font-size: 0.98rem;
            color: var(--ab-charcoal);
            border-top: 1px solid var(--ab-border);
            line-height: 1.65;
        }

        .ab-accordion-body ul {
            padding-left: 20px;
            margin-top: 10px;
        }

        .ab-accordion-body li {
            margin-bottom: 8px;
        }

        /* ==========================================================================
           KEYFRAMES AND RESPONSIVE BREAKPOINTS
           ========================================================================== */
        @keyframes abFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 1024px) {
            .ab-exec-matrix { grid-template-columns: repeat(3, 1fr); }
            .ab-history-grid { grid-template-columns: 1fr; gap: 40px; }
        }

        @media (max-width: 768px) {
            .ab-tab-view.active { flex-direction: column; text-align: center; padding: 30px 20px; }
            .ab-leader-photo { width: 160px; height: 160px; }
            .ab-leader-info p { text-align: center; }
            .ab-exec-matrix { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 480px) {
            .ab-hero-banner h1 { font-size: 1.8rem; }
            .ab-section-title { font-size: 1.5rem; }
            .ab-tabs-row { flex-direction: column; }
            .ab-exec-matrix { grid-template-columns: 1fr; }
            .ab-tab-btn { padding: 15px; }
        }
        
        
        
        
        
        
        
        
        
        
        
        /* ==========================================================================
   ALL EVENTS AND HEADER BREADCRUMB SYSTEM STYLES (PURE LIGHT THEME)
   ========================================================================== */

:root {
    --ev-bg-canvas: #f8fafc;       /* Clean cool white background canvas */
    --ev-surface-card: #ffffff;    /* High contrast interior card surfaces */
    --ev-amber: #e17700;          /* Core orange brand action accents */
    --ev-navy-deep: #182738;      /* Primary strong text typography shade */
    --ev-charcoal: #475569;       /* Readability supporting structural descriptions */
    --ev-border-line: #e2e8f0;    /* Soft hairline grid partition lines */
    --ev-text-muted: #64748b;     /* Structural routing support tags labels */
    
    /* Semantic Status Color Rules */
    --status-up-green: #10b981;
    --status-comp-blue: #3b82f6;
}

/* Link Resets localized to Events context module */
.ev-master-grid a, .ev-breadcrumb-list a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

.ev-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   SECTION 1 STYLE PATHS - BREADCRUMB & NARRATIVE HEADER
   ========================================================================== */
.events-intro-header {
    background-color: var(--ev-surface-card);
    border-bottom: 1px solid var(--ev-border-line);
    padding: 45px 0 50px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Inline horizontal breadcrumbs layout list */
.ev-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    gap: 8px;
    margin-bottom: 25px;
    padding: 0;
    font-size: 0.88rem;
    font-weight: 500;
}

.ev-breadcrumb-item {
    color: var(--ev-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ev-breadcrumb-item a:hover {
    color: var(--ev-amber);
}

.ev-breadcrumb-item + .ev-breadcrumb-item::before {
    content: "/";
    color: #cbd5e1;
    font-weight: 400;
}

.ev-breadcrumb-item.active {
    color: var(--ev-navy-deep);
    font-weight: 600;
}

/* Page Intro Context Setup Grid rows */
.ev-intro-content {
    max-width: 850px;
}

.ev-page-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--ev-navy-deep);
    letter-spacing: -0.75px;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.ev-page-excerpt {
    font-size: 1.1rem;
    color: var(--ev-charcoal);
    line-height: 1.6;
    margin: 0;
    opacity: 0.95;
}

/* ==========================================================================
   SECTION 2 STYLE PATHS - ALL EVENTS CARD GALLERY
   ========================================================================== */
.events-gallery-showcase {
    background-color: var(--ev-bg-canvas);
    padding: 80px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Master Grid Structure Configurations */
.ev-master-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* High Fidelity Interactive Individual Cards Structures */
.ev-card {
    background-color: var(--ev-surface-card);
    border: 1px solid var(--ev-border-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(24, 39, 56, 0.02);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ev-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(24, 39, 56, 0.06);
}

/* Visual Thumb Aspect Containers rules */
.ev-image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: #e2e8f0;
    overflow: hidden;
}

.ev-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ev-card:hover .ev-thumb {
    transform: scale(1.05);
}

/* Contextual Status Badge overlays */
.ev-status-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--ev-surface-card);
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.status-upcoming { background-color: var(--status-up-green); }
.status-completed { background-color: var(--status-comp-blue); }

/* Card Internal Meta Content Elements padding */
.ev-body-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ev-category-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ev-amber);
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

.ev-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ev-navy-deep);
    margin: 0 0 10px 0;
}

.ev-title a:hover {
    color: var(--ev-amber);
}

.ev-short-desc {
    font-size: 0.95rem;
    color: var(--ev-charcoal);
    line-height: 1.55;
    margin: 0 0 20px 0;
    opacity: 0.9;
}

/* Vertical Stack Logistics Rows block */
.ev-logistics-bar {
    border-top: 1px dashed var(--ev-border-line);
    border-bottom: 1px dashed var(--ev-border-line);
    padding: 16px 0;
    margin-top: auto; /* Forces execution section line layout alignment always */
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logistic-node {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ev-charcoal);
}

.logistic-node span.material-symbols-outlined {
    font-size: 18px;
    color: var(--ev-text-muted);
}

.logistic-node .node-text {
    font-size: 0.88rem;
    font-weight: 500;
}

/* Action Execution buttons styling rows */
.ev-footer-action {
    display: block;
    width: 100%;
}

.ev-action-btn-primary, .ev-action-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.ev-action-btn-primary {
    background-color: var(--ev-amber);
    color: var(--ev-surface-card);
    box-shadow: 0 4px 12px rgba(225, 119, 0, 0.15);
}

.ev-action-btn-primary:hover {
    background-color: #f58200;
    box-shadow: 0 6px 18px rgba(225, 119, 0, 0.25);
}

.ev-action-btn-secondary {
    background-color: #f1f5f9;
    color: var(--ev-navy-deep);
    border: 1px solid var(--ev-border-line);
}

.ev-action-btn-secondary:hover {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
}

.ev-action-btn-primary span.material-symbols-outlined,
.ev-action-btn-secondary span.material-symbols-outlined {
    font-size: 16px;
}

/* ==========================================================================
   RESPONSIVE LAYOUT MATRIX CHANGES
   ========================================================================== */
@media (max-width: 1024px) {
    .ev-master-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .ev-page-title { font-size: 2.1rem; }
}

@media (max-width: 768px) {
    .events-intro-header { padding: 35px 0 40px 0; }
    .events-gallery-showcase { padding: 50px 0; }
    .ev-master-grid { grid-template-columns: 1fr; max-width: 450px; margin: 0 auto; }
    .ev-page-title { font-size: 1.85rem; }
    .ev-page-excerpt { font-size: 1rem; }
}
        
        
























/* ==========================================================================
   DIRECTORY SYSTEM INTEGRATED STYLES (PURE LIGHT HIGH-CONTRAST THEME)
   ========================================================================== */

:root {
    --dir-bg-canvas: #f8fafc;        /* Base background canvas space */
    --dir-surface-card: #ffffff;     /* Flat white card bases */
    --dir-amber: #e17700;           /* Primary brand action core accent */
    --dir-navy-deep: #0f172a;       /* Deep high-contrast text color */
    --dir-charcoal: #334155;        /* Secondary supporting labels color */
    --dir-border-line: #e2e8f0;     /* System hairline partitions */
    --dir-text-muted: #64748b;      /* Light info descriptors */
    
    /* Semantic Badges Color Metrics */
    --badge-t-bg: #f0fdf4;  --badge-t-txt: #166534;
    --badge-ex-bg: #fef2f2; --badge-ex-txt: #991b1b;
    --badge-c-bg: #eff6ff;  --badge-c-txt: #1e40af;
}

/* Base resets restricted to local layout elements */
.dir-intro-section, .dir-showcase-section {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
.dir-intro-section *, .dir-showcase-section * { box-sizing: border-box; }

.dir-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ==========================================================================
   SECTION 1 STYLES: ABOUT THE DIRECTORY HEADER
   ========================================================================== */
.dir-intro-section {
    background-color: var(--dir-surface-card);
    border-bottom: 1px solid var(--dir-border-line);
    padding: 40px 0 45px 0;
}

.dir-breadcrumb-list {
    display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 24px 0;
    gap: 8px; font-size: 0.85rem; font-weight: 500;
}
.dir-breadcrumb-item { color: var(--dir-text-muted); display: flex; align-items: center; gap: 8px; }
.dir-breadcrumb-item a { text-decoration: none; color: inherit; transition: color 0.2s; }
.dir-breadcrumb-item a:hover { color: var(--dir-amber); }
.dir-breadcrumb-item + .dir-breadcrumb-item::before { content: "→"; color: #cbd5e1; font-size: 0.75rem; }
.dir-breadcrumb-item.active { color: var(--dir-navy-deep); font-weight: 600; }

.dir-intro-grid {
    display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
.dir-tag-label {
    display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: var(--dir-amber); letter-spacing: 1px; margin-bottom: 8px;
}
.dir-main-title { font-size: 2.25rem; font-weight: 800; color: var(--dir-navy-deep); margin: 0 0 12px 0; letter-spacing: -0.5px; }
.dir-excerpt { font-size: 1.05rem; color: var(--dir-charcoal); line-height: 1.6; margin: 0; max-width: 800px; }

.dir-intro-stats { display: flex; gap: 24px; }
.stat-node {
    background-color: var(--dir-bg-canvas); border: 1px solid var(--dir-border-line);
    padding: 16px 24px; border-radius: 12px; text-align: center; min-width: 140px;
}
.stat-count { display: block; font-size: 1.75rem; font-weight: 800; color: var(--dir-navy-deep); margin-bottom: 4px; }
.stat-label { font-size: 0.8rem; font-weight: 600; color: var(--dir-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ==========================================================================
   SECTION 2: ALL DIRECTORY SHOWCASE & INTERACTION CONTROLS
   ========================================================================== */
.dir-showcase-section {
    background-color: var(--dir-bg-canvas);
    padding: 60px 0 80px 0;
}

/* PART 1: SEARCH & FILTER STRUCTURAL ENGINE BAR */
.dir-search-filter-panel {
    display: grid; grid-template-columns: 1fr 380px; gap: 24px;
    background-color: var(--dir-surface-card); border: 1px solid var(--dir-border-line);
    padding: 20px; border-radius: 16px; margin-bottom: 30px; box-shadow: 0 4px 20px rgba(15,23,42,0.02);
    align-items: center;
}

.dir-filter-form { width: 100%; }
.filter-inputs-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.select-wrapper { position: relative; flex: 1; min-width: 160px; }
.select-wrapper select {
    width: 100%; padding: 12px 16px; font-size: 0.9rem; font-weight: 500;
    color: var(--dir-charcoal); background-color: var(--dir-surface-card);
    border: 1px solid #cbd5e1; border-radius: 8px; appearance: none; cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.select-wrapper select:focus { border-color: var(--dir-amber); outline: none; box-shadow: 0 0 0 3px rgba(225,119,0,0.1); }
.select-wrapper::after {
    content: "expand_more"; font-family: 'Material Symbols Outlined'; position: absolute;
    right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none;
    color: var(--dir-text-muted); font-size: 18px;
}

.dir-btn-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; font-size: 0.9rem; font-weight: 700; color: var(--dir-surface-card);
    background-color: var(--dir-amber); border: none; border-radius: 8px; cursor: pointer;
    transition: background-color 0.15s ease; min-height: 45px;
}
.dir-btn-submit:hover { background-color: #c46800; }
.dir-btn-submit span.material-symbols-outlined { font-size: 18px; }

/* AJAX Async Box rules */
.dir-ajax-search-box { width: 100%; }
.search-input-wrapper { position: relative; display: flex; align-items: center; }
.search-input-wrapper .search-icon { position: absolute; left: 16px; color: var(--dir-text-muted); font-size: 20px; }
.search-input-wrapper input {
    width: 100%; padding: 12px 16px 12px 46px; font-size: 0.9rem;
    color: var(--dir-navy-deep); background-color: var(--dir-bg-canvas);
    border: 1px solid #cbd5e1; border-radius: 8px; transition: all 0.2s;
}
.search-input-wrapper input:focus { background-color: var(--dir-surface-card); border-color: var(--dir-amber); outline: none; box-shadow: 0 0 0 3px rgba(225,119,0,0.1); }

/* Tiny inline CSS spinner logic for showing backend AJAX requests states */
.ajax-spinner {
    position: absolute; right: 16px; width: 18px; height: 18px;
    border: 2px solid #e2e8f0; border-top-color: var(--dir-amber); border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* PART 2: DATA CARD RECTANGLE ARCHITECTURE LIST SHEET */
.dir-list-wrapper {
    background-color: var(--dir-surface-card); border: 1px solid var(--dir-border-line);
    border-radius: 16px; overflow: hidden; box-shadow: 0 4px 25px rgba(15,23,42,0.01);
}

/* Grid Matrix structural alignment shared parameters */
.dir-list-header, .dir-list-row {
    display: grid; grid-template-columns: 60px 1fr 140px 280px 140px 290px;
    align-items: center; padding: 16px 24px;
}

/* Header Columns descriptors text formatting styles */
.dir-list-header {
    background-color: #f1f5f9; border-bottom: 1px solid var(--dir-border-line);
    font-size: 0.8rem; font-weight: 700; color: var(--dir-charcoal); text-transform: uppercase; letter-spacing: 0.5px;
}
.col-node { padding-right: 12px; }
.col-sl { font-weight: 600; color: var(--dir-text-muted); }

/* Row Records layout instances configurations */
.dir-list-body { display: flex; flex-direction: column; }
.dir-list-row {
    border-bottom: 1px solid var(--dir-border-line); background-color: var(--dir-surface-card);
    transition: background-color 0.2s ease;
}
.dir-list-row:last-child { border-bottom: none; }
.dir-list-row:hover { background-color: #f8fafc; }

/* Structural Content Sub Elements formatting logic inside grid units */
.member-meta-block { display: flex; flex-direction: column; gap: 2px; }
.member-name { font-size: 1rem; font-weight: 700; color: var(--dir-navy-deep); }
.member-designation { font-size: 0.8rem; color: var(--dir-text-muted); font-weight: 500; }

.col-session { font-size: 0.95rem; font-weight: 600; color: var(--dir-charcoal); }
.data-blank { color: #cbd5e1; font-weight: 400; }

.contact-card-info { display: flex; flex-direction: column; gap: 4px; }
.contact-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--dir-charcoal); font-weight: 500; }
.contact-item span.material-symbols-outlined { font-size: 15px; color: var(--dir-text-muted); }

/* Types Categorization semantic badge components */
.badge-type {
    display: inline-block; padding: 6px 12px; font-size: 11px; font-weight: 700;
    border-radius: 6px; text-transform: uppercase; letter-spacing: 0.3px; text-align: center;
}
.type-teacher { background-color: var(--badge-t-bg); color: var(--badge-t-txt); }
.type-ex { background-color: var(--badge-ex-bg); color: var(--badge-ex-txt); }
.type-current { background-color: var(--badge-c-bg); color: var(--badge-c-txt); }

/* Action Block components layouts: Flex Inline alignment paths */
.action-matrix-group { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.social-links-set { display: flex; align-items: center; gap: 8px; }
.social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; background-color: #f1f5f9;
    color: var(--dir-charcoal); transition: all 0.2s ease; text-decoration: none;
}
.social-icon svg { width: 14px; height: 14px; }

/* Social Icons unique branding hover matrices variables overrides */
.social-icon:hover { color: var(--dir-surface-card); transform: translateY(-2px); }
.icon-fb:hover { background-color: #1877f2; }
.icon-x:hover { background-color: #14171a; }
.icon-ig:hover { background-color: #e1306c; }
.icon-wa:hover { background-color: #25d366; }

/* Deep Profile View Core Action Button layout rules */
.dir-action-view {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    font-size: 0.8rem; font-weight: 700; color: var(--dir-charcoal); background-color: var(--dir-surface-card);
    border: 1px solid #cbd5e1; border-radius: 6px; transition: all 0.2s; text-decoration: none; white-space: nowrap;
}
.dir-action-view span.material-symbols-outlined { font-size: 14px; }
.dir-action-view:hover { border-color: var(--dir-amber); color: var(--dir-amber); background-color: #fffaf5; }


/* ==========================================================================
   RESPONSIVE LAYOUT ENGINE MEDIA OVERRIDES (MOBILE FIRST BALANCING)
   ========================================================================== */
@media (max-width: 1200px) {
    .dir-list-header, .dir-list-row { grid-template-columns: 50px 1.2fr 110px 240px 120px 270px; padding: 16px; }
    .dir-search-filter-panel { grid-template-columns: 1fr; }
    .dir-intro-grid { grid-template-columns: 1fr; gap: 24px; }
    .dir-intro-stats { justify-content: flex-start; }
}

@media (max-width: 992px) {
    /* Transforms complex matrix sheet grid system safely into individual stack cards blocks for tablet resolutions */
    .dir-list-header { display: none; }
    .dir-list-row {
        grid-template-columns: 1fr; gap: 14px; padding: 24px;
        border-bottom: 6px solid var(--dir-bg-canvas);
    }
    .col-node { padding-right: 0; display: flex; align-items: center; justify-content: space-between; }
    .col-node::before {
        content: attr(data-label); font-size: 0.75rem; font-weight: 700;
        text-transform: uppercase; color: var(--dir-text-muted); letter-spacing: 0.5px; min-width: 120px;
    }
    .col-sl { display: none; } /* Drop screen count integers indexes on card conversion states */
    .col-profile::before { display: none; }
    .member-meta-block { text-align: left; width: 100%; border-bottom: 1px solid var(--dir-border-line); padding-bottom: 10px; }
    .member-name { font-size: 1.15rem; }
    .contact-card-info { align-items: flex-end; }
    .action-matrix-group { width: 100%; margin-top: 10px; border-top: 1px dashed var(--dir-border-line); padding-top: 14px; }
}

@media (max-width: 576px) {
    .filter-inputs-group { flex-direction: column; align-items: stretch; }
    .select-wrapper { width: 100%; }
    .dir-btn-submit { width: 100%; }
    .action-matrix-group { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
    .social-links-set { justify-content: center; }
    .dir-action-view { justify-content: center; padding: 12px; }
    .dir-main-title { font-size: 1.75rem; }
    .dir-intro-stats { flex-direction: column; gap: 12px; }
    .stat-node { min-width: auto; text-align: left; display: flex; justify-content: space-between; align-items: center; padding: 12px 20px;}
    .stat-count { margin-bottom: 0; font-size: 1.4rem; }
}





















/* ==========================================================================
   VISUAL GALLERY SYSTEM STYLE MATRIX (CLEAN BRIGHT LIGHT VERSION)
   ========================================================================== */

:root {
    --gal-bg-canvas: #f8fafc;       /* Structural gray site background */
    --gal-surface-card: #ffffff;    /* Pure white interior structural bases */
    --gal-amber: #e17700;          /* Focus brand dynamic accent color */
    --gal-navy-deep: #182738;      /* Primary text typography weight color */
    --gal-charcoal: #475569;       /* Secondary body summary paragraphs */
    --gal-border-line: #e2e8f0;    /* Muted structural border separation frames */
    --gal-text-muted: #64748b;     /* Inactive elements metadata labels */
}

/* Local context typography settings reset */
.gallery-intro-header, .gallery-master-showcase {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
}
.gallery-intro-header *, .gallery-master-showcase * { box-sizing: border-box; }

.gal-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   SECTION 1 STYLES: BREADCRUMB & INTRO HEADER PANEL
   ========================================================================== */
.gallery-intro-header {
    background-color: var(--gal-surface-card);
    border-bottom: 1px solid var(--gal-border-line);
    padding: 40px 0 45px 0;
}

.gal-breadcrumb-list {
    display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 24px 0;
    gap: 8px; font-size: 0.88rem; font-weight: 500;
}
.gal-breadcrumb-item { color: var(--gal-text-muted); display: flex; align-items: center; gap: 8px; }
.gal-breadcrumb-item a { text-decoration: none; color: inherit; transition: color 0.2s; }
.gal-breadcrumb-item a:hover { color: var(--gal-amber); }
.gal-breadcrumb-item + .gal-breadcrumb-item::before { content: "/"; color: #cbd5e1; }
.gal-breadcrumb-item.active { color: var(--gal-navy-deep); font-weight: 600; }

.gal-page-title { font-size: 2.25rem; font-weight: 800; color: var(--gal-navy-deep); margin: 0 0 12px 0; letter-spacing: -0.5px; }
.gal-page-excerpt { font-size: 1.05rem; color: var(--gal-charcoal); line-height: 1.6; margin: 0; max-width: 800px; opacity: 0.95; }

/* ==========================================================================
   SECTION 2 STYLES: TWO-COLUMN ASYNC SPLIT ARCHITECTURE
   ========================================================================== */
.gallery-master-showcase {
    background-color: var(--gal-bg-canvas);
    padding: 50px 0 80px 0;
}

.gal-layout-split {
    display: grid;
    grid-template-columns: 1fr 320px; /* Generates dedicated asynchronous sidebar column */
    gap: 30px;
    align-items: flex-start;
}

/* --------------------------------------------------------------------------
   LEFT PART: INTERACTIVE MEDIA LAYOUT MATRIX (3-COLUMNS DESKTOP BASE)
   -------------------------------------------------------------------------- */
.gal-media-stream-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.gal-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Forms geometric block structure */
    gap: 16px;
}

/* Home Page Component Target Structural Frames Integration */
.gal-media-item {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--gal-surface-card);
    border: 1px solid var(--gal-border-line);
}

/* Light placeholder CSS to keep layout shape correct if homepage CSS isn't loaded */
.home-media-card-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #cbd5e1;
}
.home-media-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Simple Pagination Controls Footer */
.gal-pagination-nav {
    display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px;
}
.pag-btn {
    min-width: 40px; height: 40px; padding: 0 6px; border-radius: 8px;
    border: 1px solid var(--gal-border-line); background-color: var(--gal-surface-card);
    color: var(--gal-charcoal); font-weight: 600; font-size: 0.9rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.pag-btn span.material-symbols-outlined { font-size: 18px; }
.pag-btn:hover:not(.prev-disabled) { border-color: var(--gal-amber); color: var(--gal-amber); }
.pag-btn.pag-active { background-color: var(--gal-amber); color: var(--gal-surface-card); border-color: var(--gal-amber); }
.pag-btn.prev-disabled { opacity: 0.4; cursor: not-allowed; background-color: #f1f5f9; }

/* --------------------------------------------------------------------------
   RIGHT PART: EVENT FILTER SIDEBAR CONTROLS
   -------------------------------------------------------------------------- */
.gal-sidebar-sticky {
    position: sticky;
    top: 30px; /* Pins sidebar cleanly during long scrolling streams */
    background-color: var(--gal-surface-card);
    border: 1px solid var(--gal-border-line);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(24,39,56,0.01);
}

.sidebar-header-block {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 16px; margin-bottom: 20px;
    border-bottom: 1px solid var(--gal-border-line);
}
.sidebar-title-icon { color: var(--gal-amber); font-size: 20px; }
.sidebar-title { font-size: 1.1rem; font-weight: 700; color: var(--gal-navy-deep); margin: 0; }

.sidebar-event-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

/* Button Trigger Track States Elements styling */
.event-filter-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 16px; background-color: var(--gal-bg-canvas); border: 1px solid transparent;
    border-radius: 10px; cursor: pointer; text-align: left; transition: all 0.2s ease;
}

.event-name-text { font-size: 0.9rem; font-weight: 600; color: var(--gal-charcoal); line-height: 1.4; }
.event-media-count {
    font-size: 0.75rem; font-weight: 700; background-color: var(--gal-surface-card);
    color: var(--gal-text-muted); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--gal-border-line);
}

/* Interactive Filter Hover and Active Focus Tracks overrides */
.event-filter-btn:hover {
    background-color: #fffaf4; border-color: rgba(225,119,0,0.2);
}
.event-filter-btn:hover .event-name-text { color: var(--gal-amber); }

.event-filter-btn.filter-active {
    background-color: var(--gal-amber); border-color: var(--gal-amber);
    box-shadow: 0 4px 12px rgba(225,119,0,0.15);
}
.event-filter-btn.filter-active .event-name-text { color: var(--gal-surface-card); }
.event-filter-btn.filter-active .event-media-count { background-color: rgba(255,255,255,0.2); color: var(--gal-surface-card); border-color: transparent; }

/* ==========================================================================
   RESPONSIVE LAYOUT ENGINE OVERRIDES
   ========================================================================== */
@media (max-width: 1024px) {
    .gal-layout-split { grid-template-columns: 1fr; gap: 40px; } /* Drops sidebar to bottom or top flow stacks */
    .gal-sidebar-sticky { position: static; } /* Frees sticky lock context */
    .gal-media-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .gal-page-title { font-size: 1.85rem; }
    .gal-media-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 480px) {
    .gal-media-grid { grid-template-columns: 1fr; }
    .sidebar-event-list { gap: 6px; }
    .event-filter-btn { padding: 10px 12px; }
}


















/* ==========================================================================
   PUBLICATIONS ECOSYSTEM SHIELD STYLE MATRIX
   ========================================================================== */

:root {
    --pub-bg-canvas: #f1f5f9;       /* Gray container body background */
    --pub-surface-card: #ffffff;    /* Structural card component framework bases */
    --pub-brand-orange: #e17700;    /* Focal action buttons, tags, links accent */
    --pub-navy-dark: #0f172a;       /* Clean semantic bold typography weight headers */
    --pub-charcoal: #334155;       /* Descriptive reading body summary paragraphs */
    --pub-meta-gray: #64748b;      /* Primary labels tracking system descriptors */
    --pub-line-border: #e2e8f0;    /* Structural asset dividers rules */
}

/* Base reset targeting classes natively */
.pub-intro-header, .pub-archive-showcase {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
}
.pub-intro-header *, .pub-archive-showcase * { box-sizing: border-box; }

.pub-container {
    width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px;
}

/* ==========================================================================
   SECTION 1 STYLES: INTRO ENGINE HEADER & ACCENT SPOTLIGHT
   ========================================================================== */
.pub-intro-header {
    background-color: var(--pub-surface-card);
    border-bottom: 1px solid var(--pub-line-border);
    padding: 40px 0 50px 0;
}

.pub-breadcrumb-list {
    display: flex; list-style: none; padding: 0; margin: 0 0 28px 0; gap: 8px; font-size: 0.85rem;
}
.pub-breadcrumb-item { color: var(--pub-meta-gray); display: flex; align-items: center; gap: 8px; }
.pub-breadcrumb-item a { text-decoration: none; color: inherit; transition: color 0.2s; }
.pub-breadcrumb-item a:hover { color: var(--pub-brand-orange); }
.pub-breadcrumb-item + .pub-breadcrumb-item::before { content: "›"; color: #94a3b8; font-size: 1.1rem; }
.pub-breadcrumb-item.active { color: var(--pub-navy-dark); font-weight: 600; }

.pub-header-split-grid {
    display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: center;
}

.pub-section-badge {
    display: inline-block; background-color: #fff7ed; color: var(--pub-brand-orange);
    padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; margin-bottom: 14px;
}
.pub-page-title { font-size: 2.25rem; font-weight: 800; color: var(--pub-navy-dark); margin: 0 0 14px 0; letter-spacing: -0.5px; }
.pub-page-excerpt { font-size: 1.05rem; color: var(--pub-charcoal); line-height: 1.6; margin: 0; }

/* Right Panel Curated Release Showcase Spotlight UI */
.pub-spotlight-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 16px; padding: 24px; position: relative; overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(15,23,42,0.15);
}
.pub-spotlight-tag {
    position: absolute; top: 0; right: 0; background-color: var(--pub-brand-orange);
    color: white; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    padding: 6px 14px; border-radius: 0 0 0 12px; letter-spacing: 0.5px;
}
.pub-meta-category { color: #fdba74; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.pub-spotlight-title { color: white; font-size: 1.25rem; font-weight: 700; margin: 8px 0 10px 0; }
.pub-spotlight-desc { color: #94a3b8; font-size: 0.9rem; line-height: 1.5; margin: 0 0 16px 0; }
.pub-spotlight-action {
    color: white; text-decoration: none; font-size: 0.88rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s;
}
.pub-spotlight-action span { font-size: 18px; }
.pub-spotlight-action:hover { color: #fdba74; gap: 10px; }

/* ==========================================================================
   SECTION 2 STYLES: MATRIX GEOMETRIC COVER ARCHIVE SHOWCASE GRID
   ========================================================================== */
.pub-archive-showcase {
    background-color: var(--pub-bg-canvas); padding: 60px 0 90px 0;
}

.pub-showcase-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}

/* Individual Book Architecture Card Item Row module */
.pub-item-card {
    background-color: var(--pub-surface-card); border-radius: 14px;
    border: 1px solid var(--pub-line-border); overflow: hidden;
    display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pub-item-card:hover {
    transform: translateY(-5px); box-shadow: 0 12px 24px -8px rgba(15,23,42,0.08);
}

/* Upper Cover Frame Component Properties featuring 2:3 vertical aspect standard */
.pub-cover-wrapper {
    position: relative; width: 100%; aspect-ratio: 1 / 1.42;
    background-color: #cbd5e1; overflow: hidden;
}
.pub-cover-img {
    width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease;
}
.pub-item-card:hover .pub-cover-img { transform: scale(1.04); }

/* Decorative Badge Class Identifiers */
.pub-card-badge {
    position: absolute; top: 12px; left: 12px; font-size: 0.72rem; font-weight: 700;
    padding: 4px 10px; border-radius: 6px; text-transform: uppercase; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.badge-book { background-color: #0284c7; color: white; }
.badge-magazine { background-color: #16a34a; color: white; }
.badge-journal { background-color: #7c3aed; color: white; }

/* Cover Layer Actions Mask Interactivity UI trigger fields */
.pub-cover-overlay {
    position: absolute; inset: 0; background-color: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center; gap: 12px;
    opacity: 0; transition: opacity 0.25s ease;
}
.pub-cover-wrapper:hover .pub-cover-overlay { opacity: 1; }

.pub-action-btn {
    width: 44px; height: 44px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); transition: transform 0.2s, background-color 0.2s;
}
.pub-action-btn span { font-size: 20px; }
.pub-action-btn:hover { transform: scale(1.1); }
.btn-view { background-color: white; color: var(--pub-navy-dark); }
.btn-view:hover { background-color: #f8fafc; }
.btn-download { background-color: var(--pub-brand-orange); color: white; }
.btn-download:hover { background-color: #c86a00; }

/* Lower Content Text Field Area panel specs */
.pub-details-panel {
    padding: 18px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;
}
.pub-title {
    font-size: 1.05rem; font-weight: 700; color: var(--pub-navy-dark);
    margin: 0 0 14px 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* Restricts long title breakage */
}

/* Metadata Structural Row Stack block layout components */
.pub-metadata-stack {
    border-top: 1px dashed var(--pub-line-border); padding-top: 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.pub-meta-row {
    display: flex; align-items: center; font-size: 0.82rem; line-height: 1.2;
}
.pub-meta-icon {
    font-size: 15px; color: var(--pub-meta-gray); margin-right: 6px; flex-shrink: 0;
}
.pub-meta-label {
    color: var(--pub-meta-gray); margin-right: 4px; font-weight: 500;
}
.pub-meta-value {
    color: var(--pub-charcoal); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Safely ends wide string data gracefully */
}
.pub-meta-value.font-highlight {
    color: var(--pub-brand-orange);
}

/* ==========================================================================
   RESPONSIVE LAYOUT ENGINE OVERRIDES
   ========================================================================== */
@media (max-width: 1140px) {
    .pub-showcase-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 991px) {
    .pub-header-split-grid { grid-template-columns: 1fr; gap: 30px; }
    .pub-spotlight-card { max-width: 500px; }
}

@media (max-width: 768px) {
    .pub-showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .pub-page-title { font-size: 1.85rem; }
}

@media (max-width: 480px) {
    .pub-showcase-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
    .pub-header-split-grid { padding-bottom: 10px; }
}












/* ==========================================================================
   PHILANTHROPY & FUNDING GATEWAY STYLESHEET MATRIX
   ========================================================================== */

:root {
    --don-bg-canvas: #f8fafc;       /* Global site structure body background canvas */
    --don-surface-card: #ffffff;    /* Primary structural form component bases */
    --don-brand-accent: #e17700;    /* Focus active state interaction brand styling */
    --don-navy-dark: #0f172a;       /* Strong bold typography headers */
    --don-charcoal: #334155;       /* Content explanation descriptive paragraphs */
    --don-meta-gray: #64748b;      /* Form input labels placeholder tags descriptors */
    --don-line-border: #e2e8f0;    /* Structural field boundaries border marks */
}

/* Base reset formatting targeting modular classes */
.don-intro-header, .don-master-portal {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
}
.don-intro-header *, .don-master-portal * { box-sizing: border-box; }

.don-container {
    width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px;
}

/* ==========================================================================
   SECTION 1 STYLES: GLOBAL HEADER BREADCRUMB INTRO ENGINE
   ========================================================================== */
.don-intro-header {
    background-color: var(--don-surface-card);
    border-bottom: 1px solid var(--don-line-border);
    padding: 40px 0 45px 0;
}

.don-breadcrumb-list {
    display: flex; list-style: none; padding: 0; margin: 0 0 24px 0; gap: 8px; font-size: 0.85rem;
}
.don-breadcrumb-item { color: var(--don-meta-gray); display: flex; align-items: center; gap: 8px; }
.don-breadcrumb-item a { text-decoration: none; color: inherit; transition: color 0.2s; }
.don-breadcrumb-item a:hover { color: var(--don-brand-accent); }
.don-breadcrumb-item + .don-breadcrumb-item::before { content: "›"; color: #94a3b8; font-size: 1.1rem; }
.don-breadcrumb-item.active { color: var(--don-navy-dark); font-weight: 600; }

.don-badge {
    display: inline-block; background-color: #fff7ed; color: var(--don-brand-accent);
    padding: 5px 12px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; margin-bottom: 12px;
}
.don-page-title { font-size: 2.25rem; font-weight: 800; color: var(--don-navy-dark); margin: 0 0 12px 0; letter-spacing: -0.5px; }
.don-page-excerpt { font-size: 1.05rem; color: var(--don-charcoal); line-height: 1.6; margin: 0; max-width: 850px; }

/* ==========================================================================
   SECTION 2 STYLES: CORE DONATION PORTAL LAYOUT
   ========================================================================== */
.don-master-portal {
    background-color: var(--don-bg-canvas); padding: 55px 0 90px 0;
    border-bottom: 2px solid var(--dir-text-muted);
    
}

/* LAYER 1: Full-width Header Description Block Styling rules */
.don-identity-row {
    background-color: var(--don-surface-card); border-radius: 16px;
    border: 1px solid var(--don-line-border); padding: 35px; margin-bottom: 40px; text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.01);
}
.don-main-title { font-size: 1.75rem; font-weight: 800; color: var(--don-navy-dark); margin: 0 0 4px 0; }
.don-main-subtitle { font-size: 1rem; font-weight: 600; color: var(--don-brand-accent); margin: 0 0 16px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.don-title-divider { width: 60px; height: 3px; background-color: var(--don-brand-accent); margin: 0 auto 18px auto; border-radius: 2px; }
.don-main-description { font-size: 1rem; color: var(--don-charcoal); line-height: 1.6; max-width: 900px; margin: 0 auto; }

/* LAYERS 2 & 3: Two Column Split Matrix configuration */
.don-split-grid {
    display: grid; grid-template-columns: 1fr 500px; gap: 35px; align-items: flex-start;
}

/* --------------------------------------------------------------------------
   LEFT COLUMN PART: EXPENDITURE TRANSPARENCY SHIELD BLOCKS
   -------------------------------------------------------------------------- */
.don-purpose-column { display: flex; flex-direction: column; gap: 20px; }

.don-info-card {
    background-color: var(--don-surface-card); border: 1px solid var(--don-line-border);
    border-radius: 14px; padding: 24px; display: flex; gap: 18px;
}
.don-card-icon-wrap {
    width: 48px; height: 48px; border-radius: 10px; background-color: #fff7ed;
    color: var(--don-brand-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.don-card-icon-wrap span { font-size: 24px; }
.don-card-icon-wrap.icon-accent-blue { background-color: #f0fdf4; color: #16a34a; }

.don-card-body { flex-grow: 1; }
.don-card-title { font-size: 1.15rem; font-weight: 700; color: var(--don-navy-dark); margin: 0 0 10px 0; }
.don-card-text { font-size: 0.92rem; color: var(--don-charcoal); line-height: 1.5; margin: 0 0 14px 0; }

/* Mini Allocation Item Row Structure metrics tracker */
.don-allocation-list { list-style: none; padding: 0; margin: 15px 0 0 0; display: flex; flex-direction: column; gap: 10px; }
.don-allocation-list li {
    display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem;
    padding: 10px 14px; background-color: var(--don-bg-canvas); border-radius: 8px; border-left: 3px solid #16a34a;
}
.alloc-title { color: var(--don-charcoal); font-weight: 600; }
.alloc-pct { background-color: var(--don-surface-card); color: #16a34a; font-weight: 700; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; border: 1px solid var(--don-line-border); }

/* --------------------------------------------------------------------------
   RIGHT COLUMN PART: MASTER TRANSACTION INTAKE FORM
   -------------------------------------------------------------------------- */
.don-form-surface {
    background-color: var(--don-surface-card); border: 1px solid var(--don-line-border);
    border-radius: 16px; padding: 30px; box-shadow: 0 10px 25px -5px rgba(15,23,42,0.02);
}

.don-form-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--don-line-border);
}
.don-form-header span { color: var(--don-brand-accent); font-size: 22px; }
.don-form-header h4 { font-size: 1.15rem; font-weight: 700; color: var(--don-navy-dark); margin: 0; }

.don-payment-intake { display: flex; flex-direction: column; gap: 18px; }
.don-input-group { display: flex; flex-direction: column; gap: 6px; }
.don-field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.don-input-label { font-size: 0.84rem; font-weight: 600; color: var(--don-charcoal); }
.don-input-label .req { color: #dc2626; font-weight: 700; margin-left: 2px; }

/* Structural Form Standard Fields Design */
.don-field, .don-select-field, .don-textarea-field {
    width: 100%; height: 44px; padding: 0 14px; background-color: var(--don-bg-canvas);
    border: 1px solid var(--don-line-border); border-radius: 8px; font-size: 0.9rem;
    color: var(--don-navy-dark); outline: none; transition: all 0.2s ease-in-out;
}
.don-field::placeholder, .don-textarea-field::placeholder { color: #94a3b8; font-size: 0.85rem; }

/* Focus Highlights Core States */
.don-field:focus, .don-select-field:focus, .don-textarea-field:focus {
    background-color: var(--don-surface-card); border-color: var(--don-brand-accent);
    box-shadow: 0 0 0 3px rgba(225,119,0,0.08);
}

/* Textarea Field block adjustments overrides */
.don-textarea-field { height: 90px; padding: 10px 14px; resize: vertical; font-family: inherit; }

/* Phone Selector Combined Alignment Framework Grid */
.don-phone-input-matrix { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.don-select-field { cursor: pointer; padding: 0 10px; font-weight: 500; color: var(--don-charcoal); }

/* Financial Currency Intake Matrix wrappers */
.don-amount-badge-matrix { position: relative; width: 100%; }
.don-currency-indicator {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 1.1rem; font-weight: 700; color: var(--don-meta-gray); pointer-events: none;
}
.don-field.text-amount-input { padding-left: 32px; font-weight: 700; font-size: 1.1rem; color: var(--don-brand-accent); }

/* Master Checkout Gateway Action Call CTA Button module */
.don-submit-btn-action {
    width: 100%; height: 50px; border: none; background-color: var(--don-brand-accent);
    color: white; border-radius: 10px; font-size: 0.95rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 14px rgba(225,119,0,0.2); transition: all 0.2s ease; margin-top: 5px;
}
.don-submit-btn-action span { font-size: 20px; }
.don-submit-btn-action:hover { background-color: #c86a00; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(225,119,0,0.28); }
.don-submit-btn-action:active { transform: translateY(1px); }

/* ==========================================================================
   RESPONSIVE LAYOUT ENGINE OVERRIDES
   ========================================================================== */
@media (max-width: 1024px) {
    .don-split-grid { grid-template-columns: 1fr; gap: 35px; } /* Stacks intake form below data tracking elements grid smoothly */
    .don-form-surface { max-width: 650px; margin: 0 auto; width: 100%; }
}

@media (max-width: 768px) {
    .don-page-title { font-size: 1.85rem; }
    .don-identity-row { padding: 25px; }
    .don-main-title { font-size: 1.45rem; }
}

@media (max-width: 480px) {
    .don-field-row-2 { grid-template-columns: 1fr; gap: 18px; } /* Form rows separate vertically under mobile dimensions */
    .don-info-card { flex-direction: column; gap: 14px; padding: 20px; }
    .don-form-surface { padding: 20px; }
}