/* De trajectpagina's: dezelfde taal als de homepage, plus de uitkomsten, de tijdlijn, de negen thema's en het slot. */

/* Hero met een liggend beeld: het midden in beeld houden */
.hero-media.center img { object-position: 50% 50%; }

/* Wat je merkt: vijf woorden groot, elk met één regel, op crème */
.outcomes { background: var(--light-bg); color: var(--light-ink); padding: var(--s6) 0; }
.outcomes .label { color: var(--gold-ink); }
.outcomes .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
.outcomes h2 { margin-bottom: var(--s2); }
.outcomes .lede { color: var(--light-muted); }
.outcomes .list { margin: 0; }
.outcomes .list li { grid-template-columns: 1fr; gap: var(--s1); border-color: var(--light-line); }
.outcomes .list b { font-size: var(--fs-item); line-height: var(--lh-item); color: var(--light-ink); }
.outcomes .list span { color: var(--light-muted); max-width: 48ch; }
@media (max-width: 820px) { .outcomes { padding: var(--s5) 0; } .outcomes .wrap { grid-template-columns: 1fr; gap: var(--s4); } .outcomes .list li { grid-template-columns: 1fr; gap: var(--s1); } }

/* De route: een tijdlijn van 66 dagen, daaronder drie fasen */
.route { padding: var(--s6) 0; }
.route .head { max-width: 640px; margin-bottom: var(--s4); }
.route .head h2 { margin-bottom: var(--s2); }
.tl { position: relative; height: 56px; margin-bottom: var(--s4); }
.tl .track { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.tl .fill { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold); transform-origin: left; }
html.js .tl:not(.in) .fill { transform: scaleX(0); }
html.js .tl .fill { transition: transform 1.6s var(--ease); }
.tl .mark { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: var(--s1); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }
.tl .mark i { display: block; width: 1px; height: 12px; background: var(--gold-line); }
.tl .mark.end { font-family: var(--serif); font-size: var(--t4); color: var(--off); letter-spacing: 0; }
.tl .mark.end i { height: 20px; background: var(--gold); }
.tl .mark.first { transform: none; justify-items: start; }
.tl .mark.last { transform: translateX(-100%); justify-items: end; }
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.phases li { padding-top: var(--s3); border-top: 1px solid var(--gold-line); }
.phases .when { display: block; font-size: var(--t4); color: var(--accent-label); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--s2); }
.phases h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-kaart); line-height: var(--lh-kaart); margin: 0 0 var(--s2); }
.phases p { color: var(--muted); max-width: 36ch; }
.route .closing { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); max-width: 48ch; color: var(--muted); font-size: var(--t4); }
@media (max-width: 820px) {
  .route { padding: var(--s5) 0; }
  .route .head { margin-bottom: var(--s4); }
  .tl { display: none; }
  .phases { grid-template-columns: 1fr; gap: 0; border-left: 1px solid var(--gold-line); padding-left: var(--s3); }
  .phases li { position: relative; border-top: 0; padding: 0 0 var(--s4); }
  .phases li::before { content: ""; position: absolute; left: calc(-1 * var(--s3) - 4px); top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
  .phases li:last-child { padding-bottom: 0; }
}

/* Eén grote zin, op het donker */
.statement.dark { background: var(--bg); color: var(--off); border-top: 1px solid var(--line); }
.statement.dark .label { color: var(--accent-label); }
.statement.dark .lede { color: var(--muted); }

/* De negen thema's: een rooster op crème */
.themes { background: var(--light-bg); color: var(--light-ink); padding: var(--s6) 0; }
.themes .label { color: var(--gold-ink); }
.themes .head { max-width: 640px; margin-bottom: var(--s4); }
.themes .head h2 { margin-bottom: var(--s2); }
.themes .lede { color: var(--light-muted); }
.themes .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-bottom: var(--s4); }
.themes .grid li { display: grid; align-content: space-between; gap: var(--s3); min-height: 136px; padding: var(--s3); border: 1px solid var(--light-line); border-radius: var(--s2); }
.themes .grid li.start { grid-column: 1 / -1; min-height: 0; grid-auto-flow: column; justify-content: start; align-items: baseline; }
.themes .wk { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.themes .grid b { font-family: var(--serif); font-weight: 400; font-size: var(--t3); line-height: 1.25; }
.themes .textlink { color: var(--light-ink); border-bottom-color: rgb(var(--ink-rgb) / 0.35); }
@media (max-width: 820px) { .themes { padding: var(--s5) 0; } .themes .grid { grid-template-columns: 1fr 1fr; } .themes .grid li { min-height: 112px; padding: var(--s2); } }
@media (max-width: 420px) { .themes .grid { grid-template-columns: 1fr; } .themes .grid li { min-height: 0; grid-auto-flow: column; justify-content: start; align-items: baseline; } }

/* Tekstplek: een lijst die nog van Ryan komt, zichtbaar als plek */
.slot-text { border: 1px dashed rgb(var(--ink-rgb) / 0.3); border-radius: var(--s3); padding: var(--s4); min-height: 220px; display: grid; align-content: center; justify-items: start; font-size: var(--t4); color: var(--light-muted); }
.slot-text b { display: block; color: var(--gold-ink); font-weight: 600; letter-spacing: 0.04em; margin-bottom: var(--s1); }

/* Je gegevens: het blok van de admin, op crème */
.data { background: var(--light-bg); color: var(--light-ink); padding: var(--s6) 0; }
.data .label { color: var(--gold-ink); }
.data .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
.data .wrap.enkel { grid-template-columns: minmax(0, 1fr); } /* zonder tweede kolom (de labwaarden volgen later), dus geen lege helft */
.data h2 { margin-bottom: var(--s2); }
.data .lede { color: var(--light-muted); margin-bottom: var(--s3); max-width: 56ch; }
.data .textlink { color: var(--light-ink); border-bottom-color: rgb(var(--ink-rgb) / 0.35); }
@media (max-width: 820px) { .data { padding: var(--s5) 0; } .data .wrap { grid-template-columns: 1fr; gap: var(--s4); } }

/* Verder lezen: de andere pagina's van dit deel */
.next { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.next .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
.next h2 { margin-bottom: var(--s2); }
.next .lede { max-width: 40ch; }
@media (max-width: 820px) { .next { padding: var(--s5) 0; } .next .wrap { grid-template-columns: 1fr; gap: var(--s4); } }

/* Slot zonder formulier: één kop, één knop */
.cta { padding: var(--s7) 0; border-top: 1px solid var(--line); text-align: center; }
.cta .label { margin-bottom: var(--s3); }
.cta h2 { margin-bottom: var(--s2); }
.cta .lede { margin: 0 auto var(--ruimte-inhoud); }
.cta .small { display: block; margin-top: var(--s3); font-size: var(--t4); color: var(--muted); }
@media (max-width: 820px) { .cta { padding: var(--s6) 0; } .cta .btn { width: 100%; } }

/* De thema's als één rustige rij, zonder aantallen weken (Ryan, 12 oktober nacht: "slaat nergens op met die twee weken") */
.theme-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--s4); }
.theme-row li { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--s3); border-radius: 999px; background: var(--panel); color: var(--off); font-family: var(--serif); font-size: 18px; }
@media (max-width: 820px) { .theme-row { gap: 8px; } .theme-row li { min-height: 44px; padding: 0 18px; font-size: 16px; } }
.theme-row { gap: 10px; }
.theme-row li { padding: 0 18px; font-size: 17px; }