/*
 * blogSlider — de rij met de nieuwste berichten.
 *
 * Drie naast elkaar op een breed scherm, twee op tablet en één op mobiel. Het
 * blok met de datum en de titel schuift 60px over de afbeelding heen; daar
 * staat de foto van de schrijver in.
 */

.blogSlider {
  margin-block: 150px;
}

/*
 * Geen row-gap tussen de kop en de regel eronder, en de 30px op de inleiding
 * zelf: op samdesign.nl staat de inleiding 30px onder de kop en de link op de
 * bovenrand van die regel. Met een row-gap zouden ze allebei zakken.
 */
.blogSliderHeader {
  row-gap: 0;
}

/*
 * Deze inleiding heeft géén streepje ervoor — anders dan bij team, expertise en
 * de klantverhalen. Zo staat het op samdesign.nl (gemeten: de tekst begint daar
 * op de rooilijn van de sectie, niet 31px erbinnen).
 */
.blogSliderIntro {
  --introWidth: 683px;

  margin-top: 30px;
  border-left: 0;
  padding-left: 0;
}

/*
 * De 53px naar de kaarten staat hier en niet als margin-bottom op de header: de
 * stempel hangt met zijn onderkant aan de onderrand van die header, en zou met
 * die marge ertussen 53px te laag komen.
 */
.blogCards {
  display: flex;
  margin-top: 53px;
  column-gap: 32px;
  margin-inline: calc(var(--containerPadding) * -1);
  padding-inline: var(--containerPadding);
  /* Dicht op de y-as, anders vangt de rij het scrollen van de pagina op (§7). */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--containerPadding);
  overscroll-behavior-x: contain;
}

/*
 * Geen scrollbalk: dit is een veegvlak, net als de carrousel op samdesign.nl.
 * Verschuiven blijft werken met de muis, met een veeg en — dankzij tabindex en
 * het aria-label op de lijst — met de pijltjestoetsen.
 */
.blogCards {
  scrollbar-width: none;
}

.blogCards::-webkit-scrollbar {
  display: none;
}


.blogCard {
  flex: 0 0 calc((100% - 2 * 32px) / 3);
  scroll-snap-align: start;
}

/* Het kader is de link naar het bericht (zie blogSlider.php), dus display:
   block — een a is van zichzelf inline en zou onder de afbeelding de ruimte van
   de regel houden. */
.blogCardFrame {
  display: block;
  overflow: hidden;
}

/*
 * Een vaste hoogte en geen beeldverhouding: zo staat het op samdesign.nl
 * (height: 523px, onder 768px 390px), dus is de uitsnede op elke breedte anders
 * hoog dan breed. Drie classes in de selector, want de reset heeft
 * img[width][height] { height: auto } staan en dat weegt zwaarder dan één class.
 * Precies daarom stond hier eerder een aspect-ratio — die botste niet met de
 * reset, maar leverde kaarten op die 278px te laag waren.
 */
.blogCard .blogCardFrame .blogCardImage {
  width: 100%;
  height: 523px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s;
}

.blogCard:hover .blogCardImage {
  transform: scale(1.1);
}

.blogCardBody {
  position: relative;
  margin-top: -60px;
  padding: 0 20px 0 25px;
}

/*
 * Een bericht zonder uitgelichte afbeelding krijgt een vlak in de maat van het
 * beeld met het lijnlogo erin (blogSlider.php). Zonder dat vlak was de kaart
 * alleen de datum en de titel, en in het raster van drie op een artikelpagina
 * (§32) staat zo'n kaart naast twee volle — dat leest als kapot en niet als
 * een keuze. Het grijs is dat van het FAQ-vlak (#f3f3f5) en het logo staat er
 * even licht in als de versiering achter een kerncijfer op /over-ons/ (§20).
 *
 * `.blogCardNoImage` hoeft de negatieve marge van het tekstblok nu niet meer
 * terug te draaien: er is weer iets om overheen te schuiven, dus staat de datum
 * op dezelfde plek als op een kaart mét beeld.
 */
.blogCardPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 523px;
  background: #f3f3f5;
}

.blogCardPlaceholderMark {
  width: 96px;
  height: auto;
  opacity: 0.18;
}

.blogCardAuthor {
  width: 81px;
  height: 81px;
  margin-bottom: 15px;
  object-fit: cover;
}

.blogCardDate {
  margin: 0 0 15px;
  font-size: 20px;
  font-weight: 300;
  line-height: 33px;
}

.blogCardTitle {
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -1.3px;
}

/*
 * De titel is altijd onderstreept, alleen is die streep doorzichtig tot je erover
 * gaat. Zo verschuift er niets en loopt de overgang zacht — op samdesign.nl is de
 * streep 2px dik en duurt de overgang 0,2s.
 */
.blogCardTitle a {
  color: var(--colorNavy);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  transition: text-decoration-color 0.2s;
}

.blogCardTitle a:hover {
  text-decoration-color: currentcolor;
}

/*
 * De link naast de kop staat rechts op zijn regel. Zakt hij onder de inleiding
 * — dat gebeurt zodra die twee samen niet meer passen — dan blijft hij daar
 * rechts staan, en onder 768px komt hij in het midden. Zo staat het op
 * samdesign.nl: op 767px staat deze link daar op 322px van links, precies het
 * midden van de sectie.
 */
