/* ==========================================================================
   pb-smoelenboek.css
   Patty Bakker — ALLEEN pagina-specifieke CSS voor "Smoelenboek".
   Breedte/padding van secties, .page-intro, .section-head, .eyebrow, .h2 en
   .plain-copy komen uit pb-common.css en worden hier NIET herhaald.
   Hier staat alleen wat uniek is: de NL-kaart en de gastgezin-tegels.
   De tegels volgen dezelfde brand-look (paper/cream, --line, --shadow2,
   hover-lift) als de kaarten op index.html.
   DESKTOP-FIRST: desktop = default; tablet/mobiel onderaan in media queries.
   Laad NA pb-common.css. Header/footer worden hier NIET gestyled.
   ========================================================================== */

/* ---------- Kaart "Waar wonen onze honden?" ---------- */
.pb-main .map-card{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:center;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.pb-main .nl-map{aspect-ratio:3/4;background:linear-gradient(160deg,#efe6de,#e0cfc0);border:1px solid var(--line);border-radius:var(--r-md);display:grid;place-items:center;font-family:Fraunces,serif;font-size:44px;font-weight:700;letter-spacing:.05em;color:var(--brown);box-shadow:var(--shadow2)}
.pb-main .map-card .plain-copy{color:var(--muted);font-size:15px;line-height:1.7;margin:0;padding:0}

/* ---------- Gastgezin-tegels ---------- */
.pb-main .dog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pb-main .dog-tile{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow2);overflow:hidden;transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease}
.pb-main .dog-tile:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(77,51,34,.16)}
.pb-main .dog-tile img{width:100%;height:220px;object-fit:cover;display:block}
.pb-main .dog-tile-body{padding:16px 18px 18px}
.pb-main .dog-tile-body h3{font-family:Fraunces,serif;font-weight:700;font-size:21px;line-height:1.15;color:var(--brown);margin:0 0 6px}
.pb-main .dog-tile-body p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 12px}
.pb-main .tile-link{display:inline-block;color:var(--brown);font-size:13px;font-weight:800;border-bottom:2px solid var(--accent);padding-bottom:2px}
.pb-main .dog-tile:hover .tile-link{color:var(--accent)}

/* ---------- Gastgezin-slider (Bricks Nestable Slider met gastgezin-loop) ----------
   Dezelfde kaart-look als de oude grid: de tegels blijven .dog-tile; dit zorgt
   alleen dat de slides even hoog zijn, dezelfde 18px tussenruimte houden en dat
   de pijlen/bolletjes in merk-kleur staan. */
.pb-main .gastgezin-slider .splide__list{align-items:stretch}
.pb-main .gastgezin-slider .splide__slide{height:auto;display:flex}
.pb-main .gastgezin-slider .splide__slide > *{width:100%}
.pb-main .gastgezin-slider .dog-tile{height:100%;margin:0}
.pb-main .gastgezin-slider .splide__arrow{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow2);opacity:1}
.pb-main .gastgezin-slider .splide__arrow svg{fill:var(--brown)}
.pb-main .gastgezin-slider .splide__pagination__page{background:#d8c7b9}
.pb-main .gastgezin-slider .splide__pagination__page.is-active{background:var(--accent)}

/* ===================== TABLET (768–1024px) ===================== */
@media (min-width:768px) and (max-width:1024px){
  .pb-main .dog-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===================== MOBIEL (≤767px) ===================== */
@media (max-width:767px){
  .pb-main .map-card{grid-template-columns:1fr;gap:18px;padding:20px}
  .pb-main .nl-map{aspect-ratio:16/10;max-width:280px}
  .pb-main .dog-grid{grid-template-columns:1fr}
}
.onze-gastgezinnen{
	display: grid!important;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}