/* Gedeelde stylesheet voor de blokken-bibliotheek (sectie 4.2/5.9) —
   tenant-agnostisch: elke regel hier leest alleen de semantische
   design-tokens (--color-*, --font-*, --radius, ...) die elke tenant's eigen
   tokens.css (web/templates/tenants/<naam>/tokens.css) invult. Nooit een
   hexcode of tenant-naam in dit bestand — dat zou precies het grep-check
   acceptatiecriterium (2.1/sectie 15) breken als dit bestand in
   internal/core stond, en blijft ook zo als disciplineregel nu het
   toevallig in internal/core/staticassets zit. (Neutrale zwart/wit-waarden
   in rgba() voor schaduwen en overlays zijn geen tenantkleur.)

   Het volledige token-contract, met wat elk token stuurt, staat in
   docs/ARCHITECTURE.md §9 punt 6 en §19 (iteratie 8d). Elk token dat na
   iteratie 5 is toegevoegd heeft hieronder een fallback via var(--x, ...),
   zodat een tenant alleen hoeft te zetten waarin hij afwijkt.

   Zelf-gehost (geen Google Fonts-CDN-request vanuit de bezoekers browser,
   zie docs/ARCHITECTURE.md §9) — twee variable-font-bestanden dekken het
   volledige gewichtsbereik (wght-as), dus elk gewicht dat een tenant via
   --heading-weight kiest is echt, niet synthetisch. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Relatief pad: zo valt het lettertype onder dezelfde versie in de URL als
     dit bestand zelf (/static/v/<versie>/, staticassets.Cached). */
  src: url('fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 600);
  color: var(--color-heading);
  line-height: 1.15;
  letter-spacing: var(--heading-tracking, 0);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--h1-size, clamp(2rem, 3.2vw + 1rem, 3rem)); }
h2 { font-size: var(--h2-size, clamp(1.6rem, 1.6vw + 1rem, 2.25rem)); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
/* <picture> only offers a WebP <source> (core.ResponsiveImg); the <img> inside
   keeps laying out exactly as if it stood on its own. */
picture { display: contents; }
a { color: inherit; }
[x-cloak] { display: none !important; }
/* The hidden attribute must beat any display rule below (img { display: block }
   above silently cancelled it — the offering-detail gallery's photo switch). */
[hidden] { display: none !important; }

.container {
  max-width: var(--container-max, 72rem);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
}

/* Elke sectie krijgt van core.Sections (web/templates/core/section.templ)
   een view-transition-name — zie ARCHITECTURE.md §6 voor de uitleg en de
   fallback op browsers zonder support. De achtergrond (--alt/--pattern)
   kiest de tenant-code per sectie via blocks.Section.Background, niet het
   component zelf. */
.block {
  view-transition-name: var(--vt-name, none);
  border-bottom: var(--section-divider, none);
}
.block--alt { background: var(--color-bg-alt); }
.block--pattern { background-color: var(--color-bg); background-image: var(--pattern-bg, none); }
.block-inner { padding: var(--block-padding, clamp(3.5rem, 8vw, 6.25rem)) 0; }

/* --- Sectiekop (gedeeld door elk blok) ---
   Uitlijning en het accentlijntje (boven de kop óf eronder) zijn tokens:
   --section-head-align, --kicker-above/--kicker-below (block|none). */
.section-head {
  max-width: var(--section-head-max, 40rem);
  margin: 0 var(--section-head-margin, 0) clamp(2rem, 4vw, 3.25rem);
  text-align: var(--section-head-align, left);
}
.section-head::before,
.section-head h2::after {
  content: "";
  width: var(--kicker-width, 2.25rem);
  height: var(--kicker-height, 2px);
  background: var(--color-highlight, var(--color-accent));
}
/* --section-head-margin: "0" (links uitgelijnd) of "auto" (gecentreerd);
   het lijntje onder de kop volgt dezelfde marge. */
.section-head::before { display: var(--kicker-above, none); margin-bottom: 1.1rem; }
.section-head h2::after { display: var(--kicker-below, none); margin: 1.25rem var(--section-head-margin, 0) 0; }
.section-head h2 { margin-bottom: 0; }
.section-head p { margin: 0.9rem 0 0; color: var(--color-text-muted); }

.eyebrow {
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.more-link { margin-top: 2.25rem; }

/* --- Header / mobiel menu (Alpine.js, sectie 4.2 punt 2) --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg, var(--color-bg));
  -webkit-backdrop-filter: blur(var(--header-blur, 10px));
  backdrop-filter: blur(var(--header-blur, 10px));
  border-bottom: 1px solid var(--color-border-subtle, transparent);
  box-shadow: var(--header-shadow, none);
  transition: background-color 250ms ease, backdrop-filter 250ms ease, -webkit-backdrop-filter 250ms ease;
}
/* Scrollstanden (Alpine in header.templ): terug omhoog scrollen maakt de
   header lichter; bovenaan een pagina met een hero onder de header
   (HeroProps.UnderHeader) nog lichter, zodat de foto erdoor zichtbaar is.
   Een open mobiel menu houdt de gewone achtergrond. Zonder tokens valt
   alles terug op --header-bg/--header-blur, dus verandert er niets. */
.site-header.is-scrolling-up {
  background: var(--header-bg-up, var(--header-bg, var(--color-bg)));
  -webkit-backdrop-filter: blur(var(--header-blur-up, var(--header-blur, 10px)));
  backdrop-filter: blur(var(--header-blur-up, var(--header-blur, 10px)));
}
body:has(.hero--under-header) .site-header.is-top:not(.is-menu-open) {
  background: var(--header-bg-top, var(--header-bg, var(--color-bg)));
  -webkit-backdrop-filter: blur(var(--header-blur-top, var(--header-blur, 10px)));
  backdrop-filter: blur(var(--header-blur-top, var(--header-blur, 10px)));
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: var(--header-height, 4.5rem);
}
.site-header__brand {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 600);
  font-size: 1.35rem;
  text-decoration: none;
  color: var(--color-heading);
  flex-shrink: 0;
}
.site-header__brand img { height: 2.1rem; width: auto; }
.site-header__bar > nav { margin-left: auto; }
/* Met een header-knop komt het menu in het midden, zonder rechts. */
.site-header--with-cta .site-header__bar > nav { margin-right: auto; }
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header__nav a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--nav-color, var(--color-text-muted));
  transition: color 150ms ease;
}
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] { color: var(--nav-color-active, var(--color-heading)); }
.site-header__cta { flex-shrink: 0; }
/* Een tweede knop staat strak tegen de eerste (de balk zelf heeft 2rem tussenruimte). */
.site-header__cta--extra { margin-right: -1.25rem; }