.blogSliderHeader > .textLink {
  margin-left: auto;
}

@media (max-width: 1024px) {
  .blogCard {
    flex-basis: calc((100% - 45px - 15px) / 2);
  }

  /*
   * Vanaf hier loopt de rij van rand tot rand: op samdesign.nl staat de
   * carrousel onder 1025px op 0 tot de schermbreedte in plaats van binnen de
   * container (gemeten op 1024, 900, 768 en 390px). Boven 1024 staat hij wél
   * binnen de container — daar houdt de rooilijn van de pagina dus zijn 20px.
   *
   * `scroll-padding-inline` gaat mee naar nul, anders legt de browser de
   * snapport op een padding die er niet meer is (§7).
   */
  .blogCards {
    column-gap: 15px;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  /*
   * Vanaf hier kruipt de stempel 173px omhoog: hij hangt niet meer aan de
   * onderrand van de kop maar staat boven de sectie, over wat er boven deze
   * sectie staat heen. Zo staat het op samdesign.nl, waar de negatieve marge op
   * het widget van -157 naar -330 gaat. Gemeten op de homepage én op /over-ons/.
   */
  .blogSliderStamp .stamp {
    bottom: 173px;
  }
}

/*
 * Datum en titel houden op élke breedte hun maat: samdesign.nl zet daar geen
 * mobiele variant op — gemeten op 1440, 1024, 767 en 390px is het overal
 * 20/33 en 26/30. Zet hier dus geen kleinere maat neer.
 */
@media (max-width: 767px) {
  /*
   * De link zakt hier onder de kaarten, met 50px erboven. Daarvoor worden de kop,
   * de inleiding en de link zelf vak in de kolom van de sectie: de header is een
   * div zonder eigen betekenis, dus display: contents kost daar niets. In de HTML
   * staat de link vóór de kaarten, dus één order is genoeg — en margin-inline
   * hierboven zet hem in het midden van die kolom.
   */
  .blogSlider:not(.blogSliderGrid) > .container {
    display: flex;
    flex-direction: column;
  }

  .blogSlider:not(.blogSliderGrid) .blogSliderHeader {
    display: contents;
  }

  .blogSlider:not(.blogSliderGrid) .blogSliderHeader > .textLink {
    order: 1;
    margin-inline: auto;
    margin-top: 50px;
  }

  .blogSlider {
    margin-block: 40px;
  }

  .blogCard {
    flex-basis: 100%;
  }

  .blogCard .blogCardFrame .blogCardImage {
    height: 390px;
  }

  .blogCardPlaceholder {
    height: 390px;
  }

  /*
   * Onder 768px staat er één kaart in beeld met 45px van de vorige en de
   * volgende ernaast. Die 45px is de overstek van de carrousel op samdesign.nl:
   * `--swiper-offset-size` staat daar op het tabletbreekpunt op 45px en wordt
   * op mobiel niet opnieuw gezet, dus erft die waarde door — en
   * `offset_sides: both` zet hem als padding aan beide kanten van het veegvlak
   * (`.elementor-loop-container.offset-both`). De kaart is dus 100% - 2 x 45px
   * breed; tussen twee kaarten zit niets, want
   * `image_spacing_custom_mobile: 0`.
   *
   * Let op als je dit nameet: in de HTML die samdesign.nl uitlevert ontbreekt
   * die padding, want LiteSpeed heeft de regel als ongebruikte CSS gestript.
   * Wat de carrousel bedoelt, staat in de instellingen — zie
   * docs/beslissingen.md.
   *
   * `scroll-padding-inline` gaat mee, anders legt de browser de snapport op de
   * vensterrand in plaats van op die padding en staat de eerste kaart bij het
   * laden al 45px verschoven (§7).
   */
  .blogCards {
    column-gap: 0;
    padding-inline: 45px;
    scroll-padding-inline: 45px;
  }

  .blogSliderStamp {
    display: none;
  }
}

/* ==================================================================
   layout = grid: een raster in plaats van een veegvlak
   ------------------------------------------------------------------
   Op een artikelpagina (§32) staat deze sectie als raster van drie in de
   pagina: drie kolommen met 30px ertussen, twee vanaf 1024px en één onder
   768px. Zo staat hij op samdesign.nl, waar het daar een loop-grid is en onder
   een bericht een loop-carousel.

   De kaart zelf verandert niet mee: dat is op de bestaande site letterlijk
   hetzelfde loop-item-template.
   ================================================================== */

.blogSliderGrid .blogCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;

  /* Geen veegvlak meer: het overstek, het snappen en de overloop eruit. De
     regels hierboven gelden nog, dus zetten we ze hier expliciet terug. */
  margin-inline: 0;
  padding-inline: 0;
  overflow: visible;
  scroll-snap-type: none;
  scroll-padding-inline: 0;
}

.blogSliderGrid .blogCard {
  flex: none;
}

@media (max-width: 1024px) {
  .blogSliderGrid .blogCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .blogSliderGrid .blogCards {
    grid-template-columns: minmax(0, 1fr);
  }
}