/*
 * gm-heroes.css - de zeven paginakoppen uit de blocks-library.
 *
 * Core laadt dit bestand zelf (Integrations\Assets, na gm-motion.css). Het is
 * plain CSS, dus het werkt op elke site, ook als het child theme de library
 * niet meescant in zijn Tailwind-build. De stylesheet van core en die van het
 * child theme laden erna en winnen dus.
 *
 * Waarom een eigen laag: een hero is de eerste en zwaarste sectie van de site.
 * Met alleen de sectie-basis uit gm-blokken.css werden alle zeven hetzelfde
 * recept. Hier krijgt elke kop een eigen compositie, en allemaal delen ze
 * dezelfde afspraken:
 *
 *   - licht en redactioneel: off-white, navy, haarlijnen als structuur, geen
 *     glas, geen gloed, geen pillen, geen afgeronde schaduwkaarten
 *   - fotografie voorop: foto's lopen tot de rand, rechte hoeken, een
 *     bijschrift in mono
 *   - één gevulde knop plus een tekstlink, niet twee pillen naast elkaar
 *   - vullen het scherm (min-height 100svh, 100vh als terugval), tenzij het
 *     block op "op inhoud" staat, en hebben iets op de vouw: een colofonregel
 *     met openingstijd, telefoon en adres, een spec-tabel, een strip die
 *     doorloopt
 *   - een cursief woord in de kop mag: *woord* in het titelveld wordt <em>
 *
 * Tokens die een child theme mag overschrijven:
 *
 *   --gm-header-hoogte   hoogte van de eigen header, dan is header + hero
 *                        samen precies één scherm (standaard 0px)
 *   --gm-hero-kop        lettergrootte van de kop (kop-s smaller, kop-l groter)
 *   --gm-hero-ruimte     verticale binnenruimte
 *   --gm-hero-rand       zijmarge, sluit aan op max-w-7xl
 *
 * Inhoud:
 *   1. Tokens en basis (.gm-paginakop)
 *   2. Gedeelde onderdelen: label, openingstijd, colofon, spec-tabel, kenteken,
 *      foto met bijschrift, etiket, genummerde lijst, kruimelpad
 *   3. hero            tekst naast het uitgelichte voertuig, spec-tabel eroverheen
 *   4. hero-image      schermvullende foto, kop op een wit paneel onderin
 *   5. hero-split      tekst met pluspunten naast een foto op volle hoogte
 *   6. hero-zoek       zoekbalk op de vouw, foto en net binnen rechts
 *   7. hero-carousel   kop boven een strip die de rand over loopt
 *   8. hero-minimaal   typografisch, intro rechts, colofon onderin
 *   9. hero-secondary  paginakop met kruimelpad, redactionele verdeling
 *  10. prefers-reduced-motion
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens en basis
 * ------------------------------------------------------------------------- */

:root {
    --gm-header-hoogte: 0px;
    --gm-hero-rand: max(1.5rem, var(--gridPadding, 1.5rem));
    --gm-hero-kop: clamp(2.5rem, 1.25rem + 4.5vw, 5.75rem);
    --gm-hero-kop-s: clamp(2.375rem, 1rem + 3.8vw, 4.75rem);
    --gm-hero-kop-l: clamp(3rem, 1rem + 6.6vw, 7.75rem);
    --gm-hero-ruimte: clamp(2.5rem, 5.5vw, 4.5rem);
    --gm-hero-kolom: clamp(2rem, 5vw, 5rem);
}

.gm-paginakop {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
}

.gm-paginakop.gm-sectie--grijs,
.gm-paginakop.gm-sectie--donker,
.gm-paginakop.gm-sectie--accent {
    margin-top: 0;
    padding-bottom: 0;
}

.gm-paginakop--vol {
    min-height: calc(100vh - var(--gm-header-hoogte));
    min-height: calc(100svh - var(--gm-header-hoogte));
}

