/* Gedeelde opmaak voor de dienstpagina's van karolienwilmots:
   boudoir.html, zwangerschap.html, portret.html, huwelijk.html */

.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 96px); align-items: center; padding-top: clamp(36px, 6vw, 80px); }
.hero figure { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.hero figure img { width: 100%; height: 100%; object-fit: cover; }
.hero h1 { line-height: 1.02; font-size: clamp(40px, 5.2vw, 80px); hyphens: manual; overflow-wrap: break-word; }
.knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } .hero figure { aspect-ratio: 4 / 4.4; order: -1; } }

.review { margin-top: clamp(64px, 9vw, 120px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 4vw, 64px); }
.review blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.25; }
.review cite { display: block; margin-top: 16px; font-style: normal; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.review cite::before { content: "— "; color: var(--gold); }

.blok { margin-top: clamp(72px, 10vw, 140px); }
.blok > h2 { max-width: 22ch; }
.kaarten { list-style: none; margin-top: clamp(28px, 3.4vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(18px, 2vw, 32px); }
.kaarten li { border-top: 1px solid var(--hair); padding-top: 18px; }
.kaarten h3 { font-size: clamp(20px, 1.8vw, 26px); }
.kaarten p { margin-top: 8px; color: var(--ink-soft); font-weight: 300; font-size: 15px; }

.stappen { list-style: none; margin-top: clamp(28px, 3.4vw, 48px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
@media (max-width: 1100px) { .stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .stappen { grid-template-columns: 1fr; } }
.stappen li { border-top: 1px solid var(--hair); padding-top: 18px; }
.stappen .nr { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 3.6vw, 54px); line-height: 1; color: var(--gold); }
.stappen h3 { margin-top: 14px; font-size: clamp(20px, 1.7vw, 24px); }
.stappen p { margin-top: 8px; color: var(--ink-soft); font-weight: 300; font-size: 15px; }

.strook { margin-top: clamp(64px, 9vw, 120px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.strook img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 600px) { .strook { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strook img:nth-child(3) { display: none; } }

.prijsblok { margin-top: clamp(72px, 10vw, 140px); background: #f8f5f0; border: 1px solid var(--hair); padding: clamp(24px, 4vw, 64px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); }
@media (max-width: 860px) { .prijsblok { grid-template-columns: 1fr; } }
.prijsblok h2 { font-size: clamp(30px, 3.4vw, 46px); }
.bedragen { list-style: none; margin-top: 26px; }
.bedragen li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.bedragen li:first-child { border-top: 1px solid var(--hair); }
.bedragen span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.bedragen b { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; white-space: nowrap; }
.bedragen small { font-size: 12px; color: var(--ink-soft); margin-left: 6px; }
.prijsblok .tekst p { color: var(--ink-soft); font-weight: 300; font-size: 16px; }
.prijsblok .tekst p:first-child { color: var(--ink); font-size: 17px; }
.prijsblok .tekst .btn { margin-top: 24px; }
.prijsblok .alles { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }

.vragen { margin-top: clamp(28px, 3.4vw, 44px); max-width: 860px; border-top: 1px solid var(--hair); }
.vragen details { border-bottom: 1px solid var(--hair); }
.vragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 22px 0; font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.25; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 22px; color: var(--gold); transition: transform 240ms var(--ease-out); flex: none; }
.vragen details[open] summary::after { transform: rotate(45deg); }
.vragen .antwoord { padding: 0 0 26px; color: var(--ink-soft); font-weight: 300; max-width: 68ch; }
.vragen a, .meer-vragen a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.meer-vragen { margin-top: 22px; font-size: 14px; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .vragen summary:hover { color: var(--gold); } }

.close-cta .knoppen { justify-content: center; margin-top: 0; }