/* ==========================================================================
   pb-over-ons.css
   Patty Bakker — ALLEEN pagina-specifieke CSS voor "Over ons" (pupflow v12).
   Hergebruikt de pupflow-componenttaal (flow-hero, knoppen, split, story-card,
   checklist, stappen, cta-paneel) net als pb-werkwijze.css / pb-dekbegeleiding.css
   en leunt op pb-common voor de basis: :root-tokens (--paper/--brown/--accent/
   --muted/--line/--cream2/--pb-edge/--r-md), .section, .section-head, .h2 en de
   1240px-boxing. Die worden hier NIET opnieuw gedefinieerd.
   Zelfstandig te laden: pagina heeft alleen pb-common.css + dit bestand nodig.
   DESKTOP-FIRST: desktop = default (geen media query); tablet (768–1024) en
   mobiel (≤767) staan onderaan.
   Alle selectors zijn onder .pb-main gescoped. Laad NA pb-common.css.
   Header/footer worden hier NIET gestyled.
   ========================================================================== */

/* ---------- Secties: full-bleed met pb-edge gutter (pb-common boxing uit) --- */
.pb-main .pb-flow-hero,
.pb-main .section.pb-flow-section{
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:var(--pb-edge);
  padding-right:var(--pb-edge);
}
.pb-main .section.pb-flow-section{
  position:relative;
  padding-top:74px;
  padding-bottom:74px;
  border:0;
  box-shadow:none;
  background:var(--paper);
}
/* 1px scheidingslijn tussen twee opeenvolgende flow-secties (niet ná de hero) */
.pb-main .pb-flow-section + .pb-flow-section::before{
  content:"";
  position:absolute;
  top:0;
  left:var(--pb-edge);
  right:var(--pb-edge);
  height:1px;
  background:rgba(108,77,56,.16);
}
/* alt-sectie: volle-breedte warme tint via box-shadow/clip-path */
.pb-main .pb-split-story.alt-section{
  background:#f7f0e9;
  box-shadow:0 0 0 100vmax #f7f0e9;
  clip-path:inset(0 -100vmax);
}

/* ---------- Eyebrow (pagina-eigen look: uppercase, ruim gespatieerd) -------- */
.pb-main .eyebrow,
.pb-main .hero-eyebrow{
  display:block;
  color:var(--accent);
  font-family:Manrope,system-ui,sans-serif;
  font-size:11px;
  font-weight:900;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 16px;
}

/* ---------- Section-head binnen de flow-secties (gecentreerd, 1180) --------- */
.pb-main .pb-flow-section .section-head{
  display:block;
  width:min(1180px,100%);
  max-width:1180px;
  margin:0 auto 28px;
}
.pb-main .pb-flow-section .section-head p{
  color:var(--muted);
  font-size:15.5px;
  line-height:1.7;
  max-width:720px;
  margin:10px 0 0;
}

/* ---------- Hero ----------------------------------------------------------- */
.pb-main .pb-flow-hero{
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:42px;
  align-items:center;
  padding-top:70px;
  padding-bottom:70px;
  background:var(--paper);
  position:relative;
  overflow:hidden;
}
.pb-main .pb-flow-hero-copy{max-width:650px}
.pb-main .pb-flow-hero h1{
  font-family:Fraunces,serif;
  color:var(--brown);
  font-size:clamp(42px,5vw,72px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:700;
  margin:0 0 18px;
}
.pb-main .pb-flow-hero .lead{
  color:var(--muted);
  font-size:17px;
  line-height:1.72;
  max-width:610px;
  margin:18px 0 0;
}
.pb-main .pb-flow-hero-card{
  align-self:center;
  background:transparent;
  border:0;
  border-radius:24px;
  box-shadow:none;
  overflow:hidden;
  padding:0;
}
/* Beeldplek: warme gradient als placeholder — stel in Bricks een echte
   achtergrondafbeelding in op deze div (Style ▸ Background ▸ Image). */
.pb-main .pb-hero-photo{
  height:clamp(300px,32vw,430px);
  border-radius:24px;
  background:linear-gradient(135deg,#cf8d65,#f0c0a0 54%,#6c4d38);
  background-size:cover;
  background-position:center 38%;
  overflow:hidden;
  position:relative;
}

/* ---------- Knoppenrij + hero-knoppen (primary / ghost + light-varianten) --- */
.pb-main .pb-button-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:20px;
}
.pb-main .hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border-radius:var(--r-md);
  font-family:Manrope,system-ui,sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  box-shadow:none;
  transition:background .2s ease,border-color .2s ease;
}
.pb-main .hero-btn.primary{
  background:var(--accent);
  color:#fff;
  border:0;
  box-shadow:0 8px 16px rgba(111,72,49,.18);
}
.pb-main .hero-btn.primary:hover{background:#b96a47}
.pb-main .hero-btn.ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--brown);
}
.pb-main .hero-btn.ghost:hover{background:var(--cream)}

