/*
 * Patty Bakker — Gastgezin worden
 * Laad dit bestand na pb-common.css.
 *
 * OPNIEUW GESCHREVEN. De pagina is in Bricks herbouwd met een nieuw
 * klassenschema (`pb-gz-…`), maar de bijbehorende opmaak bestond nergens meer:
 * niet in dit thema, niet in een Bricks-inline-blok en niet in de
 * pagina-instellingen. Van de 33 klassen op de pagina dekte dit bestand er 1.
 *
 * De oude inhoud (.people-grid, .person-card, .step-card, .step-list,
 * .photo-strip) is verwijderd. Dat kon veilig: die klassen komen op deze
 * pagina niet meer voor, en dit bestand wordt uitsluitend geladen op
 * /gastgezin-worden/ — ze waren dus aantoonbaar inert. Een kopie staat als
 * pb-gastgezinnen.css.bak naast dit bestand.
 *
 * De opmaak volgt dezelfde taal als de rest van de site: --pb-edge als
 * zijmarge, een binnenmaat van 1140px, Fraunces-koppen met negatieve
 * letterafstand, accentkleurige bovenkopjes, en secties die wisselen tussen
 * --paper en #f6eee7.
 *
 * LET OP — de foto's. .pb-gz-hero-photo en .pb-gz-photo zijn lege divs; in het
 * oorspronkelijke ontwerp zat de foto als background-image in de CSS. Die
 * paden staan hier bewust niet hardgecodeerd: stel de achtergrond per div in
 * Bricks in (Stijl → Achtergrond → Afbeelding). Hieronder krijgen ze alleen
 * hun verhouding, uitsnede en ronding, plus een zachte vulkleur zodat een nog
 * niet ingestelde foto niet naar hoogte 0 inklapt.
 */

/* ==========================================================================
   Secties en koppen
   ========================================================================== */