.gm-paginakop h1 {
    font-size: var(--gm-hero-kop);
    line-height: 1.02;
    letter-spacing: -0.028em;
    text-wrap: balance;
    margin: 0;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.gm-paginakop h1 em {
    font-style: italic;
    font-weight: inherit;
}

.gm-paginakop .gm-intro {
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 46ch;
}

@media (min-width: 768px) {
    .gm-paginakop .gm-intro {
        font-size: 1.1875rem;
    }
}

.gm-paginakop__acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
}

.gm-paginakop__acties .bttn {
    padding: 1.05rem 1.5rem;
    font-size: 0.9375rem;
}

/* Tekstlink als tweede actie, geen tweede pil */
.gm-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid currentColor;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-body-active);
    text-decoration: none;
    transition: color 160ms ease;
}

.gm-hero-link:hover {
    color: var(--gm-accent-op);
}

/* In een hero staat de stip stil: geen pulserende "live"-indicator */
.gm-paginakop .gm-dot--open {
    animation: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * 2. Gedeelde onderdelen
 * ------------------------------------------------------------------------- */

/* Klein label boven een kop, zonder streep. Alleen als het iets toevoegt. */
.gm-hero-label {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-body-secondary);
}

/* "Nu open tot 17:30", zie template-parts/hero/openingstijd.php */
.gm-hero-open {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-body);
}

.gm-hero-open .gm-dot {
    width: 0.4rem;
    height: 0.4rem;
}

/* Colofon: openingstijd, telefoon, adres en optioneel echte cijfers, op een
   haarlijn. Zie template-parts/hero/meta.php. */
.gm-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border-primary);
}

.gm-hero-meta--raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem 1.5rem;
}

.gm-hero-meta--los {
    padding-top: 0;
    border-top: 0;
}

.gm-hero-meta__item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.gm-hero-meta__label {
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-body-secondary);
}

.gm-hero-meta__waarde {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-body-active);
}

.gm-hero-meta__waarde a {
    color: inherit;
    text-decoration: none;
    transition: color 160ms ease;
}

.gm-hero-meta__waarde a:hover {
    color: var(--gm-accent-op);
}

.gm-hero-meta__getal {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.gm-hero-meta__getal small {
    font-size: 0.6em;
    color: var(--gm-accent-op);
}

/* Spec-tabel van het uitgelichte voertuig: een vel met haarlijnen, geen
   schaduw, geen ronde hoeken. Zie template-parts/hero/voertuig-kaart.php. */
.gm-hero-spec {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border-primary);
    color: var(--gm-licht-body-active);
    text-decoration: none;
    --color-body-active: var(--gm-licht-body-active);
    --color-body: var(--gm-licht-body);
    --color-body-secondary: var(--gm-licht-body-secondary);
    --color-border-primary: var(--gm-licht-border-primary);
}

.gm-hero-spec__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border-primary);
}

.gm-hero-spec__label {
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gm-accent);
}

.gm-hero-spec__titel {
    display: block;
    padding: 1rem 1.25rem 0.5rem;
    font-family: var(--font-display, inherit);
    font-size: 1.375rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-body-active);
    overflow-wrap: anywhere;
}

.gm-hero-spec__sub {
    display: block;
    padding: 0 1.25rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-body);
}

.gm-hero-spec__titel + .gm-hero-spec__rijen {
    margin-top: 0.5rem;
}

.gm-hero-spec__rijen {
    margin: 0;
}

.gm-hero-spec__rijen > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--color-border-primary);
}

.gm-hero-spec__rijen dt {
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-body-secondary);
}

.gm-hero-spec__rijen dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--color-body-active);
}

.gm-hero-spec__voet {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem 1.125rem;
    border-top: 1px solid var(--color-border-primary);
}

.gm-hero-spec__prijs {
    font-family: var(--font-display, inherit);
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-body-active);
}

.gm-hero-spec__prijs small {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-body-secondary);
}

.gm-hero-spec:hover .gm-hero-link {
    color: var(--gm-accent);
}

/* Nederlandse kentekenplaat */
.gm-kenteken {
    display: inline-flex;
    align-items: stretch;
    height: 1.625rem;
    overflow: hidden;
    border-radius: 3px;
    background: #f5c518;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    color: #14161a;
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    white-space: nowrap;
}

