/* ═══ ACA-MIT — Netflix-Inspired College Website ═══ */

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { 
    font-family: 'Inter', -apple-system, sans-serif; 
    background: var(--bg); 
    color: var(--text-primary); 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased; 
    transition: background 0.3s ease, color 0.3s ease; 
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
input, textarea, select { font-family: inherit; background: none; border: none; color: inherit; }
::selection { background: rgba(229,9,20,0.2); }

/* ─── Design Tokens ─── */
:root {
    --bg: #f5f5f0;
    --card: #ffffff;
    --card-secondary: #f8f8f4;
    --card-border: rgba(0,0,0,0.05);
    --nav-solid: rgba(255,255,255,0.85);
    --hero-grad: rgba(245,245,240,0.95);
    --text-primary: #121212;
    --text-secondary: #4a4a4a;
    --text-muted: #8e8e8e;
    --red: #e50914;
    --red-glow: rgba(229, 9, 20, 0.3);
    --red-dark: #b8070f;
    --navy: #1a3db5;
    --bhm: #e50914;
    --bit: #87419b;
    --bba: #b89a00;
    --mba: #4a72e8;
    --diploma: #c0392b;
    --progress: #e50914;
    --progress-glow: rgba(229, 9, 20, 0.5);
    --footer-bg: #ffffff;
    --footer-link: #888888;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Inter', -apple-system, sans-serif;
    --row-pad: 60px;
    --radius: 8px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 12px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.12);
}

/* ─── DARK THEME OVERRIDES (Netflix Proper) ─── */
body.dark-mode {
    --bg: #141414; /* Netflix standard bg */
    --card: #181818;
    --card-secondary: #2f2f2f;
    --card-border: rgba(255,255,255,0.1);
    --nav-solid: #141414;
    --hero-grad: rgba(20,20,20,0.95);
    --text-primary: #ffffff;
    --text-secondary: #e5e5e5;
    --text-muted: #808080;
    --footer-bg: #141414;
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-md: 0 12px 30px rgba(0,0,0,0.8);
    --shadow-lg: 0 24px 60px rgba(0,0,0,1);
}

