/* ---------- Hero ---------- */
.pb-main .pb-nest-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:40px;padding-bottom:36px}
.pb-main .pb-nest-hero-copy{max-width:600px}
.pb-main .pb-nest-title{font-family:Fraunces,serif;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--brown);margin:10px 0 16px}
.pb-main .pb-nest-lead{color:var(--muted);font-size:16px;line-height:1.65;margin:0;max-width:520px}
.pb-main .pb-nest-photo{background:linear-gradient(135deg,#cf8d65,#f0c0a0 54%,#6c4d38);background-image:url(dog.png);background-size:cover;background-position:center;border-radius:var(--r-lg);height:clamp(300px,32vw,420px)}

/* ---------- Knoppenrij + knoppen (primary / ghost + light-varianten) ---------- */
.pb-main .pb-btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.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;transition:background .2s ease,border-color .2s ease}
.pb-main .hero-btn.primary{background:var(--accent);color:#fff;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)}

/* ---------- Intro-tekst onder de section-head ---------- */
.pb-main .pb-nest-intro{color:var(--muted);font-size:15px;line-height:1.7;max-width:720px;margin:0 0 20px}

/* ---------- Nestjes-kaarten — IDENTIEK aan de 'nestjes'-sectie op index.html.
   Verbatim overgenomen uit pb-index.css (in dezelfde vololgorde, zodat de
   cascade exact hetzelfde uitpakt). Markup: .treatment-card.nest-card.love +
   .nest-parents + .treatment-body. ---------- */
.pb-main .parent-link{display:inline-flex;align-items:center;gap:5px;color:var(--brown);font-weight:900;border-bottom:2px solid var(--accent);font-size:12px}
.pb-main .parent-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;margin-right:0;margin-bottom:10px;margin-left:0}
.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-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(77, 51, 34, .16)}

/* ---------- Advies-blok ---------- */
.pb-main .pb-advice{max-width:760px}
.pb-main .pb-advice p{color:var(--muted);font-size:15px;line-height:1.75;margin:12px 0 0}

/* ---------- FAQ (native <details>) ---------- */

/* ---------- CTA-paneel "Persoonlijk contact" ---------- */

/* ===================== MOBIEL (≤767px) ===================== */
@media (max-width:767px){
  .pb-main .pb-nest-hero{grid-template-columns:1fr;gap:22px;padding-top:8px;padding-bottom:22px}
  .pb-main .pb-btn-row{width:100%}
  .pb-main .hero-btn{flex:1 1 100%;width:100%}
  /* nestjes-grid → 1 kolom (zoals index.html) */
  .pb-main .nest-card{border-radius:var(--r)}
}

/* ==========================================================================
   HERSTELBLOK — opbouw gelijk aan de fokkers- en gastgezinpagina
   --------------------------------------------------------------------------
   Wat er mis was:

   1. De vier sectie-omhulsels (.pb-nest-list-section, -advice-section,
      -faq-section, -contact-section) hadden géén enkele regel in dit bestand.
      Ze vielen terug op de generieke .section, dus alle secties zagen er
      hetzelfde uit en de pagina las als één lange lap.

   2. .pb-nest-photo staat hierboven op `background-image:url(dog.png)`. Dat is
      een relatief pad en komt dus uit op /wp-content/themes/bricks-child/
      styles/dog.png — een bestand dat niet bestaat. Overblijfsel uit het
      HTML-prototype; er was alleen het kleurverloop te zien.

   3. .nest-card staat hierboven DRIE keer met tegenstrijdige waarden (ronding
      var(--r-lg), dan var(--r), en drie verschillende marges). De laatste won,
      min of meer per ongeluk.

   Dit blok staat onderaan en wint dus van al het bovenstaande.
   ========================================================================== */

/* ---- 1. Secties ------------------------------------------------------- */

.pb-main .pb-nest-hero,
.pb-main .pb-nest-list-section,
.pb-main .pb-nest-advice-section,
.pb-main .pb-nest-faq-section,
.pb-main .pb-nest-contact-section{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:var(--pb-edge);
  padding-right:var(--pb-edge);
  color:var(--brown);
}