.gm-kenteken::before {
    content: "NL";
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 1rem;
    padding-bottom: 0.2rem;
    background: #1a3c8f;
    color: #fff;
    font-size: 0.4rem;
    letter-spacing: 0;
}

.gm-kenteken span {
    display: flex;
    align-items: center;
    padding: 0 0.55rem 0 0.5rem;
}

/* Foto die een vak vult, rechte hoeken; met bijschrift onder of op de foto */
.gm-hero-foto {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.gm-hero-foto > img,
.gm-hero-foto > picture > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gm-hero-foto > .gm-foto-placeholder {
    position: absolute;
    inset: 0;
}

.gm-hero-figuur {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
}

.gm-hero-caption {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--color-body-secondary);
}

.gm-hero-caption--op-foto {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.125rem;
    z-index: 2;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.gm-hero-caption--op-foto.is-rechts {
    text-align: right;
}

/* Etiket op een foto: een wit papiertje, geen pil */
.gm-hero-etiket {
    position: absolute;
    z-index: 2;
    left: 1.25rem;
    top: 1.25rem;
    padding: 0.5rem 0.7rem;
    background: #fff;
    color: var(--gm-licht-body-active);
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.gm-hero-etiket--accent {
    background: var(--gm-accent);
    color: #fff;
}

/* Genummerde lijst met haarlijnen (pluspunten) */
.gm-hero-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: gm-hero-lijst;
}

.gm-hero-lijst li {
    counter-increment: gm-hero-lijst;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--color-border-primary);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-body-active);
}

.gm-hero-lijst li:last-child {
    border-bottom: 1px solid var(--color-border-primary);
}

.gm-hero-lijst li::before {
    content: counter(gm-hero-lijst, decimal-leading-zero);
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    color: var(--gm-accent-op);
}

/* Kruimelpad */
.gm-hero-kruimels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-body-secondary);
}

.gm-hero-kruimels a {
    color: inherit;
    text-decoration: none;
}

.gm-hero-kruimels a:hover {
    color: var(--color-body-active);
}

.gm-hero-kruimels [aria-current] {
    color: var(--color-body-active);
}

.gm-hero-kruimels li + li::before {
    content: "/";
    margin-right: 0.6rem;
    opacity: 0.5;
}

/* ---------------------------------------------------------------------------
 * 3. hero: tekst links, uitgelicht voertuig rechts tot de rand
 * ------------------------------------------------------------------------- */

.gm-hero h1 {
    font-size: var(--gm-hero-kop-s);
}

