/* ==========================================================================
   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.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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{
  font-family:Manrope,system-ui,sans-serif;
  font-size:16px;
  line-height:1.15;
  font-weight:850;
  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}

/* --------------------------------------------------------------------------
   4) Updates — foto-overlaykaarten
   Identiek aan /doodles/het-ras/ en de hond-detailpagina, zodat de updates op
   de hele site hetzelfde ogen.
   -------------------------------------------------------------------------- */

.pb-main .update-section{padding-top:14px}

.pb-main .update-section .update-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}

.pb-main .update-section .update-card{
  position:relative;
  display:block;
  height:220px;
  margin:0;
  padding:0;
  border:0;
  border-radius:var(--r-lg);
  background:var(--brown);
  box-shadow:var(--shadow2);
  overflow:hidden;
  isolation:isolate;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}

/* De nieuwste update krijgt een accentring, net als op het-ras. */
.pb-main .update-section .update-row .update-card:first-child{
  box-shadow:0 0 0 2px var(--accent), var(--shadow2);
}

.pb-main .update-section .update-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

/* Verloop van doorzichtig naar donker, zodat de witte tekst leesbaar blijft
   ongeacht hoe licht de foto onderin is. */
.pb-main .update-section .update-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(38,27,20,.05) 40%, rgba(38,27,20,.8));
  z-index:1;
}

.pb-main .update-section .update-text{
  position:absolute;
  left:14px;
  right:14px;
  bottom:13px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.pb-main .update-section .update-text .label{
  font-size:10px;
  letter-spacing:.06em;
  padding:4px 9px;
  border-radius:var(--r-pill);
  box-shadow:0 4px 10px rgba(38,27,20,.16);
  background:var(--brown);
  color:#fff;
  border-color:var(--brown);
}
.pb-main .update-section .update-text .label a{color:inherit;text-decoration:none}
.pb-main .update-section .update-row .update-card:first-child .label{
  background:var(--accent);
  border-color:var(--accent);
}

.pb-main .update-section .update-text h3{
  font-family:Fraunces, serif;
  font-size:19px;
  line-height:1.16;
  font-weight:700;
  letter-spacing:-.02em;
  color:#fff;
  margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.3);
}

.pb-main .update-section .update-text p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  font-size:12.5px;
  line-height:1.4;
  color:rgba(255,255,255,.88);
  margin:0;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}

/* De hele kaart is klikbaar; de link ligt boven het verloop en de tekst. */
.pb-main .update-section .update-card .card-link{
  position:absolute;
  inset:0;
  z-index:4;
  font-size:0;
  line-height:0;
}

/* --------------------------------------------------------------------------
   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);
  }
  .pb-main .update-section .update-card:hover img{transform:scale(1.06)}
}

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

@media (max-width:767px){
  .pb-main .update-section .update-row{grid-template-columns:1fr; gap:12px}
  .pb-main .update-section .update-card{height:200px}
  .pb-main .event-list{grid-template-columns:1fr; gap:9px}
}

@media (min-width:1025px){
  /* Geen strook meer maar een raster: geen schuifbalk, niets valt half buiten
     beeld. auto-fit zodat het klopt bij twee én bij vier foto's. */
  .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}
}

@media (prefers-reduced-motion:reduce){
  .pb-main .event-item,
  .pb-main .update-section .update-card,
  .pb-main .update-section .update-card img{transition:none}
}