body.dark-mode .navbar.scrolled { border-bottom: none; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
body.dark-mode .connect-form { background: #141414; border-bottom: 1px solid #333; }
body.dark-mode input, body.dark-mode select { background: #333; color: #fff; border: 1px solid #444; }
body.dark-mode input::placeholder { color: #888; }
body.dark-mode .connect-form h2 { color: #fff; }
body.dark-mode .row-title { color: #fff; }
body.dark-mode .about-card-title { color: #fff; }
body.dark-mode .program-card { background: #181818; border: 1px solid #2f2f2f; }
body.dark-mode .program-card-body h3 { color: #fff; }
body.dark-mode .program-card-body p { color: #b3b3b3; }
body.dark-mode .alumni-card { background: #181818; border-color: #2f2f2f; }
body.dark-mode .alumni-card-body h4 { color: #fff; }
body.dark-mode .alumni-card-body p { color: #b3b3b3; }
body.dark-mode .yt-card { background: #181818; border-color: #2f2f2f; }
body.dark-mode .yt-card-body h4 { color: #fff; }
body.dark-mode .yt-card-body p { color: #b3b3b3; }
body.dark-mode .yt-watch { background: #333; color: #fff; border-color: #444; }
body.dark-mode .yt-watch:hover { background: #fff; color: #000; box-shadow: 0 0 15px rgba(255,255,255,0.2); }
body.dark-mode .site-footer { border-top: 1px solid #333; background: #000; }
body.dark-mode .footer-links a { color: #808080; }
body.dark-mode .footer-links a:hover { color: #fff; }
body.dark-mode .accent-card { background: rgba(50,50,50,0.3); border: 1px solid #333; }
body.dark-mode .accent-btn { box-shadow: 0 4px 15px rgba(0,0,0,0.4); }

body.dark-mode .nav-logo .sep { color: #666; }
body.dark-mode .hero-mute-btn { border-color: rgba(255,255,255,0.6); }
body.dark-mode .nav-links a { color: rgba(255,255,255,0.8); }
body.dark-mode .nav-links a:hover { color: #fff; }
body.dark-mode .navbar.scrolled .nav-links a { color: #b3b3b3; }
body.dark-mode .navbar.scrolled .nav-links a:hover { color: #fff; }

@media (max-width: 768px) { :root { --row-pad: 20px; } }

/* ── PRELOADER ── */
#preloader { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.7s ease, visibility 0.7s ease; }
#preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.pre-logo { display: flex; align-items: flex-end; gap: 3px; margin-bottom: 24px; animation: preLogoPop 0.9s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes preLogoPop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
.pre-aca { font-family: var(--serif); font-size: 72px; font-weight: 900; color: var(--red); letter-spacing: -4px; }
.pre-sep { font-size: 52px; font-weight: 200; color: #2a2a2a; margin: 0 4px 4px; }
.pre-mit { font-family: var(--serif); font-size: 72px; font-weight: 900; color: var(--navy); letter-spacing: -4px; }
.pre-tagline { font-size: 11px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: #3a3a3a; margin-bottom: 52px; animation: fadeUp 0.6s 0.4s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pre-bar-track { width: 220px; height: 2px; background: #1a1a1a; border-radius: 1px; overflow: hidden; margin-bottom: 16px; }
.pre-bar { height: 100%; width: 0; background: var(--red); border-radius: 1px; animation: preLoad 2.4s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes preLoad { 0% { width: 0; } 50% { width: 55%; } 80% { width: 80%; } 100% { width: 100%; } }
.pre-note { font-size: 11px; color: #2a2a2a; letter-spacing: 1px; animation: fadeUp 0.6s 0.6s ease both; }

/* ── Animations & Reveal ── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); }
.reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 4px; height: 0; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

/* ═══ NAVBAR ═══ */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 68px; display: flex; align-items: center; padding: 0 var(--row-pad); transition: all 0.35s cubic-bezier(0.4,0,0.2,1); }
.navbar.scrolled { background: var(--nav-solid); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 4px 30px rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.05); }

.nav-logo { display: flex; align-items: baseline; gap: 2px; flex-shrink: 0; margin-right: 36px; }
.nav-logo .aca { font-family: var(--serif); font-size: 28px; font-weight: 900; color: var(--red); letter-spacing: -1px; }
.nav-logo .sep { font-size: 18px; font-weight: 200; color: rgba(255,255,255,0.3); margin: 0 2px; }
.nav-logo .mit { font-family: var(--serif); font-size: 28px; font-weight: 900; color: var(--navy); letter-spacing: -1px; }
.navbar.scrolled .nav-logo .sep { color: #ccc; }

.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-link { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.8); padding: 6px 12px; border-radius: 4px; transition: all 0.2s; white-space: nowrap; }
.nav-link:hover { color: #fff; }
.nav-link.active { color: #fff; font-weight: 700; }

.navbar.scrolled .nav-link { color: var(--text-secondary); }
.navbar.scrolled .nav-link:hover { color: var(--text-primary); }
.navbar.scrolled .nav-link.active { color: var(--red); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-search, .nav-bell { color: rgba(255,255,255,0.7); transition: color 0.2s; cursor: pointer; }
.nav-search:hover, .nav-bell:hover { color: #fff; }

.navbar.scrolled .nav-search, .navbar.scrolled .nav-bell { color: var(--text-secondary); }
.navbar.scrolled .nav-search:hover, .navbar.scrolled .nav-bell:hover { color: var(--text-primary); }
.nav-theme-toggle { color: rgba(255,255,255,0.7); transition: all 0.2s; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; opacity: 0.8; }
.nav-theme-toggle:hover { color: #fff; background: rgba(255,255,255,0.1); opacity: 1; }
.navbar.scrolled .nav-theme-toggle { color: var(--text-secondary); }
.navbar.scrolled .nav-theme-toggle:hover { color: var(--text-primary); background: rgba(0,0,0,0.05); }

body.dark-mode .moon { display: block !important; }
body.dark-mode .sun { display: none !important; }
.sun, .moon { pointer-events: none; }
.sun { display: block; }
.moon { display: none; }

.nav-search { color: rgba(255,255,255,0.7); transition: color 0.2s; display: flex; align-items: center; }
.nav-search:hover { color: #fff; }
.nav-bell { color: rgba(255,255,255,0.7); transition: color 0.2s; display: flex; align-items: center; position: relative; }
.nav-bell:hover { color: #fff; }
.nav-apply { background: var(--red); color: #fff; font-size: 14px; font-weight: 700; padding: 7px 20px; border-radius: var(--radius); transition: all 0.2s; }
.nav-apply:hover { background: #c40812; transform: translateY(-1px); }
.nav-apply:active { transform: scale(0.97); }

.nav-mobile-btn { display: none; color: rgba(255,255,255,0.8); }
.navbar.scrolled .nav-mobile-btn { color: var(--text-primary); }

@media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-mobile-btn { display: flex; align-items: center; }
    .nav-search, .nav-bell, .nav-theme-toggle { display: none; }
}

/* ═══ HERO ═══ */
.hero { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; background: #0a0a0a; }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media iframe,
.hero-media #hero-yt-player {
    position: absolute;
    top: 50%; left: 50%;
    width: 120vw; height: 120vh;
    min-width: 177.78vh; /* 16:9 aspect ratio coverage */
    min-height: 56.25vw;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.6) 40%, rgba(10,10,10,0.08) 75%), linear-gradient(to top, var(--bg) 0%, var(--hero-grad) 15%, transparent 40%); }
.hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 0 var(--row-pad) 80px; max-width: 560px; }
.hero-badge { display: inline-block; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; padding: 5px 12px; border-radius: 3px; margin-bottom: 18px; width: fit-content; }
.hero-title { font-family: var(--serif); font-size: clamp(42px, 6vw, 72px); font-weight: 900; line-height: 1.05; color: #fff; letter-spacing: -2px; margin-bottom: 14px; text-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.hero-title em { font-style: italic; color: var(--red); }
.hero-desc { color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.7; margin-bottom: 24px; max-width: 440px; }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.btn-play { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #000; font-size: 16px; font-weight: 700; padding: 10px 28px; border-radius: var(--radius); transition: all 0.15s; }
.btn-play:hover { background: #e0e0e0; }
.btn-play:active { transform: scale(0.97); }
.btn-play svg { width: 18px; height: 18px; fill: #000; }
.btn-info { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); color: #fff; font-size: 16px; font-weight: 700; padding: 10px 28px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.2); transition: all 0.15s; }
.btn-info:hover { background: rgba(255,255,255,0.25); }
.btn-info .info-icon { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }

.hero-stats { display: flex; gap: 28px; }
.hero-stat-num { font-family: var(--serif); font-size: 26px; font-weight: 900; color: #fff; }
.hero-stat-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 2px; }

.hero-mute { position: absolute; bottom: 80px; right: var(--row-pad); z-index: 2; display: flex; align-items: center; gap: 14px; }
.hero-age { border-left: 3px solid rgba(255,255,255,0.3); padding-left: 14px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5); }
.hero-mute-btn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.2s; }
.hero-mute-btn:hover { background: rgba(255,255,255,0.1); }

@media (max-width: 768px) {
    .hero-content { padding-bottom: 50px; }
    .hero-stats { gap: 18px; flex-wrap: wrap; }
    .hero-mute { display: none; }
}

/* ═══ CONTACT FORM (below hero) ═══ */
.connect-form { background: var(--card); border-bottom: 1px solid var(--card-border); padding: 32px var(--row-pad); position: relative; }
.connect-form::before { content: ''; position: absolute; top: -80px; right: 60px; width: 140px; height: 140px; background: rgba(74,114,232,0.08); border-radius: 50%; pointer-events: none; }
.connect-form h2 { text-align: center; font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; }
.connect-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; max-width: 960px; margin: 0 auto; }
.connect-row .field { flex: 1; min-width: 140px; }
.connect-row input, .connect-row select { width: 100%; border: 1px solid var(--card-border); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; color: var(--text-primary); background: var(--card); transition: border-color 0.2s; outline: none; }
.connect-row input:focus, .connect-row select:focus { border-color: var(--navy); }
.connect-row input::placeholder { color: #bbb; }
.connect-row select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.connect-submit { background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; padding: 10px 28px; border-radius: var(--radius); transition: all 0.2s; white-space: nowrap; }
.connect-submit:hover { background: #153bb0; }

/* ═══ CONTENT ROWS ═══ */
.content-row { padding: 28px 0 8px; }
.row-header { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--row-pad); margin-bottom: 14px; }
.row-title { font-family: var(--serif); font-size: 22px; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.row-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 3px; padding: 0 var(--row-pad); margin-bottom: 12px; }
.row-explore { font-size: 12px; font-weight: 600; color: var(--text-muted); transition: color 0.2s; }
.row-explore:hover { color: var(--red); }

/* ─── Horizontal Scroller ─── */
.row-scroll { display: flex; gap: 8px; padding: 0 var(--row-pad); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--row-pad); -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 12px; }
.row-scroll::-webkit-scrollbar { display: none; }

/* ─── About Cards ─── */
.about-card { flex: 0 0 170px; scroll-snap-align: start; cursor: pointer; }
.about-card-thumb { width: 170px; height: 100px; border-radius: var(--radius); position: relative; overflow: hidden; margin-bottom: 8px; }
.about-card-thumb .play-circle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s; }
.about-card:hover .play-circle { opacity: 1; }
.play-circle span { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.play-circle svg { width: 14px; height: 14px; fill: #000; margin-left: 2px; }
.about-card-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.about-card-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.about-card-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--text-primary); background: var(--card); border: 1px solid var(--card-border); padding: 4px 12px; border-radius: 4px; transition: all 0.2s; }
.about-card-btn:hover { background: var(--text-primary); color: #fff; }
.about-card-btn svg { width: 8px; height: 8px; fill: currentColor; }

/* ─── Program Cards ─── */
.program-card { flex: 0 0 calc(33.33% - 20px); min-width: 240px; max-width: 320px; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--card-border); cursor: pointer; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); scroll-snap-align: start; box-shadow: var(--shadow-sm); }
.program-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-lg); border-color: transparent; }
.program-card-visual { height: 180px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-size: 200% 200% !important; animation: shimmer 8s ease infinite; }
.program-card-visual .card-badge { position: absolute; top: 10px; left: 10px; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; padding: 4px 10px; border-radius: 3px; z-index: 2; }
.program-card-visual .card-label { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 60px 16px 14px; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); }
.program-card-visual .card-abbr { font-family: var(--serif); font-size: 56px; font-weight: 900; color: rgba(255,255,255,0.15); letter-spacing: -3px; z-index: 1; }
.program-card-body { padding: 16px; }
.program-card-body .card-tag { font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.program-card-body h3 { font-family: var(--serif); font-size: 17px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; line-height: 1.3; }
.program-card-body p { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 10px; }
.program-card-body .card-meta { font-size: 10px; color: var(--text-muted); margin-bottom: 12px; }
.program-card-body .card-action { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; padding: 8px 18px; border-radius: var(--radius); transition: all 0.2s; }
.program-card-body .card-action:hover { filter: brightness(1.1); transform: translateY(-1px); }
.program-card-body .card-action svg { width: 10px; height: 10px; fill: #fff; }

/* ─── Accent CTA Card ─── */
.accent-card { flex: 0 0 calc(33.33% - 20px); min-width: 240px; max-width: 320px; border-radius: var(--radius); padding: 32px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; scroll-snap-align: start; }
.accent-card-emoji { font-size: 36px; margin-bottom: 12px; }
.accent-card h3 { font-family: var(--serif); font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.accent-card p { font-size: 12px; line-height: 1.6; margin-bottom: 16px; max-width: 220px; }
.accent-card .accent-btn { font-size: 12px; font-weight: 700; padding: 9px 24px; border-radius: var(--radius); color: #fff; transition: all 0.2s; }
.accent-card .accent-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* ─── Alumni Cards ─── */
.alumni-card { flex: 0 0 220px; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--card-border); cursor: pointer; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); scroll-snap-align: start; box-shadow: var(--shadow-sm); }
.alumni-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.alumni-card-thumb { height: 130px; position: relative; overflow: hidden; }
.alumni-card-thumb .alumni-badge { position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff; padding: 4px 10px; border-radius: 4px; background: var(--red); box-shadow: 0 2px 10px var(--red-glow); }
.alumni-card-thumb .play-hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s; background: rgba(0,0,0,0.3); }
.alumni-card:hover .play-hover { opacity: 1; }
.alumni-card-progress { height: 4px; background: rgba(0,0,0,0.1); }
body.dark-mode .alumni-card-progress { background: #333; }
.alumni-card-progress .bar { height: 100%; background: var(--progress); transition: width 0.3s; box-shadow: 0 0 8px var(--progress-glow); }
.alumni-card-body { padding: 12px; }
.alumni-card-body h4 { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.alumni-card-body p { font-size: 11px; color: var(--text-muted); line-height: 1.5; }

/* ─── YouTube Cards ─── */
.yt-card { flex: 0 0 200px; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--card-border); cursor: pointer; transition: all 0.3s; scroll-snap-align: start; }
.yt-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
.yt-card-thumb { height: 120px; position: relative; overflow: hidden; background: #111; }
.yt-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-card-thumb .yt-badge { position: absolute; top: 8px; left: 8px; background: var(--red); color: #fff; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 3px; letter-spacing: 0.5px; }
.yt-card-body { padding: 12px; }
.yt-card-body h4 { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; line-height: 1.3; }
.yt-card-body p { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.yt-card-body .yt-watch { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--text-primary); background: var(--card-secondary); border: 1px solid var(--card-border); padding: 5px 14px; border-radius: 4px; transition: all 0.2s; }
.yt-card-body .yt-watch:hover { background: var(--text-primary); color: #fff; }

/* ═══ NETFLIX MODAL ═══ */
.modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.7); display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 20px; animation: fadeIn 0.25s ease; }
.modal-backdrop.active { display: flex; }
.modal-box { width: 100%; max-width: 860px; background: #181818; border-radius: 8px; overflow: hidden; position: relative; color: #fff; box-shadow: 0 24px 80px rgba(0,0,0,0.6); animation: slideUp 0.35s ease; }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 10; width: 36px; height: 36px; border-radius: 50%; background: #181818; display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.2s; }
.modal-close:hover { background: #333; }

.modal-hero { position: relative; height: 400px; overflow: hidden; }
.modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.modal-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, #181818 0%, rgba(24,24,24,0.6) 40%, transparent 100%); }
.modal-hero-content { position: absolute; bottom: 24px; left: 32px; z-index: 2; }
.modal-hero-content h2 { font-family: var(--serif); font-size: 36px; font-weight: 900; color: #fff; margin-bottom: 8px; letter-spacing: -1px; }
.modal-hero-content .modal-sub { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.modal-hero-btns { display: flex; gap: 8px; align-items: center; }
.modal-play-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #000; font-size: 14px; font-weight: 700; padding: 8px 22px; border-radius: var(--radius); }
.modal-play-btn:hover { background: #e0e0e0; }
.modal-circle-btn { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; color: #fff; transition: border-color 0.2s; font-size: 18px; }
.modal-circle-btn:hover { border-color: #fff; }

.modal-body { padding: 24px 32px 32px; }
.modal-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; font-size: 13px; }
.modal-meta .meta-year { color: #46d369; font-weight: 700; }
.modal-meta .meta-pill { border: 1px solid rgba(255,255,255,0.3); padding: 1px 6px; border-radius: 3px; font-size: 11px; color: rgba(255,255,255,0.7); }

.modal-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; margin-bottom: 28px; }
.modal-desc { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.7; }
.modal-info-col { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 2; }
.modal-info-col strong { color: rgba(255,255,255,0.7); }

.modal-episodes-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-episodes-header h3 { font-size: 20px; font-weight: 700; }
.modal-season-select { background: #2a2a2a; color: #fff; border: 1px solid rgba(255,255,255,0.2); padding: 6px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 600; outline: none; }
.modal-season-label { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 16px; }

.episode-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.episode-row:hover { background: rgba(255,255,255,0.03); }
.episode-num { font-size: 24px; font-weight: 600; color: rgba(255,255,255,0.3); min-width: 24px; padding-top: 6px; }
.episode-thumb { width: 130px; height: 74px; border-radius: 4px; overflow: hidden; flex-shrink: 0; position: relative; cursor: pointer; }
.episode-thumb img { width: 100%; height: 100%; object-fit: cover; }
.episode-thumb .ep-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.episode-row:hover .ep-play { opacity: 1; }
.ep-play span { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.85); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
.ep-play svg { width: 12px; height: 12px; fill: #000; margin-left: 2px; }
.episode-info { flex: 1; }
.episode-info h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.episode-info p { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.episode-dur { font-size: 13px; color: rgba(255,255,255,0.4); white-space: nowrap; padding-top: 6px; min-width: 40px; text-align: right; }

@media (max-width: 768px) {
    .modal-hero { height: 240px; }
    .modal-grid { grid-template-columns: 1fr; }
    .modal-body { padding: 18px 20px 24px; }
    .episode-thumb { width: 100px; height: 56px; }
}

/* ═══ FOOTER (Netflix Style) ═══ */
.site-footer { background: var(--footer-bg); padding: 60px var(--row-pad) 32px; border-top: 1px solid var(--card-border); }
.footer-social { display: flex; gap: 20px; margin-bottom: 36px; }
.footer-social a { color: var(--footer-link); transition: color 0.2s; display: flex; }
.footer-social a:hover { color: var(--text-primary); }
.footer-links { display: grid; grid-template-columns: repeat(4, 180px); gap: 12px 0; margin-bottom: 32px; }
.footer-links a { font-size: 12px; color: var(--footer-link); transition: all 0.2s; }
.footer-links a:hover { color: var(--text-primary); text-decoration: underline; }
.footer-service { display: inline-block; border: 1px solid #ddd; padding: 4px 10px; border-radius: 3px; font-size: 11px; color: var(--text-muted); margin-bottom: 20px; cursor: pointer; transition: border-color 0.2s; }
.footer-service:hover { border-color: var(--text-muted); }
.footer-copy { font-size: 11px; color: var(--text-muted); }

@media (max-width: 768px) {
    .footer-links { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Mobile Menu Overlay ─── */
.mobile-menu { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,0.96); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 24px; font-weight: 700; color: rgba(255,255,255,0.6); transition: color 0.2s; }
.mobile-menu a:hover { color: #fff; }

/* ─── Form Elements ─── */
.form-input {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px 16px;
    color: #fff;
    font-size: 14px;
    transition: all 0.2s ease;
    outline: none;
    display: block;
}

.form-input:hover {
    border-color: rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.05);
}

.form-input:focus {
    border-color: var(--red);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.1);
}

.form-input::placeholder {
    color: rgba(255,255,255,0.3);
}

select.form-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

select.form-input option {
    background: #1a1a1a;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   SUBPAGE LIGHT MODE OVERRIDES
   These pages (campus, about, contact) use Tailwind utility classes
   with hardcoded dark styling. The overrides below flip them to
   light-mode equivalents when body is NOT in .dark-mode.
   ═══════════════════════════════════════════════════════════════ */

/* ── Backgrounds ── */
body:not(.dark-mode) .bg-brand-dark       { background-color: var(--bg) !important; }
body:not(.dark-mode) .bg-brand-surface    { background-color: var(--card-secondary) !important; }
body:not(.dark-mode) .bg-brand-dark\/95   { background-color: rgba(245,245,240,0.95) !important; }
body:not(.dark-mode) .bg-black            { background-color: var(--card) !important; }
body:not(.dark-mode) .bg-zinc-900         { background-color: #f0f0f0 !important; }
body:not(.dark-mode) .bg-zinc-900\/50     { background-color: rgba(0,0,0,0.03) !important; }
body:not(.dark-mode) .bg-zinc-800         { background-color: #f2f2f2 !important; }
body:not(.dark-mode) .bg-zinc-800:hover   { background-color: #e5e5e5 !important; }
body:not(.dark-mode) .bg-zinc-700         { background-color: #e0e0e0 !important; }

/* ── Text Colors ── */
body:not(.dark-mode) .text-white           { color: var(--text-primary) !important; }
body:not(.dark-mode) .text-zinc-100        { color: var(--text-primary) !important; }
body:not(.dark-mode) .text-zinc-200        { color: var(--text-primary) !important; }
body:not(.dark-mode) .text-zinc-300        { color: var(--text-primary) !important; }
body:not(.dark-mode) .text-zinc-400        { color: #555 !important; }
body:not(.dark-mode) .text-zinc-500        { color: var(--text-muted) !important; }
body:not(.dark-mode) .text-zinc-600        { color: #666 !important; }
body:not(.dark-mode) .text-zinc-700        { color: #444 !important; }
body:not(.dark-mode) .text-zinc-800        { color: #222 !important; }

/* ── Preserve white text inside dark overlays (video badges, image cards) ── */
body:not(.dark-mode) .bg-black\/80 .text-white,
body:not(.dark-mode) .bg-black\/80.text-white,
body:not(.dark-mode) [class*="bg-black"] > .text-white,
body:not(.dark-mode) .bg-gradient-to-t .text-white,
body:not(.dark-mode) .from-black\/70 .text-white,
body:not(.dark-mode) .from-black\/80 .text-white { color: #fff !important; }

/* Preserve branded text colors (red, navy, gold) — no override needed */

/* ── Borders ── */
body:not(.dark-mode) .border-white\/5      { border-color: var(--card-border) !important; }
body:not(.dark-mode) .border-white\/10     { border-color: rgba(0,0,0,0.08) !important; }

/* ── Shadows ── */
body:not(.dark-mode) .shadow-2xl           { box-shadow: 0 4px 30px rgba(0,0,0,0.06) !important; }

/* ── Form Inputs (contact page) ── */
body:not(.dark-mode) .form-input {
    background: #fff !important;
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,0.12) !important;
}
body:not(.dark-mode) .form-input:hover {
    border-color: rgba(0,0,0,0.2) !important;
    background: #fff !important;
}
body:not(.dark-mode) .form-input:focus {
    border-color: var(--red) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.05) !important;
}
body:not(.dark-mode) .form-input::placeholder {
    color: #aaa !important;
}
body:not(.dark-mode) select.form-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300000044' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
    padding-right: 40px !important;
}
body:not(.dark-mode) select.form-input option {
    background: #fff !important;
    color: var(--text-primary) !important;
}

/* ── Contact Form Container (light mode) ── */
body:not(.dark-mode) .bg-zinc-900\/40 {
    background-color: var(--card) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--shadow-md) !important;
}
body:not(.dark-mode) .backdrop-blur-sm {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── Contact Form Quote Block (light mode) ── */
body:not(.dark-mode) .bg-brand-surface blockquote {
    color: var(--text-primary) !important;
}

/* ── Hero Vignette for subpages ── */
body:not(.dark-mode) .hero-vignette {
    background: linear-gradient(to top, var(--bg) 0%, rgba(245,245,240,0.6) 30%, transparent 100%) !important;
}
body.dark-mode .hero-vignette {
    background: linear-gradient(to top, #141414 0%, rgba(20,20,20,0.6) 30%, transparent 100%) !important;
}

/* ── Gradient overlays (about/campus image cards) ── */
body:not(.dark-mode) .from-black\/70  { --tw-gradient-from: rgba(0,0,0,0.5) !important; }
body:not(.dark-mode) .from-black\/80  { --tw-gradient-from: rgba(0,0,0,0.55) !important; }

/* ── Grayscale images keep their effect in light mode ── */
body:not(.dark-mode) .grayscale { filter: grayscale(60%) !important; }
body:not(.dark-mode) .group:hover .grayscale { filter: grayscale(0%) !important; }

/* ── FAQ accordion (contact page) ── */
body:not(.dark-mode) .faq-item {
    background: var(--card) !important;
    border-color: var(--card-border) !important;
}
body:not(.dark-mode) .faq-item summary span {
    color: var(--text-primary) !important;
}

/* ── Subpage Footer (Tailwind-based footer in subpages) ── */
body:not(.dark-mode) footer.bg-black {
    background: var(--card) !important;
    border-top-color: var(--card-border) !important;
}
body:not(.dark-mode) footer .border-white\/5 {
    border-color: var(--card-border) !important;
}

/* ── Buttons on subpages ── */
body:not(.dark-mode) .bg-brand-red-light {
    /* Keep red buttons as-is */
}
body:not(.dark-mode) .bg-zinc-800 {
    border: 1px solid rgba(0,0,0,0.05) !important;
}
body:not(.dark-mode) .hover\:bg-zinc-700:hover {
    background-color: #d0d0cc !important;
}

/* ── Marquee text (contact page partners) ── */
body:not(.dark-mode) .marquee-track span {
    color: #ccc !important;
}

/* ── CTA section (about page) ── */
body:not(.dark-mode) .bg-gradient-to-r { /* keep gradients for CTA sections */ }

/* ── Stats section (campus page) ── */
body:not(.dark-mode) .bg-brand-surface .text-white {
    color: var(--text-primary) !important;
}