/* ==========================================================================
   pb-werkwijze.css
   Patty Bakker — ALLEEN pagina-specifieke CSS voor "Werkwijze" (pupflow v12).
   Breedte/boxing van pb-common (.section, .section-head, .h2, .label, .more,
   .cta) wordt hergebruikt; hier staat alleen wat uniek is voor deze pagina:
   de flow-hero, het stappenplan, de nestjes-preview, de afspraken-tabel, de
   split-story, de FAQ en het "Persoonlijk contact"-paneel.
   DESKTOP-FIRST: desktop = default (geen media query); tablet (768–1024) en
   mobiel (≤767) staan onderaan in de media queries.
   Alle selectors zijn onder .pb-main gescope. 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 opeenvolgende flow-secties */
.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-secties: volle-breedte warme tint via box-shadow/clip-path */
.pb-main .pb-nest-preview.alt-section,
.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-bottom:16px;
}

/* ---------- Section-head binnen de flow-secties (gecentreerd, 1180) --------- */
.pb-main .pb-flow-section .section-head{
  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-top:10px;
}

/* ---------- 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);
  border-bottom:1px solid var(--line);
  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);
  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:16px;
  box-shadow:none;
  overflow:hidden;
  padding:0;
}
.pb-main .pb-hero-photo{
  height:clamp(300px,32vw,430px);
  border-radius:16px;
  background:linear-gradient(135deg,#cf8d65,#f0c0a0 54%,#6c4d38);
  background-image:url(dog.png);
  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)}

/* ---------- Sectie 2: het proces (stappenplan) ----------------------------- */
.pb-main .pb-process-section{background:var(--paper)}
.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;
}
/* Hoe een stapkaart eruitziet (kader + oranje bolletje + koppen) staat in
   pb-stappen.css; hier alleen nog de kolomindeling hierboven. */

.pb-main .step-link{
  align-self:flex-start;
  margin-top:auto;
  color:var(--brown);
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  border-bottom:2px solid var(--accent);
  padding-bottom:3px;
}

/* ---------- Sectie 3: verwachte-nestjes preview ---------------------------- */
.pb-main .pb-litter-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  width:min(1180px,100%);
  max-width:1180px;
  margin:0 auto;
}
.pb-main .pb-litter-card{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
}
.pb-main .pb-litter-card .nest-parents{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  min-height:170px;
  padding:12px;
  background:var(--paper);
}
.pb-main .pb-litter-card .nest-parents img{
  height:168px;
  width:100%;
  object-fit:cover;
  border-radius:12px;
}
/* hart-badge tussen de twee ouderdieren */
.pb-main .pb-litter-card .nest-parents::after{
  content:"\2661";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  background:var(--paper);
  color:var(--accent);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-size:23px;
  line-height:1;
  z-index:5;
}
.pb-main .pb-litter-card .nest-body{
  padding:18px;
  background:var(--paper);
  border-top:1px solid var(--line);
}
.pb-main .nest-body .label{border-radius:var(--r-pill)}
.pb-main .nest-body h3{
  font-family:Fraunces,serif;
  color:var(--brown);
  font-size:25px;
  line-height:1.05;
  font-weight:700;
  margin:8px 0 6px;
}
.pb-main .nest-body p{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  margin:0 0 10px;
}

/* ---------- Sectie 4: afspraken-tabel (bruin paneel) ----------------------- */
.pb-main .dark-expect-section{background:var(--paper)}
.pb-main .dark-expect-section .section-head .eyebrow{color:var(--brown)}
.pb-main .pb-expect-table{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  width:min(1180px,100%);
  max-width:1180px;
  margin:0 auto;
  background:var(--brown);
  border-radius:16px;
  overflow:hidden;
}
.pb-main .pb-expect-table > div{
  padding:30px;
  color:#fff;
  background:transparent;
  border:0;
}
.pb-main .pb-expect-table > div + div{border-left:1px solid rgba(255,255,255,.16)}
.pb-main .pb-expect-table h3{
  font-family:Fraunces,serif;
  color:#fff;
  font-size:28px;
  line-height:1.05;
  margin:0 0 18px;
}
.pb-main .pb-expect-table p{
  position:relative;
  margin:0;
  padding:8px 0 8px 30px;
  border-top:1px solid var(--line);
  color:#f4e9e1;
  line-height:1.55;
}
.pb-main .pb-expect-table p::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:8px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
}

