/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* Colors */
    --bg-color: #FFFFFF;
    --text-primary: #414141;
    --text-secondary: #8A8A8A;
    --text-light: #CFCFCF;
    --primary-blue: #002F5E;
    --accent-orange: #E68012;
    --divider-color: #E5E5E5;

    /* Typography Families */
    --font-serif: 'Noto Serif SC', serif;
    --font-sans: 'Noto Sans SC', sans-serif;
    --font-display: 'Metal', 'Noto Sans Serif SC', serif;

    /* Typography Scale (Mobile First) */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --text-3xl: 48px;
    --text-4xl: 64px;

    /* Layout */
    --header-height: 120px;
    --container-padding: 88px;
    --grid-gap: 24px;

    /* Spacing System (Mobile First) */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 32px;
    --spacing-lg: 64px;
    --spacing-xl: 128px;
    --spacing-2xl: 200px;
    --spacing-3xl: 300px;

    /* Z-Index Layers */
    --z-header: 100;
    --z-menu: 99;
    --z-overlay: 10;
    --z-content: 1;
}

/* Responsive Typography Scale */
@media (min-width: 810px) {
    :root {
        --text-lg: 20px;
        --text-2xl: 36px;
        --text-3xl: 56px;
        --text-4xl: 72px;
        --container-padding: 40px;
        /* Tablet padding */

        /* Responsive Spacing */
        --spacing-xs: 8px;
        --spacing-sm: 16px;
        --spacing-md: 32px;
        --spacing-lg: 64px;
        --spacing-xl: 128px;
        --spacing-2xl: 200px;
        --spacing-3xl: 300px;
    }
}

@media (min-width: 1200px) {
    :root {
        --text-3xl: 64px;
        --text-4xl: 96px;
        --container-padding: 88px;
        /* Desktop padding */
    }
}

@media (min-width: 1920px) {
    :root {
        --text-base: 24px;
        --text-lg: 28px;
        --text-xl: 32px;
        --text-2xl: 64px;
        --text-3xl: 128px;
        --text-4xl: 160px;
        --spacing-xs: 32px;
        --spacing-sm: 48px;
        --spacing-md: 72px;
        --spacing-lg: 120px;
        --spacing-xl: 240px;
        --spacing-2xl: 360px;
        --spacing-3xl: 480px;
    }
}


@media (max-width: 1199px) {
    :root {
        --container-padding: 40px;
    }
}

@media (max-width: 809px) {
    :root {
        --header-height: 80px;
        --container-padding: 24px;
    }
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Background removed to allow canvas to be the background */
    width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background-color: transparent;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    width: 100vw;
}



#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    /* The canvas IS the background */
    z-index: -1;
    /* Behind everything */
    pointer-events: none;
    /* Allow clicks to pass through */
    opacity: 1;
    /* Make sure it is fully opaque to show its own background */
}

/* ==========================================================================
   3. LAYOUT SYSTEM
   ========================================================================== */
.main-grid,
.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gap);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.main-grid--bleed-right {
    padding-right: 0;
}

/* Grid Utilities */
.col-span-1 {
    grid-column-end: span 1;
}

.col-span-2 {
    grid-column-end: span 2;
}

.col-span-3 {
    grid-column-end: span 3;
}

.col-span-4 {
    grid-column-end: span 4;
}

.col-span-5 {
    grid-column-end: span 5;
}

.col-span-6 {
    grid-column-end: span 6;
}

.col-span-7 {
    grid-column-end: span 7;
}

.col-span-8 {
    grid-column-end: span 8;
}

.col-span-9 {
    grid-column-end: span 9;
}

.col-span-10 {
    grid-column-end: span 10;
}

.col-span-11 {
    grid-column-end: span 11;
}

.col-span-12 {
    grid-column-end: span 12;
}

.col-start-1 {
    grid-column-start: 1;
}

.col-start-2 {
    grid-column-start: 2;
}

.col-start-7 {
    grid-column-start: 7;
}



/* Spacing Utilities */
.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

.mt-large {
    margin-top: var(--spacing-lg);
}

/* Keep for backward compatibility */
.mt-xxl {
    margin-top: var(--spacing-2xl);
}

.relative {
    position: relative;
}

.page-section {
    margin-top: var(--spacing-2xl);
}

