m/* ==========================================================================
   ALR DIGITAL CORE ARCHITECTURE: MAIN PLATFORM STYLING ENGINE
   ========================================================================== */

/* --- Base Layout Fixes --- */
body {
    padding-top: 80px; /* Protects hero views from being hidden by the sticky layout header */
    transition: var(--transition-smooth);
}

/* ==========================================================================
   GLOBAL PLATFORM NAVIGATION HEADER
   ========================================================================== */
.site-global-header {
    background-color: var(--color-bg-nav);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--border-brand-glow);
    transition: var(--transition-smooth);
}
/* Desktop Standard Styles */
    .header-top-utility-bar {
        background: linear-gradient(110deg, #000000 35%, #ffffff 38.1%); 
        padding: 8px 32px; 
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        transition: background 0.3s ease, padding 0.3s ease;
    }
    
    .utility-left-zone {
        font-family: 'Roboto', sans-serif; 
        font-size: 12px; 
        color: #ffffff; 
        font-weight: 900; 
        letter-spacing: 0.08em; 
        text-transform: uppercase;
    }
    
    .utility-right-zone {
        display: flex; 
        align-items: center; 
        gap: 32px;
    }
    
    .utility-social-links {
        display: flex; 
        align-items: center; 
        gap: 16px;
    }
    
    .utility-social-icon {
        color: #005BAC; 
        display: flex; 
        align-items: center; 
        transition: transform 0.2s, opacity 0.2s;
    }
    
    .utility-social-icon:hover {
        opacity: 0.75;
        transform: scale(1.1);
    }
    
    .utility-action-links {
        display: flex; 
        align-items: center; 
        gap: 20px; 
        font-family: 'Roboto', sans-serif; 
        font-size: 12px; 
        font-weight: 700; 
        letter-spacing: 0.08em;
    }
    
    .utility-link-item {
        color: #005BAC; 
        text-decoration: none; 
        display: inline-flex; 
        align-items: center; 
        gap: 6px; 
        transition: color 0.2s, transform 0.2s;
    }
    
    .utility-link-item:hover {
        color: #003b70;
    }

    /* ==========================================
       MOBILE RESPONSIVE MEDIA BREAKPOINT
       ========================================== */
    @media (max-width: 768px) {
        .header-top-utility-bar {
            /* Collapse gradient to solid dark space on mobile to preserve readable contrast */
            background: #000000 !important; 
            padding: 8px 16px;
        }
        
        .utility-left-zone {
            font-size: 11px;
            letter-spacing: 0.05em;
        }
        
        .utility-right-zone {
            gap: 16px;
        }
        
        /* Hide social media icons to keep critical real-estate clear */
        .utility-social-links {
            display: none !important;
        }
        
        .utility-action-links {
            gap: 16px;
        }
        
        /* Force high contrast white links on mobile dark backdrop */
        .utility-link-item {
            color: #ffffff !important; 
            font-size: 11px;
        }
        
        /* Interactive gold pop on mobile tap */
        .utility-link-item:active,
        .utility-link-item:hover {
            color: #FFC700 !important; 
        }
    }
.header-inner-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Brand Identity Dock --- */
.brand-identity-dock {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-crest-anchor {
    display: flex;
    align-items: center;
}

.crest-graphic-asset {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.brand-typography-wrapper {
    display: flex;
    flex-direction: column;
}

.brand-main-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-main);
    display: block;
}

.brand-sub-tagline {
    font-family: var(--font-sub-display);
    font-size: 10px;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-top: 2px;
    display: block;
}

/* ==========================================================================
   CENTRAL NAVIGATION PORTAL & MEGA OVERLAYS
   ========================================================================== */
.main-navigation-portal .nav-links-list {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.nav-links-list li {
    position: relative;
}

.nav-item-link {
    font-family: var(--font-sub-display);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    padding: 12px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-smooth);
}

.dropdown-chevron-icon {
    font-size: 10px;
    color: var(--color-text-muted);
    transition: var(--transition-smooth);
}

/* --- Interactive Hover System Mappings --- */
.nav-item-link:hover,
.mega-dropdown-trigger:hover .nav-item-link {
    color: var(--color-primary);
}

.mega-dropdown-trigger:hover .dropdown-chevron-icon {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.nav-item-link.current-page-link {
    color: var(--color-primary);
    position: relative;
}

/* --- Geometric Layout Underline Highlights --- */
.nav-item-link.current-page-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-gold);
}

