/* ==========================================================================
   pb-gastgezin-detail.css
   Detailpagina van een gastgezin (/gastgezinnen/<naam>/).

   LET OP - dunne laag, geen losstaand paginabestand. De pagina laadt eerst
   pb-gastgezinnen.css (van /gastgezin-worden/); dit komt daar bovenop.
   Zie functions.php.

   OPZET VAN DE PAGINA
   Het ritme volgt de redactionele opbouw die de rest van de site ook gebruikt:
   een opener, dan om en om beeld en tekst, een rustpunt, en pas daarna de
   feiten en de oproep.

     1. hero      kicker, naam, inleiding en knoppen | foto rechts
     2. verhaal   breed tekstblok met de uitgelichte zin erin
     3. honden    kaarten met kenmerken                (.pb-gz-experience)
     4. slot      oproep om zelf gastgezin te worden   (uit pb-gastgezinnen)

   De inleiding staat in de hero en niet in het verhaal: dat vult de hero, en
   het verhaal begint meteen bij het inhoudelijke deel. De uitgelichte zin
   staat midden in de tekst als adempauze, niet als losse sectie.

   Alleen wat pb-gastgezinnen.css niet kent staat hieronder.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Verhaal - breed tekstblok

   Het verhaal stond eerst in een kolom van 620px naast een foto, en daarvoor
   in een kolom van 720 naast de kop. Allebei lieten ze de rechterhelft leeg.
   Nu een gecentreerd blok van 1040px waarin de tekst de volle breedte pakt.

   Dat is met ongeveer 95 tekens per regel breder dan het boekje voorschrijft
   (60 tot 75). Bewuste keuze: deze alinea's zijn kort, drie tot vier regels,
   dus de terugsprong naar de volgende regel blijft te doen - en het alternatief
   is een halflege sectie, en dat woog zwaarder.
   -------------------------------------------------------------------------- */

/* Zelfde marges als de hero. pb-gastgezinnen.css zet .pb-gz-hero op volle
   breedte met --pb-edge als padding, dus de herotekst begint op 52px (bij
   1280) en de foto eindigt op 1228. Een gecentreerd blok van 1040px begon op
   120 en eindigde op 1160 - 68px verschil aan beide kanten, en dat zie je.

   width:100% met max-width:none laat het blok de volle inhoudsbreedte van de
   sectie pakken; die sectie heeft --pb-edge al als padding, dus links en
   rechts komt alles op dezelfde lijn te staan. */
.pb-main .pb-gz-verhaalblok{
  width:100%;
  max-width:none;
  margin:0;
}

/* De kop erbinnen ook. .pb-gz-head uit pb-gastgezinnen.css staat op
   min(1140px,100%) met margin:0 auto, en begon daardoor 18px verder naar
   binnen dan de tekst eronder. */
.pb-main .pb-gz-verhaalblok > .pb-gz-head{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}

.pb-main .pb-gz-verhaal p{
  margin:0 0 22px;
  color:#67564b;
  /* Een halve punt groter en wat meer regelafstand dan elders: de regels zijn
     hier langer, en dan helpt lucht tussen de regels om de terugsprong naar de
     volgende regel te vinden. */
  font-size:17px;
  line-height:1.9;
}
/* De editor laat regelmatig lege alinea's achter; die trokken gaten. */
.pb-main .pb-gz-verhaal p:empty{display:none}
.pb-main .pb-gz-verhaal p:last-child{margin-bottom:0}
.pb-main .pb-gz-verhaal strong{color:var(--brown)}

/* --------------------------------------------------------------------------
   2) De uitgelichte zin

   Staat midden in de tekst, niet in een eigen sectie. Een uitgelichte zin is
   bedoeld als adempauze binnen het lezen; zet je hem apart, dan onderbreekt
   hij het verhaal in plaats van het te dragen.

   Geen aanhalingstekens en geen streep ervoor: de accentkleur en het formaat
   zetten hem al genoeg apart, en de zin komt uit het verhaal zelf - het is
   geen citaat van iemand anders.
   -------------------------------------------------------------------------- */

.pb-main .pb-gz-verhaal p.pb-gz-citaat{
  margin:34px 0;
  /* Geen max-width: hij stond op 30ch en werd daarmee 647px breed naast een
     tekstkolom van 1040 - dat leest als een inspringing die er niet hoort.
     Nu loopt hij mee met de rest en breekt hij vanzelf op twee regels als de
     zin langer is. */
  color:var(--accent);
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(23px, 2.4vw, 33px);
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.02em;
}

/* --------------------------------------------------------------------------
   3) Hero - knoppen naar de hond(en)

   De hero was alleen een naam en een plaats. Deze knoppen beantwoorden de
   vraag die een bezoeker hier stelt - welke hond woont hier - en je klikt er
   meteen door. Vormgeving komt uit pb-gastgezinnen.css.
   -------------------------------------------------------------------------- */

.pb-main .pb-gz-hero .pb-gz-buttons{margin-top:26px}

/* pb-gastgezinnen.css zet de hero op var(--paper), en dat is #fffaf5 - precies
   de achtergrondkleur van de pagina zelf. Op /gastgezin-worden/ valt dat niet
   op omdat daar een donkere sectie op volgt, maar hier grenst de hero aan een
   sectie van dezelfde kleur en loopt hij er naadloos in over.

   --cream is de warme tint uit de huisstijl; net genoeg verschil om de hero
   als eigen vlak te lezen zonder dat het een blok wordt. */