.pb-main .pb-nest-hero{
  background:var(--paper, #fffaf5);
  padding-top:clamp(48px, 6vw, 82px);
  padding-bottom:clamp(56px, 7vw, 92px);
  gap:clamp(32px, 5vw, 72px);
}

.pb-main .pb-nest-list-section,
.pb-main .pb-nest-faq-section{
  background:var(--paper, #fffaf5);
  padding-top:clamp(54px, 7vw, 86px);
  padding-bottom:clamp(58px, 7.5vw, 94px);
}

/* Om en om, zodat de pagina ritme krijgt. */

.pb-main .pb-nest-advice-section,
.pb-main .pb-nest-contact-section{
  background:#f6eee7;
  padding-top:clamp(54px, 7vw, 86px);
  padding-bottom:clamp(58px, 7.5vw, 94px);
}

.pb-main .pb-nest-list-section > .section-head,
.pb-main .pb-nest-faq-section > .section-head,
.pb-main .pb-nest-list-section > div,
.pb-main .pb-nest-faq-section > .faq-list,
.pb-main .pb-advice,
.pb-main .pb-nest-contact-section > .pb-cta-panel{
  width:min(1140px, 100%);
  max-width:1140px;
  margin-left:auto;
  margin-right:auto;
}

/* ---- 2. Koppen op dezelfde maat als fokkers -------------------------- */

.pb-main .pb-nest-title{
  line-height:1;
  letter-spacing:-.035em;
  margin:0;
  max-width:640px;
}

.pb-main .pb-nest-lead{
  max-width:600px;
  margin:18px 0 0;
  font-size:16px;
  line-height:1.75;
}

/* De contactsectie stond hier ook in. Die titel staat op het bruine
   CTA-paneel en moet dus wit zijn - bruin op bruin las je niet. Hij is uit
   deze groep gehaald; zijn opmaak komt uit pb-cta-paneel.css. */
.pb-main .pb-nest-list-section .h2,
.pb-main .pb-nest-advice-section .h2,
.pb-main .pb-nest-faq-section .h2{
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(29px, 3.5vw, 42px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.035em;
  color:var(--brown);
  margin:0;
}

.pb-main .pb-nest-intro{
  max-width:620px;
  margin:16px 0 0;
  font-size:15.5px;
  line-height:1.75;
}

.pb-main .pb-nest-list-section > .section-head,
.pb-main .pb-nest-faq-section > .section-head{margin-bottom:28px}

/* ---- 3. De herofoto -------------------------------------------------- */

.pb-main .pb-nest-photo{
  /* Geen dog.png meer: dat pad bestond niet. Stel de foto in Bricks in op de
     div (Stijl -> Achtergrond -> Afbeelding); hier alleen vorm en uitsnede.
     De zachte vulkleur voorkomt dat het vlak inklapt als er nog geen foto is. */
  background-image:none;
  background-color:#ece0d6;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  aspect-ratio:4 / 3;
  height:auto;
  border-radius:16px;
  box-shadow:var(--shadow2);
}

/* ---- 5. Mobiel ------------------------------------------------------- */

@media (max-width:1024px){
  .pb-main .pb-nest-hero{grid-template-columns:1fr}
}

@media (max-width:767px){

  /* LET OP - hier is het eerder misgegaan. Toen de contactsectie uit deze
     groep werd gehaald (die titel staat op het bruine CTA-paneel en moet wit
     zijn) verdween de laatste selector SAMEN MET het accolade-blok. De drie
     overgebleven koppen kwamen daardoor vast te zitten aan de regel van de
     herofoto hieronder en kregen `aspect-ratio:16/11`: een kop van 354px
     breed werd 243px hoog, met een gat van ruim 200px eronder.

     De les: bij het schrappen van een selector uit een groep hoort het blok
     mee te verhuizen, niet alleen de regel. Een accolade-controle vindt dit
     niet - het aantal { en } bleef netjes gelijk. */
  .pb-main .pb-nest-list-section .h2,
  .pb-main .pb-nest-advice-section .h2,
  .pb-main .pb-nest-faq-section .h2{font-size:clamp(25px, 7.2vw, 33px)}

  .pb-main .pb-nest-photo{aspect-ratio:16 / 11;border-radius:16px}
}