/* Podcast Website (T05 volledig NL r2) — paginagebonden compositie bovenop design-norm a321806.
   Laadvolgorde: tokens.css → fonts.css → website-editorial.css → editorial-tables.css → dit bestand.
   Alleen bestaande --sc-*-tokens; geen nieuwe kleuren. Paginagebonden afwijkingen staan in OVERDRACHT.md §4. */

/* ---------- Hero ---------- */
.pw-hero { display: block; padding-block: 7rem clamp(2rem, 4vw, 3rem); }
.pw-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: calc(clamp(6rem, 22vw, 18rem) + clamp(2rem, 4vw, 3rem) + 4rem); background: var(--sc-bg-subtle); z-index: -1; }
.pw-hero h1 { max-width: 22ch; text-wrap: balance; }
.pw-accent { color: var(--sc-bg-brand); }
@media (min-width: 48rem) { .pw-accent { display: block; } }
.pw-hero .sc-editorial__lead { max-width: 60ch; }
.pw-hero__note { margin: 1.25rem auto 0 !important; max-width: 60ch; font: 400 .875rem/1.6 var(--sc-font-body); color: var(--sc-fg-muted); }

/* Productpodium (grid, normale flow). Statische compositie = reduced-motion- en no-JS-staat. Fable vult [data-motion-layer].
   Geometrie gelijk aan r3: editor 84%/92% breed (1600:1000), telefoon 20%/46% rechts, top op 13,218%/19,951% van de podiumbreedte.
   Bijschrift en pauzeknop staan in eigen rijen in de linkerkolom, naast de telefoon en onder de editor: ze groeien mee met tekst en vertaling. */
.pw-stage { position: relative; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) 20%; column-gap: 1.5rem; row-gap: .75rem; align-items: start; width: 100%; margin: clamp(3rem, 6vw, 4.5rem) 0 0; text-align: left; }
.pw-stage__frame { margin: 0; overflow: hidden; background: var(--sc-bg-canvas); border: 1px solid var(--sc-border); box-shadow: var(--sc-shadow-elevated); }
.pw-stage__frame img { display: block; width: 100%; height: auto; }
.pw-stage__frame--editor { grid-column: 1 / -1; grid-row: 1; width: 84%; border-radius: var(--sc-radius-lg); aspect-ratio: 1600 / 1000; }
.pw-stage__frame--phone { grid-column: 2; grid-row: 2 / span 2; position: relative; z-index: 1; width: 100%; margin-top: calc(-39.282cqw - .75rem); border-radius: var(--sc-editorial-feature-radius); aspect-ratio: 390 / 844; }
.pw-stage__motion { position: absolute; inset: 0; pointer-events: none; }
.pw-stage__label { grid-column: 1; grid-row: 2; margin: 0; font: 500 .6875rem/1.6 var(--sc-font-mono); text-transform: uppercase; letter-spacing: .13em; color: var(--sc-fg-muted); }

/* Pauzeknop: normale flow, eigen rij onder het bijschrift. Ruimte blijft gereserveerd (visibility) zodat er niets verspringt
   wanneer de motion de knop toont; in die staat is hij niet focusbaar en niet in de toegankelijkheidsboom. */
.pw-stage .sc-editorial__motion-toggle { grid-column: 1; grid-row: 3; justify-self: start; position: relative; z-index: 2; right: auto; bottom: auto; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; white-space: normal; text-align: center; line-height: 1.5; overflow-wrap: anywhere; }
.pw-stage .sc-editorial__motion-toggle[hidden] { display: inline-flex; visibility: hidden; }

/* Smal podium of grote tekst (container smaller dan 16em): telefoon houdt zijn plek, bijschrift en knop over de volle breedte eronder. */
@container (max-width: 16em) {
  .pw-stage__frame--phone { grid-row: 2; }
  .pw-stage__label { grid-column: 1 / -1; grid-row: 3; }
  .pw-stage .sc-editorial__motion-toggle { grid-column: 1 / -1; grid-row: 4; }
}