.content-section,
.syllabus-content {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.list-row,
.lecture-row {
    margin-top: var(--spacing-xl);
}

.list-row--first,
.lecture-row:first-of-type {
    margin-top: var(--spacing-lg);
}

.stack-md>*+*,
.lecture-info p+p {
    margin-top: var(--spacing-md);
}

.footer-actions,
.article-footer {
    margin-top: var(--spacing-lg);
}

main {
    /* padding-top removed, using margin on first child instead */
}

main> :first-child {
    margin-top: var(--spacing-lg);
}

/* ==========================================================================
   4. TYPOGRAPHY SYSTEM
   ========================================================================== */
.type-display {
    font-family: var(--font-display);
    line-height: 1;
}

.type-serif {
    font-family: var(--font-serif);
}

.text-highlight {
    font-size: var(--text-lg);
    color: var(--text-primary);
    font-weight: 400;
}

.text-secondary {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    font-weight: 300;
}

/* ==========================================================================
   5. UI COMPONENTS
   ========================================================================== */

/* --- Buttons --- */
.btn-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: all 0.3s;
}

.btn-circle:hover {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: white;
}

.btn-circle.outline {
    background: white;
    border-color: var(--divider-color);
    width: 48px;
    height: 48px;
    color: var(--text-primary);
}

.btn-circle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Alias for backward compatibility */
.slider-btn {
    @extend .btn-circle;
    /* Conceptual, CSS doesn't have extend, so we duplicate or group */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #333;
    transition: background 0.3s, color 0.3s;
}

.slider-btn:hover {
    background: var(--accent-orange);
    color: white;
}

.carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--divider-color);
    background: white;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.carousel-btn:hover {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: white;
}

.carousel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* --- Cards --- */
.card-base {
    position: relative;
    display: flex;
    flex-direction: column;
}

.card-image-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #F3F3F3;
}

.card-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: var(--text-xs);
    z-index: 2;
    transition: all 0.3s ease;
}

/* --- Sliders --- */
.slider-container {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* ==========================================================================
   6. SITE MODULES
   ========================================================================== */

/* --- Header --- */
.site-header {
    padding-top: 20px;
    position: relative;
    z-index: var(--z-header);
    background: #fff;
    width: 100%;
}

.logo-container {
    display: flex;
    align-items: flex-start;
    justify-content: right;
    gap: 10px;
    grid-column: 1 / 3;
}

.logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
}

.logo-link:hover img {
    opacity: 0.85;
}

.header-logo-left {
    width: 74px;
    height: 74px;
}

.header-logo-right {
    width: 69px;
    height: 72px;
}

.header-text {
    grid-column: 3 / 11;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.header-text p {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.26;
    font-weight: 300;
}

.primary-menu ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 20px;
    padding-top: 64px;
    padding-bottom: 64px;
    align-items: center;
}

.primary-menu a {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--text-primary);
    transition: color 0.2s;
    text-decoration: none;
}

.primary-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    z-index: var(--z-menu);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
}

.primary-menu.open {
    max-height: 500px;
    opacity: 1;
}

.primary-menu a:hover {
    color: var(--accent-orange);
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav-toggle .nav-icon {
    display: block;
}

@media (min-width: 810px) {
    .primary-menu ul {
        flex-direction: row;
        justify-content: flex-end;
        padding-right: var(--container-padding);
        gap: 40px;
    }
}

/* Header Responsive */
@media (min-width: 1920px) {
    .logo-container {
        grid-column: 1 / 2;
    }

    .header-text {
        grid-column: 2 / 10;
    }
}


@media (max-width: 1199px) {
    .site-header {
        height: auto;
        min-height: 80px;
        padding-top: 24px;
        padding-bottom: 10px;
        align-items: start;
    }

    .header-logo-left,
    .header-logo-right {
        height: 50px;
        width: auto;
    }

    .logo-container {
        padding-top: 0;
        grid-column: 1 / 3;
    }

    .header-text {
        display: flex;
        grid-column: 3 / 11;
        padding-top: 4px;
    }

    /* .nav-toggle and .primary-menu styles are now global */
}

@media (max-width: 809px) {
    .header-text {
        display: none;
    }
}

/* --- Hero Section --- */
.hero-section {
    position: relative;
    /* Ensure it takes full viewport height initially */
    height: 100vh;
    height: 100dvh;
    min-height: 500px;
    align-items: center;
    margin: 0;
    /* Remove padding to allow full bleed if needed, or handle in children */
    padding-top: 0;
    overflow: hidden;
    display: grid;
    width: 100%;
    /* Keep grid padding but we will override for expanded video */
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
}

.hero-image-wrapper {
    grid-column: 4 / 13;
    grid-row: 1 / 2;
    position: relative;
    /* Force height to cover parent grid height completely */
    height: 100%;
    min-height: 100%; 
    z-index: 1;
    /* Initial state: compensates for container padding on the right to touch edge? 
       Grid col 13 ends at content edge. 
       To touch screen edge, we need to extend by padding-right.
    */
    margin-right: calc(-1 * var(--container-padding));
    width: calc(100% + var(--container-padding));
    
    transform-origin: right center;
    will-change: width, margin-left, transform;
}

.hero-image-wrapper.expanded {
    /* These styles will be handled by JS/inline styles for smooth scroll interpolation, 
       but we define the target state here for reference or fallback */
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}

.hero-section--fullbleed {
    padding-left: 0;
    padding-right: 0;
}

.hero-section--fullbleed .hero-image-wrapper {
    margin-right: 0;
    width: 100%;
}

.hero-video--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    margin: 0 !important;
    z-index: var(--z-content);
}

