/* ==========================================================================
   pb-trimsalon.css
   Trimsalon (.pb-main): foto-strip + behandelingen-CTA + workshops (event-list)
   + updates.

   page-hero / section / cta / .plain-copy / .label / .section-head komen uit
   pb-common.css. Laad pb-common.css eerst.

   HERSCHREVEN — wat er mis was in de vorige versie:
   Het bestand bevatte elke regel TWEE keer (overblijfsel van het samenvoegen
   van het prototype). De tweede set overschreef de eerste, en dat brak echt
   iets: `.event-list` kreeg eerst `grid-template-columns:repeat(3,1fr)` en
   verderop opnieuw `display:grid;gap:9px` zónder kolommen. Daardoor stonden de
   workshops op desktop in één kolom in plaats van drie. Alles staat nu nog
   maar één keer.

   De updates gebruiken nu hetzelfde ontwerp als /doodles/het-ras/ en de
   hond-detailpagina: foto-overlaykaarten met verloop en witte tekst, in plaats
   van de oude lijstweergave met duimnagel links.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Geen streep tussen de secties
   --------------------------------------------------------------------------
   .page-hero sluit standaard af met een randlijn. Op deze site scheiden we
   secties met ruimte en niet met lijnen, dus die gaat eraf. Alleen hier, via
   de extra klasse .trim-hero: op andere pagina's staat die lijn er bewust.
   -------------------------------------------------------------------------- */

.pb-main .page-hero.trim-hero{
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   0) Tekst links, foto rechts
   --------------------------------------------------------------------------
   De pagina had twee foto's als losse strook onder de kop. Dat leest als een
   plaatjesrij tussen twee stukken tekst in, en de tekst en het beeld hebben
   niets met elkaar te maken.

   Nu staan ze naast elkaar: het verhaal links, de foto rechts. Dat is hetzelfde
   patroon als de hero op een hondpagina, waar het ook werkt omdat je de tekst
   leest en de hond erbij ziet.

   Onder de 900px vallen ze onder elkaar, met de foto ONDER de tekst. Dat is met
   opzet: op een telefoon wil je eerst weten waar je bent voordat je een foto
   krijgt die het halve scherm vult.
   -------------------------------------------------------------------------- */

.pb-main .trim-split{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:44px;
  align-items:center;
}

.pb-main .trim-split-beeld img{
  display:block;
  width:100%;
  max-height:420px;
  object-fit:cover;
  border-radius:var(--r-lg, 18px);
}

/* De hero heeft zijn eigen randen; binnenin mag de tekst gewoon ademen. */
.pb-main .page-hero .trim-split{
  padding-top:6px;
  padding-bottom:6px;
}

@media (max-width:900px){
  .pb-main .trim-split{
    grid-template-columns:1fr;
    gap:20px;
  }
  .pb-main .trim-split-beeld{
    order:2;
  }
  .pb-main .trim-split-beeld img{
    max-height:260px;
  }
}

/* --------------------------------------------------------------------------
   1) Foto-strip
   Mobiel een veegbare strook, desktop een net raster. Voorheen bleef het ook
   op brede schermen een strook met min-width:58% per foto, waardoor er een
   horizontale schuifbalk verscheen en de tweede foto half buiten beeld viel.
   -------------------------------------------------------------------------- */

.pb-main .photo-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:0 18px 8px;
  scroll-snap-type:x mandatory;
  /* De systeemschuifbalk was zichtbaar dwars over de foto's heen. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.pb-main .photo-strip::-webkit-scrollbar{display:none}

.pb-main .photo-strip img{
  min-width:58%;
  height:155px;
  object-fit:cover;
  border-radius:var(--r);
  box-shadow:var(--shadow2);
  scroll-snap-align:start;
}

.pb-main .photo-strip img:first-child{margin-left:0}

/* --------------------------------------------------------------------------
   2) Behandelingen-CTA
   Alleen wat lucht; de knop zelf komt uit pb-common.css.
   -------------------------------------------------------------------------- */

.pb-main .section > .plain-copy + .cta{margin-top:14px}

/* --------------------------------------------------------------------------
   3) Workshops (event-list / event-item)
   auto-fit i.p.v. een vast aantal kolommen: past zich aan het werkelijke
   aantal workshops aan, ook als Patty er ooit twee of vijf heeft staan.
   -------------------------------------------------------------------------- */

.pb-main .event-list{
  display:grid;
  gap:14px 20px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.pb-main .event-item{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:11px;
  align-items:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow2);
  padding:9px;
  text-decoration:none;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}

.pb-main .date-box{
  min-height:58px;
  background:var(--brown);
  color:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:var(--r);
  font-weight:850;
  line-height:1;
}

.pb-main .date-box span{display:block;font-size:18px}

.pb-main .date-box small{font-size:10px;letter-spacing:.12em;text-transform:uppercase}

.pb-main .event-copy h3{
  /* Fraunces, gelijk aan de agenda- en workshoppagina en aan de homepage. */
  font-family:Fraunces,Georgia,serif;
  font-size:17px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--brown);
  margin:3px 0 4px;
}

.pb-main .event-copy p{
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
  margin:0;
}

/* Lege alinea's uit de editor lieten gaten in de kaart vallen. */

.pb-main .event-copy p:empty{display:none}

.pb-main .event-list.home-like{display:grid;gap:8px;padding:0 20px}

/* --------------------------------------------------------------------------
   5) Beweging — alleen waar er echt een muis is
   -------------------------------------------------------------------------- */

@media (hover:hover){
  .pb-main .event-item:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(77,51,34,.16);
  }
}

/* --------------------------------------------------------------------------
   6) Schermbreedtes
   -------------------------------------------------------------------------- */

@media (max-width:767px){
  .pb-main .event-list{grid-template-columns:1fr; gap:9px}
}

@media (min-width:1025px){
  .pb-main .photo-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:14px;
    overflow:visible;
  }
  .pb-main .photo-strip img{min-width:0; width:100%; height:340px}
}