/* ==========================================================================
   Patty Bakker — indeling van een detailpagina
   ==========================================================================
   Brede banner bovenaan, daaronder de tekst links en een meelopende kaart
   rechts in een verhouding van 2:1.

   Gebruikt op de event-detailpagina en op een nieuwsbericht. De klassen
   houden hun pb-ev-voorvoegsel: ze zijn daar ontstaan en de shortcodes van
   beide pagina's zetten ze allebei neer. Hernoemen zou alleen betekenen dat
   ik twee sjablonen opnieuw moet laten plakken zonder dat er iets verandert.
   ========================================================================== */

/* ==========================================================================
   Intro onder de titel — [pb_event_intro]
   --------------------------------------------------------------------------
   De hero-alinea komt nu uit het ACF-veld `omschrijving`. Dat is een wysiwyg,
   dus er kunnen meer alinea's in staan; ze krijgen dezelfde maat als de vaste
   alinea die er eerst stond.
   ========================================================================== */

.pb-main .pb-ev-top-copy .pb-ev-intro{max-width:62ch}

/* ==========================================================================
   Brede banner + tweekoloms kop — [pb_event_banner] / .pb-ev-top
   --------------------------------------------------------------------------
   Opzet naar het voorbeeld van een ticketpagina: een brede foto over de volle
   contentbreedte, en daaronder links het verhaal en rechts een kaart met de
   praktische gegevens en de aanmeldknop. Die kaart blijft meelopen tijdens
   het scrollen, zodat "Meld je aan" altijd binnen bereik is.

   De verhouding is 2:1 — genoeg leesbreedte links, en rechts precies genoeg
   voor "Woensdag 16 september 2026" op één regel.
   ========================================================================== */

.pb-main .pb-ev-banner{
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
  border-radius:var(--img-radius-lg, 18px);
  overflow:hidden;
  box-shadow:var(--shadow2);
}

.pb-main .pb-ev-banner-img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:27 / 10;
  object-fit:cover;
}

.pb-main .pb-ev-top{
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
  gap:clamp(24px, 3.5vw, 44px);
  align-items:start;
}

.pb-main .pb-ev-top-copy{min-width:0}

/* De titel stond eerst in .page-hero en leende daar zijn opmaak van. Die
   sectie had ook een gradient en een streep eronder; die horen niet bij een
   tweekoloms kop, dus staat de typografie nu hier. Iets groter dan de oude
   34px omdat er nu een brede banner boven staat die er om vraagt. */

.pb-main .pb-ev-top-copy h1{
  font-family:Fraunces, Georgia, serif;
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--brown);
  margin:6px 0 12px;
}

.pb-main .pb-ev-top-copy .pb-ev-intro p{
  font-size:17px;
  line-height:1.6;
  color:var(--muted);
}

/* Ruimte tussen de introzin en het verhaal eronder. */

.pb-main .pb-ev-top-copy .pb-ev-tekst{margin-top:18px}

/* De rechterkolom is de sticky kaart. 96px laat de vaste site-header vrij. */

.pb-main .pb-ev-top-zij{
  min-width:0;
  position:sticky;
  top:96px;
}

/* In deze kolom staat het infopaneel niet meer gecentreerd op 1140px maar
   vult het gewoon de kolom. */

.pb-main .pb-ev-top-zij .pb-ev-info{
  width:100%;
  max-width:none;
  margin:0;
}

/* Wanneer/waar/wat onder elkaar in plaats van naast elkaar: in een smalle
   kolom is een raster van 180px-kolommen alsnog één kolom, maar dan met te
   veel ruimte ertussen. */

.pb-main .pb-ev-top-zij .pb-ev-feiten{
  grid-template-columns:minmax(0, 1fr);
  gap:14px;
}

@media (max-width:900px){
  .pb-main .pb-ev-top{grid-template-columns:minmax(0, 1fr)}
  .pb-main .pb-ev-top-zij{position:static;top:auto}
  .pb-main .pb-ev-top-zij .pb-ev-feiten{
    grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap:18px 28px;
  }
  .pb-main .pb-ev-banner-img{aspect-ratio:16 / 9}
}

@media (prefers-reduced-motion:reduce){
  .pb-main .pb-ev-top-zij{position:static}
}

@media (max-width:767px){
  /* De banner zit in een .section.flush, en die haalt op mobiel alle
     zijpadding weg: de foto liep van rand tot rand terwijl de tekst eronder
     18px inspringt. Dat leest als een fout, niet als een keuze.

     .flush is er voor stroken die juist wél moeten doorlopen (de fotostrook,
     de updates-rij), dus die klasse laten we staan; de banner haalt zijn
     marge hier zelf op. 36px = tweemaal de 18px die .section aanhoudt. */
  .pb-main .pb-ev-banner{
    width:calc(100% - 36px);
    margin-inline:auto;
  }
}