.hero-video--fadeout {
    opacity: 0;
    transition: opacity 600ms ease;
    pointer-events: none;
}

.video-control-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
    color: var(--text-primary);
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 1);
}

.hero-content {
    grid-column: 3 / 10;
    grid-row: 1 / 2;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: 1;
    color: var(--accent-orange);
    font-weight: 400;
    margin-bottom: 40px;
}

.hero-arrow {
    margin-top: 40px;
    margin-left: 20px;
}

@media (min-width: 1200px) {
    .hero-content {
        grid-column: 2 / 8;
        top: -120px;
    }

    .hero-image-wrapper {
        grid-column: 3 / 13;
    }
}

@media (max-width: 1199px) {
    .hero-section {
        height: auto;
        min-height: 0;
        padding-top: 80px;
        row-gap: 30px;
    }

    .hero-content {
        grid-column: 3 / 13;
        grid-row: 1;
        text-align: left;
        max-width: none;
    }

    .hero-arrow {
        display: none;
    }

    .hero-image-wrapper {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        max-width: 100vw;
    }
}

@media (max-width: 809px) {
    .hero-section {
        padding-top: 40px;
        row-gap: 24px;
    }

    .hero-content {
        grid-column: 1 / -1;
    }

    .hero-image-wrapper {
        height: 300px;
        grid-column: 1 / -1;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        max-width: 100vw;
    }
}

/* --- Schools Section --- */
.schools-section {
    margin: 300px auto;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.schools-row {
    margin-bottom: 160px;
    position: relative;
    align-items: start;
}

.schools-row:last-child {
    margin-bottom: 0;
}

/* School Layouts */
.sdada-text {
    grid-column: 3 / 6;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: var(--spacing-xl);
}

.spbsuitd-text {
    grid-column: 9 / 13;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: var(--spacing-xl);
}

.sdada-image-wrapper {
    grid-column: 7 / 12;
    position: relative;
    aspect-ratio: 1 / 1;
}

.spbsuitd-image-wrapper {
    grid-column: 3 / 8;
    position: relative;
    aspect-ratio: 1 / 1;
}

/* Components within Schools */
.school-logo {
    width: 237px;
    height: 52px;
    background-color: var(--accent-orange);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    margin-bottom: 30px;
}

.details p {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 300;
}

.details .highlight {
    font-size: var(--text-lg);
    color: var(--text-primary);
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 8px;
}

.decorative-text,
.decorative-text-ru {
    font-family: var(--font-display);
    line-height: 1.2;
    color: var(--accent-orange);
    font-style: italic;
    font-size: var(--text-xl);
}

.ru-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.ru-subtitle,
.cn-subtitle {
    font-size: var(--text-lg);
    color: var(--primary-blue);
    margin-bottom: 4px;
}

.en-name-tag {
    position: absolute;
    z-index: var(--z-overlay);
    background: #FFFFFF;
    padding: 8px 16px;
    letter-spacing: 0.13em;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--accent-orange);
    white-space: nowrap;
}

.sdada-image-wrapper .en-name-tag {
    right: -160px;
    bottom: 80px;
    text-align: left;
}

.spbsuitd-image-wrapper .en-name-tag {
    left: -180px;
    bottom: 80px;
    text-align: left;
}

/* Stack Slider Styles */
.image-stack {
    width: 100%;
    height: 100%;
    position: relative;
    /* overflow: visible to allow dragging cards out */
    overflow: visible; 
    border-radius: 4px;
    z-index: var(--z-content);
    cursor: grab;
}

.image-stack:active {
    cursor: grabbing;
}

.stack-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transform-origin: center center;
    overflow: hidden;
}

