/*
 * backstageSlider — een rij hoge sfeerbeelden met een hashtag eronder.
 *
 * De vorm komt van "Backstage bij SAM Online Marketing" (§20): kaartjes van 330
 * breed met 33 ertussen, een uitsnede van 514 hoog die de ónderkant van de foto
 * vasthoudt, en daaronder de hashtag met één regel tekst. De rij loopt door
 * voorbij de rechterrand van de pagina en is te vegen.
 *
 * De uitsnede houdt `object-position: bottom center` aan, net als daar: op een
 * staande foto van mensen aan een tafel is de onderste helft het onderwerp, en
 * een uitsnede vanuit het midden snijdt precies door de gezichten.
 *
 * Geen JavaScript voor het verschuiven — dat is het scrollen van de browser met
 * scroll-snap, zoals bij blogSlider en processSlider. Alleen de stipjes eronder
 * komen uit carousel.js.
 */

.backstageSlider {
  margin-block: var(--sectionSpaceTop, 150px) var(--sectionSpaceBottom, 150px);
}

/*
 * De grijze band loopt over de volle breedte van de pagina. De sectie is zelf al
 * zo breed, dus is een achtergrond genoeg en komt er geen negatieve marge aan te
 * pas. De lucht van de band zit in de padding en niet in de marge, anders staat
 * het grijs om de tekst heen te knijpen.
 */
.backstageSliderBand {
  padding-block: 90px;
  background: #f6f7f8;
}

.backstageSliderHeader {
  margin-bottom: var(--backstageRowGap, 50px);
}

/* ------------------------------------------------------------------
   De rij
   ------------------------------------------------------------------ */

.backstageCards {
  display: flex;
  column-gap: var(--backstageGap, 33px);
  margin: 0;
  margin-inline: calc(var(--containerPadding) * -1);
  padding: 0;
  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;
  /*
   * Zonder deze regel staat de rij bij het laden 20px verschoven: de browser
   * kiest meteen de eerste snappositie en rekent de padding daar niet in mee
   * (§7).
   */
  scroll-padding-inline: var(--containerPadding);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

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

.backstageCard {
  flex: 0 0 var(--backstageCardWidth, 330px);
  scroll-snap-align: start;
}

.backstageCardFigure {
  margin: 0;
}

/*
 * Een vaste hoogte en geen beeldverhouding, net als bij blogSlider: de uitsnede
 * is 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.
 */
.backstageSlider .backstageCardFigure .backstageCardImage {
  display: block;
  width: 100%;
  height: var(--backstageCardHeight, 514px);
  border-radius: 12px;
  object-fit: cover;
  object-position: bottom center;
}

.backstageCardCaption {
  margin-top: 35px;
}

.backstageCardTag {
  margin: 0 0 6px;
  font-size: 33px;
  font-weight: 500;
  line-height: 45px;
  letter-spacing: -0.66px;
}

.backstageCardText {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
}

@media (max-width: 1024px) {
  .backstageSlider {
    margin-block:
      var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 150px))
      var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 150px));
  }

  .backstageSliderBand {
    padding-block: 70px;
  }

  .backstageCardTag {
    font-size: 30px;
    line-height: 36px;
  }
}

@media (max-width: 767px) {
  .backstageSlider {
    margin-block:
      var(--sectionSpaceTopMobile, var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 75px)))
      var(--sectionSpaceBottomMobile, var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 75px)));
  }

  .backstageSliderBand {
    padding-block: 55px;
  }

  .backstageSliderHeader {
    margin-bottom: 35px;
  }

  /*
   * Op een telefoon is een vaste kaartbreedte te breed: 78% van de container
   * laat de volgende kaart net zien, zodat het te zien is dat de rij doorloopt.
   */
  .backstageCard {
    flex-basis: 78%;
  }

  .backstageSlider .backstageCardFigure .backstageCardImage {
    height: 420px;
  }

  .backstageCardCaption {
    margin-top: 25px;
  }

  .backstageCardTag {
    font-size: 26px;
    line-height: 32px;
  }

  .backstageCardText {
    font-size: 16px;
    line-height: 25px;
  }
}