/* Ontwerpsysteem van de marketingsite: tokens, elementen en de componenten die
   elke pagina deelt (navigatie, voettekst, knoppen, tekstblokken).

   Lees docs/reference/WEBSITE_CSS.md voordat je hier iets aan verandert. Wat
   hier staat, geldt voor twaalf pagina's tegelijk. */

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Source Serif 4';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/source-serif-4-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Source Serif 4';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/source-serif-4-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --brand-navy: #1C344C;
    --brand-navy-dark: #142538;
    --brand-orange: #DB8130;
    --brand-orange-dark: #C1711F;
    /* Het accentoranje haalt als tekst 2,65:1 op crème en is dus alleen
       bruikbaar als vlak. Deze donkere variant is de tekstkleur: 5,22:1 op
       crème, 5,74 op wit, 4,87 op het warme vlak. */
    --brand-orange-text: #9C5310;
    --brand-orange-text-hover: #7F430C;
    --paper: #F6F4EE;
    --paper-warm: #F0ECE2;
    --surface: #FFFFFF;
    --ink: #0D1B2A;
    --slate-700: #4A5868;
    /* Tekststap tussen 700 en 500: 4,94:1 op crème en 4,60:1 op het warme
       vlak, dus AA voor gewone tekst; slate-500 haalt dat niet en is alleen
       nog voor randen en iconen. */
    --slate-600: #5F6B79;
    --slate-500: #7A8694;
    --slate-300: #B4BCC6;
    --slate-200: #DFE3E8;
    --slate-100: #EEF1F4;
    --slate-50: #F7F9FB;
    --success: #1E7F47;
    --success-bg: #E4F2EA;
    --warn: #C1531A;
    --warn-bg: #FBEADC;
    --fg-1: var(--ink);
    --fg-2: var(--slate-700);
    --fg-3: var(--slate-600);
    --line: var(--slate-200);
    --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, serif;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.04), 0 1px 1px rgba(13, 27, 42, 0.03);
    --shadow-md: 0 4px 12px rgba(13, 27, 42, 0.08), 0 2px 4px rgba(13, 27, 42, 0.04);
    --shadow-lg: 0 12px 28px rgba(13, 27, 42, 0.12), 0 4px 10px rgba(13, 27, 42, 0.05);
    --ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand-orange);
    --success-text: #196C3D;
}

/* ============================================================
   Elementen
   ============================================================ */

html, body {
    background: var(--paper);
    color: var(--fg-1);
    font-family: var(--font-sans);
    line-height: 1.6;
    /* Lange samenstellingen zijn in het Nederlands eerder regel dan uitzondering
       ("Verwerkingsverantwoordelijke"); zonder dit duwen ze op smalle schermen
       de hele pagina breder dan het scherm. */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* De standaardstem van de site is navy schreefloos. De betaalpagina's zetten
   hun h1 bewust om naar de schreefcursief: daar hoort geen verkoopstem. */
h1 {
    font-size: clamp(28px, 4.5vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--brand-navy);
    text-wrap: balance;
}

h2 {
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--brand-navy);
    text-wrap: balance;
}

h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--brand-navy);
}

/* Links in lopende tekst. Zonder deze regel valt een link terug op het blauw
   van de browser, en op paars zodra iemand hem heeft bezocht: twee kleuren die
   niet in het palet zitten. :where() geeft nul specificiteit, zodat elke
   component die zelf een kleur zet (knoppen, menubalk, voettekst, kruimelpad)
   er zonder uitzondering van wint. */
:where(a) {
    color: var(--brand-orange-text);
    text-underline-offset: 2px;
}

:where(a:visited) {
    color: var(--brand-orange-text);
}