/* Uitklapmenu (spec §14 punt 16c): opent bij aanwijzen en met de pijlknop
   (toetsenbord, aanraken — Alpine zet .is-open). Kleuren per tenant via
   --menu-sub-*-tokens; zonder tokens de gewone paginakleuren. */
.site-header__parent {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.site-header__subtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--nav-color, var(--color-text-muted));
  cursor: pointer;
}
.site-header__subtoggle svg { transition: transform 200ms ease; }
.site-header__parent:hover > .site-header__subtoggle,
.site-header__parent.is-open > .site-header__subtoggle { color: var(--nav-color-active, var(--color-heading)); }
.site-header__parent:hover > .site-header__subtoggle svg,
.site-header__parent.is-open > .site-header__subtoggle svg,
.site-header__group.is-open .site-header__subtoggle svg { transform: rotate(180deg); }
.site-header__sub {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1.25rem;
  z-index: 60;
  min-width: 14rem;
  max-width: 20rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--menu-sub-bg, var(--color-bg));
  border: 1px solid var(--menu-sub-border, var(--color-border-subtle, var(--color-border)));
  border-radius: var(--menu-sub-radius, var(--radius));
  box-shadow: var(--menu-sub-shadow, 0 18px 40px -18px rgba(0, 0, 0, 0.35));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
/* Onzichtbare brug onder het item, zodat de muis naar het paneel kan. */
.site-header__parent::after {
  content: "";
  position: absolute;
  left: -1.25rem;
  right: 0;
  top: 100%;
  height: 0.95rem;
}
.site-header__parent:hover > .site-header__sub,
.site-header__parent.is-open > .site-header__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}
.site-header__sub a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: calc(var(--menu-sub-radius, var(--radius)) * 0.6);
  transition: color 150ms ease, background-color 150ms ease;
}
.site-header__sub a:hover,
.site-header__sub a[aria-current="page"] { background: var(--menu-sub-hover-bg, var(--color-bg-alt, rgba(127, 127, 127, 0.12))); }
@media (prefers-reduced-motion: reduce) {
  .site-header__sub, .site-header__subtoggle svg { transition: none; }
}
.site-header__toggle {
  display: none;
  margin-left: auto;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: 1px solid var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius);
  color: var(--color-heading);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.site-header__toggle span,
.site-header__toggle span::before,
.site-header__toggle span::after {
  display: block;
  width: 1rem;
  height: 1px;
  background: currentColor;
  position: relative;
}
.site-header__toggle span::before,
.site-header__toggle span::after { content: ""; position: absolute; left: 0; }
.site-header__toggle span::before { top: -5px; }
.site-header__toggle span::after { top: 5px; }
.site-header__panel { display: none; }

@media (max-width: 58rem) {
  .site-header__nav { display: none; }
  .site-header__toggle { display: inline-flex; }
  /* De header-knop blijft zichtbaar, compact, direct links van het menu. */
  .site-header__bar { gap: 0.75rem; }
  .site-header .site-header__cta {
    margin-left: auto;
    padding: 0.6rem 0.85rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }
  .site-header--with-cta .site-header__toggle { margin-left: 0; }
  /* Alleen de eerste knop blijft in de balk; de rest staat in het menu. */
  .site-header .site-header__cta--extra { display: none; }
  /* Dicht tot Alpine .is-open zet. (Zonder JavaScript werkt de knop niet,
     dus houdt SiteLayout's <noscript>-stijl het paneel zichtbaar.) */
  .site-header__panel.is-open {
    display: flex;
    flex-direction: column;
    padding: 0.5rem clamp(1.25rem, 5vw, 4rem) 1.25rem;
    border-top: 1px solid var(--color-border-subtle, transparent);
    background: var(--color-bg);
  }
  .site-header__panel a {
    padding: 0.85rem 0;
    text-decoration: none;
    color: var(--nav-color, var(--color-text-muted));
    border-bottom: 1px solid var(--color-border-subtle, transparent);
  }
  .site-header__panel a:last-child { border-bottom: none; }
  .site-header__panel a[aria-current="page"] { color: var(--color-heading); }
  /* Een item met subitems: link en pijlknop op één rij, de subitems ingesprongen eronder. */
  .site-header__group { display: flex; flex-direction: column; }
  .site-header__grouprow {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border-subtle, transparent);
  }
  .site-header__grouprow a { flex: 1; border-bottom: none; }
  .site-header__grouprow .site-header__subtoggle { width: 2.75rem; height: 2.75rem; }
  .site-header__groupitems {
    display: none;
    flex-direction: column;
    padding-left: 1rem;
    border-bottom: 1px solid var(--color-border-subtle, transparent);
  }
  .site-header__group.is-open .site-header__groupitems { display: flex; }
  .site-header__groupitems a { font-size: 0.95em; }
}
@media (max-width: 26rem) {
  .site-header__brand img { height: 1.7rem; }
}

/* --- Knoppen (sectie 4.1: gedeeld gedrag, kleur per tenant) ---
   primary = gevulde accentkleur, lichter bij hover, pijltje schuift op;
   secondary/ghost = transparant met rand, bij hover alléén rand+tekst. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--button-padding, 0.95rem 1.6rem);
  border-radius: var(--button-radius, var(--radius));
  font-family: var(--font-body);
  font-size: var(--button-size, 0.95rem);
  font-weight: 600;
  letter-spacing: var(--button-tracking, 0);
  text-transform: var(--button-case, none);
  text-decoration: none;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.arrow-icon { flex-shrink: 0; transition: transform 150ms ease; }
.btn:hover .arrow-icon { transform: translateX(4px); }
.btn--small { padding: 0.7rem 1.3rem; font-size: calc(var(--button-size, 0.95rem) * 0.95); }
.btn--small .arrow-icon { display: none; }

.btn--primary {
  background: var(--button-primary-bg, var(--color-accent));
  color: var(--button-primary-text, var(--color-on-accent, #fff));
}
.btn--primary:hover { background: var(--button-primary-hover-bg, var(--color-accent-hover)); }

/* --button-ghost-bg/--button-ghost-filter: een "glazen" tweede knop over een foto. */
.btn--secondary {
  background: var(--button-ghost-bg, transparent);
  -webkit-backdrop-filter: var(--button-ghost-filter, none);
  backdrop-filter: var(--button-ghost-filter, none);
  color: var(--color-heading);
  border-color: var(--button-ghost-border, var(--color-border));
}
.btn--secondary:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--button-ghost-bg, transparent);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.arrow-link:hover .arrow-icon { transform: translateX(5px); }

/* --- Pictogrammen (SiteIcon, web/templates/core/site_icons.templ) --- */
.site-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--color-accent); }

/* --- Hero ---
   Drie vormen, gekozen door de tenant-code via HeroProps.Layout:
   "split" (tekst + foto naast elkaar), "card" (foto op de achtergrond, tekst
   in een kaart links) en "center" (foto op de achtergrond, kop gecentreerd). */