/* ---------- Sectie 5: split-story (beeld + tekst) -------------------------- */
.pb-main .pb-split-story .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-top:12px;
}
.pb-main .pb-image-panel{
  order:-1;
  margin:0;
  border-radius:16px;
  overflow:hidden;
  background:transparent;
  border:0;
}
.pb-main .pb-image-panel img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:16px;
  display:block;
}

/* ---------- Sectie 6: FAQ (native <details>, compacte variant) ------------- */
.pb-main .pb-faq-block{background:var(--paper)}
/* ---------- Sectie 7: "Persoonlijk contact"-paneel ------------------------- */
.pb-main .pb-final-soft{background:var(--paper)}
/* Alleen de breedte: hoe het paneel eruitziet staat in pb-cta-paneel.css. */
.pb-main .pb-cta-panel{
  width:min(1180px,100%);
  max-width:1180px;
  margin:0 auto;
}

/* light-btn erft de primary-look; alleen de ghost heeft een witte rand nodig */

/* ===================== 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)}
}

/* ===================== 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 .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}

  /* Section-head stapelt (titel + "meer"-link) */
  .pb-main .pb-flow-section .section-head{display:block}
  .pb-main .pb-flow-section .section-head .more{display:inline-flex;margin-top:14px}

  /* Alle grids → 1 kolom */
  .pb-main .pb-step-list{grid-template-columns:1fr}
  .pb-main .pb-litter-grid{grid-template-columns:1fr}
  .pb-main .pb-expect-table{grid-template-columns:1fr}
  .pb-main .pb-expect-table > div + div{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .pb-main .pb-split-story .pb-wide-split{grid-template-columns:1fr;gap:24px}

  /* Groene tag weer klein/rechthoekig (zoals pb-common) */
  .pb-main .nest-body .label{border-radius:10px}

  /* CTA-paneel → 1 kolom */
}

/* ---------- Nestjes-kaarten — IDENTIEK aan pb-verwachte-nesjes.css (uit pb-index.css) ---------- */
.pb-main .nest-card.love .nest-parents{position:relative;gap:8px;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px;background:transparent;margin:0;border-bottom:1px solid var(--line);padding:0}
.pb-main .nest-card.love .nest-parents:after{content:"\2665";position:absolute;left:50%;top:75px;transform:translate(-50%,-50%);background:#fff8f1;color:#8b644b;border:1px solid #d6c1b1;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:17px;box-shadow:var(--shadow2);z-index:2}
.pb-main .nest-card.love{overflow-x:hidden;overflow-y:hidden;background:#fff8f1;border:1px solid var(--line);box-shadow:var(--shadow2);padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px}
.pb-main .treatment-card{background:#fff8f1;border:1px solid var(--line);box-shadow:var(--shadow2);border-radius:var(--r);overflow-x:hidden;overflow-y:hidden;position:relative;display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding-top:13px;padding-right:12px;padding-bottom:13px;padding-left:12px;cursor:pointer}
.pb-main .treatment-card img{height:135px;width:100%;object-fit:cover}
.pb-main .treatment-body{padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px}
.pb-main .treatment-body p{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:0;margin-right:0;margin-bottom:10px;margin-left:0}
.pb-main .nest-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow2);border-radius:var(--r-lg);overflow-x:hidden;overflow-y:hidden;margin-bottom:12px;transition:transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease}
.pb-main .nest-parents{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pb-main .nest-card{background:#fff8f1;border:1px solid var(--line);box-shadow:var(--shadow2);border-radius:var(--r);overflow-x:hidden;overflow-y:hidden;padding:0;margin-top:0;margin-right:18px;margin-bottom:14px;margin-left:18px}
.pb-main .nest-card .nest-parents{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:transparent;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px;position:relative}
.pb-main .nest-card .nest-parents:after{content:"\2665";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;display:grid;place-items:center;background:#fff8f1;color:var(--accent);border:1px solid var(--line);border-radius:50%;box-shadow:var(--shadow2);z-index:2}
.pb-main .nest-card .nest-parents img{height:200px;width:100%;object-fit:cover;border-radius:var(--r)}
.pb-main .nest-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px}
.pb-main .nest-grid .nest-card{display:block;margin-bottom:0}
/* De ouderlinkjes staan sinds de samenvoeging in pb-nest-kaart.css. */
.pb-main .nest-grid .nest-card .parent-link{cursor:default}
.pb-main .nest-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(77, 51, 34, .16)}
.pb-main .nest-grid .nest-card .treatment-body h3{font-family:Fraunces, serif;color:var(--brown);font-size:21px;line-height:1.15;font-weight:600}
.pb-main .nest-grid .nest-card h3{font-family:Fraunces, serif;color:var(--brown);font-size:21px;line-height:1.15;font-weight:600}

/* ==========================================================================
   MOBIEL — herstelblok
   --------------------------------------------------------------------------
   Waarom dit blok onderaan staat en niet in de @media hierboven:
   na die media-query volgen nog losse regels (de nestjes-kaarten, rond regel
   486 en verder). Die staan later in het bestand en winnen dus van de
   media-query, hoe specifiek die ook is. `.nest-grid` bleef daardoor op
   mobiel twee kolommen houden. Alles wat mobiel echt moet gelden, hoort
   daarom ná die regels te staan.

   Wat er mis was op 375px breed:
   1. De secties hadden 32px links en rechts. Op een telefoon houd je dan nog
      311px inhoud over — de rest van de site gebruikt 18px.
   2. De nestjes stonden in twee kolommen van 164px, met foto's van 200px hoog
      in kaarten die maar 164px breed zijn.
   3. Elke processtap had min-height:235px plus 22px padding, waardoor het
      stappenplan alleen al 1800px lang werd.
   ========================================================================== */

@media (max-width:767px){
  /* 1. Zelfde zijmarge als de rest van de site */
  .pb-main .section.pb-flow-section{padding:44px 18px}
  .pb-main .pb-flow-hero{padding:44px 18px}

  /* 2. Koppen een slag kleiner — 42px over 311px las als één woord per regel */
  .pb-main .pb-flow-hero h1{line-height:1.06}
  .pb-main .pb-flow-section .h2{font-size:clamp(23px,6.8vw,27px);line-height:1.12}
  .pb-main .pb-flow-section .section-head{margin-bottom:20px}
  .pb-main .pb-flow-section .section-head p{font-size:15px;line-height:1.6;margin-top:8px}

  /* 3. Stappenplan compacter: de vaste hoogte was voor drie kolommen naast
        elkaar bedoeld, niet voor vijf kaarten onder elkaar */
  .pb-main .pb-step-list{grid-template-columns:1fr;gap:10px}

  .pb-main .pb-step-list span{width:30px;height:30px;font-size:12px;margin-bottom:10px}
  .pb-main .pb-step-list h3{font-size:21px;line-height:1.1;margin-bottom:7px}
  .pb-main .pb-step-list p{font-size:14px;line-height:1.55}
  .pb-main .step-link{margin-top:14px}

  /* 4. Nestjes onder elkaar in plaats van twee smalle kolommen */
  .pb-main .nest-grid{grid-template-columns:1fr;gap:12px}
  .pb-main .nest-card{margin-left:0;margin-right:0}
  .pb-main .nest-card .nest-parents img{height:150px}
  .pb-main .nest-grid .nest-card h3,
  .pb-main .nest-grid .nest-card .treatment-body h3{font-size:19px}

  /* 5. Overige rasters die nog op de bureaubladindeling stonden */
}