/* Modern thema: strak, grote typografie, veel beeld (MIJLPALEN.md, "Expressief").
   Vult site.css aan; wijzigt geen kleuren/lettertypes (dat blijft de per-tenant instelling),
   enkel vorm, ritme en compositie: hoekig i.p.v. rond, groot contrast, veel witruimte. */

body[data-theme="modern"] {
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-full: 0;
    --shadow-sm: none;
    --shadow-md: none;
    --space-xl: 5rem;
    --space-2xl: 7rem;
    --font-size-hero: clamp(2.75rem, 6vw + 1rem, 5.5rem);
    /* D3: the largest contrast between steps - big, loud section titles (Expressief). */
    --type-ratio: 1.333;
    /* D4 component hooks: outlined panels and badges instead of tinted fills - strak, grafisch. */
    /* D5: panels become a dark band across the full width - the "Expressief" rhythm of dark
       and light sections. The hooks keep text, headings and badges readable on it. */
    --panel-bg: var(--color-inverse-bg);
    --panel-text: var(--color-inverse-text);
    --panel-heading: var(--color-inverse-text);
    --panel-muted: var(--color-inverse-muted);
    --panel-rule: color-mix(in srgb, var(--color-inverse-text) 18%, transparent);
    --panel-badge-text: var(--color-inverse-text);
    --panel-badge-border: 1px solid var(--color-inverse-muted);
    --panel-padding: var(--space-xl) 0;
    --badge-bg: transparent;
    --badge-border: 1px solid var(--color-muted);
    --panel-badge-bg: transparent;
    --letter-spacing-wide: 0.08em;
}