.hero { position: relative; overflow: hidden; }
.hero .container {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.hero--split .container { grid-template-columns: 1.1fr 1fr; }
@media (max-width: 48rem) {
  .hero--split .container { grid-template-columns: 1fr; }
}
/* Het accentwoord in de kop: standaard de accentkleur; een tenant kan er een
   kleurverloop van maken (--heading-accent-bg + --heading-accent-color: transparent). */
.hero h1 .accent {
  color: var(--heading-accent-color, var(--color-accent));
  background: var(--heading-accent-bg, none);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: var(--heading-accent-weight, inherit);
  font-family: var(--heading-accent-font, inherit);
  font-style: var(--heading-accent-style, normal);
  padding-right: var(--heading-accent-pad, 0);
}
.hero__subheading { color: var(--color-text-muted); max-width: 38rem; }
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card, var(--radius));
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

.hero--card,
.hero--center {
  min-height: var(--hero-height, min(88vh, 52rem));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 40%; }
.hero__scrim { position: absolute; inset: 0; background: var(--hero-overlay, rgba(0, 0, 0, 0.35)); }
.hero--card .container,
.hero--center .container { position: relative; width: 100%; }
.hero__features .container { display: block; }
/* HeroProps.UnderHeader: de hero schuift zijn eigen hoogte-deel onder de
   sticky header (die over de foto heen komt te liggen) en houdt de inhoud
   met evenveel ruimte bovenaan uit de balk. */
.hero--under-header {
  margin-top: calc(-1 * var(--header-height, 4.5rem));
  padding-top: var(--header-height, 4.5rem);
}
.hero__card {
  max-width: 35rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--hero-card-bg, rgba(0, 0, 0, 0.42));
  -webkit-backdrop-filter: blur(var(--hero-card-blur, 14px));
  backdrop-filter: blur(var(--hero-card-blur, 14px));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card, var(--radius));
}
.hero__card h1 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); color: var(--hero-text, var(--color-heading)); }
.hero__card .hero__subheading { color: var(--hero-subtext, var(--color-text)); margin: 1.4rem 0 0; max-width: 44ch; }
.hero--center { text-align: center; }
.hero--center h1 {
  color: var(--hero-text, #fff);
  font-size: var(--hero-heading-size, clamp(2.25rem, 5vw, 4rem));
  font-weight: var(--hero-heading-weight, var(--heading-weight, 600));
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  margin: 0;
}
.hero--center .hero__subheading { color: var(--hero-subtext, #fff); margin: 1rem auto 0; }
.hero--center .hero__actions { justify-content: center; }
.hero__features {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.hero__features ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--hero-features-justify, flex-start);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.9rem;
  font-family: var(--font-heading);
  color: var(--hero-text, var(--color-heading));
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.hero__features li:first-child { padding-left: 0; border-left: none; }
@media (max-width: 58rem) {
  .hero--card { min-height: 0; padding-top: 4.5rem; }
  .hero--card.hero--under-header { padding-top: calc(var(--header-height, 4.5rem) + 4.5rem); }
  .hero--card .hero__card { max-width: none; margin-bottom: 1.5rem; }
  .hero__features { position: relative; background: var(--color-bg-alt); }
  .hero__features ul { flex-direction: column; gap: 0.9rem; }
  .hero__features li { padding: 0; border-left: none; }
}

/* --- Pagina-intro (page_intro: de kop bovenaan een subpagina) --- */
/* --page-intro-bg: optionele achtergrond (bv. een foto met verloop);
   --page-intro-align/-margin: links (left/0) of gecentreerd (center/auto). */
.page-intro {
  padding: var(--page-intro-padding, clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem));
  background: var(--page-intro-bg, none);
  text-align: var(--page-intro-align, left);
}
.page-intro h1 { font-size: var(--page-intro-heading-size, clamp(1.9rem, 3.4vw, 2.75rem)); margin: 0; text-wrap: balance; }
.page-intro p:not(.eyebrow) { margin: 1rem var(--page-intro-margin, 0) 0; max-width: 58ch; color: var(--color-text-muted); font-size: 1.05rem; }

/* Blokken met de kop naast een foto: altijd links uitgelijnd, ook bij een
   tenant die koppen centreert — het token wordt hier lokaal overschreven. */
.about,
.contact-form-block--split { --section-head-align: left; --section-head-margin: 0; }

/* --- About --- */
.about .container {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about--with-image .container { grid-template-columns: 1fr 1fr; }
@media (max-width: 48rem) {
  .about--with-image .container { grid-template-columns: 1fr; }
}
.about .section-head { margin-bottom: 1.5rem; }
/* Zonder foto vult de tekst geen hele containerbreedte (onleesbaar lange regels):
   een kolom van ~768px, links of gecentreerd (--about-text-margin: 0 | auto). */
.about:not(.about--with-image) .about__body {
  max-width: var(--about-text-max, 48rem);
  margin-inline: var(--about-text-margin, 0);
}
.about__body p { color: var(--color-text-muted); }
/* --about-media-*: vorm van de foto (verhouding, ronding, maximale breedte,
   schaduw) — bv. een ronde portretfoto met gloed in plaats van een kader. */
.about__media {
  width: 100%;
  max-width: var(--about-media-max, none);
  margin-inline: auto;
  background: var(--color-surface);
  padding: var(--media-frame-padding, 0);
  box-shadow: var(--about-media-shadow, var(--shadow-card, none));
  border: var(--about-media-border, none);
  border-radius: var(--about-media-radius, var(--radius-card, var(--radius)));
}
.about__media img { width: 100%; aspect-ratio: var(--about-media-ratio, 9 / 10); object-fit: cover; border-radius: var(--about-media-radius, var(--radius-card, var(--radius))); }

/* --- Kaarten (offerings / portfolio "cards") --- */
/* Flex in plaats van grid, zodat een onvolle laatste rij in het midden staat
   (7 kaarten = 3-3-1 met de laatste gecentreerd) en elke kaart even breed
   blijft. --cards-cols is het aantal per rij: 1/2/3 naar schermbreedte; op een
   breed scherm gaan precies 4 of 8 kaarten in rijen van 4, en 4 kaarten op
   een 3-kolomsbreedte in 2x2 i.p.v. 3+1. Zonder :has() blijft het 3-3-1. */
.card-grid {
  --cards-cols: 3;
  --cards-gap: var(--grid-gap, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cards-gap);
}
.card-grid > * {
  flex: 0 0 calc((100% - (var(--cards-cols) - 1) * var(--cards-gap)) / var(--cards-cols));
  min-width: 0;
}
.card-grid:has(> :nth-child(4):last-child) { --cards-cols: 2; }
@media (min-width: 64rem) {
  .card-grid:has(> :nth-child(4):last-child),
  .card-grid:has(> :nth-child(8):last-child) { --cards-cols: 4; }
}
@media (max-width: 58rem) { .card-grid, .card-grid:has(> :nth-child(4):last-child) { --cards-cols: 2; } }
@media (max-width: 36rem) { .card-grid, .card-grid:has(> :nth-child(4):last-child) { --cards-cols: 1; } }
.card {
  display: block;
  text-decoration: none;
  background: var(--color-surface);
  border-radius: var(--radius-card, var(--radius));
  overflow: hidden;
  border: var(--card-border, 1px solid var(--color-border-subtle, transparent));
  box-shadow: var(--shadow-card, none);
  -webkit-backdrop-filter: var(--card-filter, none);
  backdrop-filter: var(--card-filter, none);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
a.card:hover { box-shadow: var(--shadow-card-hover, var(--shadow-card, none)); }
.card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
a.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 1.35rem 1.25rem 1.5rem; }
.card__body h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.card__body p { color: var(--color-text-muted); font-size: 0.95rem; margin: 0; }

/* --- Kleurstalen (offerings_grid, Layout "swatches") --- */
.swatch-grid {
  display: grid;
  gap: clamp(1.25rem, 4vw, 3rem);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 58rem) { .swatch-grid { grid-template-columns: repeat(2, 1fr); } }
.swatch { display: block; text-decoration: none; color: inherit; }
.swatch__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-bg-alt);
  margin-bottom: 1.1rem;
  border-radius: var(--radius-card, var(--radius));
}
.swatch__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
a.swatch:hover .swatch__media img { transform: scale(1.045); }
.swatch__name { font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-heading); margin: 0 0 0.25rem; }
.swatch__sub { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.swatch .arrow-link { margin-top: 0.9rem; font-size: 0.78rem; }

/* --- Portfolio: mozaïek / carrousel / projectkaarten --- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 9.5rem;
  grid-auto-flow: dense;
  gap: 0.75rem;
}
.mosaic__tile {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--color-bg-alt);
  border-radius: var(--radius-card, var(--radius));
}
.mosaic__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }
.mosaic__tile:hover img { transform: scale(1.06); }
/* Het vaste ritme per vijf tegels: één hoge, één brede, dan drie gewone —
   altijd een gesloten rechthoek, ook op mobiel (twee kolommen: één grote,
   twee kleine naast elkaar, dan twee hoge). */
.mosaic__tile:nth-child(5n + 1) { grid-row: span 2; }
.mosaic__tile:nth-child(5n + 2) { grid-row: span 2; grid-column: span 2; }
@media (max-width: 48rem) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 7.5rem; gap: 0.5rem; }
  .mosaic__tile:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
  .mosaic__tile:nth-child(5n + 2),
  .mosaic__tile:nth-child(5n + 3) { grid-column: span 1; grid-row: span 1; }
  .mosaic__tile:nth-child(5n + 4),
  .mosaic__tile:nth-child(5n + 5) { grid-row: span 2; }
}
/* Bijschrift: verloop onderaan de foto, label (kleur) boven de titel. */
.mosaic__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 2.5rem 1rem 0.9rem;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  transition: padding-bottom 400ms ease;
}
.mosaic__tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.mosaic__title { font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.2; }
.mosaic__tile:hover .mosaic__caption { padding-bottom: 1.25rem; }
.mosaic__link { position: absolute; inset: 0; z-index: 1; }
.mosaic__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
@media (max-width: 48rem) {
  .mosaic__caption { padding: 1.75rem 0.7rem 0.6rem; }
  .mosaic__title { font-size: 0.9rem; }
  .mosaic__tag { font-size: 0.6rem; }
}
.more-link--button { display: flex; justify-content: center; }
@media (max-width: 48rem) { .more-link--button .btn { width: 100%; justify-content: center; } }

