/* --- CSSN Network Hub: Sports Broadcast Styling --- */

:root {
    --network-blue: #1e3a8a;
    --network-accent: #3b82f6;
    --network-bg: #020617;
    --font-inter: 'Inter', sans-serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Hero Accent Palette */
    --accent-combat: #3b82f6;
    --accent-hs: #ef4444;
    --accent-edu: #22c55e;
    --accent-leagues: #f59e0b;
}

/* Global Reset & Spacing Fixes */
* {
    scroll-margin-top: 80px; /* Sticky nav offset */
}

body {
    background-color: var(--network-bg);
}

.font-inter {
    font-family: var(--font-inter);
}

/* Section Spacing A: Reduce global padding for tighter flow */
.cinematic-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    position: relative;
    overflow: hidden;
}

/* Texture Overlays */
.hero-noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
}

/* Nav Polish */
#main-nav.scrolled {
    background-color: rgba(2, 6, 23, 0.95);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Button System C: Normalized Padding, Radius, and Weights */
.btn-primary-normalized,
.btn-amber-normalized,
.btn-emerald-normalized,
.btn-blue-normalized,
.btn-network-cta {
    display: inline-block;
    padding: 1.25rem 3rem;
    border-radius: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.65rem;
    transition: all 0.4s var(--ease-out);
    cursor: pointer;
    text-align: center;
}

.btn-primary-normalized {
    background: white;
    color: #020617;
}

.btn-primary-normalized:hover {
    background: var(--network-accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.btn-amber-normalized {
    background: var(--accent-leagues);
    color: white;
}

.btn-amber-normalized:hover {
    background: white;
    color: var(--accent-leagues);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
}

.btn-emerald-normalized {
    background: var(--accent-edu);
    color: white;
}

.btn-emerald-normalized:hover {
    background: white;
    color: var(--accent-edu);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.3);
}

.btn-blue-normalized {
    background: var(--network-accent);
    color: white;
}

.btn-blue-normalized:hover {
    background: white;
    color: var(--network-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.btn-network-cta {
    background: white;
    color: #020617;
}

.btn-network-cta:hover {
    background: var(--network-accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
}

/* Division Color Specific CTAs in Hero */
.cta-combat:hover { background: var(--accent-combat); }
.cta-hs:hover { background: var(--accent-hs); }
.cta-edu:hover { background: var(--accent-edu); }
.cta-leagues:hover { background: var(--accent-leagues); }

/* --- SECTIONS D: Background Handling and Transitions --- */

/* Shared cinematic background properties */
.cinematic-section {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.hs-sports-section {
    background-image: linear-gradient(rgba(2, 6, 23, 0.75), rgba(2, 6, 23, 0.75)), url('/cssn/assets/hero-fallback-stadium.jpg');
}

.combat-sports-section {
    background-image: linear-gradient(rgba(2, 6, 23, 0.75), rgba(2, 6, 23, 0.75)), url('https://images.unsplash.com/photo-1509563268479-0f004cf3f58b?q=80&w=2000&auto=format&fit=crop');
}

/* FIX 1: LEAGUES section background */
.leagues-section {
    background-image: linear-gradient(rgba(2, 6, 23, 0.8), rgba(2, 6, 23, 0.8)), url('https://images.unsplash.com/photo-1526676037777-05a232554f77?q=80&w=2000');
}

/* FIX 2: EDUCATION section background */
.education-section {
    background-image: linear-gradient(rgba(2, 6, 23, 0.85), rgba(2, 6, 23, 0.85)), url('/cssn/assets/hero-sports.jpg');
}

/* FIX 4: CONNECT section background */
.connect-section {
    background-image: linear-gradient(rgba(2, 6, 23, 0.9), rgba(2, 6, 23, 0.9)), url('https://images.unsplash.com/photo-1517649763962-0c623066013b?q=80&w=2000');
}

/* Premium Top/Bottom Fades */
.cinematic-section::before,
.cinematic-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 120px;
    z-index: 5;
    pointer-events: none;
}

.cinematic-section::before {
    top: 0;
    background: linear-gradient(to bottom, #020617 0%, transparent 100%);
}

.cinematic-section::after {
    bottom: 0;
    background: linear-gradient(to top, #020617 0%, transparent 100%);
}

/* FIX 3: SPONSORS premium styling */
.sponsor-tile-premium {
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 1rem;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.4s var(--ease-out);
}

.sponsor-tile-premium:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-4px);
    box-shadow: 0 15px 30px -10px rgba(0,0,0,0.5);
}

/* Division Explorer Components */
.cssn-divisions {
    background: radial-gradient(circle at top, rgba(30, 58, 138, 0.08) 0%, transparent 70%);
}

.hub-card {
    transition: all 0.6s var(--ease-out);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05);
}

.hub-card:hover {
    transform: translateY(-8px);
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.9);
}

.card--combat:hover { border-color: rgba(59, 130, 246, 0.5); }
.card--hs:hover { border-color: rgba(239, 68, 68, 0.5); }
.card--leagues:hover { border-color: rgba(245, 158, 11, 0.5); }
.card--edu:hover { border-color: rgba(34, 197, 94, 0.5); }

/* --- TICKER REFINEMENT --- */
.ticker {
    width: 100%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding: 12px 0;
}

.ticker__track {
    display: flex;
    width: max-content;
    animation: ticker-loop 24s linear infinite;
}

.ticker span {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: #475569;
    padding: 0 16px;
}

@keyframes ticker-loop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .cinematic-section {
        background-attachment: scroll;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .cinematic-section::before,
    .cinematic-section::after {
        height: 60px;
    }
    .btn-network-cta, .btn-primary-normalized {
        width: 100%;
    }
}