.pb-main .pb-gz-hero{background:var(--cream, #efe6de)}

/* --------------------------------------------------------------------------
   4) Hondkaarten

   Ze gebruiken .pb-gz-experience, dus de kaartvorm en de link komen al uit
   pb-gastgezinnen.css. De foto, de naam en de kenmerken zijn hier anders.
   -------------------------------------------------------------------------- */

/* Hondenfoto's vierkant.

   .pb-gz-exp-photo staat in pb-gastgezinnen.css op height:220px met
   object-fit:cover - een liggende uitsnede. Op /gastgezin-worden/ klopt dat,
   want daar staan liggende sfeerfoto's in. Hier zijn het staande studiofoto's
   van honden, en dan sneed een strook van 560x220 precies de kop eraf.

   Met aspect-ratio schaalt de hoogte mee met de kaartbreedte, dus het blijft
   vierkant op elk scherm. object-position:center top omdat een hond meestal
   met kop en borst in de bovenhelft van het kader staat; snijd je vanaf het
   midden, dan valt de kop alsnog weg. */
.pb-main .pb-gz-honden .pb-gz-exp-photo{
  height:auto;
  aspect-ratio:1 / 1;
  object-position:center top;
}

.pb-main .pb-gz-honden .pb-gz-exp-copy h3{
  font-family:Fraunces, Georgia, serif;
  font-size:22px;
  line-height:1.15;
  font-weight:700;
  color:var(--brown);
  margin:0 0 12px;
}

/* Een <dl> met per paar een <div>, zodat label en waarde bij elkaar blijven in
   het raster. Zonder die wrapper lopen dt en dd los van elkaar en raken ze uit
   de pas zodra een waarde over twee regels valt. */
.pb-main .pb-gz-kenmerken{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 14px;
  margin:0 0 16px;
  padding:14px 0 0;
  border-top:1px solid var(--line);
}
.pb-main .pb-gz-kenmerken > div{min-width:0}
.pb-main .pb-gz-kenmerken dt{
  margin:0 0 2px;
  color:#987b65;
  font-family:Manrope, system-ui, sans-serif;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pb-main .pb-gz-kenmerken dd{
  margin:0;
  color:var(--brown);
  font-size:14px;
  font-weight:800;
  line-height:1.3;
}

/* margin-top:auto duwt de link naar de onderkant, zodat hij bij kaarten van
   ongelijke hoogte toch op een lijn staat. */
.pb-main .pb-gz-honden .pb-gz-link{margin-top:auto}

/* --------------------------------------------------------------------------
   5) Kaartverdeling

   .pb-gz-experiences staat vast op drie kolommen; op /gastgezin-worden/ staan
   er ook altijd drie ervaringen. Hier is het er meestal een, en die zou dan
   verloren in een derde van de breedte staan.
   -------------------------------------------------------------------------- */

/* Het raster van drie werd bij twee honden twee kolommen van 1fr - twee
   kaarten van bijna 560px breed, met foto's die even groot werden als de
   hero. Een hondkaart hoort overal op de site ongeveer even groot te zijn,
   dus houden we de kolombreedte vast en vullen we niet de hele rij op.
   Eén hond krijgt wel een iets bredere kaart; anders staat er een postzegel
   in een leeg vlak. */
@media (min-width:768px){
  .pb-main .pb-gz-honden{
    /* Zelfde maat als de pupkaarten op /voor-fokkers/ en de producttegels:
       vier kolommen op een breedte van 1140px, dus ruim 270px per kaart. */
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    justify-content:start;
  }
  .pb-main .pb-gz-honden:has(> .pb-gz-experience:only-child){
    grid-template-columns:minmax(0, 340px);
  }
}

/* --------------------------------------------------------------------------
   6) Mobiel
   -------------------------------------------------------------------------- */

@media (max-width:767px){
  /* Twee naast elkaar, net als de pupkaarten op /voor-fokkers/. Eén hond per
     schermbreedte gaf een kaart van bijna 600px hoog. */
  .pb-main .pb-gz-honden{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .pb-main .pb-gz-honden .pb-gz-exp-copy{padding:12px}
  .pb-main .pb-gz-verhaal p{font-size:15.5px;line-height:1.8;margin-bottom:18px}
  .pb-main .pb-gz-honden .pb-gz-exp-copy h3{font-size:20px}
  /* 22ch is op een telefoon breder dan het scherm; daar mag hij gewoon lopen. */
  .pb-main .pb-gz-verhaal p.pb-gz-citaat{max-width:none;margin:26px 0}
}

/* --------------------------------------------------------------------------
   7) Lege secties inklappen

   Het citaat vervalt bij een verhaal van minder dan drie alinea's, en het
   brede beeld bij een gezin zonder liggende galerijfoto - dat zijn er 8 van
   de 33. De shortcode geeft dan een lege string terug, maar de sectie eromheen
   staat in het Bricks-sjabloon en houdt zijn boven- en ondermarge. Dat is een
   gat van ruim 120px zonder aanwijsbare reden.

   :has() kijkt hier naar het lege wrapper-blok dat Bricks om de uitvoer van
   een shortcode zet.
   -------------------------------------------------------------------------- */

.pb-main .pb-gz-section:has(> .brxe-shortcode:empty){display:none}