/*
 * portfolioLatest — "Ons portfolio" met de nieuwste projecten.
 *
 * Twee hoge kaarten die versprongen naast elkaar staan: de eerste 94px hoger
 * dan de tweede. Onder 768px staan ze onder elkaar op een vaste kaartbreedte
 * van 305px, en is de derde kaart wél zichtbaar.
 *
 * Maten 1-op-1 van https://www.samdesign.nl/over-ons/ (R9), gemeten op 1440,
 * 1024, 767 en 390px. Waar hieronder een getal met een decimaal staat, is dat
 * wat de bestaande site berekent — niet een keuze van ons.
 */

.portfolioLatest {
  /*
   * Het roze streepje vóór de projectnaam. Als achtergrond op een
   * pseudo-element: het is decoratie, dus hoort het niet in de markup, en zo
   * kost het geen extra verzoek. Dezelfde SVG staat in pages/portfolio.css voor
   * het filter en het kaartlabel daar; die pagina laadt dit bestand niet.
   *
   * De vulling is #dc0356 — nét een andere roze dan --colorPink (#dc0155) en
   * --colorPinkDeep (#dc0556). Zo staat het in de bron van samdesign.nl.
   */
  --projectMark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.085' height='28.859' viewBox='0 0 29.085 28.859'%3E%3Cpath d='M2.862-8.921l.251-2.438a.951.951,0,0,1,.311-.974L21.01-29.725c.284-.237.608-.208,1.11-.18l.458.06,1.894.157a.956.956,0,0,1,.217,1.6L4.4-8.428a.956.956,0,0,1-1.541-.493' transform='matrix(0.914,-0.407,0.407,0.914,9.556,37.517)' fill='%23dc0356'/%3E%3C/svg%3E");

  margin-block: 150px;
}

/* ------------------------------------------------------------------
   Kop, inleiding en link
   ------------------------------------------------------------------ */

/*
 * 35px onder de kop in plaats van de 20 die .sectionHeader aanhoudt, en de link
 * hangt niet aan de regel van de inleiding maar op een vaste hoogte: 125px
 * onder de bovenkant van de sectie. Op 1440px is dat precies de bovenrand van
 * de inleiding, op 1024px staat hij daar 24px onder — zo staat het op
 * samdesign.nl, waar het een absoluut geplaatst widget is.
 */
.portfolioLatestHeader {
  position: relative;
  row-gap: 35px;
}

.portfolioLatestIntro {
  border-left: 0;
  padding-left: 0;
}

/*
 * Deze link heeft géén streep eronder, anders dan die bij "Tips & trends" en de
 * andere tekstlinks van de site. Gemeten op samdesign.nl: border-bottom 0 en
 * geen text-decoration.
 */
.portfolioLatestLink {
  position: absolute;
  top: 125px;
  right: 0;
  border-bottom: 0;
}

/* ------------------------------------------------------------------
   Het raster
   ------------------------------------------------------------------ */

/*
 * De 57,6px tussen de kaarten is een `column-gap` en geen padding op de kaart
 * met een negatieve marge op het raster ertegenover — zoals samdesign.nl het
 * doet. Die negatieve marge van -28,8px is namelijk groter dan de paginamarge
 * van 20px, dus stak het raster 8,8px buiten het venster zodra de container op
 * de volle vensterbreedte staat: van 1025 tot 1319px en van 768 tot 839px gaf
 * dat een horizontale schuifbalk op élke pagina met dit component. Op
 * samdesign.nl is dat precies zo (`scrollWidth` is daar 1059 op een venster van
 * 1050), maar het is een fout en niet een ontwerp — zie docs/beslissingen.md.
 *
 * De maten blijven op de pixel gelijk: de kaart was 50% van (container + 57,6)
 * mín 57,6 padding, en is nu 50% van de container mín 28,8. Dat is dezelfde
 * uitkomst, en de eerste kaart staat nog steeds op de rooilijn van de kop.
 */
.portfolioLatestGrid {
  display: flex;
  flex-wrap: wrap;
  column-gap: 57.6px;
  margin-top: 35px;
}

.projectCard {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(50% - 28.8px);
  max-width: calc(50% - 28.8px);
}

/*
 * Het verspringen: de eerste kaart staat hoger dan de tweede. De derde en
 * verder zijn hier weg; onder 768px komen ze terug.
 */
.projectCard:nth-child(1) {
  margin-bottom: 94px;
}

.projectCard:nth-child(2) {
  margin-top: 94px;
}

.projectCard:nth-child(n + 3) {
  display: none;
}

.projectCardMedia {
  display: block;
  width: 100%;
  overflow: hidden;
}

/*
 * Een vaste hoogte en geen beeldverhouding: 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.
 */
.projectCard .projectCardMedia .projectCardImage {
  width: 100%;
  height: 747px;
  object-fit: cover;
  object-position: center;
}

.projectCardServices {
  margin: 39.5px 0 7.5px;
  color: var(--colorNavy);
  font-size: 25px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.05em;
}

.projectCardTitle {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 33px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.05em;
}

/*
 * Het streepje is 14px breed en 24 hoog, met de SVG als `cover` — dus
 * uitgesneden en niet volledig in beeld. Zo staat het op samdesign.nl.
 */