.gm-hero__raster {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.gm-hero__tekst {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: var(--gm-hero-ruimte) var(--gm-hero-rand) 2rem;
}

.gm-hero__beeld {
    position: relative;
    display: flex;
    flex-direction: column;
}

.gm-hero__foto {
    aspect-ratio: 4 / 3;
}

.gm-hero__spec {
    position: relative;
    z-index: 2;
    margin: -3rem var(--gm-hero-rand) 0;
}

.gm-hero__meta {
    padding: 2rem var(--gm-hero-rand) var(--gm-hero-ruimte);
}

@media (min-width: 1024px) {
    .gm-hero__raster {
        grid-template-columns: var(--gm-hero-rand) minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .gm-hero__tekst {
        grid-column: 2;
        grid-row: 1;
        justify-content: center;
        padding: var(--gm-hero-ruimte) var(--gm-hero-kolom) 2rem 0;
    }

    .gm-hero__meta {
        grid-column: 2;
        grid-row: 2;
        padding: 0 var(--gm-hero-kolom) var(--gm-hero-ruimte) 0;
    }

    .gm-hero__beeld {
        grid-column: 3;
        grid-row: 1 / span 2;
        display: block;
        min-height: 32rem;
    }

    .gm-hero__foto {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }

    .gm-hero__spec {
        position: absolute;
        left: 0;
        bottom: var(--gm-hero-ruimte);
        width: min(24rem, 78%);
        margin: 0;
        transform: translateX(-3.25rem);
    }
}

/* ---------------------------------------------------------------------------
 * 4. hero-image: schermvullende foto, kop op een wit paneel onderin
 * ------------------------------------------------------------------------- */

.gm-hero-image {
    justify-content: flex-end;
}

.gm-hero-image--klein  { min-height: 28rem; }
.gm-hero-image--medium { min-height: 36rem; }
.gm-hero-image--groot  { min-height: 44rem; }

@media (min-width: 768px) {
    .gm-hero-image--klein  { min-height: 32rem; }
    .gm-hero-image--medium { min-height: 40rem; }
    .gm-hero-image--groot  { min-height: 50rem; }
}

.gm-hero-image__foto {
    position: relative;
    height: 62svh;
    min-height: 22rem;
    flex-shrink: 0;
}

.gm-hero-image__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gm-hero-image__inhoud {
    position: relative;
    display: flex;
}

.gm-hero-image__paneel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    padding: 2rem var(--gm-hero-rand) var(--gm-hero-ruimte);
    background: var(--color-bg-primary, #fbfbfa);
    color: var(--gm-licht-body-active);
    --color-body-active: var(--gm-licht-body-active);
    --color-body: var(--gm-licht-body);
    --color-body-secondary: var(--gm-licht-body-secondary);
    --color-border-primary: var(--gm-licht-border-primary);
}

.gm-hero-image__paneel h1 {
    max-width: 16ch;
}

.gm-hero-image__paneel .gm-hero-meta {
    margin-top: 0.5rem;
}

@media (min-width: 1024px) {
    .gm-hero-image__foto {
        position: absolute;
        inset: 0;
        height: auto;
        min-height: 0;
    }

    .gm-hero-image__inhoud {
        padding-top: calc(var(--gm-hero-ruimte) * 2);
    }

    .gm-hero-image__paneel {
        width: min(46rem, calc(100% - var(--gm-hero-rand)));
        padding: 2.5rem var(--gm-hero-kolom) var(--gm-hero-ruimte) var(--gm-hero-rand);
    }

    .gm-hero-image--midden .gm-hero-image__paneel {
        margin-inline: auto;
        align-items: center;
        text-align: center;
        padding-inline: var(--gm-hero-kolom);
    }

    .gm-hero-image--midden .gm-hero-image__paneel h1 {
        max-width: 20ch;
    }

    .gm-hero-image--midden .gm-paginakop__acties,
    .gm-hero-image--midden .gm-hero-meta {
        justify-content: center;
    }

    .gm-hero-image--rechts .gm-hero-image__paneel {
        margin-left: auto;
        padding: 2.5rem var(--gm-hero-rand) var(--gm-hero-ruimte) var(--gm-hero-kolom);
    }
}

/* ---------------------------------------------------------------------------
 * 5. hero-split: tekst met pluspunten naast een foto op volle hoogte
 * ------------------------------------------------------------------------- */

.gm-hero-split h1 {
    font-size: var(--gm-hero-kop-s);
}

.gm-hero-split__raster {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.gm-hero-split__tekst {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: var(--gm-hero-ruimte) var(--gm-hero-rand) 2.5rem;
}

.gm-hero-split__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-primary);
}

.gm-hero-split__bel {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: var(--color-body-active);
    text-decoration: none;
}

.gm-hero-split__bel span:first-child {
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-body-secondary);
}

.gm-hero-split__bel strong {
    font-family: var(--font-display, inherit);
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: color 160ms ease;
}

.gm-hero-split__bel:hover strong {
    color: var(--gm-accent-op);
}

.gm-hero-split__beeld {
    position: relative;
    aspect-ratio: 4 / 3;
}

.gm-hero-split__beeld--4-5  { aspect-ratio: 4 / 5; }
.gm-hero-split__beeld--1-1  { aspect-ratio: 1 / 1; }
.gm-hero-split__beeld--16-9 { aspect-ratio: 16 / 9; }

.gm-hero-split__foto {
    position: absolute;
    inset: 0;
}