/* ---------- Werking: A3 + A4 (één Bone-band) ---------- */
.pw-build__rows { display: grid; gap: clamp(5rem, 10vw, 8rem); }
.pw-build .sc-editorial__heading { margin-bottom: 0; }
.pw-build .sc-editorial__copy + .sc-editorial__copy { margin-top: 1rem !important; }
.pw-sections { list-style: none; margin: 1.5rem 0 0; padding: 0; border-bottom: 1px solid var(--sc-border); max-width: 60ch; }
.pw-sections li { display: grid; grid-template-columns: 1fr; gap: .125rem; padding-block: .875rem; border-top: 1px solid var(--sc-border); font: 400 .9375rem/1.6 var(--sc-font-body); color: var(--sc-fg-muted); }
.pw-sections strong { color: var(--sc-fg-heading); font-weight: 600; }
.pw-shot { margin: 0; }
.pw-shot__frame { overflow: hidden; border-radius: var(--sc-radius-lg); border: 1px solid var(--sc-border); background: var(--sc-bg-canvas); box-shadow: var(--sc-shadow-elevated); }
.pw-shot__frame img { display: block; width: 100%; height: auto; }
.pw-shot__frame picture { display: block; }
@media (max-width: 47.99rem) { .pw-a5 .pw-shot__frame, .pw-a6 .pw-shot__frame { max-width: 22rem; margin-inline: auto; } }

/* ---------- A2: paginatypen (in de Bone-band, vóór A3) ---------- */
.pw-a2__head { max-width: 46rem; }
.pw-types { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2rem; counter-reset: none; }
.pw-types li { border-top: 1px solid var(--sc-border-control); padding-top: 1.5rem; min-width: 0; }
.pw-types__n { display: block; font: 500 .6875rem/1.6 var(--sc-font-mono); letter-spacing: .13em; color: var(--sc-fg-muted); margin-bottom: 1.25rem; }
.pw-types h3 { margin: 0; font: 600 1.5rem/1.2 var(--sc-font-display); letter-spacing: -.03em; color: var(--sc-fg-heading); }
.pw-types p { margin: .75rem 0 0; font: 400 1rem/1.75 var(--sc-font-body); color: var(--sc-fg-muted); max-width: 40ch; }
.pw-shot--wide { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* A2: drie echte schermen (één figuur, één alt) uitgelijnd op de drie paginatypen */
.pw-screens__row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 48rem) { .pw-screens__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }

/* ---------- A5 ---------- */
.pw-a5 .sc-editorial__copy + .sc-editorial__copy { margin-top: 1rem !important; }
.pw-a5__text { display: grid; gap: 1.5rem 4rem; }
.pw-a5__body .sc-editorial__copy:first-child { margin-top: 0 !important; }
@media (min-width: 64rem) { .pw-a5__text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }

/* ---------- A6 (Ink) ---------- */
.pw-a6 .sc-editorial__heading { color: var(--sc-fg-on-inverse); }
.pw-a6__panel { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--sc-border-inverse); max-width: 60ch; }
.pw-a6__panel h3 { margin: 0; font: 600 1.375rem/1.25 var(--sc-font-display); letter-spacing: -.02em; color: var(--sc-fg-on-inverse); }
.pw-a6__panel .sc-editorial__copy { margin-top: .75rem !important; }
.pw-a6 .sc-editorial__caption { color: var(--sc-fg-on-inverse-muted); }