/* --- Inkomen bij scrollen (static/reveal.js zet .reveal-ready op <html> en
   .is-revealed per element zodra het in beeld komt) ---
   Zonder JavaScript, of met "minder beweging" aan, blijft alles gewoon
   zichtbaar: de begintoestand geldt alleen onder .reveal-ready. --i is de
   volgorde binnen een rij (inline gezet), voor een kleine vertraging per tegel. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }
/* Mozaïek: de foto "opent" van onder naar boven en zoomt uit. (Het clip-path
   staat op de img, niet op de tegel: een volledig weggeknipte tegel telt voor
   IntersectionObserver niet als zichtbaar en zou nooit binnenkomen.) */
.reveal-ready .mosaic__tile[data-reveal] { opacity: 1; transform: none; background: transparent; transition: none; }
.reveal-ready .mosaic__tile[data-reveal] img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.25);
  transition: clip-path 1100ms cubic-bezier(.65, 0, .25, 1), transform 1600ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.reveal-ready .mosaic__tile[data-reveal] .mosaic__caption { opacity: 0; transform: translateY(0.75rem); transition: opacity 600ms ease, transform 600ms ease; transition-delay: calc(var(--i, 0) * 120ms + 700ms); }
.reveal-ready .mosaic__tile[data-reveal].is-revealed img { clip-path: inset(0 0 0 0); transform: none; }
.reveal-ready .mosaic__tile[data-reveal].is-revealed .mosaic__caption { opacity: 1; transform: none; }
.reveal-ready .mosaic__tile[data-reveal].is-revealed:hover img { transform: scale(1.06); transition-delay: 0ms; transition-duration: 900ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready .mosaic__tile[data-reveal],
  .reveal-ready .mosaic__tile[data-reveal] img,
  .reveal-ready .mosaic__tile[data-reveal] .mosaic__caption { opacity: 1; transform: none; clip-path: none; transition: none; }
}

.carousel-wrap { position: relative; }
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 22%);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0 1.25rem;
  /* No scrollbar (2026-10-26): arrows with a mouse, swiping on touch. */
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.carousel__item {
  margin: 0;
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-card, var(--radius));
  box-shadow: var(--shadow-card, none);
  background: var(--color-bg-alt);
}
.carousel__item { position: relative; }
.carousel__item img { width: 100%; height: 100%; object-fit: cover; }
/* The arrows sit over the left/right edge of the photos, vertically centred
   on them (the track has 1.25rem padding below). Only for a mouse/trackpad:
   on a touchscreen you swipe. */