.projectCardTitle::before {
  content: "";
  display: block;
  flex: none;
  width: 14px;
  height: 24px;
  margin-right: 7px;
  background: var(--projectMark) no-repeat center / cover;
}

/*
 * De titel is altijd onderstreept, alleen is die streep doorzichtig tot je over
 * de kaart gaat. Zo verschuift er niets en loopt de overgang zacht — dezelfde
 * 2px en 0,2s als bij een blogkaart.
 */
.projectCardTitle a {
  color: var(--colorNavy);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  transition: text-decoration-color 0.2s;
}

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

/* ==================================================================
   Kleiner dan 1440
   ================================================================== */

@media (max-width: 1024px) {
  .portfolioLatest {
    margin-block: 100px;
  }

  .projectCard .projectCardMedia .projectCardImage {
    height: 493px;
  }

  .projectCardServices {
    font-size: 18px;
    line-height: 24px;
  }

  .projectCardTitle {
    font-size: 28px;
    line-height: 1em;
  }
}

/* ==================================================================
   Onder 768px — onder elkaar, op een vaste kaartbreedte
   ================================================================== */

@media (max-width: 767px) {
  .portfolioLatest {
    margin-block: 75px;
  }

  /*
   * Kop, inleiding, kaarten en link staan hier onder elkaar met 25px ertussen,
   * en de link zakt onder de kaarten. Daarvoor worden de drie delen van de
   * header vak in de kolom van de sectie: de header is een div zonder eigen
   * betekenis, dus display: contents kost daar niets.
   */
  .portfolioLatest > .container {
    display: flex;
    flex-direction: column;
    row-gap: 25px;
  }

  .portfolioLatestHeader {
    display: contents;
  }

  /*
   * De link zakt onder de kaarten en staat links; hij houdt zijn maat van 20/33
   * waar de andere tekstlinks op mobiel naar 15/25 gaan. Zo staat het op
   * samdesign.nl.
   */
  .portfolioLatestLink {
    position: static;
    order: 1;
    align-self: flex-start;
    font-size: 20px;
    line-height: 33px;
  }

  .portfolioLatestLink .textLinkArrow {
    width: 20px;
  }

  /*
   * Onder 768px staan de kaarten níet onder elkaar maar naast elkaar in een
   * veegvlak. JetEngine zet daar `scroll_slider_enabled: yes` met
   * `scroll_slider_on: ["mobile"]` op het widget en hangt bij het laden een
   * `.jet-listing-grid__scroll-slider-mobile` met `overflow-x: auto` om de rij.
   * Dat is dezelfde instelling op /over-ons/ (waar dit component vandaan komt)
   * en op /website-laten-maken/mobiele-website-laten-maken/ — het is één en
   * hetzelfde JetEngine-sjabloon (23917).
   *
   * Waarom het hier eerst als een stapel stond: die class komt van JavaScript,
   * en in een headless meting zonder wekker draait dat script niet. Dan meet je
   * drie kaarten onder elkaar en denk je dat dát de bedoeling is. Zie
   * docs/beslissingen.md en het geheugenpunt over de swiper-wekker.
   *
   * Geen `scroll-snap`: samdesign.nl heeft hier `scroll-snap-type: none`, dus
   * ook geen `scroll-padding-inline` (§7).
   */
  .portfolioLatestGrid {
    flex-wrap: nowrap;
    /* Hier zit de tussenruimte weer als padding op de kaart, dus geen gap. */
    column-gap: 0;
    margin-top: 0;
    padding-bottom: 20px;
    /* Dicht op de y-as, anders vangt de rij het scrollen van de pagina op (§7). */
    overflow-x: auto;
    overflow-y: hidden;
  }

  /*
   * De kaart is hier 305px breed, ook op een scherm waar meer past: de
   * kolommen staan vast op 320px inclusief hun tussenruimte. Zo staat het op
   * samdesign.nl, waar rechts van de kaart lucht overblijft.
   */
  .projectCard {
    flex: 0 0 320px;
    max-width: 320px;
    padding-inline: 7.5px;
  }

  /*
   * De rij begint 7,5px vóór het veegvlak, zodat de eerste afbeelding op de
   * rooilijn van de kop staat en niet 7,5px daarbinnen. Op samdesign.nl doet de
   * negatieve marge op de rij zelf dat werk; die kan hier niet, want de rij ís
   * bij ons het veegvlak en zou dan ook 7,5px te ver naar rechts doorlopen.
   */
  .projectCard:first-child {
    margin-left: -7.5px;
  }

  .projectCard:nth-child(1),
  .projectCard:nth-child(2) {
    margin-block: 0;
  }

  .projectCard:nth-child(n + 3) {
    display: flex;
  }

  /* Hier houdt de afbeelding zijn eigen verhouding (793 x 1024). */
  .projectCard .projectCardMedia .projectCardImage {
    height: auto;
  }

  .projectCardServices {
    margin-top: 10px;
    font-size: 14px;
    line-height: 18px;
  }

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

  .projectCardTitle::before {
    width: 20px;
    height: 18px;
    background-size: contain;
  }
}