/* Initially hide all except top few, handled by JS usually, but here stacked */
.stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Prevent image drag default */
}

/* Removed old slider styles */
/* .image-slider ... .slider-controls ... */

.schools-row .details {
    padding-top: var(--spacing-xs);
}

/* --- Animation Utilities --- */

/* Generic Scroll Animation */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 2s ease-out, transform 2s ease-out;
    will-change: opacity, transform;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(10px);
}

/* Generic Staggered Fade-In Animation */
.stagger-fade-in > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

/* Visible State */
.stagger-fade-in.in-view > * {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delays (up to 10 children) */
.stagger-fade-in.in-view > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-fade-in.in-view > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-fade-in.in-view > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-fade-in.in-view > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-fade-in.in-view > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-fade-in.in-view > *:nth-child(6) { transition-delay: 0.6s; }
.stagger-fade-in.in-view > *:nth-child(7) { transition-delay: 0.7s; }
.stagger-fade-in.in-view > *:nth-child(8) { transition-delay: 0.8s; }
.stagger-fade-in.in-view > *:nth-child(9) { transition-delay: 0.9s; }
.stagger-fade-in.in-view > *:nth-child(10) { transition-delay: 1.0s; }

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .stagger-fade-in > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Schools Responsive */
@media (min-width: 1920px) {
    .sdada-text img {
        width: 400px;
    }

    .sdada-image-wrapper .en-name-tag {
        bottom: 120px;
        text-align: left;
    }

    .spbsuitd-image-wrapper .en-name-tag {
        bottom: 120px;
    }
}

@media (min-width: 1200px) {
    .sdada-image-wrapper .en-name-tag {
        right: -80px;
        bottom: 80px;
        text-align: left;
    }
}

@media (max-width: 809px) {
    .schools-row {
        grid-template-columns: 1fr;
        row-gap: 20px;
        margin-bottom: 80px;
    }

    /* Mobile Layout Reordering */
    .sdada-text {
        display: contents;
    }

    .sdada-text>img {
        order: 1;
        grid-column: 1 / -1;
        width: auto;
        height: 40px;
        margin-bottom: 20px;
        justify-self: start;
    }

    .sdada-image-wrapper {
        order: 2;
        grid-column: 1 / -1;
        max-width: 100%;
        margin: 0;
        width: 100%;
        aspect-ratio: 4/3;
    }

    .sdada-text>.details {
        order: 3;
        grid-column: 1 / -1;
        text-align: left;
        align-items: flex-start;
        padding-top: 0;
        margin-top: 20px;
    }

    .spbsuitd-text {
        display: contents;
    }

    .spbsuitd-text>.ru-title,
    .spbsuitd-text>.cn-subtitle {
        order: 1;
        grid-column: 1 / -1;
        text-align: left;
    }

    .spbsuitd-image-wrapper {
        order: 2;
        grid-column: 1 / -1;
        max-width: 100%;
        margin: 20px 0;
        width: 100%;
        aspect-ratio: 4/3;
    }

    .spbsuitd-text>.details {
        order: 3;
        grid-column: 1 / -1;
        text-align: left;
        align-items: flex-start;
        padding-top: 0;
        margin-top: 0;
    }

    .en-name-tag {
        position: absolute;
        margin-top: 0;
        text-align: right;
        left: auto !important;
        right: 0 !important;
        bottom: 20px !important;
        top: auto;
        background: #fff;
        z-index: 10;
        max-width: 80%;
    }
}



/* --- Academic Lectures Section --- */
.academic-lectures {
    margin-bottom: var(--spacing-3xl);
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--spacing-3xl);
}

.section-bg-title {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: 100;
    color: #EFEFEF;
    position: absolute;
    top: -80px;
    left: var(--container-padding);
    z-index: 0;
    line-height: 1;
    white-space: nowrap;
}

.lecture-info {
    padding-top: var(--spacing-3xl);
}

.lecture-image {}

.section-bg-title.right-align {
    left: auto;
    right: var(--container-padding);
}

.lectures-carousel-wrapper {
    position: relative;
    margin-top: 100px;
    width: 100%;
    /* overflow: hidden; Removed to allow sticky scrollbar if needed, but here we custom scroll */
    overflow: hidden; 
    padding-left: var(--container-padding);
}

.lectures-carousel {
    /* The track is inside here. If we want track.scrollBy to work, 
       THIS container or the track itself must be scrollable.
       Usually the wrapper/carousel is the scroll container. */
    overflow-x: auto; /* Enable horizontal scroll */
    overflow-y: hidden;
    width: 100%;
    /* Hide scrollbar */
    scrollbar-width: none; 
    -ms-overflow-style: none;
    scroll-behavior: smooth; /* Native smooth scroll */
}