.carousel-arrow {
  display: none;
  position: absolute;
  top: calc(50% - 0.5rem);
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 0;
  background: var(--color-surface, #fff);
  color: var(--color-heading);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: opacity 200ms ease, color 150ms ease, transform 150ms ease;
}
.carousel-arrow--prev { left: -1.5rem; }
.carousel-arrow--next { right: -1.5rem; }
.carousel-arrow:hover { color: var(--color-accent); transform: translateY(-50%) scale(1.06); }
.carousel-arrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.carousel-arrow:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .carousel-arrow { display: flex; }
}
@media (max-width: 72rem) {
  .carousel-arrow--prev { left: 0.5rem; }
  .carousel-arrow--next { right: 0.5rem; }
}
@media (max-width: 48rem) { .carousel { grid-auto-columns: 80%; } }

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
}
@media (max-width: 48rem) { .project-grid { grid-template-columns: 1fr; } }
.project { margin: 0; }
.project__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); border-radius: var(--radius-card, var(--radius)); }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.project__media { display: flex; align-items: center; justify-content: center; position: relative; }
.project__fallback { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-text-muted); padding: 1rem; text-align: center; }
.project:hover .project__media img { transform: scale(1.035); }
.project__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.1rem; }
.project__meta h3 { font-size: 1.15rem; margin: 0; }
.project__tag { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; }
.project p { margin: 0.4rem 0 0; font-size: 0.93rem; color: var(--color-text-muted); }

/* --- Voor/na-slider (sectie 4.2 punt 1) ---
   Een doorzichtige <input type=range> ligt over de hele foto: slepen,
   klikken én pijltjestoetsen werken zo native (ook zonder Alpine blijft de
   input bedienbaar); Alpine zet alleen de clip-path en de hendel. */
.ba-slider {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 40rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card, var(--radius));
  background: #000;
  user-select: none;
}
.ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-slider__before { clip-path: inset(0 50% 0 0); }
.ba-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
}
.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  z-index: 2;
  pointer-events: none;
}
.ba-slider__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
}
.ba-slider__knob {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: #fff;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.ba-slider__range:focus-visible ~ .ba-slider__handle .ba-slider__knob { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.ba-slider__badge {
  position: absolute;
  top: 1.1rem;
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  color: #fff;
}
.ba-slider__badge--before { left: 1.1rem; background: rgba(0, 0, 0, 0.7); }
.ba-slider__badge--after { right: 1.1rem; background: var(--color-accent); color: var(--color-on-accent, #fff); }
.ba-slider__label,
.ba-note { font-size: 0.8rem; color: var(--color-text-muted); margin: 1rem 0 2rem; }
@media (max-width: 48rem) { .ba-slider { aspect-ratio: 4 / 5; } }

/* --- Werkwijze (process_steps) --- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.75rem;
  padding: 2.1rem 0;
  border-top: 1px solid var(--color-border-subtle, transparent);
}
.steps li:last-child { border-bottom: 1px solid var(--color-border-subtle, transparent); }
.steps__num { font-family: var(--font-heading); color: var(--color-accent); }
.steps h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.steps p { margin: 0; color: var(--color-text-muted); max-width: 56ch; }
@media (max-width: 48rem) { .steps li { grid-template-columns: 3rem 1fr; gap: 1rem; } }

/* --- Tekst (text: lopende tekst met tussenkoppen en opsommingen) ---
   De tekst staat in een leesbare kolom onder de sectiekop, uitgelijnd zoals
   die kop (--section-head-margin). */
.text-block__body {
  max-width: 68ch;
  margin: 0 var(--section-head-margin, 0);
}
.text-block .section-head { max-width: 68ch; }
.text-block__body h3 { margin: 2.25rem 0 0.6rem; font-size: 1.2rem; }
.text-block__body h3:first-child { margin-top: 0; }
.text-block__body p,
.text-block__body li { color: var(--color-text-muted); }
.text-block__body ul { margin: 0 0 1em; padding-left: 1.25rem; display: grid; gap: 0.35rem; }
.text-block__body li::marker { color: var(--color-accent); }
.text-block__body a { color: var(--color-accent); text-underline-offset: 0.2em; overflow-wrap: anywhere; }

/* --- Veelgestelde vragen (faq, iteratie 20): een uitklaplijst met <details>,
   werkt zonder JavaScript. Ook onder een productpagina. */
.faq-list {
  max-width: 68ch;
  margin: 0 var(--section-head-margin, 0);
  display: grid;
  gap: 0.75rem;
}
.faq-block .section-head { max-width: 68ch; }
.faq-item {
  background: var(--color-surface);
  border: var(--card-border, 1px solid var(--color-border-subtle, transparent));
  border-radius: var(--radius-card, var(--radius));
}
.faq-item__question {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 600);
  color: var(--color-heading);
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after {
  content: "+";
  flex: none;
  color: var(--color-accent);
  font-size: 1.4em;
  line-height: 1;
}
.faq-item[open] > .faq-item__question::after { content: "−"; }
.faq-item__question:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.faq-item__answer { padding: 0 1.25rem 1rem; }
.faq-item__answer p,
.faq-item__answer li { color: var(--color-text-muted); }
.faq-item__answer p:first-child { margin-top: 0; }
.faq-item__answer p:last-child { margin-bottom: 0; }
.faq-item__answer ul { margin: 0 0 1em; padding-left: 1.25rem; }
.faq-item__answer a { color: var(--color-accent); text-underline-offset: 0.2em; overflow-wrap: anywhere; }

/* --- Testimonials --- */
.testimonial-row {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.testimonial {
  margin: 0;
  background: var(--color-surface);
  border-radius: var(--radius-card, var(--radius));
  padding: 1.75rem 1.6rem;
  border: var(--card-border, 1px solid var(--color-border-subtle, transparent));
  border-top: var(--testimonial-top, var(--card-border, 1px solid var(--color-border-subtle, transparent)));
  box-shadow: var(--shadow-card, none);
}
.testimonial blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--color-heading);
}
.testimonial__author { display: flex; align-items: center; gap: 0.75rem; font-size: 0.87rem; color: var(--color-text-muted); }
.testimonial__author img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.testimonial__source {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* --- Contact met persoon (contact_intro) --- */
.contact-intro {
  display: grid;
  grid-template-columns: 13.75rem 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.contact-intro__avatar {
  width: 11.25rem;
  height: 11.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-subtle, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--color-accent);
  margin: 0 auto;
}
.contact-intro__avatar img { width: 100%; height: 100%; object-fit: cover; }
.contact-intro .section-head { margin-bottom: 0; }
.contact-intro__body { margin: 1.25rem 0 1.75rem; color: var(--color-text-muted); max-width: 56ch; }
.contact-lines { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem; }
.contact-lines li { display: flex; align-items: center; gap: 0.9rem; font-size: 0.93rem; color: var(--color-text-muted); }
.contact-lines a { text-decoration: none; }
.contact-lines a:hover { color: var(--color-accent); }
@media (max-width: 48rem) {
  .contact-intro { grid-template-columns: 1fr; }
  .contact-intro__avatar { width: 5.5rem; height: 5.5rem; font-size: 2rem; margin: 0; }
}
/* Layout "portrait": een grote, staande foto die opvalt — geen rond
   profielfotootje. Een accentkader valt er schuin achter, het bijschrift
   ligt over de onderrand. Zonder foto: de initiaal groot op het patroon. */
.contact-intro--portrait {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.contact-intro--portrait .contact-intro__avatar {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  margin: 0 1.25rem 1.25rem 0;
  overflow: visible;
  border: none;
  border-radius: var(--radius-card, var(--radius));
  background: none;
  font-size: clamp(6rem, 14vw, 11rem);
}
/* ::before = het accentkader (schuin erachter), ::after = de eigen
   achtergrond eroverheen; allebei achter de foto/initiaal (z-index -1). */
.contact-intro--portrait .contact-intro__avatar::before,
.contact-intro--portrait .contact-intro__avatar::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: var(--radius-card, var(--radius));
}
.contact-intro--portrait .contact-intro__avatar::before {
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 2px solid var(--color-accent);
}
.contact-intro--portrait .contact-intro__avatar::after {
  inset: 0;
  background-color: var(--color-bg-alt);
  background-image: var(--pattern-bg, none);
}
.contact-intro--portrait .contact-intro__avatar img {
  border-radius: var(--radius-card, var(--radius));
  object-position: center 25%;
}
.contact-intro__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1.25rem 1rem;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  border-radius: 0 0 var(--radius-card, var(--radius)) var(--radius-card, var(--radius));
}
.contact-intro--portrait .contact-intro__body { font-size: 1.05rem; }
@media (max-width: 48rem) {
  .contact-intro--portrait { grid-template-columns: 1fr; gap: 2.75rem; }
  .contact-intro--portrait .contact-intro__avatar {
    width: calc(100% - 1.25rem);
    height: auto;
    max-width: 26rem;
    font-size: 7rem;
  }
}

/* Layout "cutout": een foto zonder achtergrond (doorzichtige PNG/WebP). De
   persoon staat op een paneel met het patroon, een accentgloed achter het
   hoofd, en steekt boven de bovenrand van het paneel uit; het bijschrift is
   een zwevend naamkaartje. Zonder foto rendert het blok als "portrait". */
.contact-intro--cutout {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.contact-intro--cutout .contact-intro__avatar {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: none;
}
/* ::after = het paneel (onderste ~78%), ::before = de gloed erachter. */
.contact-intro--cutout .contact-intro__avatar::before,
.contact-intro--cutout .contact-intro__avatar::after {
  content: "";
  position: absolute;
}
.contact-intro--cutout .contact-intro__avatar::after {
  z-index: -2;
  inset: 22% 0 0 0;
  background-color: var(--color-bg-alt);
  background-image: var(--pattern-bg, none);
  border: 1px solid var(--color-border-subtle, transparent);
  border-bottom: 3px solid var(--color-accent);
  border-radius: var(--radius-card, var(--radius));
}
.contact-intro--cutout .contact-intro__avatar::before {
  z-index: -1;
  left: 50%;
  top: 4%;
  width: 90%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--cutout-glow, radial-gradient(circle, color-mix(in srgb, var(--color-accent) 55%, transparent) 0%, transparent 65%));
}
.contact-intro--cutout .contact-intro__avatar img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 1.25rem 1.75rem rgba(0, 0, 0, 0.45));
}
.contact-intro--cutout .contact-intro__caption {
  left: -0.75rem;
  right: auto;
  bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  font-size: 1rem;
  color: var(--color-heading);
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle, transparent);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-card, var(--radius));
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
}
.contact-intro--cutout .contact-intro__caption::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.contact-intro--cutout .contact-intro__body { font-size: 1.05rem; }
@media (max-width: 48rem) {
  .contact-intro--cutout { grid-template-columns: 1fr; gap: 2.75rem; }
  .contact-intro--cutout .contact-intro__avatar {
    width: 100%;
    height: auto;
    max-width: 26rem;
  }
  .contact-intro--cutout .contact-intro__caption { left: 0.75rem; }
}

