/* Kwistig: /over-ons. Bouwt voort op maken.css, paginas.css en opmaat.css (kopband, om-kaart, om-briefje,
   om-sectiekop, om-raster, voet); hier alleen wat nieuw is. Maten uit de mockup OverOns (1440 breed). */

/* ------------------------------------------------------------------ kop */
.oo-kop { min-height: 460px; }
.oo-kop .kopband-inhoud > p { max-width: 720px; }

/* ------------------------------------------------------------------ algemeen */
.oo { gap: 104px; }
.oo .om-sectiekop h2, .oo-verhaal h2, .oo-slot h2 { font-size: 46px; line-height: 1.02; }

/* links met een messing streep eronder (zoals 'Terug naar start') */
.oo-link { justify-self: start; padding-bottom: 2px; font-weight: 700; text-decoration: none; color: var(--schuim); border-bottom: 2px solid var(--accent-2); }
.oo-link:hover { color: #fff; }
.oo-link-donker { color: var(--inkt); border-bottom-color: var(--accent); }
.oo-link-donker:hover { color: var(--inkt); border-bottom-color: var(--inkt); }

/* ------------------------------------------------------------------ verhaal + briefje */
.oo-verhaal { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.oo-verhaal-tekst { display: grid; gap: 22px; min-width: 0; }
.oo-verhaal-tekst p { font-size: 19px; color: rgba(255, 241, 220, .9); }
.oo-kort { transform: rotate(1deg); }
.oo-kort dl { margin: 0; }
.oo-kort dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 2px dashed rgba(14, 30, 63, .2); }
.oo-kort dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.oo-kort dt { flex: 0 0 auto; font-weight: 700; color: #6b6258; }
.oo-kort dd { min-width: 0; margin: 0; font-weight: 700; text-align: right; }
.oo-kort dd a { color: var(--inkt); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.oo-kort dd a:hover { text-decoration-color: var(--inkt); }

/* ------------------------------------------------------------------ drie dingen (illustraties in css) */
.oo-ding { display: grid; gap: 18px; align-content: start; }
.oo-ding p { color: rgba(255, 241, 220, .85); }
.oo-illu { display: flex; align-items: center; height: 140px; }
.oo-tv { position: relative; width: 150px; height: 96px; border: 7px solid #2b2118; border-radius: 12px; background: linear-gradient(135deg, #FF4B0F, #1263FF); box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
.oo-tv::after { content: ''; position: absolute; left: 50%; bottom: -24px; width: 46px; height: 12px; margin-left: -23px; background: #2b2118; border-radius: 0 0 6px 6px; }
.oo-tel { display: grid; gap: 6px; align-content: center; width: 62px; height: 112px; padding: 10px 6px; border: 6px solid #2b2118; border-radius: 16px; background: #130D09; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
.oo-tel span { height: 14px; border-radius: 5px; background: #FF4B0F; }
.oo-tel span:nth-child(2) { background: #1263FF; }
.oo-tel span:nth-child(3) { background: #E3A63B; }
.oo-q { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; transform: rotate(-6deg);
  font: 800 56px/1 var(--kop); letter-spacing: -0.02em; color: var(--inkt); background: var(--schuim); box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }

/* ------------------------------------------------------------------ waar we op letten */
.oo-punt { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid #3a2f25; }
.oo .oo-punt h3 { font-size: 40px; line-height: 1.02; color: transparent; -webkit-text-stroke: 1.5px var(--accent-2); }
.oo-punt p { color: rgba(255, 241, 220, .9); }
/* zonder text-stroke (oude browsers, geforceerde kleuren) gewoon gevulde letters */
@supports not (-webkit-text-stroke: 1px black) { .oo .oo-punt h3 { color: var(--accent-2); } }
@media (forced-colors: active) { .oo .oo-punt h3 { color: CanvasText; -webkit-text-stroke: 0; } }

/* ------------------------------------------------------------------ wie zit erachter (nog in te vullen) */
.oo-maker { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: center; max-width: 980px; margin-top: 30px; }
.oo-foto { display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 4px solid #3a2f25; background: #1b130d; }
.oo-maker-tekst { display: grid; gap: 14px; min-width: 0; }
.oo-maker-tekst h3 { line-height: 1.05; }
.oo-rol { font-weight: 700; color: var(--accent-2); }
.oo-bio { color: rgba(255, 241, 220, .9); }
.oo-contact { color: rgba(255, 241, 220, .85); }

/* ------------------------------------------------------------------ waar we nu aan werken */
.oo-nu-raster { align-items: start; }
.oo-nu { display: grid; gap: 12px; align-content: start; }
.oo .oo-nu h3 { padding-bottom: 0; border-bottom: 0; line-height: 1.05; }
.oo-nu p { color: #4b4338; }
.oo-nu-1 { transform: rotate(-.8deg); }
.oo-nu-2 { transform: rotate(.6deg); }
.oo-nu-3 { transform: rotate(-.5deg); }
.oo-badge { justify-self: start; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; line-height: 1.4; border: 2px solid var(--inkt); }
.oo-badge-nieuw { color: var(--on); background: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------------ slotband */
.oo-slot { position: relative; overflow: hidden; padding: 56px; border-radius: 28px 12px 28px 12px; color: #130D09; background: linear-gradient(120deg, #FF4B0F, #c23200); }
.oo .oo-slot h2 { max-width: 760px; line-height: 1; }
.oo-slot p { max-width: 620px; margin-top: 14px; font-size: 19px; font-weight: 600; }
.oo-slot-knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.oo-knop-donker, .oo-knop-lijn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 16px; text-decoration: none; font: 800 19px/1.1 var(--tekstletter); }
.oo-knop-donker { padding: 17px 26px; color: var(--schuim); background: #130D09; }
.oo-knop-lijn { padding: 15px 24px; color: #130D09; border: 3px solid #130D09; }
.oo-knop-donker:hover, .oo-knop-lijn:hover { filter: brightness(1.1); }
.oo-knop-lijn:hover { background: rgba(19, 13, 9, .1); }
.oo-slot a:focus-visible { outline: 3px solid #130D09; outline-offset: 3px; }

/* voet: de huidige pagina */
.voet-nav a[aria-current="page"] { color: var(--accent-2); }

/* ------------------------------------------------------------------ kleiner */
@media (max-width: 1180px) {
  .oo-verhaal { gap: 40px; }
}
@media (max-width: 960px) {
  .oo { gap: 80px; }
  .oo-verhaal { grid-template-columns: 1fr; }
  .oo-kort { max-width: 560px; }
  .oo .om-sectiekop h2, .oo-verhaal h2, .oo .oo-slot h2 { font-size: clamp(32px, 6.5vw, 46px); }
  .oo .oo-punt h3 { font-size: clamp(30px, 5.5vw, 40px); }
  .oo-kort, .oo-nu-1, .oo-nu-2, .oo-nu-3 { transform: none; }
}
@media (max-width: 700px) {
  .oo { gap: 64px; }
  .oo-kop .kopband-inhoud > p { font-size: 18px; }
  .oo-verhaal-tekst p, .oo-slot p { font-size: 17px; }
  .oo-illu { height: 120px; }
  .oo-maker { grid-template-columns: 1fr; gap: 20px; }
  .oo-foto { max-width: 200px; }
  .oo-slot { padding: 32px 20px; }
  .oo-slot-knoppen a { flex: 1 1 auto; }
  .oo-knop-donker, .oo-knop-lijn { font-size: 18px; }
}
@media (max-width: 380px) {
  .oo-kort dl > div { flex-direction: column; gap: 2px; }
  .oo-kort dd { text-align: left; }
}