/* News-card layout: Glide.js neemt de horizontale layout over (zie
 * js/news-slider.js). Onze JS wrapt de bestaande `<ul class="news-card-
 * list">` in `.glide > .glide__track`, en voegt `.glide__slides` aan de
 * ul + `.glide__slide` aan elke li toe. Glide stelt zelf flex/transform
 * styling in via glide.core.css; deze CSS reset alleen de defaults die
 * Drupal/views meegeeft en zorgt dat de tup-news-glide wrapper niet
 * door de container-padding heen breekt. */
.news-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Glide zet `.glide__slide { height: 100% }`. Tegen een content-bepaalde
 * track resolvet die 100% naar `auto` (= kaart-inhoudshoogte) én schakelt
 * flex-`stretch` uit, waardoor teasers ongelijk hoog worden en de `mt-auto`
 * CTA's niet uitlijnen — de knoppen vallen dan buiten de gemeten teaser-
 * hoogte en de marge naar de volgende paragraph klopt niet meer. `auto`
 * laat de slides wél stretchen tot gelijke hoogte; de kaart (`h-full`) vult
 * die hoogte en de CTA staat onderaan uitgelijnd. */
.tup-news-featured .glide__slide {
  height: auto;
}

/* Overview-variant (geen slider): teasers in een responsief grid.
 * De `:not(.glide__slides)` voorkomt dat dit de featured-slider raakt —
 * news-slider.js voegt .glide__slides toe waarna Glide z'n flex-layout
 * doet. Voor de overzichtspagina blijft de ul z'n native grid behouden. */
.news-card-list:not(.glide__slides) {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .news-card-list:not(.glide__slides) {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (min-width: 1024px) {
  .news-card-list:not(.glide__slides) {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

/* Dot-indicatoren onder de slider (Figma 463:898). 10×10 dots, actief =
 * wit met 3px zwarte rand, inactief = solid zwart. Glide voegt
 * `.glide__bullet--active` toe aan de actieve. */
.news-card-list__dots {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  margin: 1.25rem 0 0;
  padding: 0;
}
.news-card-list__dot {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 9999px;
  background: #000;
  padding: 0;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.news-card-list__dot.glide__bullet--active {
  background: #fff;
  border: 3px solid #000;
}
/* Op viewports waar alle cards naast elkaar passen (sm+ met perView 2/3)
 * verbergen we de dots — Glide blijft initialiseren maar er valt niets
 * te swipen. */
@media (min-width: 640px) {
  .news-card-list__dots {
    display: none;
  }
}

/* Drupal's field/media render output wraps the <img> in several unclassed
   <div> elements. Force every descendant to fill the square media area, but
   not the wrapper zelf — die moet z'n aspect-ratio (1:1, via Tailwind's
   `aspect-square`) behouden, anders rekt 'ie mee met de kaart-hoogte zodra
   het grid de cards naar gelijke hoogte trekt. */
.tup-news-card__media div,
.tup-news-card__media article,
.tup-news-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.tup-news-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}