/* ==========================================================================
   Patty Bakker — de updatekaart ("Actueel")
   ==========================================================================
   De rij nieuwsberichten die onderaan half de site staat: homepage,
   event-detail, hondpagina, trimsalon, het ras en de shop.

   Hij stond in ZEVEN bestanden, met twee uiteenlopende varianten:

     homepage         raster 150px 570px, duimnagel van 150x92 naast de tekst
     rest van de site blok van 560x220 met de foto over de volle breedte

   Geen van beide is aangehouden. De maat is nu de nieuwskaart van
   /nieuws-overzicht/ (.pb-nws-card): foto boven, daaronder label, titel en
   tekst. Dat is dezelfde opbouw als de agendategels en de nestkaarten, dus
   de hele site gebruikt nu één kaartvorm.

   De markup verschilt licht - .update-card heeft img + .update-text, de
   nieuwskaart .pb-nws-thumb + .pb-nws-body - maar de opbouw is gelijk, dus
   ze zijn zonder sjabloonwijzigingen op elkaar te leggen.
   ========================================================================== */

/* Zelfde raster als .pb-nws-grid en .pb-ev-lijst. auto-fill zodat twee
   kaarten niet uitrekken over de volle breedte. */
.pb-main .update-row{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap:14px;
  /* Alle kaarten in een rij even hoog. Een kaart met een korte titel was
     anders lager dan zijn buurman en dan loopt de onderrand niet door. */
  align-items:stretch;
}

.pb-main .update-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 8px 22px rgba(77,51,34,.08);
  text-decoration:none;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease;
}

/* De foto zat op 108x84 (duimnagel) of op 560x220 (volle breedte). Nu een
   vast kader van 16:10, net als bij de nieuws- en agendakaarten. */
.pb-main .update-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:0;
  background:var(--cream);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

.pb-main .update-text{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:14px 16px 16px;
}

.pb-main .update-text > .label{
  align-self:flex-start;
  margin-bottom:8px;
}

/* Fraunces, zoals elke andere kaarttitel op de site. Deze rij stond als
   enige in Manrope. */
.pb-main .update-text h3,
.pb-main .update-card h3{
  font-family:Fraunces, Georgia, serif;
  font-size:18px;
  line-height:1.16;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--brown);
  margin:0 0 6px;
}

.pb-main .update-text p,
.pb-main .update-card p{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  margin:0;
}

/* De outline-variant (hondpagina) blijft bestaan als accent, maar volgt nu
   de vorm van de gewone kaart. */
.pb-main .update-card.outline{
  border:2px solid var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent), 0 8px 22px rgba(77,51,34,.08);
}
.pb-main .update-card.outline img{aspect-ratio:16 / 10}

/* Het bruine label op de eerste kaart hield de rij visueel bij elkaar; dat
   accent blijft. */
.pb-main .update-section .update-row .update-card:first-child .label{
  background:var(--brown);
  color:#fff;
  border-color:var(--brown);
}

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

@media (hover:hover){
  .pb-main .update-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(77,51,34,.16);
    border-color:#d9c4b4;
  }
  .pb-main .update-card:hover img{transform:scale(1.05)}
}

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

/* ==========================================================================
   Uitzondering: de Actueel-rij op de homepage, alleen op desktop
   --------------------------------------------------------------------------
   De fotokaart hierboven geldt overal, en op een telefoon ook op de homepage:
   daar leest hij hetzelfde als het nieuwsarchief. Op desktop staat die rij
   op de homepage in een smalle zijkolom (.uitg-main), en daar werkt de
   compacte regel beter: duimnagel van 150x96 links, tekst rechts.

   Dit is de variant die er stond voordat we de kaarten samenvoegden;
   verbatim overgenomen uit pb-index.css.
   ========================================================================== */

@media (min-width:768px){
  .pb-main .uitg-main .update-row{
    grid-template-columns:1fr;
    gap:10px;
  }

  /* De compacte rij op de homepage is geen raster maar een stapel: elke kaart
     staat op een eigen regel, dus `align-items:stretch` op de rij doet hier
     niets. Een kaart met een titel over twee regels werd daardoor een paar
     pixels hoger dan zijn buren en dan loopt de stapel niet strak. De hoogte
     ligt daarom vast: de duimafdruk is 96px plus 8px marge boven en onder. */
  .pb-main .uitg-main .update-card{
    display:grid;
    grid-template-columns:150px 1fr;
    gap:16px;
    align-items:center;
    padding:8px;
    height:114px;
  }
  .pb-main .uitg-main .update-card .update-text{
    overflow:hidden;
  }

  .pb-main .uitg-main .update-card img{
    width:150px;
    height:96px;
    aspect-ratio:auto;
    border-radius:var(--r);
  }

  .pb-main .uitg-main .update-card .update-text{
    min-width:0;
    padding:0;
  }

  .pb-main .uitg-main .update-card h3{font-size:15px}

  .pb-main .uitg-main .update-card.outline{
    border:1px solid var(--accent);
    box-shadow:0 8px 22px rgba(77, 51, 34, .08);
  }
  .pb-main .uitg-main .update-card.outline img{height:100px}
}

/* ==========================================================================
   Mobiel: dezelfde compacte regel als het nieuwsarchief
   --------------------------------------------------------------------------
   Ik had de fotokaart ook op mobiel laten gelden, maar daar is de
   nieuwskaart juist géén fotokaart: .pb-nws-card klapt onder 767px om naar
   een rij met een duimnagel van 108x92 links en de tekst rechts. De
   homepage was daarmee op de telefoon de uitzondering in plaats van de
   uitzondering te zijn opgeheven.

   Deze regels spiegelen exact wat pb-nieuws-kaart.css onder 767px doet.
   ========================================================================== */

@media (max-width:767px){
  .pb-main .update-row{
    grid-template-columns:1fr;
    gap:12px;
  }

  /* De Actueel-rij op de homepage zit in een .section.flush, en die haalt op
     mobiel alle zijpadding weg: de kaarten liepen tot de schermrand terwijl
     de zijkolom ernaast (Aankomende events) op 18px staat.

     Alleen de kaarten krijgen die marge terug. De highlight-strook en de
     categorietabs in dezelfde kolom blijven wel doorlopen: dat zijn
     veegstroken, en daar hoort de volgende kaart juist half in beeld te
     steken. Op desktop klopt het al - daar staat de rij in de kolom van
     .uitg-layout en begint hij op dezelfde x als de rest. */
  .pb-main .section.flush .update-row{
    padding-left:18px;
    padding-right:18px;
  }

  /* Vaste hoogte, om dezelfde reden als op de homepage-desktop: de kaarten
     staan onder elkaar en niet naast elkaar, dus een titel over twee regels
     maakt één kaart hoger dan de rest. 108x92 duimafdruk plus 8px marge
     boven en onder = 108. */
  .pb-main .update-card{
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:8px;
    height:108px;
    border-radius:var(--r);
  }
  .pb-main .update-card .update-text{ overflow:hidden }

  .pb-main .update-card img{
    flex:0 0 108px;
    width:108px;
    height:92px;
    aspect-ratio:auto;
    border-radius:var(--r);
  }

  .pb-main .update-text{
    padding:0;
    min-width:0;
  }
  .pb-main .update-text > .label{margin-bottom:5px}

  .pb-main .update-text h3,
  .pb-main .update-card h3{font-size:16px}

  /* Geen samenvatting in de compacte rij. De kaart is 108px hoog (zie
     hierboven) en daar past label + titel in; een kaart MET samenvatting liep
     over die hoogte heen en werd door de overflow midden in een regel
     afgekapt. Dat zag je op de homepage bij "Newborns Lucy": inhoud 104px in
     een vak van 92px. Titel en categorie zeggen in zo'n rij genoeg; de
     samenvatting staat op het bericht zelf. */
  .pb-main .update-text p,
  .pb-main .update-card p{display:none}
}

/* --------------------------------------------------------------------------
   Gelijke hoogte: het tekstblok rekt mee
   --------------------------------------------------------------------------
   `height:100%` op de kaart maakt de kaders even hoog, maar dan blijft de
   tekst bovenaan hangen en houdt de kortste kaart onderin een gat. Het
   tekstblok neemt daarom de resterende ruimte op.
   -------------------------------------------------------------------------- */

.pb-main .update-card .update-text{
  flex:1 1 auto;
}

/* ==========================================================================
   Tabbladen op de homepage — [pb_nieuws_tabs]
   ==========================================================================
   Deze drie klassen stonden in een inline <style> in het Bricks-code-element.
   Nu dat blok naar het thema is verhuisd (inc/pb-nieuws-tabs.php) horen ze
   hier, bij de kaart waar ze bij horen.
   ========================================================================== */

/* Een verborgen tabblad moet echt weg zijn. .update-row is een grid, en een
   grid-item negeert het hidden-attribuut van HTML zonder deze regel. */
.pb-main .update-row[hidden]{ display:none !important }

/* Plaatshouder voor een bericht zonder foto. Dezelfde verhouding als
   .update-card img hierboven (16:10) — in het oude element stond hier 4:3 met
   width:100%, waardoor het grijze vlak buiten de kaart liep. */
.pb-main .update-card .update-img.is-placeholder{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  background:var(--cream2, #e6d8cd);
}

/* Play-knopje op een video-item. Zat wel in de markup maar had geen opmaak,
   dus het driehoekje stond los in de kaart. */
.pb-main .update-card.media{ position:relative }
.pb-main .update-card.media .media-play{
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:grid;
  place-items:center;
  /* Even hoog als het fotokader, zodat het knopje in het midden van de foto
     staat en niet in het midden van de hele kaart (die is hoger door de tekst). */
  aspect-ratio:16/10;
  pointer-events:none;
}
.pb-main .update-card.media .media-play .icon{
  width:46px;
  height:46px;
  padding:11px;
  box-sizing:border-box;
  border-radius:50%;
  background:rgba(255,250,245,.92);
  color:var(--brown);
  box-shadow:0 6px 18px rgba(38,27,20,.28);
}

.pb-main .update-empty{
  margin:0;
  color:var(--muted);
  font-size:14px;
}