/* ---------- Split (beeld + tekst) — generiek: split-story én kwaliteit ------ */
.pb-main .pb-wide-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  width:min(1180px,100%);
  max-width:1180px;
  margin:0 auto;
}
.pb-main .pb-wide-split p{
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  margin:12px 0 0;
}
.pb-main .pb-image-panel{
  margin:0;
  border-radius:24px;
  overflow:hidden;
  background:var(--cream2);
  border:0;
  aspect-ratio:4/3;
}
.pb-main .pb-image-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:24px;
  display:block;
}

/* ---------- Story-card ("Gezondheid voorop" + checklist) ------------------- */
.pb-main .pb-story-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:26px;
  color:var(--brown);
}
.pb-main .pb-story-card span{
  display:inline-flex;
  margin-bottom:14px;
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.pb-main .pb-story-card h3{
  font-family:Fraunces,serif;
  color:var(--brown);
  font-size:32px;
  line-height:1.05;
  margin:0 0 12px;
}

/* ---------- Checklist met vinkjes ------------------------------------------ */
.pb-main .pb-info-list.clean{
  display:grid;
  gap:12px;
  margin-top:22px;
}
.pb-main .pb-info-list.clean p{
  position:relative;
  margin:0;
  padding:0 0 0 34px;
  color:var(--brown);
  font-weight:700;
  line-height:1.62;
}
.pb-main .pb-info-list.clean p::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:.1em;
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:900;
}

/* ---------- Stappen ("Een gezonde en liefdevolle start") ------------------- */
.pb-main .pb-step-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  width:min(1180px,100%);
  max-width:1180px;
  margin:0 auto;
}
.pb-main .pb-step-list article{
  display:flex;
  flex-direction:column;
  min-height:210px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  position:relative;
}
.pb-main .pb-step-list span{
  width:36px;
  height:36px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:13px;
  margin-bottom:14px;
}
.pb-main .pb-step-list h3{
  font-family:Fraunces,serif;
  color:var(--brown);
  font-size:24px;
  line-height:1.05;
  margin:0 0 9px;
}
.pb-main .pb-step-list p{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.64;
  margin:0;
}

/* ---------- Slot-CTA: "Kennismaken"-paneel (bruin) ------------------------- */
.pb-main .pb-final-soft{background:var(--paper)}
.pb-main .pb-cta-panel{
  display:grid;
  grid-template-columns:1fr auto;
  gap:22px;
  align-items:center;
  width:min(1180px,100%);
  max-width:1180px;
  margin:0 auto;
  background:var(--brown);
  color:#fff;
  border-radius:28px;
  padding:34px 38px;
}
.pb-main .pb-cta-panel .hero-eyebrow.light{color:#f1c7aa;background:transparent}
.pb-main .pb-cta-panel h2{
  font-family:Fraunces,serif;
  color:#fff;
  font-size:clamp(30px,4vw,54px);
  line-height:1;
  letter-spacing:-.035em;
  margin:0 0 12px;
}
.pb-main .pb-cta-panel p{
  color:#f4e9e1;
  font-size:15px;
  line-height:1.7;
  max-width:760px;
  margin:0;
}
/* light-btn erft de primary-look (accent); alleen de ghost krijgt witte rand */
.pb-main .pb-cta-panel .hero-btn.light-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.36);
  color:#fff;
}
.pb-main .pb-cta-panel .hero-btn.light-ghost:hover{background:rgba(255,255,255,.12)}

/* ===================== TABLET (768–1024px) ===================== */
@media (min-width:768px) and (max-width:1024px){
  .pb-main .pb-flow-hero{padding-top:56px;padding-bottom:52px}
  .pb-main .pb-flow-hero .lead{font-size:clamp(16px,1.25vw,18px)}
  .pb-main .pb-step-list{grid-template-columns:repeat(2,1fr)}
}

/* ===================== MOBIEL (≤767px) ===================== */
@media (max-width:767px){
  .pb-main .section.pb-flow-section{padding-top:52px;padding-bottom:52px}

  /* Hero → 1 kolom */
  .pb-main .pb-flow-hero{grid-template-columns:1fr;padding-top:56px;padding-bottom:52px}
  .pb-main .pb-flow-hero h1{font-size:42px}
  .pb-main .pb-flow-hero .lead{font-size:clamp(16px,1.25vw,18px)}

  /* Knoppen → volle breedte */
  .pb-main .pb-button-row{width:100%}
  .pb-main .hero-btn{width:100%;min-height:46px;font-size:13px}

  /* Split → 1 kolom (beeld boven tekst / kaart boven beeld, DOM-volgorde) */
  .pb-main .pb-wide-split{grid-template-columns:1fr}

  /* Stappen → 1 kolom */
  .pb-main .pb-step-list{grid-template-columns:1fr}
  .pb-main .pb-step-list article{min-height:0}

  /* CTA-paneel → 1 kolom; primaire knop wit i.p.v. accent (zoals prototype) */
  .pb-main .pb-cta-panel{grid-template-columns:1fr;padding:28px 22px}
  .pb-main .pb-cta-panel .hero-btn.light-btn{background:#fff;color:var(--brown)}
}