@media (min-width: 1024px) {
    .gm-hero-split__raster {
        grid-template-columns: var(--gm-hero-rand) minmax(0, 5fr) minmax(0, 7fr);
    }

    .gm-hero-split--links .gm-hero-split__raster {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) var(--gm-hero-rand);
    }

    .gm-hero-split__tekst {
        grid-column: 2;
        justify-content: center;
        padding: var(--gm-hero-ruimte) var(--gm-hero-kolom) var(--gm-hero-ruimte) 0;
    }

    .gm-hero-split--links .gm-hero-split__tekst {
        padding: var(--gm-hero-ruimte) 0 var(--gm-hero-ruimte) var(--gm-hero-kolom);
    }

    .gm-hero-split__beeld {
        grid-column: 3;
        aspect-ratio: auto;
        min-height: 32rem;
    }

    .gm-hero-split--links .gm-hero-split__beeld {
        grid-column: 1;
    }

    .gm-hero-split--links .gm-hero-etiket {
        left: auto;
        right: 1.25rem;
    }
}

/* ---------------------------------------------------------------------------
 * 6. hero-zoek: zoekbalk op de vouw, foto en net binnen rechts
 * ------------------------------------------------------------------------- */

.gm-hero-zoek__inhoud {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tekst" "zij" "zoek" "onder";
    gap: 2rem;
    padding: var(--gm-hero-ruimte) var(--gm-hero-rand);
}

.gm-hero-zoek__tekst {
    grid-area: tekst;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 44rem;
}

.gm-hero-zoek__tekst h1 {
    max-width: 14ch;
}

.gm-hero-zoek__zij {
    grid-area: zij;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gm-hero-zoek__zij .gm-hero-figuur .gm-hero-foto {
    aspect-ratio: 16 / 10;
}

.gm-hero-zoek__lijst {
    display: flex;
    flex-direction: column;
}

.gm-hero-zoek__lijstkop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-primary);
}

.gm-hero-zoek__lijstkop .gm-hero-link {
    font-size: 0.8125rem;
}

.gm-hero-zoek__rij {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-border-primary);
    color: inherit;
    text-decoration: none;
}

.gm-hero-zoek__rij .gm-hero-foto {
    aspect-ratio: 4 / 3;
}

.gm-hero-zoek__rij strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-body-active);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 160ms ease;
}

.gm-hero-zoek__rij:hover strong {
    color: var(--gm-accent-op);
}

.gm-hero-zoek__rij small {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    color: var(--color-body-secondary);
}

.gm-hero-zoek__rij em {
    font-family: var(--font-display, inherit);
    font-style: normal;
    font-size: 1rem;
    white-space: nowrap;
    color: var(--color-body-active);
}

/* De zoekbalk: één strook met velden gescheiden door haarlijnen en een
   gevulde knop als laatste vak. Geen ronde hoeken, geen schaduw. */
.gm-hero-zoek__balk {
    grid-area: zoek;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: #fff;
    border: 1px solid var(--color-border-primary);
    --color-body-active: var(--gm-licht-body-active);
    --color-body: var(--gm-licht-body);
    --color-body-secondary: var(--gm-licht-body-secondary);
    --color-border-primary: var(--gm-licht-border-primary);
}

.gm-hero-zoek__veld {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--color-border-primary);
}

.gm-hero-zoek__veld span {
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-body-secondary);
}

.gm-hero-zoek__veld select {
    width: 100%;
    padding: 0.2rem 2rem 0.2rem 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: right 0 center;
    font-family: var(--font-body, inherit);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-body-active);
    box-shadow: none;
}

.gm-hero-zoek__veld select:focus {
    outline: 2px solid var(--gm-accent);
    outline-offset: 2px;
    border: 0;
    box-shadow: none;
}

.gm-hero-zoek__balk .bttn {
    justify-content: center;
    height: 100%;
    padding: 1.15rem 1.5rem;
    border: 0;
    border-radius: 0;
}

