/*
 * pf-block.css — per-block design-override CSS-classes.
 *
 * Phase 2D-2 Stap B (Pagemaestro composer Design-tab > Geselecteerd blok).
 *
 * De cockpit zet whitelisted style-keys op een blok in de page-YAML
 * (frontmatter `blocks[].style`). partials/block.html wrapt elke render
 * met een <div class="pf-block ..."> die deze classes oppakt.
 *
 * Hugo-export-veiligheid: alle waarden token-bound — geen pixel-input,
 * geen free-form CSS. Hier alleen utility-classes die op tokens steunen.
 *
 * Class-conventie (BEM-light):
 *   .pf-block                          baseline wrapper
 *   .pf-block--padding-{compact|normal|roomy}
 *   .pf-block--align-{left|center|right}
 *   .pf-block--bg-{default|muted|accent-subtle|inverse}
 *   .pf-block--text-{default|muted|accent|inverse}
 *   .pf-block--variant-{slug}
 *   .pf-block--hidden-{desktop|tablet|mobile}
 */

.pf-block {
  /* Baseline geen styling — zodat blocks zonder overrides exact renderen
     zoals voorheen (geen visuele regressie). Alleen wanneer een modifier
     gezet is, krijg je override-gedrag. */
}

/* ===== Padding-presets — verticaal ritme alleen ===== */
.pf-block--padding-compact {
  padding-block: var(--space-block-tight, 1.5rem);
}
.pf-block--padding-normal {
  padding-block: var(--space-block-default, 3rem);
}
.pf-block--padding-roomy {
  padding-block: var(--space-block-loose, 5rem);
}

/* ===== Uitlijning ===== */
.pf-block--align-left { text-align: left; }
.pf-block--align-center { text-align: center; }
.pf-block--align-right { text-align: right; }

