/* Hoe werkt het: bouwt voort op v5.css (tokens, kop, feiten, krijgt, vragen, slot, colofon). */

/* ---------- held ---------- */
.hww-held { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: min(calc(100svh - 120px), 780px); }
.hww-held-tekst { padding: clamp(40px, 5vw, 80px) clamp(32px, 4vw, 72px) 56px var(--rand); align-self: center; }
.hww-kruimel { font-size: .9375rem; color: var(--zacht); margin-bottom: 28px; }
.hww-kruimel a { color: var(--zacht); }
.hww-held h1 { font-size: clamp(2.8rem, 1.6rem + 3.4vw, 5rem); margin-bottom: 28px; }
.hww-held h1 em { display: block; }
.hww-held-beeld { position: relative; overflow: hidden; background: var(--vlak, #efe5d4); }
.hww-held-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- een foto zonder verhaal ---------- */
.hww-raadsel { background: var(--wijn); color: var(--op-donker); padding: clamp(80px, 10vw, 140px) var(--rand); }
.hww-raadsel h2 em { display: block; color: var(--roos-licht); }
.hww-raadsel .sectie-kop-rij > p { color: rgba(243, 234, 217, .8); }
.raadsels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.raadsel { margin: 0; background: rgba(255, 255, 255, .04); border: 1px solid rgba(217, 181, 109, .3); }
.raadsel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.raadsel figcaption { padding: 22px 24px 26px; display: grid; gap: 16px; }
.raadsel .zonder, .raadsel .met { display: block; }
.raadsel .zonder::before, .raadsel .met::before {
  display: block; margin-bottom: 6px; font: 600 .75rem/1 var(--tekst); letter-spacing: .16em; text-transform: uppercase;
}
.raadsel .zonder { color: rgba(243, 234, 217, .62); font-size: 1rem; }
.raadsel .zonder::before { content: "Zonder verhaal"; color: rgba(243, 234, 217, .45); }
.raadsel .met { font-family: var(--display); font-style: italic; font-size: 1.45rem; line-height: 1.3; color: #fff; padding-top: 16px; border-top: 1px solid rgba(217, 181, 109, .3); }
.raadsel .met::before { content: "Met verhaal"; font-style: normal; color: var(--goud-licht); }
.raadsel-slot { max-width: 40em; margin: clamp(40px, 5vw, 64px) 0 0; font-family: var(--display); font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); line-height: 1.3; color: var(--op-donker); }

/* ---------- zes stappen ---------- */
.hww-stappen { padding: clamp(80px, 10vw, 140px) var(--rand); }
.hww-lijst { list-style: none; margin: 0; padding: 0; }
.hww-stap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; padding: clamp(36px, 4vw, 56px) 0; border-top: 1px solid var(--lijn); }
.hww-stap:nth-child(even) .hww-beeld { order: 2; }
.hww-beeld { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--blos); display: flex; align-items: flex-end; justify-content: center; }
.hww-beeld > img { width: 100%; height: 100%; object-fit: cover; }
.hww-beeld-render { background: var(--wijn); }
.hww-beeld-spread { background: var(--salie); align-items: center; padding: clamp(16px, 3vw, 40px); }
.hww-beeld-spread > img { height: auto; object-fit: contain; box-shadow: 0 24px 40px -24px rgba(42, 30, 22, .55); }
.hww-stap:nth-child(3) .hww-beeld { background: var(--boter); }
.hww-nr { display: flex; align-items: baseline; gap: 16px; margin: 0 0 14px; font: 600 .875rem/1 var(--tekst); letter-spacing: .14em; text-transform: uppercase; color: var(--goud-tekst); }
.hww-nr span { font-family: var(--display); font-size: 4.5rem; line-height: .8; letter-spacing: 0; color: var(--roos); font-weight: 500; font-variant-numeric: lining-nums; }
.hww-tekst h3 { font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 1.5rem + 1.6vw, 3.2rem); line-height: 1.05; margin-bottom: 16px; }
.hww-tekst p:last-child { color: var(--zacht); font-size: 1.1875rem; max-width: 32em; margin: 0; }

/* opmerkingen bij het meelezen */
.hww-meelezen { background: var(--blos); }
.opmerking {
  position: absolute; margin: 0; max-width: 46%; padding: 10px 14px; background: var(--blad); border-left: 3px solid var(--roos);
  font-size: .9375rem; line-height: 1.35; box-shadow: 0 16px 30px -16px rgba(42, 30, 22, .6);
}
.opmerking strong { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--roos); margin-bottom: 2px; }
.opmerking.o1 { left: 6%; top: 10%; }
.opmerking.o2 { right: 6%; bottom: 10%; border-left-color: var(--goud); }
.opmerking.o2 strong { color: var(--goud-tekst); }