.gm-hero-zoek__balk .bttn:hover {
    transform: none;
    box-shadow: none;
    background: color-mix(in srgb, var(--gm-accent) 88%, #000);
}

@media (min-width: 640px) {
    .gm-hero-zoek__balk {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }

    .gm-hero-zoek__veld {
        border-bottom: 0;
        border-right: 1px solid var(--color-border-primary);
    }
}

.gm-hero-zoek__onder {
    grid-area: onder;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 2rem;
    font-size: 0.9375rem;
    color: var(--color-body);
}

.gm-hero-zoek__onder strong {
    font-weight: 500;
    color: var(--color-body-active);
}

.gm-hero-zoek__chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gm-hero-zoek__chips a {
    padding-bottom: 0.1rem;
    border-bottom: 1px solid var(--color-border-primary);
    font-weight: 500;
    color: var(--color-body-active);
    text-decoration: none;
    transition: border-color 160ms ease;
}

.gm-hero-zoek__chips a:hover {
    border-color: var(--color-body-active);
}

.gm-hero-zoek__chips a small {
    margin-left: 0.2rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    color: var(--color-body-secondary);
}

@media (min-width: 1024px) {
    .gm-hero-zoek__inhoud {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-rows: minmax(0, 1fr) auto auto;
        grid-template-areas: "tekst zij" "zoek zoek" "onder onder";
        column-gap: var(--gm-hero-kolom);
        row-gap: 2rem;
    }

    .gm-hero-zoek__tekst {
        align-self: center;
    }

    .gm-hero-zoek__zij {
        align-self: center;
    }

    .gm-hero-zoek--zonder-zij .gm-hero-zoek__inhoud {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "tekst" "zoek" "onder";
    }
}

/* ---------------------------------------------------------------------------
 * 7. hero-carousel: kop boven een strip die de rand over loopt
 * ------------------------------------------------------------------------- */

.gm-hero-carousel h1 {
    font-size: var(--gm-hero-kop-s);
    max-width: 14ch;
}

.gm-hero-carousel__inhoud {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: var(--gm-hero-ruimte) 0 var(--gm-hero-ruimte) var(--gm-hero-rand);
}

.gm-hero-carousel__kop {
    display: grid;
    gap: 1.5rem;
    padding-right: var(--gm-hero-rand);
}

.gm-hero-carousel__tekst {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gm-hero-carousel__rechts {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gm-hero-carousel__acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

.gm-hero-carousel__knoppen {
    display: none;
    gap: 0.5rem;
    margin-left: auto;
}

.gm-hero-carousel__strip {
    display: flex;
    gap: 1.25rem;
    margin-left: calc(var(--gm-hero-rand) * -1);
    padding: 0 var(--gm-hero-rand) 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gm-hero-rand);
}

.gm-hero-carousel__item {
    flex: 0 0 auto;
    width: min(80vw, 22rem);
    scroll-snap-align: start;
}

/* Kaart als catalogusregel: foto, titel, kerncijfers, prijs. Geen kader. */
.gm-hero-kaart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.gm-hero-kaart .gm-hero-foto {
    aspect-ratio: 4 / 3;
}

.gm-hero-kaart__kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.gm-hero-kaart__titel {
    font-family: var(--font-display, inherit);
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-body-active);
    transition: color 160ms ease;
}

.gm-hero-kaart:hover .gm-hero-kaart__titel {
    color: var(--gm-accent-op);
}

.gm-hero-kaart__prijs {
    font-family: var(--font-display, inherit);
    font-size: 1.125rem;
    white-space: nowrap;
    color: var(--color-body-active);
}

.gm-hero-kaart__meta {
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-body-secondary);
}

.gm-hero-carousel__voet {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-right: var(--gm-hero-rand);
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-body-secondary);
}

.gm-hero-carousel__balk {
    flex: 1;
    height: 1px;
    overflow: hidden;
    background: var(--color-border-primary);
}

.gm-hero-carousel__balk > span {
    display: block;
    height: 100%;
    background: var(--color-body-active);
    transform: scaleX(var(--gm-strip-p, 0));
    transform-origin: 0 50%;
    transition: transform 160ms linear;
}

.gm-hero-carousel__teller {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .gm-hero-carousel__kop {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: end;
        gap: var(--gm-hero-kolom);
    }

    .gm-hero-carousel__knoppen {
        display: flex;
    }

    .gm-hero-carousel__strip {
        gap: 1.5rem;
    }

    .gm-hero-carousel__item {
        width: 44%;
    }
}

@media (min-width: 1024px) {
    .gm-hero-carousel__item {
        width: clamp(20rem, 30%, 28rem);
    }
}

/* ---------------------------------------------------------------------------
 * 8. hero-minimaal: typografisch, intro rechts, colofon onderin
 * ------------------------------------------------------------------------- */

.gm-hero-minimaal__inhoud {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: var(--gm-hero-ruimte) var(--gm-hero-rand);
}

.gm-hero-minimaal__boven {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.gm-hero-minimaal h1 {
    font-size: var(--gm-hero-kop-l);
    max-width: 12ch;
}

.gm-hero-minimaal__onder {
    display: grid;
    gap: 2rem;
}

.gm-hero-minimaal__tekst {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .gm-hero-minimaal__onder {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: var(--gm-hero-kolom);
    }

    /* De intro staat rechts, onder de lange regel van de kop: lucht links. */
    .gm-hero-minimaal__tekst {
        grid-column: 2;
    }

    .gm-hero-minimaal__colofon {
        grid-column: 1 / -1;
    }

    .gm-hero-minimaal--midden .gm-hero-minimaal__tekst {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
    }
}

.gm-hero-minimaal--midden .gm-hero-minimaal__boven {
    align-items: center;
    text-align: center;
}

.gm-hero-minimaal--midden h1 {
    max-width: 16ch;
    margin-inline: auto;
}

.gm-hero-minimaal--midden .gm-hero-minimaal__tekst {
    align-items: center;
    text-align: center;
}

.gm-hero-minimaal--midden .gm-paginakop__acties,
.gm-hero-minimaal--midden .gm-hero-meta {
    justify-content: center;
}

/* ---------------------------------------------------------------------------
 * 9. hero-secondary: paginakop met kruimelpad, redactionele verdeling
 * ------------------------------------------------------------------------- */

.gm-hero-secondary__raster {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.gm-hero-secondary__inhoud {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: var(--gm-hero-ruimte) var(--gm-hero-rand);
}

.gm-hero-secondary--compact .gm-hero-secondary__inhoud {
    gap: 2rem;
    padding: clamp(2rem, 4vw, 3.5rem) var(--gm-hero-rand);
}

.gm-hero-secondary__kop {
    display: grid;
    gap: 1.5rem;
}

.gm-hero-secondary__kop h1 {
    max-width: 14ch;
}

.gm-hero-secondary__kruimels {
    margin-bottom: 1.5rem;
}

.gm-hero-secondary__rechts {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gm-hero-secondary__beeld {
    position: relative;
    aspect-ratio: 16 / 9;
}

.gm-hero-secondary__foto {
    position: absolute;
    inset: 0;
}

@media (min-width: 768px) {
    .gm-hero-secondary__kop {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: end;
        gap: var(--gm-hero-kolom);
    }

    .gm-hero-secondary__rechts {
        padding-bottom: 0.5rem;
    }
}

@media (min-width: 1024px) {
    .gm-hero-secondary--met-foto .gm-hero-secondary__raster {
        grid-template-columns: var(--gm-hero-rand) minmax(0, 7fr) minmax(0, 5fr);
    }

    .gm-hero-secondary--met-foto .gm-hero-secondary__inhoud {
        grid-column: 2;
        padding-left: 0;
        padding-right: var(--gm-hero-kolom);
    }

    .gm-hero-secondary--met-foto .gm-hero-secondary__kop {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .gm-hero-secondary--met-foto .gm-hero-secondary__rechts {
        padding-bottom: 0;
    }

    .gm-hero-secondary__beeld {
        grid-column: 3;
        aspect-ratio: auto;
        min-height: 26rem;
    }
}

/* ---------------------------------------------------------------------------
 * 10. Wie geen beweging wil
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .gm-hero-carousel__balk > span,
    .gm-hero-link,
    .gm-hero-kaart__titel,
    .gm-hero-zoek__rij strong {
        transition: none;
    }
}