/* Projectdossier (§9): hero, feitenbalk, hoofdstukken, cijfers, diagram-stepper, beelden, volgend project */

/* Hero — als de homepage-hero, iets lager, met ronde onderhoeken */
.p-hero {
  position: relative; height: 88svh; min-height: 520px; overflow: hidden; isolation: isolate;
  background: var(--night); color: var(--paper);
  border-radius: 0 0 var(--radius-section) var(--radius-section);
}
.p-hero__media { position: absolute; inset: 0; z-index: -1; }
.p-hero__media picture, .p-hero__media img { width: 100%; height: 100%; }
.p-hero__content { position: absolute; inset: auto 0 0; padding-bottom: clamp(28px, 5vh, 56px); display: grid; gap: 14px; }
.p-crumbs { color: rgba(246, 245, 241, .82); display: flex; flex-wrap: wrap; align-items: center; }
.p-crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: rgba(246, 245, 241, .4); }
.p-crumbs a:hover { text-decoration-color: currentColor; }
.p-crumbs span[aria-hidden] { margin-inline: .6em; }
.p-hero__title { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-hero); line-height: .94; letter-spacing: -.035em; }
.p-hero__tag { display: flex; align-items: center; gap: 10px; }
.p-hero__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }

/* Feitenbalk */
.p-facts { padding-block: clamp(48px, 6vw, 88px) clamp(32px, 4vw, 56px); }
.p-facts__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline-strong); }
.p-facts__grid > div { padding: 18px 24px 22px 0; border-bottom: 1px solid var(--hairline); display: grid; gap: 8px; align-content: start; }
.p-facts__grid > div:nth-child(3n + 2), .p-facts__grid > div:nth-child(3n) { padding-left: 24px; border-left: 1px solid var(--hairline); }
.p-facts__grid dd { font-size: 1.0625rem; line-height: 1.45; }
.p-facts__cats { margin-top: 24px; max-width: none; }
@media (max-width: 800px) {
  .p-facts__grid { grid-template-columns: 1fr; }
  .p-facts__grid > div, .p-facts__grid > div:nth-child(3n + 2), .p-facts__grid > div:nth-child(3n) { padding-left: 0; border-left: 0; }
}

/* Hoofdstukken: kop links (sticky), tekst rechts */
.p-chapter { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 20px; padding-block: clamp(48px, 7vw, 104px); }
.p-chapter + .p-chapter { border-top: 1px solid var(--hairline); }
.p-chapter__head { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 14px; }
.p-chapter__n { color: var(--ink-2); }
.p-chapter__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.875rem, 3.2vw, 3rem); line-height: 1.06; letter-spacing: -.022em; text-wrap: balance; }
.p-chapter__body { grid-column: 7 / span 6; display: grid; gap: 1.1em; }
.p-chapter__body p { max-width: 62ch; color: var(--ink); }
.p-chapter__first { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -.01em; max-width: 30em !important; }
@media (max-width: 900px) {
  .p-chapter__head, .p-chapter__body { grid-column: 1 / -1; position: static; }
}

/* Beelden tussen de hoofdstukken */
.p-figure { margin-block: clamp(16px, 3vw, 40px) clamp(40px, 5vw, 72px); }
.p-figure__frame { overflow: hidden; border-radius: var(--radius-card); background: var(--paper-2); aspect-ratio: 16 / 10; isolation: isolate; }
.p-figure:not(.p-figure--wide) .p-figure__frame { width: min(100%, 980px); margin-left: auto; }
.p-figure figcaption { margin-top: 14px; }
.p-figure:not(.p-figure--wide) figcaption { width: min(100%, 980px); margin-left: auto; }

/* Programma in cijfers */
.p-figures { padding-block: clamp(32px, 5vw, 72px); }
.p-figures__grid { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 18px; border-top: 1px solid var(--hairline-strong); }
.p-figures__grid > div { padding: 18px 20px 8px 0; display: grid; gap: 18px; align-content: space-between; min-height: 150px; }
.p-figures__grid > div + div { padding-left: 20px; border-left: 1px solid var(--hairline); }
.p-figures__grid dd { font-family: var(--font-display); font-weight: 300; font-size: 1.125rem; color: var(--ink-2); }
.p-figures__grid dd span { display: block; font-size: clamp(2.25rem, 4vw, 3.75rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .p-figures__grid { grid-template-columns: 1fr 1fr; }
  .p-figures__grid > div { border-bottom: 1px solid var(--hairline); min-height: 120px; }
  .p-figures__grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* Diagram-stepper: zelfde sectie als op de homepage, met 12 korte stappen */
.lagen--project { margin-block: clamp(32px, 5vw, 72px); }
.p-stepper__label { margin-bottom: 14px; }
.lagen--project .lagen__title { font-size: clamp(1.0625rem, 1.4vw, 1.375rem); }
.lagen--project .lagen__step { grid-template-columns: 36px 1fr; row-gap: 0; }
.lagen--project .lagen__n { grid-row: auto; padding-top: .2em; }
.lagen--project.is-pinned .lagen__steps { gap: clamp(2px, .9vh, 10px); }
.lagen--project.is-sticky .lagen__step { min-height: 22svh; }
.lagen--project:not(.is-pinned):not(.is-sticky) .lagen__stack { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Volgend project */
.p-next { display: block; margin-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 96px); }
.p-next__frame { margin-inline: var(--gutter); height: clamp(280px, 52vh, 560px); overflow: hidden; border-radius: var(--radius-card); isolation: isolate; }
.p-next__frame img { transition: transform 1.4s var(--ease-out); }
.p-next:hover .p-next__frame img { transform: scale(1.03); }
.p-next__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 18px; }
.p-next__meta .label { color: var(--ink-2); }
.p-next__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 3.4vw, 3.25rem); letter-spacing: -.02em; display: inline-flex; align-items: center; gap: .3em; }
.p-next__title .i-arrow { width: .6em; height: .6em; }
@media (max-width: 600px) { .p-next__meta { flex-direction: column; align-items: flex-start; gap: 6px; } }
/* brede beelden max. 1190px: de renders zijn 2382px breed, dus zo blijven ze op retina exact scherp */
.p-figure--wide .p-figure__frame, .p-figure--wide figcaption { max-width: 1190px; }