.pb-main .pb-gz-hero,
.pb-main .pb-gz-section{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:var(--pb-edge);
  padding-right:var(--pb-edge);
  color:var(--brown, #75543f);
}

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

.pb-main .pb-gz-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 zonder extra randen. */
.pb-main .pb-gz-section.alt{background:#f6eee7}

.pb-main .pb-gz-eyebrow{
  display:block;
  margin:0 0 15px;
  color:var(--accent, #cf7b53);
  font-family:Manrope, system-ui, sans-serif;
  font-size:12px;
  font-weight:900;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.pb-main .pb-gz-hero h1,
.pb-main .pb-gz-section h2{
  margin:0;
  color:var(--brown, #75543f);
  font-family:Fraunces, Georgia, serif;
  font-weight:700;
  letter-spacing:-.035em;
}
.pb-main .pb-gz-hero h1{line-height:.99;max-width:620px}
.pb-main .pb-gz-section h2{font-size:clamp(30px, 3.6vw, 44px);line-height:1.05}

/* ==========================================================================
   Hero
   ========================================================================== */

.pb-main .pb-gz-hero{
  display:grid;
  grid-template-columns:minmax(320px, 1fr) minmax(380px, .95fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}

.pb-main .pb-gz-hero-copy{display:block;min-width:0}

.pb-main .pb-gz-lead{
  max-width:560px;
  margin:20px 0 0;
  color:var(--muted, #88786e);
  font-size:16px;
  line-height:1.75;
}

.pb-main .pb-gz-hero-photo{
  /* Foto instellen in Bricks; hier alleen vorm en uitsnede. */
  aspect-ratio:4 / 3;
  border-radius:16px;
  background-color:#ece0d6;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:var(--shadow2);
}

/* ---- De drie foto's ----------------------------------------------------
   .family-one en .family-two zijn de klassen die in het oorspronkelijke
   ontwerp alleen dienden om een background-image te dragen. Ze staan hier
   bewust zonder regel: stel de foto in Bricks in op de div zelf (Stijl →
   Achtergrond → Afbeelding), dan kan Patty later wisselen zonder CSS.

   Wil je het toch hier vastleggen, dan is dit de plek — haal het commentaar
   weg en vul je eigen bestandsnamen in:

   .pb-main .pb-gz-hero-photo{
     background-image:url("/wp-content/uploads/2026/01/gastgezin-hero.jpg");
   }
   .pb-main .pb-gz-photo.family-one{
     background-image:url("/wp-content/uploads/2026/01/familie-een.jpg");
   }
   .pb-main .pb-gz-photo.family-two{
     background-image:url("/wp-content/uploads/2026/01/familie-twee.jpg");
   }

   Gebruik root-relatieve paden (beginnend met /wp-content/), geen volledige
   URL's met de proto-domeinnaam erin — die breken bij livegang.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Knoppen
   ========================================================================== */

.pb-main .pb-gz-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

.pb-main .pb-gz-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* 46px is de ondergrens waarbij mistikken op een telefoon zeldzaam wordt. */
  min-height:46px;
  padding:0 20px;
  border-radius:var(--btn-radius, 10px);
  font-family:Manrope, system-ui, sans-serif;
  font-size:13.5px;
  font-weight:850;
  line-height:1;
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.pb-main .pb-gz-btn.primary{
  background:var(--accent, #cf7b53);
  color:#fff;
  border:0;
  box-shadow:0 8px 16px rgba(111, 72, 49, .18);
}
/* Tweede knop rustiger; anders vragen ze allebei even hard om aandacht. */
.pb-main .pb-gz-btn.ghost{
  background:transparent;
  color:var(--brown, #75543f);
  border:1px solid var(--line, #dfcfc1);
}
.pb-main .pb-gz-btn.ghost:hover{border-color:var(--accent, #cf7b53);color:var(--accent, #cf7b53)}
.pb-main .pb-gz-btn:hover{transform:translateY(-1px)}

/* ==========================================================================
   Tekst-met-foto (twee keer op de pagina, één keer omgedraaid)
   ========================================================================== */

.pb-main .pb-gz-split{
  display:grid;
  grid-template-columns:minmax(300px, .95fr) minmax(320px, 1fr);
  gap:clamp(30px, 5vw, 68px);
  align-items:center;
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
}

/* .reverse zet de tekst links en de foto rechts. Met order i.p.v. een tweede
   grid-definitie, zodat de leesvolgorde in de HTML intact blijft — dat is wat
   een schermlezer volgt. */
.pb-main .pb-gz-split.reverse .pb-gz-copy{order:1}
.pb-main .pb-gz-split.reverse .pb-gz-photo{order:2}

.pb-main .pb-gz-photo{
  aspect-ratio:4 / 3;
  border-radius:16px;
  background-color:#ece0d6;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:var(--shadow2);
}

.pb-main .pb-gz-copy{min-width:0}
.pb-main .pb-gz-copy > p{
  max-width:56ch;
  margin:16px 0 0;
  color:var(--muted, #88786e);
  font-size:15.5px;
  line-height:1.75;
}

/* ---- Lijstjes met vinkjes ---- */

.pb-main .pb-gz-checks{display:grid;gap:11px;margin-top:22px}

.pb-main .pb-gz-checks p{
  position:relative;
  margin:0;
  padding-left:30px;
  color:var(--brown, #75543f);
  font-size:14.5px;
  line-height:1.6;
}
/* Vinkje als masker, zodat het de accentkleur volgt en scherp blijft op elk
   schermtype. */
.pb-main .pb-gz-checks p::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:19px;
  height:19px;
  border-radius:999px;
  background:var(--accent, #cf7b53);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat,
              linear-gradient(#000, #000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat,
       linear-gradient(#000, #000);
  mask-composite:exclude;
}

/* ---- "Goed om te weten" ---- */

.pb-main .pb-gz-note{
  margin-top:22px;
  padding:16px 18px;
  border-left:3px solid var(--accent, #cf7b53);
  border-radius:0 12px 12px 0;
  background:rgba(207, 123, 83, .08);
  color:var(--brown, #75543f);
  font-size:14px;
  line-height:1.65;
}
.pb-main .pb-gz-note strong{font-weight:850}

/* ==========================================================================
   Sectiekop met inleiding (ervaringen, zo werkt het)
   ========================================================================== */

.pb-main .pb-gz-head{
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto 32px;
}
.pb-main .pb-gz-head p{
  max-width:620px;
  margin:16px 0 0;
  color:var(--muted, #88786e);
  font-size:15.5px;
  line-height:1.75;
}

/* ==========================================================================
   Ervaringen van gastgezinnen
   ========================================================================== */

.pb-main .pb-gz-experiences{
  display:grid;
  align-items:stretch;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
}

.pb-main .pb-gz-experience{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border:1px solid var(--line, #dfcfc1);
  border-radius:16px;
  background:var(--paper, #fffaf5);
  text-decoration:none;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.pb-main .pb-gz-exp-photo{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
}

.pb-main .pb-gz-exp-copy{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:20px 22px 22px;
}

/* Groot aanhalingsteken als accent; hangt half boven de tekst. */
.pb-main .pb-gz-quote-mark{
  color:var(--accent, #cf7b53);
  font-family:Fraunces, Georgia, serif;
  font-size:44px;
  font-weight:700;
  line-height:.6;
  margin-bottom:10px;
}

.pb-main .pb-gz-exp-copy p{
  margin:0;
  color:var(--muted, #88786e);
  font-size:14px;
  line-height:1.7;
  /* Drie regels: verhalen verschillen sterk in lengte en anders worden de
     kaarten heel ongelijk. */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.pb-main .pb-gz-exp-copy h3{
  margin:14px 0 0;
  color:var(--brown, #75543f);
  font-family:Fraunces, Georgia, serif;
  font-size:20px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
}

.pb-main .pb-gz-link{
  margin-top:auto;
  padding-top:14px;
  color:var(--brown, #75543f);
  font-family:Manrope, system-ui, sans-serif;
  font-size:12.5px;
  font-weight:850;
}

@media (hover:hover){
  .pb-main .pb-gz-experience:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(77, 51, 34, .16);
    border-color:var(--accent, #cf7b53);
  }
  .pb-main .pb-gz-experience:hover .pb-gz-link{color:var(--accent, #cf7b53)}
}

/* ==========================================================================
   Zo werkt het
   ========================================================================== */

.pb-main .pb-gz-steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
}

.pb-main .pb-gz-step{
  display:flex;
  flex-direction:column;
  padding:24px;
  border:1px solid var(--line, #dfcfc1);
  border-radius:16px;
  background:#f6eee7;
}

/* Het oranje bolletje staat in pb-stappen.css. */

.pb-main .pb-gz-step h3{
  margin:22px 0 0;
  color:var(--brown, #75543f);
  font-family:Fraunces, Georgia, serif;
  font-size:21px;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
}

.pb-main .pb-gz-step p{
  margin:10px 0 0;
  color:var(--muted, #88786e);
  font-size:13.5px;
  line-height:1.7;
}

/* ==========================================================================
   Afsluitend blok
   ========================================================================== */

.pb-main .pb-gz-cta{
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(24px, 4vw, 56px);
  align-items:center;
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
  padding:clamp(28px, 4vw, 46px);
  border-radius:16px;
  background:var(--brown, #75543f);
  color:#fff;
}

.pb-main .pb-gz-cta .pb-gz-eyebrow{color:rgba(255, 255, 255, .72)}
.pb-main .pb-gz-cta h2{color:#fff}
.pb-main .pb-gz-cta p{
  max-width:52ch;
  margin:14px 0 0;
  color:rgba(255, 255, 255, .8);
  font-size:15px;
  line-height:1.7;
}
.pb-main .pb-gz-cta .pb-gz-buttons{margin-top:0}
/* Op bruin heeft de spookknop een lichte rand nodig, anders verdwijnt hij. */
.pb-main .pb-gz-cta .pb-gz-btn.ghost{
  color:#fff;
  border-color:rgba(255, 255, 255, .35);
}
.pb-main .pb-gz-cta .pb-gz-btn.ghost:hover{border-color:#fff;color:#fff}

/* ==========================================================================
   Schermbreedtes
   ========================================================================== */

@media (max-width:1024px){
  .pb-main .pb-gz-hero{grid-template-columns:1fr;gap:32px}
  .pb-main .pb-gz-split{grid-template-columns:1fr;gap:28px}
  /* Op één kolom altijd foto boven tekst, ook in het omgedraaide blok. */
  .pb-main .pb-gz-split.reverse .pb-gz-copy{order:2}
  .pb-main .pb-gz-split.reverse .pb-gz-photo{order:1}
  .pb-main .pb-gz-experiences{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pb-main .pb-gz-steps{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pb-main .pb-gz-cta{grid-template-columns:1fr}
}

@media (max-width:767px){
  .pb-main .pb-gz-section h2{font-size:clamp(26px, 7.5vw, 34px)}
  .pb-main .pb-gz-experiences,
  .pb-main .pb-gz-steps{grid-template-columns:1fr}
  .pb-main .pb-gz-exp-photo{height:190px}
  .pb-main .pb-gz-step{padding:20px}
  .pb-main .pb-gz-hero-photo,
  .pb-main .pb-gz-photo{aspect-ratio:16 / 11;border-radius:16px}
  /* Twee knoppen naast elkaar zijn op een telefoon allebei te smal. */
  .pb-main .pb-gz-buttons{flex-direction:column}
  .pb-main .pb-gz-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .pb-main .pb-gz-btn,
  .pb-main .pb-gz-experience{transition:none}
}