body[data-theme="modern"] h1,
body[data-theme="modern"] h2,
body[data-theme="modern"] h3,
body[data-theme="modern"] .btn,
body[data-theme="modern"] .badge {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

body[data-theme="modern"] h1 {
    line-height: 0.95;
}

body[data-theme="modern"] .site-header {
    background-color: var(--color-background);
    color: var(--color-text);
    border-bottom: 2px solid var(--color-primary);
}

body[data-theme="modern"] .site-header__brand {
    color: var(--color-primary);
    font-size: 1.15rem;
}

/* Transparant-over-foto (mijlpaal 7): begint doorzichtig over de hero, wordt pas ondoorzichtig
   na scrollen (site.js zet dan .site-header--scrolled). Specifieker dan de kale
   .site-header--transparent-regel hierboven, om het thema's eigen achtergrond te kunnen slopen. */
body[data-theme="modern"] .site-header.site-header--transparent {
    background-color: transparent;
    color: #fff;
    border-bottom-color: transparent;
}

body[data-theme="modern"] .site-header.site-header--transparent.site-header--scrolled {
    background-color: var(--color-background);
    color: var(--color-text);
    border-bottom-color: var(--color-primary);
}

/* .site-header__brand hardcodes its own color above, so the transparent state needs to
   override it explicitly too - it won't just follow .site-header's color like the nav links do. */
body[data-theme="modern"] .site-header--transparent .site-header__brand {
    color: #fff;
}

body[data-theme="modern"] .site-header--transparent.site-header--scrolled .site-header__brand {
    color: var(--color-primary);
}

/* Hero (mockup alignment - toneelgroepen.png, kolom Expressief: "De Vrije Scène",
   "Schaduwspel", "Het Derde Bedrijf", "Rood Fluweel", "Niets is Echt"): the photo fills the
   whole width of the screen, the text sits on its dark left side. A gradient over the photo
   keeps the text readable on any upload (same reasoning as the transparent header, mijlpaal
   12). Without a photo the hero is the same full-width dark band. */
body[data-theme="modern"] .block-header-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(88vh, 820px);
    /* Full-bleed: from screen edge to screen edge, whatever the page container is. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    gap: 0;
    background-color: var(--color-inverse-bg);
    color: var(--color-inverse-text);
}

body[data-theme="modern"] .block-header-hero__media {
    position: absolute;
    inset: 0;
    display: block;
}

body[data-theme="modern"] .block-header-hero__media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: 0;
}

body[data-theme="modern"] .block-header-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.6) 38%, rgba(0, 0, 0, 0.1) 72%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 40%);
}

body[data-theme="modern"] .block-header-hero__content {
    position: relative;
    z-index: 1;
    flex: 0 1 auto;
    width: 100%;
    max-width: calc(var(--content-max) + 2 * var(--gutter));
    margin: 0 auto;
    padding: calc(var(--space-2xl) + 4rem) var(--gutter) var(--space-xl);
}

body[data-theme="modern"] .block-header-hero h1 {
    max-width: 12ch;
    color: var(--color-inverse-text);
    font-size: clamp(3rem, 7vw + 1rem, 7rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: 0.01em;
}

/* One line in the accent color, like "LEVENDE MENSEN" - adjusted for contrast on the dark photo. */
body[data-theme="modern"] .hero-accent {
    color: var(--color-inverse-accent);
}

body[data-theme="modern"] .block-header-hero .lead {
    max-width: 38ch;
    color: var(--color-inverse-text);
}

/* The mockups' hero button: a white outline with an arrow, no brand color. */
body[data-theme="modern"] .block-header-hero .btn-primary {
    background-color: transparent;
    border-color: var(--color-inverse-text);
    color: var(--color-inverse-text);
}

body[data-theme="modern"] .block-header-hero .btn-primary:hover {
    filter: none;
    background-color: var(--color-inverse-text);
    color: var(--color-inverse-bg);
}

body[data-theme="modern"] .block-header-hero .next-up {
    border-color: color-mix(in srgb, var(--color-inverse-text) 35%, transparent);
    border-left-color: var(--color-inverse-accent);
    background-color: rgba(0, 0, 0, 0.35);
}

/* Full-bleed band without widening the page: the panel's own background is extended sideways
   by a shadow and clipped vertically, so there is never a horizontal scrollbar. */
body[data-theme="modern"] .panel:not(.panel--primary):not(.panel--inverse) {
    box-shadow: 0 0 0 100vmax var(--panel-bg);
    clip-path: inset(0 -100vmax);
}

/* The hero caption sits on the photo, big and quiet, like the mockups' "Kwetsbaar, krachtig,
   echt." White with a shadow: it is on an arbitrary uploaded photo (same reasoning as the
   transparent header, mijlpaal 12). */
body[data-theme="modern"] .block-header-hero__caption {
    position: absolute;
    z-index: 1;
    right: var(--gutter);
    bottom: var(--space-xl);
    max-width: 18ch;
    margin: 0;
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--step-2);
    line-height: var(--line-height-tight);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* D7: a dark footer closes the page, like the dark bands between sections. */
body[data-theme="modern"] {
    --footer-bg: var(--color-inverse-bg);
    --footer-text: var(--color-inverse-text);
    --footer-heading: var(--color-inverse-text);
    --footer-muted: var(--color-inverse-muted);
    --footer-rule: color-mix(in srgb, var(--color-inverse-text) 18%, transparent);
    --footer-border: 0;
}

/* On a phone the text fills the whole hero, so the caption would sit on top of it (the "next
   performance" card in particular). It is a decorative second layer - it simply steps aside. */
@media (max-width: 720px) {
    body[data-theme="modern"] .block-header-hero__caption {
        display: none;
    }
}

/* Uppercase with wide letter-spacing makes every word ~20% wider: on a small phone a long Dutch
   compound ("JONGERENGROEP") would otherwise only fit by breaking mid-word. */
@media (max-width: 480px) {
    body[data-theme="modern"] {
        --font-size-h2: min(var(--step-3), 0.9rem + 4vw);
    }

    body[data-theme="modern"] h2,
    body[data-theme="modern"] h3 {
        letter-spacing: 0.03em;
    }
}