/* ---------- hulp bij het vertellen ---------- */
.vragenhulp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); padding: clamp(80px, 10vw, 140px) var(--rand); background: var(--boter); }
.vragenhulp h2 { margin-bottom: 28px; }
.vragenhulp h2 em { display: block; }
.vragenhulp-links > p:not(.bovenregel) { color: var(--zacht); }
.zelf { list-style: none; margin: 28px 0; padding: 0; }
.zelf li { position: relative; padding: 14px 0 14px 38px; border-top: 1px solid rgba(138, 101, 40, .25); color: var(--zacht); }
.zelf li::before { content: ""; position: absolute; left: 6px; top: 22px; width: 14px; height: 8px; border-left: 2px solid var(--roos); border-bottom: 2px solid var(--roos); transform: rotate(-45deg); }
.zelf strong { color: var(--inkt); }
.thema-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.thema-tabs button {
  min-height: 46px; padding: 8px 18px; border: 1.5px solid var(--inkt); border-radius: 2px; background: transparent; color: var(--inkt);
  font: 600 1rem/1.2 var(--tekst); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
}
.thema-tabs button:hover { border-color: var(--roos); color: var(--roos); }
.thema-tabs button[aria-selected="true"] { background: var(--roos); border-color: var(--roos); color: #fff; }
html:not(.js) .thema-tabs { display: none; }
.thema { background: var(--blad); border: 1px solid var(--lijn); padding: clamp(24px, 3vw, 40px); }
html:not(.js) .thema + .thema { margin-top: 16px; }
.thema h3 { font-family: var(--display); font-weight: 500; font-size: 2rem; margin-bottom: 12px; }
.thema ol { list-style: none; counter-reset: q; margin: 0 0 20px; padding: 0; }
.thema li {
  counter-increment: q; display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--lijn);
  font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); line-height: 1.25;
}
.thema li::before { content: counter(q, decimal-leading-zero); font: 600 .875rem/1 var(--tekst); font-style: normal; color: var(--goud-tekst); }
.tip { margin: 0; padding: 14px 16px; background: var(--blos); font-size: 1rem; color: var(--inkt); }
.tip::before { content: "Tip "; font-weight: 600; color: var(--roos); }

/* ---------- wat heb je nodig ---------- */
.nodig { padding: clamp(80px, 10vw, 140px) var(--rand) clamp(56px, 7vw, 96px); }
.nodig-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 4px double var(--goud); }
.nodig-lijst li { padding: 24px 24px 0 0; color: var(--zacht); font-size: 1.0625rem; }
.nodig-lijst li + li { padding-left: 24px; border-left: 1px solid var(--lijn); }
.nodig-lijst strong { display: block; font-family: var(--display); font-weight: 500; font-variant-numeric: lining-nums; font-size: 1.75rem; line-height: 1.1; color: var(--inkt); margin-bottom: 8px; }

.hww-faq { background: var(--papier); }

/* ---------- breedtes ---------- */
@media (max-width: 900px) {
  .hww-held { grid-template-columns: 1fr; min-height: 0; }
  .hww-held-tekst { padding: 40px var(--rand) 40px; }
  .hww-held-beeld { aspect-ratio: 11 / 8; }
  .raadsels { grid-template-columns: 1fr; max-width: 560px; }
  .hww-stap { grid-template-columns: 1fr; }
  .hww-stap:nth-child(even) .hww-beeld { order: 0; }
  .vragenhulp { grid-template-columns: 1fr; }
  .nodig-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nodig-lijst li:nth-child(3) { padding-left: 0; border-left: 0; }
  .nodig-lijst li { padding-bottom: 20px; }
}
@media (max-width: 600px) {
  .hww-nr span { font-size: 3.4rem; }
  .opmerking { font-size: .8125rem; max-width: 60%; padding: 8px 10px; }
  .nodig-lijst { grid-template-columns: 1fr; }
  .nodig-lijst li, .nodig-lijst li + li { padding: 18px 0; border-left: 0; }
  .nodig-lijst li + li { border-top: 1px solid var(--lijn); }
  .thema li { grid-template-columns: 36px 1fr; }
}