/* ===== Achtergrond-tokens ===== */
.pf-block--bg-default {
  background: var(--color-background-default, #fff);
}
.pf-block--bg-muted {
  background: var(--color-background-muted, #f5f5f5);
}
.pf-block--bg-accent-subtle {
  background: var(--color-accent-subtle, color-mix(in srgb, var(--color-accent-primary) 8%, transparent));
}
.pf-block--bg-inverse {
  background: var(--color-text-default, #111);
  color: var(--color-text-inverse, #fff);
}

/* Audit-fix (29 apr 2026) — block-templates die hun eigen background
   zetten (block-hero, block-intro, collection_grid, contact_form, …)
   dekken anders de pf-block--bg-* override van de wrapper af. Hogere
   specificity (.pf-block + attribute-selector + child-combinator) wint
   van block-class-rules in inline <style>. Inner section erft simpelweg
   de wrapper-bg. Idem voor text-overrides + responsive-prefixed variants
   (zie media-queries hieronder).

   Voor text: NIET alleen direct child. Block-templates zetten color op
   specifieke headings (.block-hero__title, .block-pagehero__title) wat
   onze `.pf-block > * { color: inherit }` zou ondergraven omdat
   `.block-hero__title` (specificity 0,1,0) wint van de section's inherited
   color. Daarom een diepe descendant-selector op alle text-bearing
   elementen + atoms — zelfde specificity-laag als `.pf-block` zelf via
   :where wat 0-specificity geeft, gecombineerd met de attribute-selector
   voor scoping. */
.pf-block[class*="--bg-"] > * {
  background: inherit;
}
/* Audit-29-apr-2026 follow-up #2a: text-color override werkte niet zichtbaar
   omdat block-templates de inline `.block-X__title { color: ... }`-rule
   hadden met specificity 0,1,0. Mijn `:where()`-rule hierboven gaf 0,2,0,
   wat in theorie wint, maar in praktijk werkten subtiele cases niet
   consistent over alle blok-templates. Switch naar `:is()` (specificity
   van highest arg = 0,1,0) zodat totaal 0,3,0 wordt — onverslaanbaar door
   typische block-template class-rules. */
.pf-block[class*="--text-"] > *,
.pf-block[class*="--text-"] :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, .atom, .block-hero__title, .block-hero__subtitle, .block-hero__eyebrow, .block-pagehero__title, .block-pagehero__intro, .block-pagehero__eyebrow, .block-intro__heading, .block-intro__body, .block-cta__heading, .block-cta__body) {
  color: inherit;
}

/* ===== Tekst-tokens ===== */
.pf-block--text-default { color: var(--color-text-default); }
.pf-block--text-muted   { color: var(--color-text-muted); }
.pf-block--text-accent  { color: var(--color-accent-primary); }
.pf-block--text-inverse { color: var(--color-text-inverse, #fff); }

/* ===== Variant-presets — hooks voor block-specifieke variants ===== */
.pf-block--variant-dark {
  background: var(--color-text-default, #111);
  color: var(--color-text-inverse, #fff);
}
.pf-block--variant-compact {
  padding-block: var(--space-block-tight, 1.5rem);
}
.pf-block--variant-spacious {
  padding-block: var(--space-block-loose, 5rem);
}

/* ===== Breakpoint-zichtbaarheid =====
   Mirror't Tailwind-conventie: tablet = 768-1024, mobile = <768.
   Bron-waarden komen uit tokens (--bp-*). */
@media (min-width: 1024px) {
  .pf-block--hidden-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pf-block--hidden-tablet { display: none !important; }
}
@media (max-width: 767.98px) {
  .pf-block--hidden-mobile { display: none !important; }
}

/* ============================================================
   Designer-laag P0 — fijnmazige spacing-overrides (29 apr 2026)
   ============================================================
   Section-spacing = ruimte rondom het blok (top/bottom).
   Inner-spacing   = padding binnenin het blok per side.

   Specificity-belangrijk: deze classes komen NA .pf-block--padding-*
   zodat ze winnen wanneer beide gezet zijn. Editor-laag shorthand
   (padding-compact/normal/roomy) blijft werken; designer-laag spacing
   stelt fijnmazig bij wanneer aanwezig.

   Token-stappen mappen op design-system.yaml:
     section-steps: tight|small|medium|large|xl  (+ 'none' = 0)
     block-steps:   tight|default|loose|looser   (+ 'none' = 0)
   ============================================================ */

/* ===== Section-spacing top (st) ===== */
.pf-block--st-none   { padding-block-start: 0; }
.pf-block--st-tight  { padding-block-start: var(--space-section-tight, 3rem); }
.pf-block--st-small  { padding-block-start: var(--space-section-small, 4rem); }
.pf-block--st-medium { padding-block-start: var(--space-section-medium, 6rem); }
.pf-block--st-large  { padding-block-start: var(--space-section-large, 9rem); }
.pf-block--st-xl     { padding-block-start: var(--space-section-xl, 12rem); }

/* ===== Section-spacing bottom (sb) ===== */
.pf-block--sb-none   { padding-block-end: 0; }
.pf-block--sb-tight  { padding-block-end: var(--space-section-tight, 3rem); }
.pf-block--sb-small  { padding-block-end: var(--space-section-small, 4rem); }
.pf-block--sb-medium { padding-block-end: var(--space-section-medium, 6rem); }
.pf-block--sb-large  { padding-block-end: var(--space-section-large, 9rem); }
.pf-block--sb-xl     { padding-block-end: var(--space-section-xl, 12rem); }

/* ===== Inner-padding top (it) ===== */
.pf-block--it-none    { padding-top: 0; }
.pf-block--it-tight   { padding-top: var(--space-block-tight, 0.5rem); }
.pf-block--it-default { padding-top: var(--space-block-default, 1rem); }
.pf-block--it-loose   { padding-top: var(--space-block-loose, 1.5rem); }
.pf-block--it-looser  { padding-top: var(--space-block-looser, 2rem); }

/* ===== Inner-padding right (ir) ===== */
.pf-block--ir-none    { padding-right: 0; }
.pf-block--ir-tight   { padding-right: var(--space-block-tight, 0.5rem); }
.pf-block--ir-default { padding-right: var(--space-block-default, 1rem); }
.pf-block--ir-loose   { padding-right: var(--space-block-loose, 1.5rem); }
.pf-block--ir-looser  { padding-right: var(--space-block-looser, 2rem); }

/* ===== Inner-padding bottom (ib) ===== */
.pf-block--ib-none    { padding-bottom: 0; }
.pf-block--ib-tight   { padding-bottom: var(--space-block-tight, 0.5rem); }
.pf-block--ib-default { padding-bottom: var(--space-block-default, 1rem); }
.pf-block--ib-loose   { padding-bottom: var(--space-block-loose, 1.5rem); }
.pf-block--ib-looser  { padding-bottom: var(--space-block-looser, 2rem); }

/* ===== Inner-padding left (il) ===== */
.pf-block--il-none    { padding-left: 0; }
.pf-block--il-tight   { padding-left: var(--space-block-tight, 0.5rem); }
.pf-block--il-default { padding-left: var(--space-block-default, 1rem); }
.pf-block--il-loose   { padding-left: var(--space-block-loose, 1.5rem); }
.pf-block--il-looser  { padding-left: var(--space-block-looser, 2rem); }

/* ============================================================
   Designer-laag P0 — typography overrides (29 apr 2026)
   ============================================================
   Scope: descendant-selectors op heading-elementen (h1..h4) binnen
   het blok. Body-tekst (p, li, etc.) blijft template-default zodat
   leesbaarheid niet wordt aangetast door designer-overrides.

   Size-step werkt multiplicatief: 1 step ≈ 12.5% verschil. Headings
   krijgen daarmee een proportionele schaal-aanpassing zonder dat het
   block-template aangepast hoeft te worden.

   Weight + transform werken op alle heading-elements + .eyebrow.
   ============================================================ */

/* ===== Size-step ===== */
.pf-block--typo-size-down2 :is(h1, h2, h3, h4, .pf-display) {
  font-size: 0.75em;
}
.pf-block--typo-size-down1 :is(h1, h2, h3, h4, .pf-display) {
  font-size: 0.875em;
}
.pf-block--typo-size-up1 :is(h1, h2, h3, h4, .pf-display) {
  font-size: 1.125em;
}
.pf-block--typo-size-up2 :is(h1, h2, h3, h4, .pf-display) {
  font-size: 1.25em;
}

/* ===== Weight ===== */
.pf-block--typo-weight-regular :is(h1, h2, h3, h4) {
  font-weight: 400;
}
.pf-block--typo-weight-medium :is(h1, h2, h3, h4) {
  font-weight: 500;
}
.pf-block--typo-weight-semibold :is(h1, h2, h3, h4) {
  font-weight: 600;
}
.pf-block--typo-weight-bold :is(h1, h2, h3, h4) {
  font-weight: 700;
}

/* ===== Transform ===== */
.pf-block--typo-transform-uppercase :is(h1, h2, h3, h4, .eyebrow) {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pf-block--typo-transform-lowercase :is(h1, h2, h3, h4, .eyebrow) {
  text-transform: lowercase;
}

/* ============================================================
   Designer-laag P0 — Surface (border + radius + shadow)
   ============================================================ */

/* Border-presets — combineren met border_sides voor selectieve toepassing. */
.pf-block--border-none     { border: 0; }
.pf-block--border-hairline { border: 1px solid var(--color-border-default, #E2DACE); }
.pf-block--border-strong   { border: 1px solid var(--color-border-strong, #B8AE9E); }

/* Border-sides — werkt alleen wanneer een border-preset ook gezet is.
   Default 'all' = alle 4 sides (geen extra class nodig). */
.pf-block--border-sides-top    { border-right: 0; border-bottom: 0; border-left: 0; }
.pf-block--border-sides-bottom { border-top: 0; border-right: 0; border-left: 0; }
.pf-block--border-sides-tb     { border-right: 0; border-left: 0; }
.pf-block--border-sides-lr     { border-top: 0; border-bottom: 0; }

/* Radius-presets — mapt op design-system.yaml radii.* */
.pf-block--radius-none   { border-radius: 0; }
.pf-block--radius-small  { border-radius: var(--radii-small, 0.25rem); }
.pf-block--radius-medium { border-radius: var(--radii-medium, 0.5rem); }
.pf-block--radius-large  { border-radius: var(--radii-large, 1rem); }
.pf-block--radius-pill   { border-radius: var(--radii-pill, 9999px); }

/* Shadow-presets — mapt op design-system.yaml shadows.* */
.pf-block--shadow-none   { box-shadow: none; }
.pf-block--shadow-subtle { box-shadow: var(--shadows-subtle); }
.pf-block--shadow-medium { box-shadow: var(--shadows-medium); }
.pf-block--shadow-strong { box-shadow: var(--shadows-strong); }

/* ============================================================
   Designer-laag P2 — Per-corner radius (29 apr 2026)
   ============================================================
   Overruled uniforme radius wanneer gezet. Class-prefix:
     rtl = top-left      rtr = top-right
     rbl = bottom-left   rbr = bottom-right
   Mapt op dezelfde radii.* tokens als de uniforme radius.
   ============================================================ */

/* Top-left */
.pf-block--rtl-none   { border-top-left-radius: 0; }
.pf-block--rtl-small  { border-top-left-radius: var(--radii-small, 0.25rem); }
.pf-block--rtl-medium { border-top-left-radius: var(--radii-medium, 0.5rem); }
.pf-block--rtl-large  { border-top-left-radius: var(--radii-large, 1rem); }
.pf-block--rtl-pill   { border-top-left-radius: var(--radii-pill, 9999px); }

/* Top-right */
.pf-block--rtr-none   { border-top-right-radius: 0; }
.pf-block--rtr-small  { border-top-right-radius: var(--radii-small, 0.25rem); }
.pf-block--rtr-medium { border-top-right-radius: var(--radii-medium, 0.5rem); }
.pf-block--rtr-large  { border-top-right-radius: var(--radii-large, 1rem); }
.pf-block--rtr-pill   { border-top-right-radius: var(--radii-pill, 9999px); }

/* Bottom-right */
.pf-block--rbr-none   { border-bottom-right-radius: 0; }
.pf-block--rbr-small  { border-bottom-right-radius: var(--radii-small, 0.25rem); }
.pf-block--rbr-medium { border-bottom-right-radius: var(--radii-medium, 0.5rem); }
.pf-block--rbr-large  { border-bottom-right-radius: var(--radii-large, 1rem); }
.pf-block--rbr-pill   { border-bottom-right-radius: var(--radii-pill, 9999px); }

/* Bottom-left */
.pf-block--rbl-none   { border-bottom-left-radius: 0; }
.pf-block--rbl-small  { border-bottom-left-radius: var(--radii-small, 0.25rem); }
.pf-block--rbl-medium { border-bottom-left-radius: var(--radii-medium, 0.5rem); }
.pf-block--rbl-large  { border-bottom-left-radius: var(--radii-large, 1rem); }
.pf-block--rbl-pill   { border-bottom-left-radius: var(--radii-pill, 9999px); }

/* ============================================================
   Designer-laag P0 — Background-image
   ============================================================
   Image-URL wordt via inline --pf-bg-image CSS-var geleverd
   (enige inline-style die we toestaan; URL kan niet anders).
   Position en overlay zijn presets.
*/

.pf-block--has-bg-image {
  background-image: var(--pf-bg-image);
  background-repeat: no-repeat;
  position: relative;
  /* Zorg dat content boven het overlay-pseudo-element ligt. */
  isolation: isolate;
}
/* Default position als niets specifiek gezet is. */
.pf-block--has-bg-image:not([class*="pf-block--bg-pos-"]) {
  background-size: cover;
  background-position: center;
}

.pf-block--bg-pos-cover-center   { background-size: cover; background-position: center; }
.pf-block--bg-pos-cover-top      { background-size: cover; background-position: center top; }
.pf-block--bg-pos-cover-bottom   { background-size: cover; background-position: center bottom; }
.pf-block--bg-pos-contain-center { background-size: contain; background-position: center; background-repeat: no-repeat; }

/* Overlay — pseudo-element zodat de content erboven blijft. */
.pf-block--bg-overlay-scrim-light::before,
.pf-block--bg-overlay-scrim-dark::before,
.pf-block--bg-overlay-accent-tint::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.pf-block--bg-overlay-scrim-light::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.85));
}
.pf-block--bg-overlay-scrim-dark::before {
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.7));
}
.pf-block--bg-overlay-accent-tint::before {
  background: color-mix(in srgb, var(--color-accent-primary, #B5533A) 35%, transparent);
}

/* ============================================================
   Designer-laag P0.5 — Responsive overrides (29 apr 2026)
   ============================================================
   Cascade: desktop (base) → tablet → mobile.
   Designers schrijven op desktop, overrides bewaren voor smaller-
   screen experiences. Class-naamgeving: tablet- en mobile- prefix
   op alle utility-classes.

   Breakpoints matchen design-system.yaml + de bestaande
   pf-block--hidden-* media-queries:
     tablet: <= 1023.98px
     mobile: <= 767.98px

   Volgorde: tablet rules eerst, dan mobile rules. Mobile wint
   op klein scherm omdat het later in de stylesheet komt.
   ============================================================ */

@media (max-width: 1023.98px) {
  /* Background + text */
  .pf-block--tablet-bg-default       { background: var(--color-background-default, #fff); }
  .pf-block--tablet-bg-muted         { background: var(--color-background-muted, #f5f5f5); }
  .pf-block--tablet-bg-accent-subtle { background: var(--color-accent-subtle, color-mix(in srgb, var(--color-accent-primary) 8%, transparent)); }
  .pf-block--tablet-bg-inverse       { background: var(--color-text-default, #111); color: var(--color-text-inverse, #fff); }
  .pf-block--tablet-text-default { color: var(--color-text-default); }
  .pf-block--tablet-text-muted   { color: var(--color-text-muted); }
  .pf-block--tablet-text-accent  { color: var(--color-accent-primary); }
  .pf-block--tablet-text-inverse { color: var(--color-text-inverse, #fff); }

  /* Padding-shorthand */
  .pf-block--tablet-padding-compact { padding-block: var(--space-block-tight, 1.5rem); }
  .pf-block--tablet-padding-normal  { padding-block: var(--space-block-default, 3rem); }
  .pf-block--tablet-padding-roomy   { padding-block: var(--space-block-loose, 5rem); }

  /* Align */
  .pf-block--tablet-align-left { text-align: left; }
  .pf-block--tablet-align-center { text-align: center; }
  .pf-block--tablet-align-right { text-align: right; }

  /* Spacing — section-top */
  .pf-block--tablet-st-none   { padding-block-start: 0; }
  .pf-block--tablet-st-tight  { padding-block-start: var(--space-section-tight, 3rem); }
  .pf-block--tablet-st-small  { padding-block-start: var(--space-section-small, 4rem); }
  .pf-block--tablet-st-medium { padding-block-start: var(--space-section-medium, 6rem); }
  .pf-block--tablet-st-large  { padding-block-start: var(--space-section-large, 9rem); }
  .pf-block--tablet-st-xl     { padding-block-start: var(--space-section-xl, 12rem); }
  /* Spacing — section-bottom */
  .pf-block--tablet-sb-none   { padding-block-end: 0; }
  .pf-block--tablet-sb-tight  { padding-block-end: var(--space-section-tight, 3rem); }
  .pf-block--tablet-sb-small  { padding-block-end: var(--space-section-small, 4rem); }
  .pf-block--tablet-sb-medium { padding-block-end: var(--space-section-medium, 6rem); }
  .pf-block--tablet-sb-large  { padding-block-end: var(--space-section-large, 9rem); }
  .pf-block--tablet-sb-xl     { padding-block-end: var(--space-section-xl, 12rem); }
  /* Spacing — inner sides */
  .pf-block--tablet-it-none    { padding-top: 0; }
  .pf-block--tablet-it-tight   { padding-top: var(--space-block-tight, 0.5rem); }
  .pf-block--tablet-it-default { padding-top: var(--space-block-default, 1rem); }
  .pf-block--tablet-it-loose   { padding-top: var(--space-block-loose, 1.5rem); }
  .pf-block--tablet-it-looser  { padding-top: var(--space-block-looser, 2rem); }
  .pf-block--tablet-ir-none    { padding-right: 0; }
  .pf-block--tablet-ir-tight   { padding-right: var(--space-block-tight, 0.5rem); }
  .pf-block--tablet-ir-default { padding-right: var(--space-block-default, 1rem); }
  .pf-block--tablet-ir-loose   { padding-right: var(--space-block-loose, 1.5rem); }
  .pf-block--tablet-ir-looser  { padding-right: var(--space-block-looser, 2rem); }
  .pf-block--tablet-ib-none    { padding-bottom: 0; }
  .pf-block--tablet-ib-tight   { padding-bottom: var(--space-block-tight, 0.5rem); }
  .pf-block--tablet-ib-default { padding-bottom: var(--space-block-default, 1rem); }
  .pf-block--tablet-ib-loose   { padding-bottom: var(--space-block-loose, 1.5rem); }
  .pf-block--tablet-ib-looser  { padding-bottom: var(--space-block-looser, 2rem); }
  .pf-block--tablet-il-none    { padding-left: 0; }
  .pf-block--tablet-il-tight   { padding-left: var(--space-block-tight, 0.5rem); }
  .pf-block--tablet-il-default { padding-left: var(--space-block-default, 1rem); }
  .pf-block--tablet-il-loose   { padding-left: var(--space-block-loose, 1.5rem); }
  .pf-block--tablet-il-looser  { padding-left: var(--space-block-looser, 2rem); }

  /* Typography */
  .pf-block--tablet-typo-size-down2 :is(h1, h2, h3, h4, .pf-display) { font-size: 0.75em; }
  .pf-block--tablet-typo-size-down1 :is(h1, h2, h3, h4, .pf-display) { font-size: 0.875em; }
  .pf-block--tablet-typo-size-up1   :is(h1, h2, h3, h4, .pf-display) { font-size: 1.125em; }
  .pf-block--tablet-typo-size-up2   :is(h1, h2, h3, h4, .pf-display) { font-size: 1.25em; }
  .pf-block--tablet-typo-weight-regular  :is(h1, h2, h3, h4) { font-weight: 400; }
  .pf-block--tablet-typo-weight-medium   :is(h1, h2, h3, h4) { font-weight: 500; }
  .pf-block--tablet-typo-weight-semibold :is(h1, h2, h3, h4) { font-weight: 600; }
  .pf-block--tablet-typo-weight-bold     :is(h1, h2, h3, h4) { font-weight: 700; }
  .pf-block--tablet-typo-transform-uppercase :is(h1, h2, h3, h4, .eyebrow) { text-transform: uppercase; letter-spacing: 0.04em; }
  .pf-block--tablet-typo-transform-lowercase :is(h1, h2, h3, h4, .eyebrow) { text-transform: lowercase; }

  /* Surface */
  .pf-block--tablet-border-none     { border: 0; }
  .pf-block--tablet-border-hairline { border: 1px solid var(--color-border-default, #E2DACE); }
  .pf-block--tablet-border-strong   { border: 1px solid var(--color-border-strong, #B8AE9E); }
  .pf-block--tablet-border-sides-top    { border-right: 0; border-bottom: 0; border-left: 0; }
  .pf-block--tablet-border-sides-bottom { border-top: 0; border-right: 0; border-left: 0; }
  .pf-block--tablet-border-sides-tb     { border-right: 0; border-left: 0; }
  .pf-block--tablet-border-sides-lr     { border-top: 0; border-bottom: 0; }
  .pf-block--tablet-radius-none   { border-radius: 0; }
  .pf-block--tablet-radius-small  { border-radius: var(--radii-small, 0.25rem); }
  .pf-block--tablet-radius-medium { border-radius: var(--radii-medium, 0.5rem); }
  .pf-block--tablet-radius-large  { border-radius: var(--radii-large, 1rem); }
  .pf-block--tablet-radius-pill   { border-radius: var(--radii-pill, 9999px); }
  .pf-block--tablet-shadow-none   { box-shadow: none; }
  .pf-block--tablet-shadow-subtle { box-shadow: var(--shadows-subtle); }
  .pf-block--tablet-shadow-medium { box-shadow: var(--shadows-medium); }
  .pf-block--tablet-shadow-strong { box-shadow: var(--shadows-strong); }

  /* Per-corner radius (P2) */
  .pf-block--tablet-rtl-none   { border-top-left-radius: 0; }
  .pf-block--tablet-rtl-small  { border-top-left-radius: var(--radii-small, 0.25rem); }
  .pf-block--tablet-rtl-medium { border-top-left-radius: var(--radii-medium, 0.5rem); }
  .pf-block--tablet-rtl-large  { border-top-left-radius: var(--radii-large, 1rem); }
  .pf-block--tablet-rtl-pill   { border-top-left-radius: var(--radii-pill, 9999px); }
  .pf-block--tablet-rtr-none   { border-top-right-radius: 0; }
  .pf-block--tablet-rtr-small  { border-top-right-radius: var(--radii-small, 0.25rem); }
  .pf-block--tablet-rtr-medium { border-top-right-radius: var(--radii-medium, 0.5rem); }
  .pf-block--tablet-rtr-large  { border-top-right-radius: var(--radii-large, 1rem); }
  .pf-block--tablet-rtr-pill   { border-top-right-radius: var(--radii-pill, 9999px); }
  .pf-block--tablet-rbr-none   { border-bottom-right-radius: 0; }
  .pf-block--tablet-rbr-small  { border-bottom-right-radius: var(--radii-small, 0.25rem); }
  .pf-block--tablet-rbr-medium { border-bottom-right-radius: var(--radii-medium, 0.5rem); }
  .pf-block--tablet-rbr-large  { border-bottom-right-radius: var(--radii-large, 1rem); }
  .pf-block--tablet-rbr-pill   { border-bottom-right-radius: var(--radii-pill, 9999px); }
  .pf-block--tablet-rbl-none   { border-bottom-left-radius: 0; }
  .pf-block--tablet-rbl-small  { border-bottom-left-radius: var(--radii-small, 0.25rem); }
  .pf-block--tablet-rbl-medium { border-bottom-left-radius: var(--radii-medium, 0.5rem); }
  .pf-block--tablet-rbl-large  { border-bottom-left-radius: var(--radii-large, 1rem); }
  .pf-block--tablet-rbl-pill   { border-bottom-left-radius: var(--radii-pill, 9999px); }
}

@media (max-width: 767.98px) {
  /* Background + text */
  .pf-block--mobile-bg-default       { background: var(--color-background-default, #fff); }
  .pf-block--mobile-bg-muted         { background: var(--color-background-muted, #f5f5f5); }
  .pf-block--mobile-bg-accent-subtle { background: var(--color-accent-subtle, color-mix(in srgb, var(--color-accent-primary) 8%, transparent)); }
  .pf-block--mobile-bg-inverse       { background: var(--color-text-default, #111); color: var(--color-text-inverse, #fff); }
  .pf-block--mobile-text-default { color: var(--color-text-default); }
  .pf-block--mobile-text-muted   { color: var(--color-text-muted); }
  .pf-block--mobile-text-accent  { color: var(--color-accent-primary); }
  .pf-block--mobile-text-inverse { color: var(--color-text-inverse, #fff); }

  /* Padding-shorthand */
  .pf-block--mobile-padding-compact { padding-block: var(--space-block-tight, 1.5rem); }
  .pf-block--mobile-padding-normal  { padding-block: var(--space-block-default, 3rem); }
  .pf-block--mobile-padding-roomy   { padding-block: var(--space-block-loose, 5rem); }

  /* Align */
  .pf-block--mobile-align-left { text-align: left; }
  .pf-block--mobile-align-center { text-align: center; }
  .pf-block--mobile-align-right { text-align: right; }

  /* Spacing — section-top */
  .pf-block--mobile-st-none   { padding-block-start: 0; }
  .pf-block--mobile-st-tight  { padding-block-start: var(--space-section-tight, 3rem); }
  .pf-block--mobile-st-small  { padding-block-start: var(--space-section-small, 4rem); }
  .pf-block--mobile-st-medium { padding-block-start: var(--space-section-medium, 6rem); }
  .pf-block--mobile-st-large  { padding-block-start: var(--space-section-large, 9rem); }
  .pf-block--mobile-st-xl     { padding-block-start: var(--space-section-xl, 12rem); }
  /* Spacing — section-bottom */
  .pf-block--mobile-sb-none   { padding-block-end: 0; }
  .pf-block--mobile-sb-tight  { padding-block-end: var(--space-section-tight, 3rem); }
  .pf-block--mobile-sb-small  { padding-block-end: var(--space-section-small, 4rem); }
  .pf-block--mobile-sb-medium { padding-block-end: var(--space-section-medium, 6rem); }
  .pf-block--mobile-sb-large  { padding-block-end: var(--space-section-large, 9rem); }
  .pf-block--mobile-sb-xl     { padding-block-end: var(--space-section-xl, 12rem); }
  /* Spacing — inner sides */
  .pf-block--mobile-it-none    { padding-top: 0; }
  .pf-block--mobile-it-tight   { padding-top: var(--space-block-tight, 0.5rem); }
  .pf-block--mobile-it-default { padding-top: var(--space-block-default, 1rem); }
  .pf-block--mobile-it-loose   { padding-top: var(--space-block-loose, 1.5rem); }
  .pf-block--mobile-it-looser  { padding-top: var(--space-block-looser, 2rem); }
  .pf-block--mobile-ir-none    { padding-right: 0; }
  .pf-block--mobile-ir-tight   { padding-right: var(--space-block-tight, 0.5rem); }
  .pf-block--mobile-ir-default { padding-right: var(--space-block-default, 1rem); }
  .pf-block--mobile-ir-loose   { padding-right: var(--space-block-loose, 1.5rem); }
  .pf-block--mobile-ir-looser  { padding-right: var(--space-block-looser, 2rem); }
  .pf-block--mobile-ib-none    { padding-bottom: 0; }
  .pf-block--mobile-ib-tight   { padding-bottom: var(--space-block-tight, 0.5rem); }
  .pf-block--mobile-ib-default { padding-bottom: var(--space-block-default, 1rem); }
  .pf-block--mobile-ib-loose   { padding-bottom: var(--space-block-loose, 1.5rem); }
  .pf-block--mobile-ib-looser  { padding-bottom: var(--space-block-looser, 2rem); }
  .pf-block--mobile-il-none    { padding-left: 0; }
  .pf-block--mobile-il-tight   { padding-left: var(--space-block-tight, 0.5rem); }
  .pf-block--mobile-il-default { padding-left: var(--space-block-default, 1rem); }
  .pf-block--mobile-il-loose   { padding-left: var(--space-block-loose, 1.5rem); }
  .pf-block--mobile-il-looser  { padding-left: var(--space-block-looser, 2rem); }

  /* Typography */
  .pf-block--mobile-typo-size-down2 :is(h1, h2, h3, h4, .pf-display) { font-size: 0.75em; }
  .pf-block--mobile-typo-size-down1 :is(h1, h2, h3, h4, .pf-display) { font-size: 0.875em; }
  .pf-block--mobile-typo-size-up1   :is(h1, h2, h3, h4, .pf-display) { font-size: 1.125em; }
  .pf-block--mobile-typo-size-up2   :is(h1, h2, h3, h4, .pf-display) { font-size: 1.25em; }
  .pf-block--mobile-typo-weight-regular  :is(h1, h2, h3, h4) { font-weight: 400; }
  .pf-block--mobile-typo-weight-medium   :is(h1, h2, h3, h4) { font-weight: 500; }
  .pf-block--mobile-typo-weight-semibold :is(h1, h2, h3, h4) { font-weight: 600; }
  .pf-block--mobile-typo-weight-bold     :is(h1, h2, h3, h4) { font-weight: 700; }
  .pf-block--mobile-typo-transform-uppercase :is(h1, h2, h3, h4, .eyebrow) { text-transform: uppercase; letter-spacing: 0.04em; }
  .pf-block--mobile-typo-transform-lowercase :is(h1, h2, h3, h4, .eyebrow) { text-transform: lowercase; }

  /* Surface */
  .pf-block--mobile-border-none     { border: 0; }
  .pf-block--mobile-border-hairline { border: 1px solid var(--color-border-default, #E2DACE); }
  .pf-block--mobile-border-strong   { border: 1px solid var(--color-border-strong, #B8AE9E); }
  .pf-block--mobile-border-sides-top    { border-right: 0; border-bottom: 0; border-left: 0; }
  .pf-block--mobile-border-sides-bottom { border-top: 0; border-right: 0; border-left: 0; }
  .pf-block--mobile-border-sides-tb     { border-right: 0; border-left: 0; }
  .pf-block--mobile-border-sides-lr     { border-top: 0; border-bottom: 0; }
  .pf-block--mobile-radius-none   { border-radius: 0; }
  .pf-block--mobile-radius-small  { border-radius: var(--radii-small, 0.25rem); }
  .pf-block--mobile-radius-medium { border-radius: var(--radii-medium, 0.5rem); }
  .pf-block--mobile-radius-large  { border-radius: var(--radii-large, 1rem); }
  .pf-block--mobile-radius-pill   { border-radius: var(--radii-pill, 9999px); }
  .pf-block--mobile-shadow-none   { box-shadow: none; }
  .pf-block--mobile-shadow-subtle { box-shadow: var(--shadows-subtle); }
  .pf-block--mobile-shadow-medium { box-shadow: var(--shadows-medium); }
  .pf-block--mobile-shadow-strong { box-shadow: var(--shadows-strong); }

  /* Per-corner radius (P2) */
  .pf-block--mobile-rtl-none   { border-top-left-radius: 0; }
  .pf-block--mobile-rtl-small  { border-top-left-radius: var(--radii-small, 0.25rem); }
  .pf-block--mobile-rtl-medium { border-top-left-radius: var(--radii-medium, 0.5rem); }
  .pf-block--mobile-rtl-large  { border-top-left-radius: var(--radii-large, 1rem); }
  .pf-block--mobile-rtl-pill   { border-top-left-radius: var(--radii-pill, 9999px); }
  .pf-block--mobile-rtr-none   { border-top-right-radius: 0; }
  .pf-block--mobile-rtr-small  { border-top-right-radius: var(--radii-small, 0.25rem); }
  .pf-block--mobile-rtr-medium { border-top-right-radius: var(--radii-medium, 0.5rem); }
  .pf-block--mobile-rtr-large  { border-top-right-radius: var(--radii-large, 1rem); }
  .pf-block--mobile-rtr-pill   { border-top-right-radius: var(--radii-pill, 9999px); }
  .pf-block--mobile-rbr-none   { border-bottom-right-radius: 0; }
  .pf-block--mobile-rbr-small  { border-bottom-right-radius: var(--radii-small, 0.25rem); }
  .pf-block--mobile-rbr-medium { border-bottom-right-radius: var(--radii-medium, 0.5rem); }
  .pf-block--mobile-rbr-large  { border-bottom-right-radius: var(--radii-large, 1rem); }
  .pf-block--mobile-rbr-pill   { border-bottom-right-radius: var(--radii-pill, 9999px); }
  .pf-block--mobile-rbl-none   { border-bottom-left-radius: 0; }
  .pf-block--mobile-rbl-small  { border-bottom-left-radius: var(--radii-small, 0.25rem); }
  .pf-block--mobile-rbl-medium { border-bottom-left-radius: var(--radii-medium, 0.5rem); }
  .pf-block--mobile-rbl-large  { border-bottom-left-radius: var(--radii-large, 1rem); }
  .pf-block--mobile-rbl-pill   { border-bottom-left-radius: var(--radii-pill, 9999px); }
}

/* =====================================================================
 * GATE A1 Fase 2 (10 mei 2026) — skeleton-block voor live-preview na
 * cockpit-mutatie. Bridge.js injecteert <section class="block block--skeleton">
 * met deze structuur. Op publish wordt de skeleton vervangen door de
 * echte Hugo-gerenderde block (iframe-reload).
 * ===================================================================== */
.block--skeleton {
  position: relative;
  padding: var(--space-section-large, 4rem) var(--space-inline-lg, 2rem);
  background: var(--color-background-muted, #f5f3ee);
  border-block: 1px solid var(--color-border-default, #e5e2db);
  overflow: hidden;
}

.block--skeleton .block__skeleton {
  max-width: var(--bp-desktop, 64rem);
  margin: 0 auto;
  display: grid;
  gap: 0.75rem;
}

.block--skeleton .block__skeleton-bar {
  height: 1rem;
  border-radius: var(--radius-small, 0.25rem);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-text-default, #2b2b2b) 8%, transparent) 0%,
    color-mix(in srgb, var(--color-text-default, #2b2b2b) 14%, transparent) 50%,
    color-mix(in srgb, var(--color-text-default, #2b2b2b) 8%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: pf-block-skeleton-shimmer 1.6s ease-in-out infinite;
}

.block--skeleton .block__skeleton-bar--title {
  height: 2.25rem;
  width: 65%;
}
.block--skeleton .block__skeleton-bar--sub {
  height: 1.125rem;
  width: 45%;
}
.block--skeleton .block__skeleton-cluster {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.block--skeleton .block__skeleton-bar--cta-primary {
  height: 2.5rem;
  width: 8rem;
  border-radius: var(--radius-pill, 9999px);
}
.block--skeleton .block__skeleton-bar--cta-secondary {
  height: 2.5rem;
  width: 7rem;
  border-radius: var(--radius-pill, 9999px);
  opacity: 0.6;
}

.block--skeleton .block__skeleton-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed color-mix(in srgb, var(--color-text-muted, #6b6b6b) 30%, transparent);
  font-family: var(--text-ui-label-family, system-ui, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6b6b6b);
}
.block--skeleton .block__skeleton-type {
  font-weight: 600;
  color: var(--color-accent-primary, #c44b3a);
}
.block--skeleton .block__skeleton-hint {
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
}

@keyframes pf-block-skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .block--skeleton .block__skeleton-bar {
    animation: none;
  }
}