/* --- Intelligent Mega Portal Panels --- */
.mega-portal-panel {
    position: absolute;
    top: 100%;
    left: -24px;
    background-color: var(--color-bg-card);
    border: var(--border-brand);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    padding: 24px;
    min-width: 400px;
    display: none;
    z-index: 1010;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.mega-portal-panel.single-panel-width {
    min-width: 220px;
}

.mega-dropdown-trigger:hover .mega-portal-panel {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.mega-portal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

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

.portal-column-title {
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 0.06em;
    margin: 0 0 12px 0;
    border-bottom: 1px solid rgba(27, 82, 204, 0.08);
    padding-bottom: 6px;
}

.portal-sub-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.portal-sub-links a {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.portal-sub-links a:hover {
    color: var(--color-text-main);
    padding-left: 4px;
}

/* ==========================================================================
   RIGHT FLANK UTILITIES & CONVERSION ACTIONS
   ========================================================================== */
.header-utility-right-dock {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* --- Live Sync Score Status Widget --- */
.live-score-status-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(220, 38, 38, 0.05);
    border: 1px solid rgba(220, 38, 38, 0.14);
    padding: 6px 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.live-score-status-widget:hover {
    background-color: rgba(220, 38, 38, 0.09);
    border-color: rgba(220, 38, 38, 0.3);
}

.live-pulse-indicator {
    width: 6px;
    height: 6px;
    background-color: var(--color-live-red);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    animation: livePulseRadarSync 2s infinite;
}

@keyframes livePulseRadarSync {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.live-widget-label {
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-live-red);
    letter-spacing: 0.05em;
}

/* --- High-Impact Supporter Kit Button --- */
.nav-conversion-gear-button {
    background-color: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 18px;
    box-shadow: var(--border-brand-glow);
    transition: var(--transition-smooth);
}

.nav-conversion-gear-button:hover {
    background-color: #0f3ba1;
    transform: translateY(-1px);
    box-shadow: 0px 6px 20px rgba(27, 82, 204, 0.15);
}

/* --- Multi-Device Platform Menu Trigger --- */
.global-menu-drawer-trigger-button {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 4px;
}

.burger-bar-line {
    width: 20px;
    height: 2px;
    background-color: var(--color-text-main);
    transition: var(--transition-smooth);
}

.global-menu-drawer-trigger-button:hover .burger-bar-line:nth-child(1) {
    transform: translateX(4px);
    background-color: var(--color-primary);
}

/* ==========================================================================
   HIDDEN OVERLAY SYSTEM PORTAL DRAWER
   ========================================================================== */
.global-system-drawer-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.global-system-drawer-overlay.drawer-active-state {
    right: 0;
}

.drawer-panel-inner {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background-color: var(--color-bg-card);
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(15, 23, 42, 0.1);
    overflow-y: auto;
}

.drawer-close-button {
    background: none;
    border: none;
    font-size: 36px;
    align-self: flex-end;
    color: var(--color-text-muted);
    line-height: 1;
    transition: var(--transition-smooth);
}

.drawer-close-button:hover {
    color: var(--color-text-main);
    transform: rotate(90deg);
}

.drawer-content-flex {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 20px;
}

.drawer-nav-group h3 {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--color-text-main);
    margin: 0 0 14px 0;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    padding-bottom: 6px;
}

.drawer-nav-group a {
    display: block;
    font-size: 15px;
    color: var(--color-text-muted);
    padding: 8px 0;
    font-weight: 500;
}

.drawer-nav-group a:hover {
    color: var(--color-primary);
    padding-left: 4px;
}

/* ==========================================================================
   FLUID ADAPTIVE MOBILE ENGINE RESPONSIVENESS
   ========================================================================== */

/* --- Tablet and Mid-Size Viewports (992px and down) --- */
@media (max-width: 992px) {
    body {
        padding-top: 72px;
    }

    .main-navigation-portal {
        display: none; /* Collapses the wide horizontal bar menu */
    }

    .header-inner-wrapper {
        padding: 12px 20px;
    }

    .crest-graphic-asset {
        height: 38px;
    }

    .mobile-only-nav-directory {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
}

/* --- Compact Mobile Screens (768px and down) --- */
@media (max-width: 768px) {
    .brand-typography-wrapper {
        display: none; /* Saves space for action items */
    }

    .live-widget-label {
        display: none; /* Keeps only the active status pulse clear */
    }

    .live-score-status-widget {
        padding: 8px;
    }

    .nav-conversion-gear-button {
        font-size: 10px;
        padding: 6px 14px;
    }

    .drawer-panel-inner {
        max-width: 100%; /* Fully wraps the screen real estate smoothly on modern mobile phones */
        padding: 30px 24px;
    }
}

/* --- Desktop Isolation Safeguards --- */
@media (min-width: 993px) {
    .mobile-only-nav-directory {
        display: none;
    }
}
<!-- ==========================================================================
   ALR DIGITAL HERO MOTORWAY (COMPACT INLINE RESPONSIVE ENGINE)
   ========================================================================== -->
.platform-hero-engine-static {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px); /* Clean layout match with your header dimensions */
    min-height: 600px;
    background-color: #000000; /* High contrast fallback backdrop */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Graphic Canvas Processing - Maintaining your premium zoom transition on load */
.hero-static-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 25%;
    background-repeat: no-repeat;
    z-index: 1;
    animation: hero-canvas-zoom-in 7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hero-canvas-zoom-in {
    0% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Split Editorial Content Layout */
.hero-static-content-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Centered content animation entry sequence */
.hero-static-meta-card {
    max-width: 850px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: hero-fade-up-entry 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes hero-fade-up-entry {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Eyebrow: WELCOME TO THE */
.hero-eyebrow-text {
    font-family: 'Bebas Neue', 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: #ffffff;
    margin-bottom: 12px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
}

/* Title: BETWAY PREMIERSHIP (Bebas 80px Black) */
.hero-primary-headline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 8vw, 80px); /* Responsive typography viewport scaling */
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0 0 20px 0;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* Tagline: THE VILLAGE BOYS ARE HERE (Impala Blue 24px Roboto) */
.hero-secondary-tagline {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #005BAC; /* Impala Blue */
    margin: 0 0 40px 0;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Premium Navigation Actions */
.hero-static-action-dock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* Volt Yellow CTA Button */
.hero-btn-volt-yellow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFC700; /* Volt Yellow */
    color: #000000;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 4px;
    border: 2px solid #FFC700;
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.hero-btn-volt-yellow:hover {
    background-color: #e5b300;
    border-color: #e5b300;
    transform: translateY(-2px);
}

/* Black Outline CTA Button */
.hero-btn-dark-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 4px;
    border: 2px solid #ffffff;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hero-btn-dark-outline:hover {
    background-color: #ffffff;
    color: #000000;
    transform: translateY(-2px);
}

/* ==========================================================================
   ADAPTIVE RESPONSIVE RESPONSIVENESS (MOBILE BREAKPOINT)
   ========================================================================== */
@media (max-width: 768px) {
    .platform-hero-engine-static {
        height: 75vh;
        min-height: 500px;
    }

    .hero-static-content-wrapper {
        padding: 0 20px;
    }
    
    .hero-eyebrow-text {
        font-size: 20px;
        letter-spacing: 0.1em;
        margin-bottom: 8px;
    }
    
    .hero-primary-headline {
        font-size: 52px; /* Smooth responsive downscale */
        line-height: 1.0;
        margin-bottom: 12px;
    }
    
    .hero-secondary-tagline {
        font-size: 18px;
        letter-spacing: 0.08em;
        margin-bottom: 32px;
    }
    
    .hero-static-action-dock {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    
    .hero-btn-volt-yellow,
    .hero-btn-dark-outline {
        width: 100%; /* Optimization for touchscreen targets */
        padding: 14px 24px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   ALR DIGITAL - HIGH-DENSITY LATEST NEWS GRID SYSTEM
   ========================================================================== */

.home-news-grid-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 24px;
    box-sizing: border-box;
    background-color: var(--color-bg-main);
}

/* --- Section Top Meta Header --- */
.section-meta-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding-bottom: 20px;
}

.header-titles-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.section-micro-badge {
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 0.08em;
}

.section-display-headline {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.5vh, 36px);
    font-weight: 800;
    color: var(--color-text-main);
    margin: 0;
    letter-spacing: -0.02em;
}

.section-action-hub-link {
    font-family: var(--font-sub-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: var(--transition-smooth);
}

.section-action-hub-link:hover {
    color: var(--color-primary);
    transform: translateX(4px);
}

/* --- Dynamic Grid Scaffold Structural Matrix --- */
.news-wire-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Generates premium 3-column architecture */
    gap: 32px;
}

/* --- Reusable Premium Card Engine --- */
.news-card-node {
    background-color: var(--color-bg-card);
    border: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.01);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.news-card-node:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

/* --- Media Viewport Frame Layer --- */
.card-media-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Golden 16:9 Cinema Aspect Ratio Constraint */
    background-color: rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.news-card-graphic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card-node:hover .news-card-graphic {
    transform: scale(1.04);
}

/* --- Editorial Presentation Base --- */
.card-content-wrapper {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.category-pill-badge {
    background-color: var(--color-text-main);
    color: #ffffff;
    font-family: var(--font-sub-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 2px;
}

.publish-time-stamp {
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.news-card-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px 0;
}

.news-card-title a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.news-card-title a:hover {
    color: var(--color-primary);
}

.news-card-excerpt {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 24px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Uniform multi-line clip to anchor text geometry safely */
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

/* --- Premium Action Activation Trigger --- */
.read-more-action-trigger {
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto; /* Locks button straight to the baseline grid row uniformly */
    transition: var(--transition-smooth);
}

.read-more-action-trigger:hover {
    color: var(--color-gold);
    gap: 10px;
}

/* --- Clean Empty Fallback State Area --- */
.empty-news-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 24px;
    border: 1px dashed rgba(15, 23, 42, 0.1);
    background-color: var(--color-bg-card);
}

.empty-news-state p {
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 600;
    margin: 0;
}

/* ==========================================================================
   FLUID RESPONSIVE MEDIA BREAKPOINTS
   ========================================================================== */
@media (max-width: 1100px) {
    .news-wire-grid {
        grid-template-columns: repeat(2, 1fr); /* Flexes smoothly down to 2 columns on small viewport environments */
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .section-meta-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .news-wire-grid {
        grid-template-columns: 1fr; /* Formats perfectly to vertical stream on mobile configurations */
    }
}/* ==========================================================================
   HIGH-PERFORMANCE INTELLIGENCE MATCH CENTER STYLING
   ========================================================================== */
.platform-match-center-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 80px 24px;
    box-sizing: border-box;
    background-color: var(--color-bg-main);
}

/* --- Top Tier: Featured Match Day Board Layout --- */
.featured-upcoming-hero-card {
    background-color: var(--color-bg-card);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
    padding: 32px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.match-meta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    padding-bottom: 16px;
}

.match-competition-badge {
    background-color: rgba(27, 82, 204, 0.06);
    color: var(--color-primary);
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px;
}

.match-venue-location {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.match-clash-board-grid {
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    align-items: center;
    gap: 24px;
}

.clash-team-dock {
    display: flex;
    align-items: center;
    gap: 24px;
}

.clash-team-dock.home-side { justify-content: flex-end; text-align: right; }
.clash-team-dock.away-side { justify-content: flex-start; text-align: left; }

.clash-crest-asset {
    height: 72px;
    width: auto;
    object-fit: contain;
}

.clash-team-title {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.5vh, 26px);
    font-weight: 800;
    color: var(--color-text-main);
    margin: 0;
}

.clash-timing-center {
    text-align: center;
    background-color: var(--color-bg-main);
    border: 1px solid rgba(15, 23, 42, 0.04);
    padding: 16px 24px;
}

.clash-countdown-label {
    font-family: var(--font-sub-display);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-gold);
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.clash-time-stamp {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primary);
}

.clash-date-stamp {
    font-family: var(--font-sub-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.match-meta-footer {
    display: flex;
    justify-content: center;
}

.match-hub-action-button {
    background-color: var(--color-text-main);
    color: #ffffff;
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 32px;
    transition: var(--transition-smooth);
}

.match-hub-action-button:hover {
    background-color: var(--color-primary);
    transform: translateY(-1px);
}

/* --- Lower Tier: Split Intelligence Grid Infrastructure --- */
.intelligence-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.intelligence-block-panel {
    background-color: var(--color-bg-card);
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 32px;
}

.panel-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    padding-bottom: 12px;
}

.panel-main-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text-main);
    margin: 0;
}

.panel-view-all-link {
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    transition: var(--transition-smooth);
}

.panel-view-all-link:hover { color: var(--color-primary); }
.panel-context-badge { font-family: var(--font-sub-display); font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); }

/* --- Left Sub-Panel: Structured Data Table Mapping --- */
.platform-data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.platform-data-table th {
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 10px 12px;
    background-color: var(--color-bg-main);
}

.platform-data-table td {
    padding: 12px;
    font-size: 13px;
    color: var(--color-text-main);
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

.table-row-highlight td {
    background-color: rgba(27, 82, 204, 0.04);
    color: var(--color-primary);
}

.table-row-highlight td.final-pts-cell {
    color: var(--color-gold);
    font-weight: 800;
}

.col-pos { width: 48px; text-align: center; }
.col-stat { width: 52px; text-align: center; }
.font-numeric { font-variant-numeric: tabular-nums; font-weight: 600; }
.font-bold-text { font-weight: 700; }

/* --- Right Sub-Panel: Live Aggregated Feeds Stack --- */
.performance-panel {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.results-history-stack, .future-fixtures-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.historical-result-row {
    display: flex;
    align-items: center;
    background-color: var(--color-bg-main);
    padding: 10px 16px;
    border: 1px solid rgba(15, 23, 42, 0.03);
}

.result-badge-indicator {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sub-display);
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    margin-right: 16px;
}

.result-badge-indicator.win-state { background-color: #10b981; }
.result-badge-indicator.draw-state { background-color: #64748b; }
.result-badge-indicator.loss-state { background-color: #ef4444; }

.result-opponent-name { font-size: 13px; font-weight: 600; color: var(--color-text-main); }
.result-score-digits { margin-left: auto; font-size: 13px; color: var(--color-text-muted); }

/* Next Fixtures Output Row */
.future-fixture-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: var(--color-bg-main);
    border-left: 3px solid var(--color-primary);
}

.future-date-block {
    display: flex;
    flex-direction: column;
    margin-right: 24px;
}

.future-day { font-size: 13px; font-weight: 700; color: var(--color-text-main); }
.future-time { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.future-opponent-details { display: flex; flex-direction: column; }
.future-team-title { font-size: 13px; font-weight: 700; color: var(--color-text-main); }
.future-venue-tag { font-family: var(--font-sub-display); font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); margin-top: 1px; }

/* ==========================================================================
   FLUID ADAPTIVE VIEWPORT BREAKPOINTS
   ========================================================================== */
@media (max-width: 992px) {
    .match-clash-board-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .clash-team-dock.home-side { justify-content: center; text-align: center; }
    .clash-team-dock.away-side { justify-content: center; text-align: center; }
    .clash-team-dock { flex-direction: column; gap: 8px; }
    
    .intelligence-split-grid {
        grid-template-columns: 1fr; /* Stack panels vertically on smaller viewports */
        gap: 24px;
    }
}

@media (max-width: 576px) {
    .featured-upcoming-hero-card, .intelligence-block-panel {
        padding: 20px 16px;
    }
}

/* ==========================================================================
   PREMIUM MERCHANDISE DROP PREVIEW STYLING
   ========================================================================== */
.platform-shop-preview-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 80px 24px;
    box-sizing: border-box;
    background-color: var(--color-bg-main);
}

.shop-preview-header-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding-bottom: 20px;
    gap: 24px;
    flex-wrap: wrap;
}

.shop-title-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shop-sub-badge {
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 0.08em;
}

.shop-main-heading {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.5vh, 36px);
    font-weight: 800;
    color: var(--color-text-main);
    margin: 0;
}

/* Premium Logistics Tracking Pill */
.shop-logistics-tracker-bar {
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.01);
    transition: var(--transition-smooth);
}

.shop-logistics-tracker-bar:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

/* Vector Asset Viewport Configuration */
.logistics-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.logistics-terminal-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tracker-label-text {
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-main);
    letter-spacing: 0.03em;
}

/* --- Core Drop Grid System --- */
.shop-merchandise-display-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.merchandise-product-card {
    background-color: var(--color-bg-card);
    border: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.merchandise-product-card:hover {
    transform: translateY(-6px);
}

/* Product Media Showcase Constraints */
.product-media-viewport {
    position: relative;
    width: 100%;
    padding-top: 115%; /* Custom Tailored Premium Retail Blueprint Aspect Proportion */
    background-color: var(--color-bg-main);
    overflow: hidden;
}

.product-fluid-asset {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.merchandise-product-card:hover .product-fluid-asset {
    transform: scale(1.05);
}

.product-category-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-text-main);
    font-family: var(--font-sub-display);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Hover Actions Display Panel Overlay */
.product-hover-action-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 4;
    transition: opacity 0.3s ease;
}

.merchandise-product-card:hover .product-hover-action-overlay {
    opacity: 1;
}

.product-overlay-action-btn {
    background-color: #ffffff;
    color: var(--color-text-main);
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 24px;
    transform: translateY(15px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s;
}

.merchandise-product-card:hover .product-overlay-action-btn {
    transform: translateY(0);
}

.product-overlay-action-btn:hover {
    background-color: var(--color-gold);
    color: var(--color-text-main);
}

/* --- Product Metric Details Structural Blocks --- */
.product-meta-details-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-availability-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.stock-status-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.stock-status-indicator-dot.status-instock { background-color: #10b981; }
.stock-status-indicator-dot.status-preorder { background-color: #3b82f6; }
.stock-status-indicator-dot.status-lowstock { background-color: #f59e0b; }

.stock-status-label-text {
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.product-display-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 20px 0;
}

.product-display-title a {
    color: var(--color-text-main);
    transition: var(--transition-smooth);
}

.product-display-title a:hover { color: var(--color-primary); }

.product-pricing-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    border-top: 1px solid rgba(15, 23, 42, 0.04);
    padding-top: 16px;
}

.product-price-amount {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text-main);
}

.font-numeric-tabular { font-variant-numeric: tabular-nums; }

.product-direct-cart-btn {
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    transition: var(--transition-smooth);
}

.product-direct-cart-btn:hover { color: var(--color-gold); }

/* --- Footer High-Impact Context Callout Banner --- */
.shop-global-callout-banner {
    background-color: var(--color-text-main);
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.banner-inner-content-wrapper {
    max-width: 720px;
}

.banner-display-headline {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.banner-descriptive-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.banner-action-redirect-btn {
    background-color: var(--color-gold);
    color: var(--color-text-main);
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 28px;
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.banner-action-redirect-btn:hover {
    background-color: #ffffff;
    transform: translateY(-1px);
}

/* ==========================================================================
   FLUID CONTAINER VIEWPORT BREAKPOINTS
   ========================================================================== */
@media (max-width: 992px) {
    .shop-merchandise-display-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .shop-global-callout-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }
    .banner-action-redirect-btn { width: 100%; text-align: center; box-sizing: border-box; }
}

@media (max-width: 640px) {
    .shop-merchandise-display-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .shop-preview-header-wrapper {
        align-items: flex-start;
        flex-direction: column;
    }
    .shop-logistics-tracker-bar { width: 100%; box-sizing: border-box; }
}
/* ==========================================================================
   INFINITE AUTOMATED SPONSOR CAROUSEL STYLING
   ========================================================================== */
.platform-sponsor-carousel-section {
    width: 100%;
    background-color: var(--color-bg-card);
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    padding: 30px 0;
    overflow: hidden;
    box-sizing: border-box;
}

.sponsor-carousel-container {
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Subtle gradient mask edges for a premium seamless blend */
.sponsor-carousel-container::before,
.sponsor-carousel-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.sponsor-carousel-container::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg-card), rgba(255, 255, 255, 0));
}

.sponsor-carousel-container::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg-card), rgba(255, 255, 255, 0));
}

/* The Animated Core Scrolling Track Layout */
.sponsor-infinite-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 80px;
    padding-left: 40px;
    animation: scroll-ticker 25s linear infinite;
}

/* Pause the scrolling translation engine cleanly during hover interactions */
.sponsor-carousel-container:hover .sponsor-infinite-track {
    animation-play-state: paused;
}

.sponsor-logo-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sponsor-vector-asset {
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    opacity: 0.5;
    filter: grayscale(100%);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.sponsor-logo-slide:hover .sponsor-vector-asset {
    opacity: 1;
    filter: grayscale(0%);
}

/* --- Hardware Accelerated Infinite Loop Keyframes --- */
@keyframes scroll-ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Fluid Viewport Responsiveness adjustments */
@media (max-width: 768px) {
    .platform-sponsor-carousel-section {
        padding: 20px 0;
    }
    .sponsor-infinite-track {
        gap: 48px;
    }
    .sponsor-vector-asset {
        height: 30px;
        max-width: 120px;
    }
}
/* ==========================================================================
   GLOBAL CANVAS FOOTER SYSTEM STYLING
   ========================================================================== */
.platform-global-footer-section {
    width: 100%;
    background-color: #ffffff; /* Crisp White Main Base Canvas */
    padding: 80px 24px 40px 24px;
    box-sizing: border-box;
    color: #0f172a; /* Deep Blue text for clear readability */
    border-top: 4px solid #0f172a; /* Deep Blue primary top border accent */
}

.footer-top-workspace-wrapper {
    max-width: 1400px;
    margin: 0 auto 60px auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}

.footer-identity-branding-block {
    max-width: 420px;
}

.footer-crest-brand-asset {
    height: 80px;
    width: auto;
    object-fit: contain;
    margin-bottom: 20px;
}

.footer-brand-mission-statement {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(15, 23, 42, 0.8); /* Muted Deep Blue for body text */
    margin: 0;
}

/* Newsletter Input Panel Frame */
.footer-newsletter-signup-container {
    background-color: #0f172a; /* Deep Blue container to make the form stand out */
    padding: 32px;
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
}

.newsletter-headline-text {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-gold); /* Yellow accent brings focus to the headline */
    margin: 0 0 6px 0;
}

.newsletter-descriptive-subtext {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7); /* Crisp white description text on dark background */
    margin: 0 0 20px 0;
}

.newsletter-inline-form {
    display: flex;
    width: 100%;
    gap: 12px;
}

.newsletter-input-field {
    flex-grow: 1;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 16px;
    color: #ffffff;
    font-size: 13px;
    box-sizing: border-box;
    transition: var(--transition-smooth);
}

.newsletter-input-field:focus {
    outline: none;
    border-color: var(--color-gold);
    background-color: rgba(255, 255, 255, 0.1);
}

.newsletter-submit-action-btn {
    background-color: var(--color-gold); /* Solid Yellow interactive action button */
    color: #0f172a; /* Deep Blue text inside button for crisp contrast */
    font-family: var(--font-sub-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 24px;
    cursor: pointer;
    border: none;
    transition: var(--transition-smooth);
}

.newsletter-submit-action-btn:hover {
    background-color: #ffffff;
    color: #0f172a;
}

/* --- Directory Navigation Columns Grid --- */
.footer-directory-links-grid {
    max-width: 1400px;
    margin: 0 auto 60px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    border-top: 1px solid rgba(15, 23, 42, 0.1); /* Clear Deep Blue border break line */
    padding-top: 48px;
}

.directory-header-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    color: #0f172a;
    letter-spacing: 0.03em;
    margin: 0 0 20px 0;
}

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

.directory-link-list-stack a {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.7);
    font-weight: 600;
    transition: var(--transition-smooth);
}

.directory-link-list-stack a:hover {
    color: var(--color-gold); /* Link highlights to yellow on hover */
    padding-left: 2px;
}

/* --- Bottom Tier Compliance Layout Row --- */
.footer-compliance-base-bar {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
    padding-top: 32px;
    gap: 24px;
    flex-wrap: wrap;
}

.copyright-legal-text {
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.5);
    margin: 0;
}

.consultancy-credit-text {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a; /* Bold Deep Blue consulting identifier text */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.legal-policy-links-group {
    display: flex;
    gap: 24px;
}

.legal-policy-links-group a {
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.5);
    transition: var(--transition-smooth);
}

.legal-policy-links-group a:hover {
    color: #0f172a;
}

/* ==========================================================================
   FLUID RESPONSIVENESS FOOTER SCREEN BREAKPOINTS
   ========================================================================== */
@media (max-width: 992px) {
    .footer-top-workspace-wrapper {
        flex-direction: column;
        gap: 32px;
    }
    .footer-identity-branding-block, 
    .footer-newsletter-signup-container {
        max-width: 100%;
    }
    .footer-directory-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .platform-global-footer-section {
        padding: 48px 16px 32px 16px;
    }
    .footer-directory-links-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .newsletter-inline-form {
        flex-direction: column;
    }
    .newsletter-submit-action-btn {
        padding: 14px 0;
    }
    .footer-compliance-base-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}
/* ==========================================================================
   KRUGER UNITED FC - PUBLIC MEDIA HUB & GRID SYSTEM
   ========================================================================== */

/* --- Grid Scaffold Layout --- */
.news-wire-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 32px;
    padding: 40px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Clean Empty Fallback Area --- */
.empty-news-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 24px;
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
}

.empty-news-state p {
    color: #64748b;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* --- Reusable Premium Card Node --- */
.news-card-node {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 2px 4px -2px rgba(15, 23, 42, 0.02);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.news-card-node:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 20px -8px rgba(15, 23, 42, 0.08);
}

/* --- Card Image Container Matrix --- */
.card-media-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Golden 16:9 Aspect Ratio Boundary */
    background-color: #0f172a;
    overflow: hidden;
}

.news-card-graphic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card-node:hover .news-card-graphic {
    transform: scale(1.04);
}

/* --- Content Wrapper Area --- */
.card-content-wrapper {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --- Meta Tag & Timestamp Row --- */
.card-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.category-pill-badge {
    background-color: #f1f5f9;
    color: #0f172a;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 4px;
}

.publish-time-stamp {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

/* --- Typography Spacing Matrix --- */
.news-card-title {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.news-card-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.15s ease;
}

.news-card-title a:hover {
    color: #e2b810; /* Brand Gold Accent */
}

.news-card-excerpt {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
    flex-grow: 1; /* Pushes action link down uniformly */
}

/* --- Micro Action Trigger --- */
.read-more-action-trigger {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease, color 0.15s ease;
}

.read-more-action-trigger:hover {
    color: #e2b810;
    gap: 8px;
}
/* --- Structural Content Alignment Contraints --- */
.layout-constrain-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Context Media Hero Canopy Layout --- */
.page-context-hero-strip {
    background-color: #0f172a; /* Deep Slate Base matching Kruger United structural look */
    color: #ffffff;
    padding: 64px 0;
    border-bottom: 4px solid #e2b810; /* Accent Gold Strip Matrix */
    text-align: left;
}

.hero-strip-constrain {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.page-context-hero-strip h2 {
    margin: 0;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.page-context-hero-strip p {
    margin: 12px 0 0 0;
    font-size: 16px;
    color: #94a3b8;
    max-width: 680px;
    line-height: 1.6;
}

.main-content-layout-hub {
    background-color: #fafbfc;
    padding-bottom: 80px;
}
/* --- Responsive Adjustments --- */
@media (max-width: 480px) {
    .news-wire-grid {
        grid-template-columns: 1fr;
        padding: 20px 16px;
    }
}
/* ==========================================================================
   ALR DIGITAL - PREMIUM ASYMMETRIC SPLIT SCREEN ARTICLE STYLING
   ========================================================================== */

.editorial-split-viewport {
    background-color: #fafbfc;
    padding: 60px 24px 100px 24px;
    box-sizing: border-box;
    width: 100%;
}

.editorial-split-grid-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px; /* Precise asymmetric split ratio */
    gap: 40px;
    align-items: flex-start;
}

/* --- Left Column Layout Structure --- */
.editorial-primary-stream-canvas {
    width: 100%;
}

.editorial-core-container {
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 4px 30px rgba(15, 23, 42, 0.01);
    padding: 48px;
    box-sizing: border-box;
}

.editorial-header-deck {
    margin-bottom: 32px;
}

.editorial-badge-row {
    margin-bottom: 16px;
}

.editorial-pill-badge {
    background-color: var(--color-primary, #0f172a);
    color: #ffffff;
    font-family: var(--font-sub-display, sans-serif);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    border-radius: 2px;
}

.editorial-main-headline {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    color: var(--color-text-main, #0f172a);
    line-height: 1.25;
    margin: 0 0 24px 0;
    letter-spacing: -0.03em;
}

.editorial-attribution-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 14px 0;
    font-size: 13px;
    color: var(--color-text-muted, #64748b);
}

.meta-author-node strong {
    color: var(--color-text-main, #0f172a);
}

/* --- Cinema Media Frame Layout --- */
.editorial-media-canopy {
    width: 100%;
    max-height: 440px;
    overflow: hidden;
    margin-bottom: 40px;
    background-color: #0f172a;
}

.canopy-fluid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Editorial Rich Typography Layouts --- */
.editorial-body-content-frame {
    font-size: 16px;
    line-height: 1.85;
    color: #334155;
}

.editorial-lead-intro-snippet {
    font-size: 18px;
    line-height: 1.65;
    font-weight: 600;
    color: var(--color-text-main, #0f172a);
    margin: 0 0 32px 0;
    border-left: 4px solid var(--color-gold, #e2b810);
    padding-left: 20px;
}

.editorial-rich-text-block {
    white-space: pre-wrap;
}

/* --- Right Column Layout Structure (Persistent Read More) --- */
.editorial-discovery-sidebar-deck {
    width: 100%;
}

.sidebar-sticky-rail-scroller {
    position: sticky;
    top: 40px; /* Fixes position dynamically during viewport scrolling loops */
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    padding: 32px 24px;
    box-sizing: border-box;
}

.sidebar-section-header-node {
    margin-bottom: 24px;
}

.sidebar-section-title {
    font-family: var(--font-display, sans-serif);
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text-main, #0f172a);
    margin: 0 0 8px 0;
    letter-spacing: 0.02em;
}

.sidebar-accent-line {
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--color-gold, #e2b810);
}

/* --- Sidebar Micro Cards System --- */
.sidebar-cards-loop-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-micro-card-node {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 20px;
}

.sidebar-micro-card-node:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-card-routing-mask {
    display: flex;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}

.sidebar-card-thumbnail-frame {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #0f172a;
}

.sidebar-thumbnail-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-card-routing-mask:hover .sidebar-thumbnail-fluid {
    transform: scale(1.08);
}

.sidebar-card-textual-payload {
    display: flex;
    flex-direction: column;
}

.sidebar-card-meta-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-gold, #e2b810);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.sidebar-card-inline-title {
    font-family: var(--font-display, sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text-main, #0f172a);
    margin: 0 0 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Truncates cleanly if headline title is long */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.sidebar-card-routing-mask:hover .sidebar-card-inline-title {
    color: var(--color-gold, #e2b810);
}

.sidebar-card-timestamp {
    font-size: 11px;
    color: var(--color-text-muted, #64748b);
}

/* --- Empty Fallback Layout Formats --- */
.sidebar-empty-fallback-state {
    padding: 20px 0;
    text-align: center;
}

.fallback-messaging {
    font-size: 13px;
    color: var(--color-text-muted, #64748b);
    margin: 0 0 12px 0;
}

.fallback-action-redirect-btn {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary, #0f172a);
    text-decoration: underline;
}

/* --- Structural Closure Footnotes --- */
.editorial-closure-tray {
    margin-top: 56px;
    border-top: 1px solid #f1f5f9;
    padding-top: 32px;
}

.editorial-back-wire-trigger {
    font-family: var(--font-sub-display, sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary, #0f172a);
    text-decoration: none;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    transition: var(--transition-smooth, all 0.2s ease);
}

.editorial-back-wire-trigger:hover {
    color: var(--color-gold, #e2b810);
    transform: translateX(-4px);
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS SYSTEM
   ========================================================================== */

@media (max-width: 1024px) {
    .editorial-split-grid-wrapper {
        grid-template-columns: 1fr; /* Collapses smoothly to single stream layout on tablets */
        gap: 48px;
    }
    
    .sidebar-sticky-rail-scroller {
        position: static; /* Disables absolute tracking behavior when collapsed */
        padding: 0;
        border: none;
        background: transparent;
    }
}

@media (max-width: 768px) {
    .editorial-split-viewport {
        padding: 32px 16px 64px 16px;
    }
    
    .editorial-core-container {
        padding: 24px;
    }
    
    .editorial-attribution-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
/* ==========================================================================
   ALR DIGITAL - INTERACTIVE LEGACY TIMELINE LAYOUT STYLING
   ========================================================================== */

/* --- Hero Media Canopy Header --- */
.legacy-canopy-hero {
    width: 100%;
    height: 45vh;
    min-height: 360px;
    background-image: url('../images/KaNyamazane-Stadium.jpg'); /* Perfectly resolves path from assets/css/ to assets/images/ */
    background-size: cover;
    background-position: center;
    position: relative;
}

.legacy-canopy-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, #0f172a 100%);
    display: flex;
    align-items: flex-end;
    padding: 60px 24px;
    box-sizing: border-box;
}

.legacy-hero-content-alignment {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.legacy-sub-badge {
    color: var(--color-gold, #e2b810);
    font-family: var(--font-sub-display, sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-block;
    margin-bottom: 12px;
}

.legacy-main-title {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.legacy-hero-description {
    color: #94a3b8;
    max-width: 600px;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* --- Timeline Architecture Track --- */
.legacy-timeline-viewport {
    background-color: #0f172a; /* Premium dark theme setting to make details pop */
    padding: 100px 24px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.timeline-central-spine-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.timeline-vertical-backbone {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--color-gold, #e2b810) 0%, rgba(226, 184, 16, 0.1) 100%);
    transform: translateX(-50%);
}

/* --- Milestone Rows Interlocking System --- */
.timeline-milestone-row {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 60px;
    position: relative;
    width: 50%; /* Constrains elements exactly inside their half of the split container */
    box-sizing: border-box;
}

.timeline-milestone-row.row-alignment-left {
    align-self: flex-start;
    padding-right: 45px;
    left: 0;
}

.timeline-milestone-row.row-alignment-right {
    align-self: flex-end;
    padding-left: 45px;
    left: 50%;
    justify-content: flex-start;
}

/* --- Central Interactive Node Points --- */
.milestone-marker-dot {
    position: absolute;
    top: 24px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #0f172a;
    border: 3px solid var(--color-gold, #e2b810);
    z-index: 5;
}

.row-alignment-left .milestone-marker-dot {
    right: -7px;
}

.row-alignment-right .milestone-marker-dot {
    left: -7px;
}

/* --- Editorial Cards Blueprint --- */
.milestone-card-capsule {
    background-color: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 32px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.milestone-card-capsule:hover {
    transform: translateY(-4px);
    border-color: rgba(226, 184, 16, 0.2);
}

.milestone-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.milestone-year-badge {
    background-color: rgba(226, 184, 16, 0.1);
    color: var(--color-gold, #e2b810);
    font-family: var(--font-sub-display, sans-serif);
    font-weight: 700;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 2px;
}

.milestone-card-heading {
    font-family: var(--font-display, sans-serif);
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.milestone-textual-paragraph {
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE LAYOUT CONSTRAINTS FOR MOBILE TIME TRACKING
   ========================================================================== */

@media (max-width: 768px) {
    .timeline-vertical-backbone {
        left: 16px; /* Flattens spine to the far left margin edge */
    }

    .timeline-milestone-row {
        width: 100% !important;
        left: 0 !important;
        padding-left: 48px !important;
        padding-right: 0 !important;
        justify-content: flex-start !important;
    }

    .row-alignment-left .milestone-marker-dot,
    .row-alignment-right .milestone-marker-dot {
        left: 9px !important;
        right: auto !important;
    }
    
    .milestone-card-capsule {
        padding: 24px;
    }
}
/* ==========================================================================
   ADVANCED ACCOLADES & HONOURS ROOM MODULAR ARCHITECTURE
   ========================================================================== */
.accolades-viewport-container {
    padding: 80px 20px;
    min-height: 75vh;
}

.accolades-hero-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 70px auto;
}

.accolades-hero-header h1 {
    margin-bottom: 20px;
}

.trophy-cabinet-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
    max-width: 1200px;
    margin: 0 auto;
}

.trophy-showcase-card {
    background: #12141c; /* Inherits main panel surface theme tint */
    border: 1px solid #1e2230;
    border-radius: 12px;
    padding: 50px 35px;
    text-align: center;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.trophy-showcase-card:hover {
    transform: translateY(-8px);
    border-color: #2e354a;
}

/* Graphic Presentation Engine & Shadow Backdrop Node */
.trophy-graphic-dock {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trophy-shadow-backdrop-layer {
    position: absolute;
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(8px);
    z-index: 1;
    transition: transform 0.4s ease, background 0.4s ease;
}

.trophy-showcase-card:hover .trophy-shadow-backdrop-layer {
    transform: scale(1.3);
    background: radial-gradient(circle, rgba(255, 204, 0, 0.4) 0%, transparent 70%);
}

.trophy-vector-asset {
    width: 52px;
    height: 52px;
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.trophy-showcase-card:hover .trophy-vector-asset {
    transform: scale(1.12) rotate(4deg);
}

/* Color Tokens for Vectors */
.gold-accent-fill {
    fill: #ffcc00;
}

.steel-accent-fill {
    fill: #a0aabf;
}

/* Text Element Architecture */
.trophy-campaign-tag {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(255, 204, 0, 0.08);
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffcc00;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    margin-bottom: 20px;
}

.trophy-title-node {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 15px;
}

.trophy-historical-brief {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #8a92a6; /* Matches core global site text shade */
    margin: 0;
}

@media (max-width: 768px) {
    .accolades-viewport-container {
        padding: 50px 15px;
    }
    .trophy-cabinet-matrix {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}
/* ==========================================================================
   STADIUM INFRASTRUCTURE CORE PLATFORM MODULE
   ========================================================================== */
.stadium-viewport-container {
    padding: 80px 20px;
    min-height: 75vh;
}

.stadium-hero-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 70px auto;
}

.stadium-hero-header .brand-display-headline {
    font-family: var(--font-display);
    color: var(--color-text-main);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.stadium-hero-header .brand-body-paragraph-muted {
    font-family: var(--font-body);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

.stadium-spotlight-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}

/* Media/SaaS Interface Interactive Map Canvas Block */
.stadium-media-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.stadium-interactive-map-frame {
    background: var(--color-bg-card);
    border: var(--border-brand);
    box-shadow: var(--border-brand-glow);
    border-radius: var(--radius-chiseled);
    height: 400px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.stadium-embed-element {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1) contrast(1.1) invert(0); /* Clean architectural monochrome mapping */
    transition: var(--transition-smooth);
}

.stadium-embed-element:hover {
    filter: grayscale(0) contrast(1) invert(0);
}

.stadium-shadow-backdrop {
    position: absolute;
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
    background: radial-gradient(circle, var(--color-kit-volt-glow) 0%, transparent 80%);
    border-radius: 50%;
    filter: blur(15px);
    z-index: 1;
}

/* Action Trigger Elements Layer */
.stadium-navigation-action-tray {
    margin-top: 15px;
    position: relative;
    z-index: 2;
}

.stadium-routing-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--color-primary);
    color: var(--color-bg-card);
    font-family: var(--font-sub-display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 16px 30px;
    border-radius: var(--radius-chiseled);
    border: 1px solid transparent;
    transition: var(--transition-smooth);
}

.stadium-routing-trigger-btn:hover {
    background: var(--color-secondary);
    box-shadow: var(--border-volt-glow);
}

.navigation-arrow-vector {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transform: rotate(45deg);
}

/* Text Content Component Architecture */
.stadium-location-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-kit-volt-glow);
    border: var(--border-volt-accent);
    border-radius: var(--radius-chiseled);
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.stadium-title-node {
    font-family: var(--font-sub-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.stadium-description-text {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    margin: 0 0 40px 0;
}

/* Performance Statistics Grid Block */
.stadium-metrics-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    border-top: var(--border-brand);
    padding-top: 35px;
}

.metric-data-node {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-value-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-numeric-header {
    font-family: var(--font-sub-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

/* Responsive Structural Breakpoints */
@media (max-width: 992px) {
    .stadium-spotlight-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    
    .stadium-interactive-map-frame {
        height: 320px;
    }
}

@media (max-width: 576px) {
    .stadium-viewport-container {
        padding: 50px 15px;
    }
    
    .stadium-title-node {
        font-size: 1.65rem;
    }
    
    .stadium-metrics-matrix {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}
/* ==========================================================================
   MANAGEMENT & EXECUTIVE LEADERSHIP MODULE
   ========================================================================== */
.management-viewport-container {
    padding: 80px 20px;
    min-height: 75vh;
}

.management-hero-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 70px auto;
}

.management-context-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-kit-volt-glow);
    border: var(--border-volt-accent);
    border-radius: var(--radius-chiseled);
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.management-hero-header .brand-display-headline {
    font-family: var(--font-display);
    color: var(--color-text-main);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.management-hero-header .brand-body-paragraph-muted {
    font-family: var(--font-body);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Profiles Grid Structure */
.management-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Chiseled Profile UI Cards */
.management-profile-card {
    background: var(--color-bg-card);
    border: var(--border-brand);
    box-shadow: var(--border-brand-glow);
    border-radius: var(--radius-chiseled);
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    will-change: transform, border-color, box-shadow;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.management-profile-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-gold);
    box-shadow: var(--border-volt-glow);
}

/* Chiseled Monochromatic Avatar Wrapper */
.profile-visual-wrapper {
    margin-bottom: 25px;
    width: 110px;
    height: 110px;
    flex-shrink: 0; /* Prevents container distortion under varying image dimensions */
    background: var(--color-bg-main);
    border: 1px dashed rgba(27, 82, 204, 0.25);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-chiseled);
    overflow: hidden; /* Ensures object-fit crops perfectly to the chiseled bounds */
}

/* Strict Image Aspect Handling Layer */
.profile-visual-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--radius-chiseled);
}

.profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-chiseled);
}

.profile-vector-icon {
    width: 44px;
    height: 44px;
    fill: var(--color-bg-card);
}

/* Metadata Text Elements Layout */
.profile-metadata-block {
    width: 100%;
}

.profile-name-heading {
    font-family: var(--font-sub-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 8px 0;
}

.profile-role-badge {
    display: inline-block;
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--color-gold);
}

.profile-bio-summary {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

/* SVG Connection Engines */
.profile-connections-tray {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.85rem;
}

.profile-connections-tray a {
    text-decoration: none;
    color: var(--primary, #1b52cc);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.connection-svg-icon {
    display: inline-block;
    vertical-align: middle;
    will-change: transform, stroke;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Refined Interactivity: Fixed improper native transforms */
.profile-connections-tray a:hover {
    color: var(--color-gold);
}

.profile-connections-tray a:hover .connection-svg-icon {
    transform: scale(1.08);
    stroke: var(--color-gold);
}

/* Responsive Structural Breakpoints */
@media (max-width: 768px) {
    .management-viewport-container {
        padding: 50px 15px;
    }
    
    .management-hero-header .brand-display-headline {
        font-size: 2rem;
    }
    
    .management-profile-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}
/* ==========================================================================
   YOUTH ACADEMY HUB PORTAL MODULE
   ========================================================================== */
.academy-viewport-container {
    padding: 80px 20px;
    min-height: 75vh;
}

.academy-hero-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 70px auto;
}

.academy-context-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-kit-volt-glow);
    border: var(--border-volt-accent);
    border-radius: var(--radius-chiseled);
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.academy-hero-header .brand-display-headline {
    font-family: var(--font-display);
    color: var(--color-text-main);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.academy-hero-header .brand-body-paragraph-muted {
    font-family: var(--font-body);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Academy Grid Blueprint */
.academy-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Chiseled Academy Structural Cards */
.academy-pillar-card {
    background: var(--color-bg-card);
    border: var(--border-brand);
    box-shadow: var(--border-brand-glow);
    border-radius: var(--radius-chiseled);
    padding: 45px 35px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    transition: var(--transition-smooth);
}

.academy-pillar-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: var(--border-volt-glow);
}

/* Icon Presentation Dock */
.pillar-visual-header {
    width: 60px;
    height: 60px;
    background: var(--color-kit-volt-glow);
    border: var(--border-volt-accent);
    border-radius: var(--radius-chiseled);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.pillar-vector-icon {
    width: 28px;
    height: 28px;
    fill: var(--color-primary);
}

/* Text Configuration Mappings */
.pillar-title-heading {
    font-family: var(--font-sub-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 12px 0;
}

.pillar-description-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0;
}

/* Responsive Structural Breakpoints */
@media (max-width: 768px) {
    .academy-viewport-container {
        padding: 50px 15px;
    }
    
    .academy-hero-header .brand-display-headline {
        font-size: 2rem;
    }
    
    .academy-pillars-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}
/* ==========================================================================
   FIRST TEAM SQUAD REGISTRY MODULE
   ========================================================================== */
.squad-viewport-container {
    padding: 80px 20px;
    min-height: 75vh;
}

.squad-hero-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 70px auto;
}

.squad-context-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-kit-volt-glow);
    border: var(--border-volt-accent);
    border-radius: var(--radius-chiseled);
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.squad-hero-header .brand-display-headline {
    font-family: var(--font-display);
    color: var(--color-text-main);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.squad-hero-header .brand-body-paragraph-muted {
    font-family: var(--font-body);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Squad Dynamic Profile Matrix Grid */
.squad-registry-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Chiseled Athlete Visual Cards */
.player-profile-card {
    background: var(--color-bg-card);
    border: var(--border-brand);
    box-shadow: var(--border-brand-glow);
    border-radius: var(--radius-chiseled);
    overflow: hidden;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.player-profile-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-gold);
    box-shadow: var(--border-volt-glow);
}

/* Graphic Aspect Canvas Base */
.player-visual-canvas {
    position: relative;
    width: 100%;
    height: 320px;
    background: var(--color-bg-main);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: var(--border-brand);
    overflow: hidden;
}

/* Chiseled Tactical Squad Number Tag */
.player-kit-number-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.08); /* Sophisticated subtle branding watermark */
    line-height: 1;
    transition: var(--transition-smooth);
    z-index: 2;
}

.player-profile-card:hover .player-kit-number-badge {
    color: var(--color-primary);
    transform: scale(1.05);
}

.player-avatar-silhouette {
    width: 100%;
    height: 80%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0.35;
    transition: var(--transition-smooth);
}

.player-profile-card:hover .player-avatar-silhouette {
    opacity: 0.85;
}

.silhouette-vector-icon {
    width: 160px;
    height: 160px;
    fill: var(--color-text-main);
}

/* Information Tray Segment */
.player-metadata-tray {
    padding: 25px 20px;
    background: var(--color-bg-card);
}

.player-role-indicator {
    font-family: var(--font-sub-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
}

.player-display-name {
    font-family: var(--font-sub-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
    letter-spacing: -0.3px;
}

/* Responsive Adaptive Layout Breakpoints */
@media (max-width: 768px) {
    .squad-viewport-container {
        padding: 50px 15px;
    }
    
    .squad-hero-header .brand-display-headline {
        font-size: 2rem;
    }
    
    .squad-registry-matrix {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }
    
    .player-visual-canvas {
        height: 280px;
    }
}
/* ==========================================================================
   TECHNICAL & MEDICAL PERFORMANCE MODULE
   ========================================================================== */
.technical-viewport-container {
    padding: 80px 20px;
    min-height: 75vh;
}

.technical-hero-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 70px auto;
}

.technical-context-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-kit-volt-glow);
    border: var(--border-volt-accent);
    border-radius: var(--radius-chiseled);
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.technical-hero-header .brand-display-headline {
    font-family: var(--font-display);
    color: var(--color-text-main);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.technical-hero-header .brand-body-paragraph-muted {
    font-family: var(--font-body);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Structural Segment Layouts */
.staff-segment-wrapper {
    max-width: 1200px;
    margin: 0 auto 60px auto;
}

.segment-meta-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
}

.segment-title-node {
    font-family: var(--font-sub-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    white-space: nowrap;
}

.segment-accent-line {
    height: 1px;
    background: var(--color-primary);
    opacity: 0.15;
    width: 100%;
}

/* Card Matrix Architecture */
.staff-card-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
}

.staff-profile-node {
    background: var(--color-bg-card);
    border: var(--border-brand);
    box-shadow: var(--border-brand-glow);
    border-radius: var(--radius-chiseled);
    padding: 30px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 20px;
    align-items: center;
    transition: var(--transition-smooth);
    position: relative;
}

.staff-profile-node:hover {
    transform: translateX(4px);
    box-shadow: var(--border-volt-glow);
}

/* Accent Indicators Mapping to Roles */
.tactical-card-accent:hover {
    border-left: 3px solid var(--color-primary);
}

.medical-card-accent:hover {
    border-left: 3px solid var(--color-gold);
}

/* Icon Bay Framework */
.staff-visual-bay {
    width: 80px;
    height: 80px;
    background: var(--color-bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-chiseled);
}

.staff-silhouette-holder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.25;
    transition: var(--transition-smooth);
}

.staff-profile-node:hover .staff-silhouette-holder {
    opacity: 0.85;
}

.staff-vector-icon {
    width: 32px;
    height: 32px;
    fill: var(--color-text-main);
}

.staff-profile-node:hover .tactical-card-accent .staff-vector-icon {
    fill: var(--color-primary);
}

/* Information Layout Configuration */
.staff-info-tray {
    display: flex;
    flex-direction: column;
}

.staff-role-label {
    font-family: var(--font-sub-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.staff-display-name {
    font-family: var(--font-sub-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 6px 0;
    letter-spacing: -0.3px;
}

.staff-credentials-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
}

/* Responsive Grid Adjustments */
@media (max-width: 768px) {
    .technical-viewport-container {
        padding: 50px 15px;
    }
    
    .technical-hero-header .brand-display-headline {
        font-size: 2rem;
    }

    .segment-title-node {
        font-size: 1.2rem;
    }
    
    .staff-card-matrix {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .staff-profile-node {
        padding: 20px;
    }
}
/* ==========================================================================
   MATCH FIXTURES & TIMELINE MODULE ARCHITECTURE
   ========================================================================== */
.fixtures-viewport-container {
    padding: 80px 20px;
    min-height: 75vh;
}

.fixtures-hero-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 70px auto;
}

.fixtures-context-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-kit-volt-glow);
    border: var(--border-volt-accent);
    border-radius: var(--radius-chiseled);
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.fixtures-hero-header .brand-display-headline {
    font-family: var(--font-display);
    color: var(--color-text-main);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.fixtures-hero-header .brand-body-paragraph-muted {
    font-family: var(--font-body);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Timeline Structural Separators */
.fixtures-timeline-wrapper {
    max-width: 950px;
    margin: 0 auto 60px auto;
}

.fixtures-section-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.fixtures-title-node {
    font-family: var(--font-sub-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    white-space: nowrap;
}

.fixtures-accent-line {
    height: 1px;
    background: var(--color-primary);
    opacity: 0.15;
    width: 100%;
}

/* Match Grid/Stack Mechanics */
.match-matrix-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.match-schedule-card {
    background: var(--color-bg-card);
    border: var(--border-brand);
    box-shadow: var(--border-brand-glow);
    border-radius: var(--radius-chiseled);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    transition: var(--transition-smooth);
}

.match-schedule-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--border-volt-glow);
}

.tactical-card-blueprint {
    border-left: 4px solid var(--color-primary);
}

.result-card-blueprint {
    border-left: 4px solid var(--color-text-muted);
}

/* Meta Data Information Bar */
.match-meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 15px;
}

.competition-tag {
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-muted-tag {
    color: var(--color-text-muted);
}

.match-datetime {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Core Competitor Scoreboard Layout */
.match-versus-display {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.team-competitor {
    font-family: var(--font-sub-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.home-side { text-align: right; }
.away-side { text-align: left; }

.versus-separator-badge {
    padding: 6px 12px;
    background: var(--color-bg-main);
    border: var(--border-brand);
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.scoreline-numerical-display {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-main);
    background: var(--color-bg-main);
    padding: 4px 20px;
    letter-spacing: 2px;
}

/* Tray Action Footers */
.match-footer-tray {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-main);
    padding: 15px 20px;
    margin: 0 -30px -30px -30px;
}

.venue-location-node {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.venue-icon {
    width: 16px;
    height: 16px;
    fill: var(--color-text-muted);
}

.match-action-btn {
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 20px;
    transition: var(--transition-smooth);
}

.primary-action {
    background: var(--color-primary);
    color: var(--color-bg-card);
}

.primary-action:hover {
    background: var(--color-secondary);
}

.match-result-badge-status {
    font-family: var(--font-sub-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-live-red);
    text-transform: uppercase;
}

/* Responsive Structural Breakpoints */
@media (max-width: 768px) {
    .fixtures-viewport-container { padding: 50px 15px; }
    .fixtures-hero-header .brand-display-headline { font-size: 2rem; }
    
    .match-versus-display {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .home-side, .away-side { text-align: center; }
    .match-meta-info { flex-direction: column; gap: 8px; text-align: center; }
    .match-footer-tray { flex-direction: column; gap: 15px; text-align: center; }
}
/* ==========================================================================
   MEDIA GALLERY MASONRY ENGINE ARCHITECTURE
   ========================================================================== */
.gallery-viewport-container {
    padding: 80px 20px;
    min-height: 75vh;
}

.gallery-hero-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 70px auto;
}

.gallery-context-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-kit-volt-glow);
    border: var(--border-volt-accent);
    border-radius: var(--radius-chiseled);
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.gallery-hero-header .brand-display-headline {
    font-family: var(--font-display);
    color: var(--color-text-main);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.gallery-hero-header .brand-body-paragraph-muted {
    font-family: var(--font-body);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Asymmetric CSS Grid Matrix Pipeline */
.gallery-asymmetric-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-auto-rows: 240px;
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Structural Layout Card Variations */
.grid-span-standard {
    grid-column: span 1;
    grid-row: span 1;
}

.grid-span-wide {
    grid-column: span 2;
    grid-row: span 1;
}

.grid-span-tall {
    grid-column: span 1;
    grid-row: span 2;
}

/* Premium Chiseled Card Blocks */
.gallery-asset-card {
    position: relative;
    background: var(--color-bg-card);
    border: var(--border-brand);
    box-shadow: var(--border-brand-glow);
    border-radius: var(--radius-chiseled);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.gallery-asset-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
    box-shadow: var(--border-volt-glow);
}

/* Image Visual Framework Base Canvas */
.asset-visual-container {
    width: 100%;
    height: 100%;
    background: var(--color-bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.asset-aura-backdrop {
    position: absolute;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, var(--color-kit-volt-glow) 0%, transparent 75%);
    z-index: 1;
    transition: var(--transition-smooth);
}

.gallery-asset-card:hover .asset-aura-backdrop {
    transform: scale(1.3);
    background: radial-gradient(circle, rgba(27, 82, 204, 0.08) 0%, transparent 75%);
}

.asset-vector-dock {
    position: relative;
    z-index: 2;
    opacity: 0.15;
    transition: var(--transition-smooth);
}

.gallery-asset-card:hover .asset-vector-dock {
    opacity: 0.7;
    transform: scale(1.1);
}

.asset-media-icon {
    width: 48px;
    height: 48px;
    fill: var(--color-text-main);
}

/* Slide-Up Interactive Editorial Text Overlay */
.asset-metadata-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 20%, rgba(15, 23, 42, 0.7) 60%, transparent 100%);
    transform: translateY(10px);
    opacity: 0;
    transition: var(--transition-smooth);
    z-index: 3;
}

.gallery-asset-card:hover .asset-metadata-overlay {
    transform: translateY(0);
    opacity: 1;
}

.asset-category-indicator {
    font-family: var(--font-sub-display);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 5px;
}

.asset-title-heading {
    font-family: var(--font-sub-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.3px;
}

/* Responsive Adaptive Layout Pipelines */
@media (max-width: 992px) {
    .gallery-asymmetric-masonry {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        grid-auto-rows: 220px;
    }
    
    .grid-span-wide {
        grid-column: span 1; /* Drop asymmetric stretch on smaller display bounds */
    }
}

@media (max-width: 576px) {
    .gallery-viewport-container {
        padding: 50px 15px;
    }
    
    .gallery-hero-header .brand-display-headline {
        font-size: 2rem;
    }

    .gallery-asymmetric-masonry {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
    }
    
    .grid-span-tall {
        grid-row: span 1;
    }
    
    .asset-metadata-overlay {
        opacity: 1;
        transform: translateY(0);
        background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 40%, transparent 100%);
    }
}
/* ==========================================================================
   VIDEO BROADCAST TERMINAL MODULE ARCHITECTURE
   ========================================================================== */
.video-viewport-container {
    padding: 60px 20px 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 75vh;
}

/* Featured Theatre Node Styling */
.video-theatre-hero {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 70px;
}

.theatre-canvas-bay {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-card);
    border: var(--border-brand);
    box-shadow: var(--border-brand-glow);
    border-radius: var(--radius-chiseled);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.theatre-screen-aura {
    position: absolute;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, var(--color-kit-volt-glow) 0%, transparent 70%);
    opacity: 0.8;
}

.theatre-play-trigger-btn {
    position: relative;
    z-index: 5;
    width: 80px;
    height: 80px;
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(27, 82, 204, 0.4);
    transition: var(--transition-smooth);
}

.theatre-play-trigger-btn:hover {
    transform: scale(1.08);
    background: var(--color-secondary);
    box-shadow: 0 0 0 15px transparent;
}

.theatre-play-icon {
    width: 32px;
    height: 32px;
    fill: var(--color-bg-card);
    margin-left: 4px;
}

.theatre-live-badge {
    position: absolute;
    top: 25px;
    left: 25px;
    background: var(--color-live-red);
    color: #ffffff;
    font-family: var(--font-sub-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: var(--radius-chiseled);
}

.theatre-duration-counter {
    position: absolute;
    bottom: 25px;
    right: 25px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-chiseled);
}

.theatre-meta-descriptor {
    max-width: 850px;
}

.video-context-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-kit-volt-glow);
    border: var(--border-volt-accent);
    border-radius: var(--radius-chiseled);
    font-family: var(--font-sub-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.theatre-meta-descriptor .brand-display-headline {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--color-text-main);
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.theatre-meta-descriptor .brand-body-paragraph-muted {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* On-Demand Streaming Grid */
.video-grid-pipeline-wrapper {
    margin-top: 40px;
}

.video-section-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
}

.video-title-node {
    font-family: var(--font-sub-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    white-space: nowrap;
}

.video-accent-line {
    height: 1px;
    background: var(--color-primary);
    opacity: 0.15;
    width: 100%;
}

.video-streaming-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
}

.video-broadcast-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: transparent;
}

.video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-card);
    border: var(--border-brand);
    border-radius: var(--radius-chiseled);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.video-broadcast-card:hover .video-thumbnail-wrapper {
    transform: translateY(-3px);
    box-shadow: var(--border-brand-glow);
}

.thumbnail-aura-glow {
    position: absolute;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, var(--color-kit-volt-glow) 0%, transparent 80%);
    opacity: 0.4;
    transition: var(--transition-smooth);
}

.video-broadcast-card:hover .thumbnail-aura-glow {
    opacity: 0.7;
    background: radial-gradient(circle, rgba(27, 82, 204, 0.05) 0%, transparent 80%);
}

.video-card-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    font-family: var(--font-sub-display);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-chiseled);
    z-index: 2;
}

.card-play-trigger {
    width: 46px;
    height: 46px;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    opacity: 0.9;
    transform: scale(0.9);
    transition: var(--transition-smooth);
}

.video-broadcast-card:hover .card-play-trigger {
    transform: scale(1);
    background: var(--color-primary);
}

.card-play-icon {
    width: 18px;
    height: 18px;
    fill: var(--color-text-main);
    margin-left: 2px;
    transition: var(--transition-smooth);
}

.video-broadcast-card:hover .card-play-icon {
    fill: #ffffff;
}

/* Card Body Content Layout */
.video-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.video-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sub-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.video-card-category {
    color: var(--color-primary);
}

.video-card-date {
    color: var(--color-text-muted);
}

.video-card-headline {
    font-family: var(--font-sub-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.2px;
}

/* Responsive Structural Overrides */
@media (max-width: 768px) {
    .video-viewport-container { padding: 40px 15px; }
    .theatre-meta-descriptor .brand-display-headline { font-size: 1.6rem; }
    .theatre-play-trigger-btn { width: 60px; height: 60px; }
    .theatre-play-icon { width: 24px; height: 24px; }
    .video-streaming-matrix { grid-template-columns: 1fr; }
}
/* Specific page layouts designed to leverage existing CSS variables in main.css */
        .ticketing-hero-container {
            min-height: 75vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            background: radial-gradient(circle at center, rgba(30, 30, 30, 0.4) 0%, rgba(10, 10, 10, 0.95) 100%);
        }
        .ticketing-coming-soon-card {
            max-width: 640px;
            width: 100%;
            text-align: center;
            background: rgba(20, 20, 20, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 50px 40px;
            backdrop-filter: blur(12px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }
        .ticket-badge {
            display: inline-block;
            background: var(--color-primary, #e2b714); /* Fallback to premium gold if primary variable isn't defined */
            color: #000000;
            font-size: 0.8rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: 6px 16px;
            border-radius: 50px;
            margin-bottom: 24px;
        }
        .ticketing-main-title {
            font-size: 2.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: -0.5px;
            color: #ffffff;
        }
        .ticketing-body-text {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #d1d1d1;
            margin-bottom: 24px;
        }
        .ticketing-footer-note {
            font-size: 0.95rem;
            color: #8a8a8a;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding-top: 24px;
            margin-top: 24px;
        }
        @media (max-width: 768px) {
            .ticketing-coming-soon-card {
                padding: 40px 20px;
            }
            .ticketing-main-title {
                font-size: 2rem;
            }
        }