/* ---------------------------------------------------------------------------
   Fonts — all self-hosted. Space Grotesk for body and UI, Clash Display for
   headings. Inter stays defined as a fallback and a quick way back: point the
   two custom properties below at "Inter" to revert.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/space-grotesk-latin-300-normal.5b9c7f0142dc.woff2") format("woff2");
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/space-grotesk-latin-400-normal.1a806675790e.woff2") format("woff2");
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/space-grotesk-latin-500-normal.ab4861869c91.woff2") format("woff2");
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/space-grotesk-latin-600-normal.49f2dd2d2132.woff2") format("woff2");
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/space-grotesk-latin-700-normal.f9e147a59a93.woff2") format("woff2");
}

@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/clash-display-500.b94bd6584596.woff2") format("woff2");
}
@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/clash-display-600.3ac748889874.woff2") format("woff2");
}
@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/clash-display-700.ea80c2358066.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-latin-400-normal.da03732a27e1.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-latin-700-normal.8ca0a5155296.woff2") format("woff2");
}

:root {
    --tws-font-body: "Space Grotesk", "Inter", system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tws-font-headings: "Clash Display", "Space Grotesk", system-ui, sans-serif;
    --bs-font-sans-serif: var(--tws-font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand,
.card-title {
    font-family: var(--tws-font-headings);
}

/* Brand logo — large on desktop, scaled down on the collapsed mobile navbar
   so the header never forces horizontal overflow. */
.navbar-brand-logo {
    height: 110px;
    width: auto;
}

@media (max-width: 991.98px) {
    .navbar-brand-logo {
        height: 52px;
    }
}

/* Navbar links — subtle, theme-aware hover/active treatment. */
nav li.nav-item .nav-link {
    transition: color 0.15s ease-in-out;
}

nav li.nav-item .nav-link:hover,
nav li.nav-item .nav-link:focus,
nav li.nav-item .nav-link.active {
    color: var(--bs-warning);
}

.dropdown-menu li {
    position: relative;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}

/* Touch devices get no :hover, so the flyout would be unreachable. On the
   collapsed mobile navbar and on any pointer without hover, drop the flyout
   and show the submenu inline as an indented list. */
@media (max-width: 991.98px), (hover: none) {
    .dropdown-menu .dropdown-submenu {
        display: block;
        position: static;
        top: auto;
        left: auto;
        border: 0;
        padding-left: 1rem;
        margin: 0;
        box-shadow: none;
        background: transparent;
    }

    .navbar .dropdown-submenu > li > .dropdown-item {
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------------
   Hero logo splash (landing page)
   --------------------------------------------------------------------------- */
.hero-splash__logo {
    width: min(70vw, 340px);
    height: auto;
}

@media (min-width: 768px) {
    .hero-splash__logo {
        width: min(40vw, 460px);
    }
}

.hero-splash__scroll {
    color: var(--bs-emphasis-color);
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
}

.hero-splash__scroll:hover,
.hero-splash__scroll:focus {
    opacity: 1;
}

/* Smooth-scroll when the scroll cue is clicked. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-splash__logo {
        animation: hero-fade-in 1.1s ease-out both;
    }

    .hero-splash__tagline {
        animation: hero-fade-in 1.1s ease-out 0.25s both;
    }

    .hero-splash__scroll {
        animation: hero-bounce 2s ease-in-out infinite;
    }
}

@keyframes hero-fade-in {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes hero-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}

/* ---------------------------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------------------------- */
.site-breadcrumb {
    font-size: 0.8rem;
    --bs-breadcrumb-divider: '\203A'; /* › */
}

/* Lay each item out as a centered row so the home icon lines up with the text. */
.site-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
}

.site-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color);
}

.site-breadcrumb a {
    color: var(--bs-body-color);
    transition: color 0.15s ease-in-out;
}

.site-breadcrumb a:hover,
.site-breadcrumb a:focus {
    color: var(--bs-warning);
}

.site-breadcrumb .breadcrumb-item.active {
    color: var(--bs-secondary-color);
}

/* Keep long page titles on one line with an ellipsis. */
.site-breadcrumb .breadcrumb-item > a:not(.breadcrumb-home),
.site-breadcrumb .breadcrumb-item.active > span {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Content images — full width on phones, a share of the column from md up.
   --------------------------------------------------------------------------- */
.content-image {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .content-image--small {
        width: 25%;
    }

    .content-image--medium {
        width: 50%;
    }

    .content-image--large {
        width: 75%;
    }
}

/* ---------------------------------------------------------------------------
   Gallery lightbox — show the whole image, as large as the screen allows.
   The dark theme turns carousel arrows black, which hides them on the black
   lightbox. Keep them white, with a shadow for bright photos.
   --------------------------------------------------------------------------- */
.gallery-lightbox {
    --bs-carousel-control-icon-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}

.gallery-lightbox__image {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
}

/* ---------------------------------------------------------------------------
   Carousel — cap the banner height and crop instead of stretching tall.
   --------------------------------------------------------------------------- */
.carousel-item .carousel-img {
    height: clamp(240px, 45vh, 520px);
    object-fit: cover;
}

/* Full-screen intro hero. While it is showing, the page scroll is locked and
   the hero is a fixed overlay covering everything. On the first scroll/tap it
   slides up out of view, then it is removed for good — revealing the normal,
   always-scrollable content page (navbar + content + footer) beneath it. */
body.has-hero {
    overflow: hidden;
}

body.has-hero .hero-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: var(--bs-body-bg);
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

body.hero-leaving .hero-splash {
    transform: translateY(-100%);
}

/* ---------------------------------------------------------------------------
   Archive index — on phones the years stack. From the sm breakpoint each
   year is a tile and the years flow side by side. A year with two
   productions spans two columns, a year with more spans the whole row.
   --------------------------------------------------------------------------- */
.archive-years {
    --archive-columns: 1;
    display: grid;
    grid-template-columns: repeat(var(--archive-columns), minmax(0, 1fr));
    gap: 2rem 1.5rem;
}

.archive-year {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto;
    grid-auto-rows: 1fr;
    row-gap: 1rem;
}

.archive-year > h2 {
    grid-column: 1 / -1;
}

@media (min-width: 576px) {
    .archive-years {
        --archive-columns: 2;
    }

    .archive-year-span-2 {
        grid-column: span 2;
    }

    .archive-year-full {
        grid-column: 1 / -1;
    }
}

@media (min-width: 992px) {
    .archive-years {
        --archive-columns: 3;
    }
}

/* ---------------------------------------------------------------------------
   Archive listing cards — the cover image keeps a fixed 4:3 box at every
   window width, so the grid stays even and the image never stretches.
   --------------------------------------------------------------------------- */
.archive-card {
    height: 100%;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.archive-card .card-img-top {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.archive-card:hover,
.archive-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.25);
}

.archive-card:hover .card-img-top,
.archive-card:focus-visible .card-img-top {
    transform: scale(1.04);
}

.archive-card:focus-visible {
    outline: 2px solid var(--bs-warning);
    outline-offset: 2px;
}

/* Keep titles to two lines so a long one never pushes the grid out of step. */
.archive-card .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .archive-card,
    .archive-card .card-img-top {
        transition: none;
    }

    .archive-card:hover,
    .archive-card:focus-visible,
    .archive-card:hover .card-img-top,
    .archive-card:focus-visible .card-img-top {
        transform: none;
    }
}