/* =====================================================================
   landing.css — landing page: sticky header, diagonals, hero zoom,
   scroll reveal. Vanilla CSS, no animation libraries.
   ===================================================================== */

:root {
    --slant: clamp(24px, 4vw, 64px);
}

/* ---- Sticky header (transparent → solid on scroll) ---- */
.landing-header {
    transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
    background: transparent;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.landing-header.scrolled {
    background: var(--color-surface);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding-top: .25rem;
    padding-bottom: .25rem;
}
.landing-header.scrolled .nav-link {
    color: var(--color-text) !important;
}
.landing-header .nav-link {
    color: rgba(255,255,255,.85);
    position: relative;
    font-family: var(--font-ui);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: color .2s;
}
.landing-header .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width .3s, left .3s;
}
.landing-header .nav-link:hover::after,
.landing-header .nav-link.active::after {
    width: 100%;
    left: 0;
}
.landing-header .navbar-brand .brand-name {
    color: #fff;
    font-size: 1.5rem;
}
.landing-header.scrolled .navbar-brand .brand-name {
    color: var(--color-text);
}

/* ---- Hero ---- */
.hero {
    position: relative;
    min-height: 560px;
    height: 85vh;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    inset: 0;
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    will-change: transform;
}
.carousel-item.active .hero-slide img {
    animation: heroZoom calc(var(--hero-ms, 6000ms) + 1500ms) ease-out forwards;
}
@keyframes heroZoom {
    from { transform: scale(1); }
    to { transform: scale(1.12); }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(36,31,74,.75) 0%, rgba(36,31,74,.4) 100%);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: #fff;
}
.hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: #fff;
    margin-bottom: 1rem;
}
.hero-content h1 em.accent {
    color: var(--color-secondary);
}
.hero-content p {
    font-size: 1.1rem;
    max-width: 540px;
    margin-bottom: 1.5rem;
    color: rgba(255,255,255,.9);
}

/* Gradient fallback when no slides */
.hero-gradient-fallback {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* ---- Diagonal sections ---- */
.section-slant {
    position: relative;
    padding: calc(var(--slant) * 1.6) 0;
    clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
    margin-block: calc(var(--slant) * -1);
}
.section-slant--flip {
    clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 calc(100% - var(--slant)));
}
.section-bg-surface { background: var(--color-surface); }
.section-bg-bg { background: var(--color-bg); }
.section-bg-tint { background: rgba(91, 80, 200, .06); }
.section-bg-dark { background: var(--color-primary-dark); color: #fff; }

/* ---- Section headings ---- */
.section-tag {
    font-family: var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .75rem;
    color: var(--color-primary);
    margin-bottom: .5rem;
}
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    margin-bottom: 1rem;
}

/* ---- Topic cards ---- */
.topic-card {
    overflow: hidden;
    border-radius: 12px;
    transition: transform .3s, box-shadow .3s;
}
.topic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.topic-card img {
    transition: transform .4s ease-out;
}
.topic-card:hover img {
    transform: scale(1.06);
}

/* Angled image card bottom */
.card-img-angled {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

/* ---- Stats strip ---- */
.stats-strip {
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    padding: 1.5rem;
    margin-top: calc(var(--slant) * -1);
    position: relative;
    z-index: 3;
}
.stat-item {
    text-align: center;
}
.stat-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
}
.stat-label {
    font-family: var(--font-ui);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-muted);
}

/* ---- Scrollspy active link ---- */
.nav-link.active {
    color: var(--color-primary) !important;
}

/* ---- Back to top ---- */
.back-to-top {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    z-index: 1010;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.back-to-top.visible {
    display: flex;
}

/* ---- Reduced motion: disable zoom, autoplay, count-up ---- */
@media (prefers-reduced-motion: reduce) {
    .carousel-item.active .hero-slide img {
        animation: none;
    }
    .topic-card:hover {
        transform: none;
    }
    .topic-card:hover img {
        transform: none;
    }
}


/* ---- Header fixes ---- */
.landing-header .navbar-nav .nav-link { white-space: nowrap; }
.landing-header .navbar-brand { white-space: nowrap; }
.landing-header .navbar-toggler { border-color: rgba(255,255,255,.6); }
.landing-header .navbar-toggler-icon { filter: invert(1); }
.landing-header.scrolled .navbar-toggler-icon { filter: none; }

/* Mobile offcanvas: dark text on light panel */
.offcanvas.d-xl-none .nav-link { color: var(--color-text) !important; text-transform: none; }
.hero-content { padding-top: 90px; }

/* Header on inner pages (no hero behind it) */
body:not(:has(#hero)) .landing-header { background: var(--color-surface); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
body:not(:has(#hero)) .landing-header .nav-link,
body:not(:has(#hero)) .landing-header .brand-name { color: var(--color-text) !important; }
body:not(:has(#hero)) .landing-header .navbar-toggler-icon { filter: none; }
body:not(:has(#hero)) main { padding-top: 80px; }


/* ---- Header spacing (desktop >= 1200px) ---- */
@media (min-width: 1200px) {
    .landing-header .navbar-nav .nav-link { padding: .5rem .7rem; font-size: .8rem; }
    .landing-header .navbar-collapse > .d-flex { flex-shrink: 0; gap: .5rem !important; }
    .landing-header .navbar-collapse .btn { white-space: nowrap; padding: .4rem 1rem; font-size: .8rem; }
    .landing-header .navbar-brand { margin-right: 1.5rem; }
}

/* ---- Hero: always a gradient behind images; slides fill and zoom ---- */
.hero { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
.hero .carousel, .hero .carousel-inner, .hero .carousel-item { height: 100%; }
.hero-slide { overflow: hidden; }
.hero-slide img { transform-origin: center center; }
.carousel-item.active .hero-slide img { animation-name: heroZoom; animation-fill-mode: forwards; }


/* ---- Header: compact between 1200px and 1399px ---- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .landing-header .navbar-nav .nav-link { padding: .5rem .5rem; font-size: .78rem; letter-spacing: .3px; }
    .landing-header .navbar-brand .brand-name { font-size: 1.35rem; }
}
.landing-header .navbar-collapse { flex-wrap: nowrap; }

/* ---- Hero: carousel sits behind the text, text stays on top ---- */
.hero #heroCarousel { position: absolute; inset: 0; z-index: 0; }
.hero .hero-overlay { z-index: 1; }
.hero .hero-content { position: relative; z-index: 2; height: 100%; }