:where(a:hover) {
    color: var(--brand-orange-text-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

img, picture, video, svg {
    max-width: 100%;
}

/* ============================================================
   Paginabreedte

   Een pagina kiest precies een van deze drie. `.page` is de brede
   marketingopmaak; `--prose` is leestekst op een comfortabele regellengte;
   `--form` is het smalle spoor van afrekenen en betalen, waar minder
   afleiding het doel is.
   ============================================================ */

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.page--prose { max-width: 880px; }
.page--form  { max-width: 680px; padding: 0 24px; }

/* Afrekenen en betalen dragen een rustiger kop: in een transactie hoort geen
   verkoopstem. */
.page--form h1 {
    font: 400 28px/1.2 var(--font-serif);
    font-style: italic;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin-bottom: 8px;
}

/* ============================================================
   Navigatie

   Elke pagina gebruikt `nav.site-nav > .page > .nav-inner`, ook de pagina's
   met alleen een merk en een terugkoppeling. Een gedeelde structuur is wat de
   balk op twaalf pagina's identiek houdt.
   ============================================================ */

.site-nav {
    border-bottom: 1px solid transparent;
}

/* Alleen de marketingpagina's plakken. Op afrekenen en betalen zou een
   meelopende balk ruimte kosten zonder ergens heen te leiden. */
/* De balk krijgt pas een rand zodra de pagina eronder door schuift. De klasse
   wordt door de pagina zelf gezet; zonder dat script blijft de rand weg. */
.site-nav.is-scrolled { border-bottom-color: var(--line); }

.site-nav--sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(246, 244, 238, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    transition: border-color 200ms ease;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 16px;
    color: var(--brand-navy);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.nav-brand svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.nav-center {
    display: flex;
    gap: 28px;
    list-style: none;
    font-size: 14px;
    color: var(--fg-2);
}

.nav-center a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease-out;
}

.nav-center a:hover { color: var(--fg-1); }

/* De pagina waar je al bent, is geen link om op te klikken. */
.nav-center a[aria-current="page"] {
    color: var(--brand-navy);
    font-weight: 600;
}

.nav-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.nav-login-label--compact { display: none; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--fg-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 150ms ease-out, color 150ms ease-out;
}

.back-link:hover {
    background: var(--paper-warm);
    color: var(--fg-1);
}

.back-link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ============================================================
   Voettekst
   ============================================================ */

footer {
    padding: 40px 0 28px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--fg-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

footer .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-navy);
    font-weight: 600;
}

footer .brand svg {
    width: 28px;
    height: 28px;
}

/* Flex met gap in plaats van marges: op de smalle transactiepagina's wikkelen
   de links dan gelijkmatig door in plaats van er een enkele achter te laten. */
footer .links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

footer .links a {
    color: var(--fg-2);
    text-decoration: none;
    transition: color 150ms ease-out;
}

footer .links a:hover {
    color: var(--fg-1);
    text-decoration: underline;
}

/* ============================================================
   Knoppen
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: 600 14px/1 var(--font-sans);
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms cubic-bezier(0.2, 0, 0, 1),
                color 150ms cubic-bezier(0.2, 0, 0, 1),
                border-color 150ms cubic-bezier(0.2, 0, 0, 1),
                transform 100ms ease-out;
}

.btn:active { transform: translateY(1px); }

/* Inkt op oranje haalt 5,96:1 en daarmee WCAG AA voor gewone tekst; wit op
   hetzelfde oranje blijft op 2,92:1 steken en zakt ook voor grote tekst. */
.btn--primary {
    background: var(--brand-orange);
    color: var(--ink);
}

.btn--primary:hover { background: var(--brand-orange-dark); }

.btn--primary:disabled {
    background: var(--slate-300);
    color: var(--fg-2);
    cursor: not-allowed;
}

.btn--navy { background: var(--brand-navy); color: #fff; }
.btn--navy:hover { background: var(--brand-navy-dark); }

.btn--outline {
    background: var(--surface);
    color: var(--fg-1);
    border-color: var(--slate-300);
}

.btn--outline:hover { background: var(--paper-warm); }

.btn--ghost { background: transparent; color: var(--fg-1); }
.btn--ghost:hover { background: var(--paper-warm); }

.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn--block { width: 100%; }

/* ============================================================
   Tekstblokken
   ============================================================ */

.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-orange-text);
}

.lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--fg-2);
    margin-bottom: 24px;
}

/* Losse leestekst: alles binnen `.prose` krijgt ritme zonder eigen klassen. */
.prose p,
.prose ul,
.prose ol {
    color: var(--fg-2);
    margin-bottom: 14px;
}

/* Leestekst draagt een rustiger koppenschaal dan een marketingsectie: op een
   regellengte van 880px oogt de volle h2 als een schreeuw. */
.prose h2 { font-size: 22px; font-weight: 600; margin: 36px 0 12px; }
.prose h3 { font-size: 17px; font-weight: 600; margin: 22px 0 8px; }
.prose p  { font-size: 15.5px; }
.prose > *:last-child { margin-bottom: 0; }

/* Een tabel is het enige blok dat niet meebuigt met een smal scherm; hij
   schuift binnen zijn eigen kader in plaats van de hele pagina breder te
   maken. */
.table-scroll {
    overflow-x: auto;
    margin-bottom: 14px;
}

.table-scroll table {
    min-width: 340px;
}
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; font-size: 15.5px; line-height: 1.55; }

.prose a {
    color: var(--brand-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* De juridische pagina's (privacyverklaring, voorwaarden,
   verwerkersovereenkomst) tonen hun leestekst als een kaart. */
.page--prose .prose {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 56px 64px;
    margin: 40px 0;
    box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04);
}

.prose .meta-date {
    font-size: 14px;
    color: var(--fg-3);
    margin-bottom: 32px;
}

.prose li strong { color: var(--fg-1); font-weight: 600; }

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14.5px;
}

.prose th,
.prose td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}

.prose th {
    background: var(--paper-warm);
    font-weight: 600;
    color: var(--brand-navy);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prose td { color: var(--fg-2); }

@media (max-width: 720px) {
    .page--prose .prose { padding: 32px 24px; margin: 24px 0; }
    .page--prose h1 { font-size: 30px; }
    .page--prose .prose h2 { font-size: 19px; }
}

/* ============================================================
   Inhoudspagina's

   De vaste pagina's (indelen, functies, prijs, portaal, ...) zijn uit deze
   blokken opgebouwd. Bouw een nieuwe pagina hiermee; verzin geen nieuwe
   opmaak, anders loopt de site weer uiteen.
   ============================================================ */

.crumbs {
    padding: 18px 0 0;
    font-size: 13px;
    color: var(--fg-3);
}

.crumbs a {
    color: var(--fg-2);
    text-decoration: none;
}

.crumbs a:hover { text-decoration: underline; }

.intro {
    max-width: 760px;
    padding: 44px 0 36px;
}

.intro h1 { margin-bottom: 16px; }

.intro .lede {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 28px;
}

.intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.intro-actions .muted {
    font-size: 13px;
    color: var(--fg-3);
}

.panel {
    padding: 44px 0;
    border-top: 1px solid var(--line);
}

.panel > h2 { margin-bottom: 10px; }

.panel > .lede {
    max-width: 720px;
    font-size: 16px;
}

.tiles {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

.tile h3 { margin-bottom: 8px; }

.tile p {
    color: var(--fg-2);
    font-size: 14.5px;
}

.tile p + p { margin-top: 10px; }

/* Wat op tegels, stappen of een vinklijst volgt, houdt afstand. Zonder deze
   regel plakt het tegen het blok erboven, en zet elke pagina het los op met een
   eigen inline margin. */
.tiles + *,
.stepped + *,
.checks + * { margin-top: 26px; }

/* Genummerde stappen: het nummer zit in het opsommingsteken, zodat de volgorde
   ook zonder opmaak blijft kloppen. */
.stepped {
    counter-reset: stap;
    list-style: none;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.stepped > li {
    counter-increment: stap;
    padding-left: 44px;
    position: relative;
}

.stepped > li::before {
    content: counter(stap);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.stepped h3 { margin-bottom: 6px; }

.stepped p {
    color: var(--fg-2);
    font-size: 14.5px;
}

.note {
    background: var(--paper-warm);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    color: var(--fg-2);
    font-size: 14.5px;
}

.note strong { color: var(--fg-1); }

.checks {
    list-style: none;
    display: grid;
    gap: 10px;
}

.checks li {
    position: relative;
    padding-left: 26px;
    color: var(--fg-2);
    font-size: 15px;
}

.checks li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--success);
    border-bottom: 2px solid var(--success);
    transform: rotate(-45deg);
}

.cta-band {
    margin: 44px 0 56px;
    padding: 36px;
    border-radius: var(--radius-xl);
    background: var(--brand-navy);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cta-band h2 {
    color: #fff;
    margin-bottom: 6px;
}

.cta-band p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    max-width: 520px;
}

@media (max-width: 720px) {
    .intro { padding: 28px 0 28px; }
    .intro .lede { font-size: 16.5px; }
    .panel { padding: 32px 0; }
    .cta-band { padding: 26px; }
}

/* ============================================================
   Prijs en formulieren (afrekenen en betalen)
   ============================================================ */

.price-line {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.price-line strong {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.price-line span {
    font-size: 13px;
    color: var(--fg-2);
}

.submit-row {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.form-alert {
    display: none;
    margin-top: 20px;
    padding: 13px 16px;
    background: var(--warn-bg);
    color: var(--warn);
    border-radius: var(--radius-lg);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
}

.form-alert.show { display: block; }

.form-alert a { color: inherit; }

/* ============================================================
   Smalle schermen
   ============================================================ */

/* De balk krimpt in stappen: eerst wordt het inloglabel korter, dan zakt het
   menu naar een eigen regel en tot slot verdwijnt de merknaam. */
@media (max-width: 980px) {
    .nav-login-label--wide { display: none; }
    .nav-login-label--compact { display: inline; }
}

@media (max-width: 880px) {
    /* Het menu zakt naar een eigen regel in plaats van te verdwijnen. Verbergen
       maakt de vaste pagina's op mobiel onbereikbaar: ze staan in geen enkele
       andere navigatie op de pagina zelf. */
    .nav-inner {
        flex-wrap: wrap;
        gap: 10px 16px;
        padding: 12px 0;
    }

    /* Kleiner logo: de balk loopt mee, dus elke pixel telt twee keer. */
    .nav-brand svg {
        width: 28px;
        height: 28px;
    }

    /* Krap genoeg om de vijf items op een telefoon op een regel te houden. */
    .nav-center {
        order: 3;
        flex-basis: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 14px;
        font-size: 14px;
    }

    /* Ruimer aanraakvlak dan de regelhoogte van de link zelf. */
    .nav-center a {
        display: inline-block;
        padding: 6px 0;
    }
}

@media (max-width: 720px) {
    .page { padding: 0 20px; }
    .page--form { padding: 0 20px; }

    /* Het woordmerk past hier niet meer naast de knop en zou over twee regels
       breken, wat de meelopende balk onevenredig hoog maakt. Het logo blijft en
       linkt naar de homepage. */
    .nav-brand span { display: none; }

    footer {
        flex-direction: column;
        align-items: flex-start;
    }

    footer .links { gap: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Makersblok: portret naast het verhaal. Staat op de homepage en op /over/. */
.founder {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.founder-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--paper-warm);
    overflow: hidden;
    border: 4px solid var(--paper);
    box-shadow: var(--shadow-md);
}

.founder-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.founder h3 {
    margin-bottom: 4px;
    color: var(--brand-navy);
    font-size: 22px;
    font-weight: 600;
}

.founder .role {
    margin-bottom: 14px;
    color: var(--brand-orange-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.founder p {
    color: var(--fg-2);
    font-size: 16px;
    line-height: 1.6;
}

.founder p + p { margin-top: 12px; }

@media (max-width: 720px) {
    .founder {
        grid-template-columns: 1fr;
        padding: 24px;
        text-align: center;
    }

    .founder-photo {
        width: 140px;
        height: 140px;
        margin: 0 auto;
    }
}

/* ============================================================
   Schermafbeeldingen uit de app
   Gedeeld door de homepage en de onderwerppagina's. Een schot is
   klikbaar: op ware grootte lezen bezoekers de namen en tijden mee.
   ============================================================ */

.shots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 28px;
}

.shot {
    margin: 0;
    align-self: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.shot picture { display: block; }

.shot img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--slate-50);
}

.shot figcaption {
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg-2);
    padding: 14px 16px 16px;
    border-top: 1px solid var(--line);
}

.shot--wide { grid-column: 1 / -1; }

.shot--phone img { max-width: 300px; margin: 0 auto; }

/* Vergroten. Zonder JavaScript krijgt de afbeelding deze klasse niet en
   blijft het een gewone afbeelding. */
.is-zoomable { cursor: zoom-in; }

.is-zoomable:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(13, 27, 42, 0.86);
}

.lightbox[hidden] { display: none; }

.lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 120px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
}

.lightbox-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.lightbox-caption {
    color: #EEF1F4;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    max-width: 720px;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(13, 27, 42, 0.6);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover { background: rgba(13, 27, 42, 0.9); }

@media (max-width: 860px) {
    .shots { grid-template-columns: 1fr; gap: 20px; }

    /* Op een telefoon is een schermafbeelding van een bureaublad-app pas te
       lezen op ware grootte, dus laat hem uitsteken en schuif erlangs. */
    .lightbox {
        padding: 12px;
        overflow: auto;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .lightbox img { max-width: none; max-height: none; }

    .lightbox-figure { align-items: flex-start; }

    .lightbox-caption { position: sticky; left: 0; text-align: left; }

    /* Meescrollen mag de sluitknop niet, anders raakt de bezoeker hem kwijt
       zodra hij naar rechts schuift. */
    .lightbox-close { position: fixed; top: 12px; right: 12px; }
}