/* ---------- FAQ ---------- */
.pw-faq { border-top: 0; }
.pw-faq__list { max-width: 52rem; margin-inline: auto; border-bottom: 1px solid var(--sc-border); }
.pw-faq details { border-top: 1px solid var(--sc-border); }
.pw-faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding-block: 1.375rem; min-height: 2.75rem; cursor: pointer; list-style: none; font: 600 1.125rem/1.45 var(--sc-font-display); letter-spacing: -.01em; color: var(--sc-fg-heading); }
.pw-faq summary::-webkit-details-marker { display: none; }
.pw-faq summary::after { content: ""; flex: none; width: .75rem; height: .75rem; margin-top: .45rem; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg); transition: transform var(--sc-duration-fast); }
.pw-faq details[open] > summary::after { transform: rotate(-135deg); margin-top: .75rem; }
.pw-faq summary:focus-visible { outline: 3px solid var(--sc-focus-ring); outline-offset: 5px; border-radius: var(--sc-radius-sm); }
.pw-faq details > .sc-editorial__copy { margin: 0 0 1.5rem !important; }
.pw-faq__more { margin: -.75rem 0 1.25rem; }
.pw-faq__more .sc-editorial__link { gap: .5rem; }
.pw-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- A9 eind-CTA ---------- */
.pw-a9 { text-align: center; }
.pw-a9 .sc-editorial__heading { max-width: 18ch; margin-inline: auto; text-wrap: balance; }
.pw-a9 .sc-editorial__lead { margin-inline: auto; }
.pw-a9 .sc-editorial__actions { justify-content: center; }

/* ---------- Keuze: planvergelijking ---------- */
.pw-plans__head { max-width: 46rem; margin-bottom: 3rem; }
.pw-compare thead th:not(:first-child) .sc-table-title { margin-top: 0; }
.pw-compare .pw-no { color: var(--sc-fg-muted); font-size: .8125rem; font-weight: 500; }
.pw-plans .sc-editorial__actions { margin-top: 2rem; }

/* Planbeschrijving in kolomkop */
.pw-compare thead th small { font-weight: 400; color: var(--sc-fg-muted); }
.pw-compare thead th { vertical-align: top; }
.pw-compare thead td { background: var(--sc-web-table-head-bg); border-bottom: 1px solid var(--sc-web-table-rule); }

/* Organisaties: apart van de Creator-vergelijking */
.pw-org { display: grid; gap: 1.25rem 3rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--sc-editorial-feature-radius); background: var(--sc-bg-subtle); align-items: center; }
.pw-org h3 { font-size: 1.75rem; line-height: 1.16; letter-spacing: -.03em; }
.pw-org .sc-editorial__copy { margin-top: .75rem !important; }
.pw-org .sc-editorial__link { gap: .5rem; white-space: normal; }
.pw-org .sc-editorial__link svg { flex: none; }
@media (min-width: 48rem) { .pw-org { grid-template-columns: 1fr auto; } }

/* ---------- Breakpoints ---------- */
@media (max-width: 40rem) {
  .pw-compare thead th:first-child { width: 30%; }
  .pw-compare th { overflow-wrap: break-word; }
}
@media (min-width: 48rem) {
  .pw-types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (min-width: 40rem) {
  .pw-sections li { display: flex; flex-wrap: wrap; gap: .125rem 1.5rem; }
  .pw-sections li strong { flex: 0 0 11.5rem; max-width: 100%; }
  .pw-sections li span { flex: 1 1 14rem; min-width: 0; }
}
@media (min-width: 64rem) {
  .pw-build__row--media-first { grid-template-columns: 1.15fr 1fr; }
  .pw-build__row--media-first .pw-shot { order: -1; }
}
@media (max-width: 47.99rem) {
  .pw-hero { padding-block: 5.625rem 2rem; }
  .pw-stage { grid-template-columns: minmax(0, 1fr) 46%; column-gap: 1rem; }
  .pw-stage__frame--editor { width: 92%; }
  .pw-stage__frame--phone { margin-top: calc(-37.549cqw - .75rem); border-radius: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-stage__motion { display: none; }
  .pw-stage .sc-editorial__motion-toggle { display: inline-flex; visibility: hidden; }
}
.pw-page ~ .ftr .ftr__links a, .pw-page ~ .ftr .ftr__colhead { overflow-wrap: anywhere; }