.lectures-carousel::-webkit-scrollbar { 
    display: none; 
}

.lectures-track {
    display: flex;
    gap: 32px;
    /* transition: transform 0.3s ease-in-out; Removed transform transition because we are using scroll */
    width: max-content;
    align-items: flex-start;
    padding-bottom: 60px;
    padding-right: var(--container-padding); /* Ensure last item is reachable */
}

.lecture-card {
    width: calc((100vw - (2 * var(--container-padding)) - (11 * 24px)) / 12 * 3 + 48px);
    flex-shrink: 0;
    transition: transform 0.3s;
}

.lecture-card:nth-child(even) {
    margin-top: 60px;
}

.card-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    position: relative;
    background-color: #F3F3F3;
    overflow: hidden;
    margin-bottom: 24px;
    transform-origin: center;
}

.card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.card-image .tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: var(--text-xs);
    z-index: 2;
    transition: all 0.3s ease;
}

.card-image:hover .tag {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

.lecture-card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-date {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 300;
}

.card-content h3 {
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-primary);
}

.lectures-controls {
    display: flex;
    gap: 16px;
    margin-top: 40px;
    justify-content: flex-end;
    padding-right: var(--container-padding);
}

.lecture-list .lecture-row:nth-child(odd) .lecture-info {
    grid-column: 3 / 8;
}

.lecture-list .lecture-row:nth-child(odd) .lecture-image {
    grid-column: 8 / 13;
}

.lecture-list .lecture-row:nth-child(even) .lecture-info {
    grid-column: 9 / 13;
}

.lecture-list .lecture-row:nth-child(even) .lecture-image {
    grid-column: 3 / 8;
}

.lecture-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1199px) {
    .lecture-row .lecture-info {
        grid-column: 1 / -1;
    }

    .lecture-row .lecture-image {
        grid-column: 1 / -1;
        margin-top: var(--spacing-md);
    }
}

/* Lectures Responsive */
@media (min-width: 1920px) {
    .lecture-list .lecture-row:nth-child(odd) .lecture-info {
        grid-column: 2 / 5;
    }

    .lecture-list .lecture-row:nth-child(odd) .lecture-image {
        grid-column: 6 / 11;
    }

    .lecture-list .lecture-row:nth-child(even) .lecture-info {
        grid-column: 7 / 11;
    }

    .lecture-list .lecture-row:nth-child(even) .lecture-image {
        grid-column: 2 / 7;
    }

    .academic-lectures {
        margin-top: 500px;
        margin-bottom: 500px;
    }

    .lectures-track {
        gap: 48px;
        padding-left: 88px;
    }



    .lecture-info {
        padding-top: var(--spacing-3xl);
        grid-column-end: span 3;
    }

    .lecture-image {
        grid-column-end: span 4;
    }
}

@media (max-width: 1199px) {


    .lecture-list .lecture-row:nth-child(odd) .lecture-info {
        grid-column: 2/ 7;
    }

    .lecture-list .lecture-row:nth-child(odd) .lecture-image {
        grid-column: 7 / 12;
    }

    .lecture-list .lecture-row:nth-child(even) .lecture-info {
        grid-column: 7 / 12;
    }

    .lecture-list .lecture-row:nth-child(even) .lecture-image {
        grid-column: 2 / 7;
    }

    .lecture-info {
        padding-top: var(--spacing-xl);
    }

}

@media (max-width: 809px) {
    .lectures-track .lecture-card {
        width: 280px;
    }

    .lectures-track .lecture-card:nth-child(even) {
        margin-top: 30px;
    }

    .lectures-controls {
        justify-content: center;
        padding-right: 0;
    }

    .section-bg-title {
        position: static;
        color: var(--text-light);
        margin-bottom: 30px;
    }

    .lecture-list .lecture-row:nth-child(odd) .lecture-info {
        grid-column: 1/ 12;
    }

    .lecture-list .lecture-row:nth-child(odd) .lecture-image {
        grid-column: 1/ 12;
    }

    .lecture-list .lecture-row:nth-child(even) .lecture-info {
        grid-column: 1/ 12;
    }

    .lecture-list .lecture-row:nth-child(even) .lecture-image {
        grid-column: 1/ 12;
    }

}