/* --- CTA-band: kop links, knop rechts --- */
.cta-band {
  background: var(--cta-bg, var(--color-bg-alt));
  color: var(--cta-text, var(--color-text));
}
.cta-band .block-inner { padding: clamp(3rem, 6vw, 5rem) 0; }
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 2.5rem;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--cta-heading, var(--color-heading)); max-width: 18ch; margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cta-band p { margin: 0.75rem 0 0; max-width: 48rem; color: var(--cta-text, var(--color-text-muted)); }

/* --- Formulieren (sectie 5.5/6.7): contact_form-blok + het formulier zelf ---
   Alleen tokens uit het tenant-contract; --color-error is optioneel en valt
   terug op een neutraal rood, zodat een tenant er niets voor hoeft te zetten. */
.contact-form-block { max-width: 40rem; }
.contact-form-block--split {
  max-width: var(--container-max, 72rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 58rem) { .contact-form-block--split { grid-template-columns: 1fr; } }
.contact-form-block__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card, var(--radius));
  box-shadow: var(--shadow-card, none);
}
.contact-form-block__aside {
  padding-right: clamp(0rem, 4vw, 3.5rem);
  border-right: 1px solid var(--color-border-subtle, transparent);
  align-self: stretch;
}
.contact-form-block__aside h2 { font-size: 1.5rem; }
.contact-form-block__aside p { color: var(--color-text-muted); }
.check-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.check-list li { position: relative; padding-left: 1.2rem; font-size: 0.93rem; color: var(--color-text); }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.55rem;
  height: 1px;
  background: var(--color-accent);
}
.contact-form-block--split .section-head { margin-bottom: 1.75rem; }
.contact-form-block--split .section-head h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
@media (max-width: 58rem) {
  .contact-form-block__aside { border-right: none; padding-right: 0; }
}
.contact-form-slot { min-height: 8rem; }
.contact-form-slot__loading { color: var(--color-text-muted); }
.form-page { max-width: 40rem; }

.form {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(var(--form-columns, 1), minmax(0, 1fr));
}
.form__field { display: grid; gap: 0.45rem; align-content: start; }
/* Brede velden (tekstvak, keuze, foto) en alles wat geen veld is, altijd
   over de volle breedte — alleen korte invoervelden delen een rij. */
.form > :not(.form__field--short) { grid-column: 1 / -1; }
@media (max-width: 40rem) { .form { grid-template-columns: 1fr; } }
.form__field label,
.form__field legend { font-weight: 600; font-size: 0.9rem; color: var(--color-heading); padding: 0; }
.form__req { color: var(--color-accent); margin-left: 0.15em; }
/* Eigen checkboxveld (form-builder, iteratie 12): vakje links, label ernaast. */
.form__field--checkbox label { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400; cursor: pointer; }
.form__field--checkbox input[type="checkbox"] { margin-top: 0.2rem; flex: none; accent-color: var(--color-accent); }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font: inherit;
  color: var(--color-text);
  background: var(--input-bg, var(--color-surface, var(--color-bg)));
  border: 1px solid var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius);
}
.form textarea { resize: vertical; min-height: 7rem; }
/* Bestandsveld (foto-upload): border/padding op input[type=file] zelf wordt
   door geen enkele browser consistent gerespecteerd (elke browser rendert
   de knop+tekst-combinatie zelf) — ::file-selector-button kan de knop wél
   meestylen, breed ondersteund, geen JS nodig. */