/* --- Core Courses Section --- */
.core-courses {
    margin-bottom: 160px;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.core-courses .section-bg-title {
    left: auto;
    grid-column: 8 / 13;
    justify-self: start;
    letter-spacing: 0.13em;
    will-change: transform;
}

.courses-layout {
    margin-top: 120px;
    position: relative;
    z-index: 1;
    align-items: flex-start;
}

.courses-list {
    grid-column: 3 / 10;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.courses-image {
    grid-column: 8 / 13;
    position: absolute;
    /* Top aligned with 3rd item: 2 * spacing-xl */
    /* spacing-xl is 128px on tablet/desktop, so 2 * 128px = 256px */
    top: calc(var(--spacing-lg) * 2);
    width: 100%;
    aspect-ratio: 16/ 9;
    z-index: 10;
    box-shadow: -20px 20px 60px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    transition: top 0.3s ease;
}

.courses-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.courses-image img.active {
    opacity: 1;
}

.courses-image img:first-child {
    opacity: 1;
}

.courses-image img:first-child.hidden {
    opacity: 0;
}

/* --- Syllabus Page --- */
.syllabus-hero .main-grid {
    align-items: start;
    margin-top: var(--spacing-2xl);
}

.syllabus-title-wrapper {
    grid-column: 3 / 9;
    /* Start at col 3 */
    grid-row: 1;
    z-index: 10;
    position: relative;
    margin-top: 40px;
    pointer-events: none;
}

.syllabus-title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 200;
    color: var(--text-light);
    line-height: 1;
    white-space: nowrap;
}

.syllabus-image-wrapper {
    grid-column: 6 / 11;
    /* Right side aligned with new start */
    grid-row: 1;
    z-index: 1;
    position: relative;
    top: 100px;
    width: 100%;
    aspect-ratio: 4 / 3;
}

.syllabus-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.syllabus-intro {
    grid-column: 4 / 8;
    /* Left side (Col 2-6) */

    margin-bottom: var(--spacing-lg);
    grid-row: 2;
    z-index: 10;
    background-color: #fff;
    padding: var(--spacing-sm);
}

.syllabus-intro p {
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: 2;
    text-align: justify;
}

.syllabus-list-container {
    grid-column: 3 / 7;
    /* Left side (Col 3-6) */
}

.year-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 64px;
}

.year-title {
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 16px;
    width: 100%;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 16px;
}

.course-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.course-list li {
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 300;
    color: var(--text-secondary);
    padding: 24px 0;
    border-bottom: 1px solid #E5E5E5;
}

@media (max-width: 1199px) {
    .syllabus-title {
        font-size: 64px;
    }

    .syllabus-title-wrapper {
        position: relative;
        grid-column: 2 / 12;
        margin-left: 0;
        left: 0;
    }

    .syllabus-image-wrapper {
        position: relative;
        width: 100%;
        top: 0;
        margin-top: 20px;
    }

    .syllabus-intro,
    .syllabus-list-container {
        grid-column: 2 / 12;
    }
}

.syllabus-list-container .course-list li {
    padding: 0;
    border-bottom: none;
}

.syllabus-list-container .course-item {
    padding: 0;
    border-bottom: none;
}

.syllabus-list-container .course-item:first-child {
    border-top: none;
}

.course-toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 300;
    color: var(--text-primary);
    cursor: pointer;
}

.course-desc {
    color: var(--text-secondary);
}

.course-toggle:hover .course-name {
    color: var(--primary-blue);
}

.course-name {
    display: inline-block;
}

.course-toggle .arrow {
    display: none;
}

.course-toggle[aria-expanded="true"] .arrow {
    display: none;
}

.course-panel {
    padding: 12px 0 24px;
    font-family: 'Inter', var(--font-sans);
    font-size: var(--text-base);
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.8;
    border-bottom: 1px solid #E5E5E5;
}

.course-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--spacing-lg); /* Fixed height using spacing-lg */
    padding: 0; /* Reset padding as height is fixed */
    border-bottom: 1px solid var(--divider-color);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    z-index: 3;
}

.course-item:first-child {
    border-top: 1px solid var(--divider-color);
}

.course-item h3 {
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--text-secondary);
    transition: color 0.3s;
}

.course-item .arrow {
    display: none;
}

.course-item:hover h3 {
    color: var(--primary-blue);
}

.course-item:hover .arrow {
    display: none;
}

.view-all {
    margin-top: 40px;
    font-size: var(--text-base);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Courses Responsive */
@media (min-width: 1920px) {
    .section-bg-title {
        top: -120px;
    }
}

@media (min-width: 1200px) {
    .core-courses .section-bg-title {
        grid-column: 9 / 13;
    }
}

@media (min-width: 810px) and (max-width: 1199px) {
    .courses-image {
        top: 215px;
    }
}

@media (max-width: 809px) {
    .core-courses .section-bg-title {
        left: var(--container-padding);
    }

    .courses-layout {
        flex-direction: column;
    }

    .courses-image {
        display: none;
    }

    .courses-list {
        width: 100%;
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   7. ANIMATIONS & FOOTER
   ========================================================================== */

.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000),
        transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    will-change: opacity, transform;
}

.reveal-item.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-fade {
    opacity: 0;
    transition: opacity 1s ease-out;
    will-change: opacity;
}

.reveal-fade.active {
    opacity: 1;
}

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}

.parallax-bg {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-item {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

.site-footer {
    background-color: #F3F3F3;
    height: 600px;
    position: relative;
    margin-top: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-items: start;
    padding-top: 64px;
}

.footer-logo {
    grid-column: 11 / 13;
    width: 100%;
    height: auto;
    display: block;
    opacity: 1;
}

.footer-logo img {
    width: 100%;
    height: auto;
}

@media (max-width: 1199px) {
    .site-footer {
        height: 360px;
        padding: 60px 0;
    }

    .footer-logo {
        grid-column: 1 / -1;
        position: static;
        margin: 0 auto;
        transform: none;
        max-width: 200px;
    }
}

/* ==========================================================================
   8. SUBPAGE LAYOUT
   ========================================================================== */

.subpage-content {
    align-items: start;
    min-height: 60vh;
}

.subpage-main {
    grid-column: 3 / 10;
}

.subpage-sidebar {
    grid-column: 10 / 12;
    padding-left: 40px;
}

/* Subpage Responsive */
@media (min-width: 1200px) {
    .subpage-main {
        grid-column: 2 / 9;
    }

    .subpage-sidebar {
        grid-column: 9 / 12;
    }
}

@media (max-width: 1199px) {
    .subpage-main {
        grid-column: 2 / 8;
    }

    .subpage-sidebar {
        grid-column: 8 / 12;
        padding-left: 24px;
    }
}

@media (max-width: 809px) {
    .subpage-content {
        row-gap: 40px;
    }

    .subpage-main {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .subpage-sidebar {
        grid-column: 1 / -1;
        padding-left: 0;
    }
}

/* ==========================================================================
   9. PAGE TITLE & INTRO PAGE
   ========================================================================== */


.page-title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 200;
    color: var(--text-light);
    line-height: 1;
    white-space: nowrap;
    grid-column: 3 / 13;
}

.page-title--bg {
    position: absolute;
    top: var(-(--spacing-lg));
    left: 0;
    z-index: 10;
    pointer-events: none;
}

.intro-image-wrapper {
    grid-column: 3 / 13;
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.intro-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-content {
    grid-column: 3/ 9;
    margin-top: 40px;
}

.intro-section {
    margin-bottom: 60px;
}

.intro-section:last-child {
    margin-bottom: 0;
}

.intro-heading {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    /* Based on DSL */
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 24px;
    line-height: 1.2;
}

.intro-text {
    font-family: 'Inter', var(--font-sans);
    font-size: var(--text-base);
    font-weight: 300;
    /* Light */
    color: var(--text-primary);
    line-height: 1.8;
}

/* Intro & Page Title Responsive */
@media (max-width: 1199px) {
    .page-title {
        grid-column: 2 / 12;
    }

    .intro-image-wrapper {
        grid-column: 2 / 12;
    }

    .intro-content {
        grid-column: 2 / 12;
    }
}

@media (max-width: 1199px) {
    .intro-image-wrapper {
        grid-column: 1 / -1;
        width: 100%;
    }

    .intro-content {
        grid-column: 2 / 10;
    }

    .intro-heading {
        font-size: 32px;
    }
}

@media (max-width: 809px) {
    .page-title {
        grid-column: 2/5;
    }


    .intro-content {
        grid-column: 2 / 12;
    }

    .intro-heading {
        font-size: 24px;
    }

    .intro-section {
        margin-bottom: 40px;
    }
}

/* ==========================================================================
   10. NEWS subpage layout
   ========================================================================== */

.news-page .page-title--bg {
    z-index: -1;
    color: rgba(207, 207, 207, 0.5);
}

.news-hero-image {
    grid-column: 3 / 13;
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 2.5 / 1;
    /* Wider than intro */
    overflow: hidden;
}

.news-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Single Article Styles */
.news-article {
    grid-column: 3 / 9;
    /* Matches DSL width approx */
    margin-top: var(--spacing-md)
}

.article-header {
    grid-column: 3 / 9;
    margin-bottom: 40px;

}


.article-date {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 24px;
    margin-top: 16px;
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.article-date .day {
    font-family: var(--font-sans);
    font-size: 48px;
    font-weight: 400;
    color: var(--accent-orange);
    line-height: 1;
}

.article-date .month {
    font-family: 'Inter', var(--font-sans);
    font-size: 16px;
    font-weight: 300;
    color: var(--text-primary);
}

.article-title {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    /* Matches DSL Title */
    font-weight: 400;
    color: var(--primary-blue);
    line-height: 1.2;
    margin-top: var(--spacing-md);
}

.article-content {
    font-family: 'Inter', var(--font-sans);
    font-size: var(--text-base);
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.8;
}

.article-content p {
    margin-bottom: 24px;
}

.back-link {
    font-family: 'Inter', var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.back-link:hover {
    color: var(--accent-orange);
}

/* Header Actions */
.header-actions {
    display: flex;
    grid-column: 11 / 13;
    justify-self: end;
    align-items: center;
    gap: 32px;
    margin-top: 13px;
}

.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.search-btn:hover {
    transform: scale(1.1);
}

/* News Responsive */
@media (max-width: 1199px) {
    .news-bg-title {
        font-size: 60px;
        position: static;
        margin-bottom: 20px;
        grid-column: 1 / -1;
        padding-left: var(--container-padding);
    }

    .news-hero-image {
        grid-column: 1 / -1;
    }

    .news-article {
        grid-column: 1 / -1;
        padding: 0 var(--container-padding);
        margin-top: 40px;
    }

    .article-title {
        font-size: 32px;
    }
}

@media (max-width: 809px) {
    .news-page .page-title--bg {
        font-size: 40px;
    }

    .news-hero-image {
        aspect-ratio: 16/9;
    }

    .article-title {
        font-size: 24px;
    }

    .header-actions {
        grid-column: 10 / 13;
    }
}

/* ==========================================================================
   11. NEWS LIST PAGE
   ========================================================================== */

a {
    text-decoration: none;
    color: var(--primary-blue)
}


.news-list-container {
    grid-column: 3 / 11;
    margin-top: var(--spacing-lg);
}

.news-list .news-list-item:first-child {
    margin-top: var(--spacing-2xl);
}

/* News List Items - Masonry Style */
.news-list-item {
    width: 100%;
    padding-bottom: 0;
    border-bottom: none;
    break-inside: avoid;
    margin-bottom: var(--spacing-xl);
    display: inline-block;
}

.news-list-item .news-thumb {
    width: 100%;
    margin-bottom: var(--spacing-md);
    aspect-ratio: auto;
    /* Let image define height for masonry variety */
}

.news-list-item .news-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.news-list-item .news-info {
    width: 100%;
}

.news-list-item .news-title {
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-sm);
}

.news-list-item .news-excerpt {
    font-size: var(--text-base);
    margin-bottom: var(--spacing-sm);
    -webkit-line-clamp: 4;
}

.news-list-item .news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    border-top: 1px solid var(--divider-color);
    padding-top: 16px;
    margin-top: 16px;
}

.news-list-item .news-meta .date {
    font-family: var(--font-sans);
}

.news-list-item .read-more-link {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s;
}

.news-list-item .read-more-link:hover {
    color: var(--primary-blue);
}

/* News List Responsive */
@media (max-width: 1199px) {
    .news-list-container {
        grid-column: 3/ 11;
        /* Expand to fill space if sidebar moves or just take more space */
    }

}

@media (max-width: 809px) {
    .news-list-container {
        grid-column: 1 / -1;
        margin-top: 40px;
    }

    .news-list {
        column-count: 1;
        column-gap: 0;
    }

    .news-list-item .news-title {
        font-size: 18px;
    }
}

/* Parallax Optimization */
[data-parallax-speed] {
    /* Optional: Ensure z-index layering if needed */
}

/* Dynamic Masonry for News List */
.news-list {
    column-count: 2;
    column-gap: var(--spacing-xl);
    width: 100%;
    display: block;
}

@media (max-width: 1199px) {
    .news-list {
        column-gap: var(--spacing-lg);

    }
}

@media (max-width: 809px) {
    .news-list {
        column-count: 1;
    }

    .news-list-item {
        margin-bottom: var(--spacing-lg);
    }

    .news-list .news-list-item:first-child {
        margin-top: var(--spacing-lg);
    }

}