.form input[type="file"] {
  width: 100%;
  padding: 1.1rem;
  font: inherit;
  color: var(--color-text-muted);
  background: var(--input-bg, var(--color-surface, var(--color-bg)));
  border: 1px dashed var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius);
}
.form input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1rem;
  margin-right: 0.9rem;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  cursor: pointer;
}
.form input[type="file"]::file-selector-button:hover {
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
}
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* Keuzekaarten: het desired_offering-veld als foto-kaartjes (radio's) in
   plaats van een keuzelijst, zodra elk aanbod een coverfoto heeft. */
.form__choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.45rem;
}
.choice { position: relative; cursor: pointer; display: block; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  transition: border-color 150ms ease;
}
.choice__media img { width: 100%; height: 100%; object-fit: cover; }
.choice__label { display: block; margin-top: 0.45rem; font-size: 0.82rem; font-weight: 600; text-align: center; color: var(--color-text-muted); }
.choice:hover .choice__media { border-color: var(--color-border-subtle, var(--color-border)); }
.choice input:checked + .choice__media { border-color: var(--color-accent); }
.choice input:checked ~ .choice__label { color: var(--color-heading); }
.choice input:focus-visible + .choice__media { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.form__help { margin: 0; font-size: 0.82rem; color: var(--color-text-muted); }
.form__error { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--color-error, #d64545); }
.form__field--error input,
.form__field--error select,
.form__field--error textarea { border-color: var(--color-error, #d64545); }
.form__actions { margin-top: 0.5rem; }
.form__actions .btn { cursor: pointer; }
.form__actions .btn[disabled] { opacity: 0.6; cursor: progress; }
.form__privacy { margin: 0; font-size: 0.82rem; color: var(--color-text-muted); }
/* Honeypot: buiten beeld, niet display:none (sommige bots slaan die over). */
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-success {
  padding: 1.5rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface, transparent);
}
.form-success p { margin: 0; font-weight: 600; color: var(--color-heading); }

/* --- Aanbod-detailpagina (offering_detail.templ) --- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 2rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }
.detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 58rem) { .detail { grid-template-columns: 1fr; } }
.detail__main {
  aspect-ratio: var(--detail-image-ratio, 3 / 4);
  overflow: hidden;
  background: var(--color-bg-alt);
  border-radius: var(--radius-card, var(--radius));
  margin-bottom: 0.9rem;
}
.detail__main { position: relative; touch-action: pan-y; }
.detail__main img { width: 100%; height: 100%; object-fit: cover; animation: detail-fade 380ms ease; }
@keyframes detail-fade { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
/* Pijltjes + teller over de grote foto (alleen met meer dan één foto). */
.detail__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 150ms ease;
}
.detail__nav:hover { background: var(--color-accent); border-color: var(--color-accent); }
.detail__nav--prev { left: 0.75rem; }
.detail__nav--next { right: 0.75rem; }
.detail__count {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: var(--radius);
}
.detail__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.detail__thumb {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--radius);
  opacity: 0.6;
  transition: opacity 150ms ease, border-color 150ms ease;
}
.detail__thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail__thumb:hover,
.detail__thumb[aria-pressed="true"] { opacity: 1; }
.detail__thumb[aria-pressed="true"] { border-color: var(--color-accent); }
.detail__info { position: sticky; top: 6.5rem; }
@media (max-width: 58rem) { .detail__info { position: static; } }
.detail__info h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.detail__lead { color: var(--color-text-muted); font-size: 1.02rem; }
.detail__cta { margin: 2rem 0 2.5rem; }
.detail__long { color: var(--color-text-muted); }
.detail__lead + .detail__long { margin-top: -0.25rem; }
.spec-table { margin: 0 0 1.5rem; border-top: 1px solid var(--color-border-subtle, transparent); }
.spec-table div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border-subtle, transparent);
}
.spec-table dt { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.spec-table dd { margin: 0; font-size: 0.93rem; }
@media (max-width: 40rem) { .spec-table div { grid-template-columns: 7.5rem 1fr; } }

/* --- Footer --- */
.site-footer {
  background: var(--color-footer-bg, var(--color-bg-alt));
  color: var(--color-footer-text, var(--color-text));
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
  font-size: 0.9rem;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--footer-link-hover, var(--color-accent)); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(var(--footer-columns, 2), 1fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 48rem) { .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer__brand {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 600);
  font-size: 1.3rem;
  color: var(--footer-brand-color, var(--color-footer-text, var(--color-heading)));
  margin-bottom: 1rem;
  text-transform: var(--footer-brand-case, none);
  letter-spacing: var(--footer-brand-tracking, 0);
}
.site-footer__brand img { height: 1.8rem; width: auto; }
.site-footer__tagline { margin: 0; max-width: 40ch; opacity: 0.85; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--footer-heading-color, var(--color-footer-text));
  text-transform: var(--footer-heading-case, none);
  letter-spacing: var(--footer-heading-tracking, 0);
  margin: 0 0 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: var(--footer-divider, 1px solid rgba(255, 255, 255, 0.1));
  font-size: 0.8rem;
  opacity: 0.75;
}

/* --- View Transitions API, met nette fallback (docs/ARCHITECTURE.md §6) ---
   Zonder support doet de browser gewoon een normale navigatie — niets van
   het bovenstaande hangt daarvan af, dit is puur progressive enhancement. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Tekst van vandaag (iteratie 20b, `verse_of_day`): één tekst, gecentreerd, veel
   lucht. --verse-font kiest het lettertype van de tekst zelf (standaard de
   kopletter), --verse-size de grootte. */
.verse { max-width: 52rem; margin: 0 auto; text-align: center; }
.verse__eyebrow { display: inline-flex; gap: 0.5em; flex-wrap: wrap; justify-content: center; }
.verse__date { text-transform: var(--verse-date-transform, none); }
.verse__text { margin: 1.5rem 0 1.25rem; padding: 0; border: 0; }
.verse__text p {
  margin: 0;
  font-family: var(--verse-font, var(--font-heading));
  font-size: var(--verse-size, clamp(1.6rem, 2.4vw + 0.9rem, 2.6rem));
  line-height: 1.32;
  color: var(--color-heading);
}
.verse__ref { color: var(--color-text-muted); font-size: 0.9rem; }
.verse__ref cite { font-style: normal; }
.verse__why { margin: 2rem auto 0; max-width: 36rem; text-align: left; color: var(--color-text-muted); }
.verse__why summary { cursor: pointer; text-align: center; color: var(--color-accent); list-style: none; }
.verse__why summary::-webkit-details-marker { display: none; }
.verse__why summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.verse__why p { margin: 1rem 0 0; }
.verse__foot { margin: 2rem 0 0; font-size: 0.8rem; color: var(--color-text-muted); }

/* Tijdlijn (iteratie 20b, `timeline`): een verticale lijn met een stip per stap.
   Een tenant-script mag stappen oplichten tijdens het scrollen (.is-on op een
   item, --timeline-progress 0..1 op de lijst); zonder script staat alles er gewoon. */
.timeline-block .section-head { max-width: 68ch; }
.timeline-block__intro { max-width: 40rem; color: var(--color-text-muted); margin-top: 1.5rem; }
.timeline {
  position: relative;
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  max-width: 52rem;
}
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--timeline-line, var(--color-border, rgba(127, 127, 127, 0.3)));
}
.timeline::after {
  bottom: auto;
  height: calc((100% - 1.2rem) * var(--timeline-progress, 0));
  background: var(--timeline-line-active, var(--color-accent));
}
.timeline__item { position: relative; padding: 0 0 var(--timeline-gap, 2.75rem) 2.25rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--timeline-dot, var(--color-accent));
  transition: background 0.8s, box-shadow 0.8s;
}
.timeline__item.is-on::before,
.timeline:not([data-timeline-js]) .timeline__item::before { background: var(--timeline-dot, var(--color-accent)); }
.timeline__label {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.timeline__title { margin: 0 0 0.35rem; }
.timeline__quote { margin: 0 0 0.75rem; font-style: italic; color: var(--timeline-quote, var(--color-accent)); }
.timeline__body p, .timeline__body li { color: var(--color-text-muted); }
.timeline-block__foot { margin: 2.5rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); }

/* Strook (iteratie 20b, `strip`): grote woorden die zijwaarts scrollen, met
   scroll-snap. De rij zelf loopt tot de rand van het scherm. */
.strip-block__intro { max-width: 40rem; color: var(--color-text-muted); margin-top: 1.5rem; }
.strip {
  display: flex;
  gap: clamp(2rem, 5vw, 4rem);
  list-style: none;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  /* Links in lijn met .container (de rij zelf loopt tot de schermrand). */
  --strip-inset: max(clamp(1.25rem, 5vw, 4rem), calc((100vw - var(--container-max, 72rem)) / 2 + clamp(1.25rem, 5vw, 4rem)));
  padding: 0.5rem var(--strip-inset) 1.25rem;
  scroll-padding-inline: var(--strip-inset);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.strip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.strip__item { flex: 0 0 auto; min-width: 15rem; scroll-snap-align: start; }
.strip__photo { width: 22rem; max-width: 80vw; height: 14rem; object-fit: cover; border-radius: var(--radius, 0.5rem); margin-bottom: 1.25rem; }
.strip__title {
  margin: 0 0 0.6rem;
  font-size: var(--strip-size, clamp(2.4rem, 5vw, 4.6rem));
  line-height: 1;
  white-space: nowrap;
}
.strip__item:nth-child(even) .strip__title { font-family: var(--strip-alt-font, inherit); font-style: var(--strip-alt-style, normal); color: var(--strip-alt-color, inherit); }
.strip__caption { margin: 0; max-width: 20rem; color: var(--color-text-muted); }

/* Stille secties (iteratie 20b, achtergrond "night"/"rain"): de tekst
   gecentreerd met veel ruimte. Een tekstblok-tussenkop (## ...) wordt hier een
   rustige losse regel. De sterrenhemel of regen tekent het script van de
   tenant zelf, voor zover die er een heeft. */
.block--night,
.block--rain { position: relative; }
/* Boven een canvas dat een tenant-script in de sectie zet (sterren, regen). */
.block--night > *,
.block--rain > * { position: relative; }
.block--night .block-inner,
.block--rain .block-inner { padding: var(--quiet-padding, clamp(6rem, 16vw, 12rem)) 0; }
.block--night .section-head,
.block--rain .section-head { text-align: center; margin: 0 auto; max-width: 48rem; }
.block--night .text-block__body,
.block--rain .text-block__body { max-width: 38rem; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; font-size: 1.15rem; line-height: 1.85; }
.block--night .text-block__body h3,
.block--rain .text-block__body h3 {
  margin: 2.5rem 0;
  text-align: center;
  font-size: clamp(1.5rem, 2vw + 0.8rem, 2.1rem);
  font-weight: inherit;
  font-style: var(--quiet-line-style, italic);
  font-family: var(--quiet-line-font, var(--font-heading));
  color: var(--color-heading);
}

/* Hero met bewegend object (iteratie 20b, Layout "orb"): een vierkant canvas
   naast de tekst; het tenant-script tekent erin, zonder script is het leeg. */
.hero__orb { position: relative; aspect-ratio: 1; width: 100%; max-width: 32rem; justify-self: end; }
.hero__orb canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 48rem) { .hero__orb { max-width: 16rem; justify-self: center; order: -1; } }

.about__link a { color: var(--color-accent); text-underline-offset: 0.25em; }

/* ---- Lightbox (iteratie 27, static/lightbox.js) ----------------------------
   .zoom-trigger is a transparent link to the photo over a gallery photo; a
   click opens the <dialog class="lightbox"> the script builds. Without
   JavaScript it just opens the photo. */
.zoom-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
}
.zoom-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
html.lightbox-open { overflow: hidden; }
.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(10 10 10 / 0.92);
  color: #fff;
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgb(10 10 10 / 0.6); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; animation: lightbox-in 180ms ease; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__figure {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 4rem 5rem 3.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: var(--radius, 6px);
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.5);
}
.lightbox__caption { font-size: 0.95rem; text-align: center; opacity: 0.9; }
.lightbox__caption[hidden] { display: none; }
.lightbox__count {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  font-size: 0.85rem;
  opacity: 0.8;
}
.lightbox__btn {
  position: absolute;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 150ms ease;
}
.lightbox__btn:hover { background: rgb(255 255 255 / 0.24); }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__btn[hidden] { display: none; }
.lightbox__close { top: 0.9rem; right: 0.9rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
/* On a phone: the photo uses the whole width, you swipe; the arrows move to
   the bottom so they never cover the photo. */
@media (max-width: 48rem) {
  .lightbox__figure { padding: 3.75rem 0.75rem 5rem; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 1rem; transform: none; }
  .lightbox__prev { left: calc(50% - 3.75rem); }
  .lightbox__next { right: calc(50% - 3.75rem); }
}
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }