/*
 * Het portfolio-archief: /portfolio/ en /portfolio/<categorie>/.
 *
 * De maten komen 1-op-1 van https://www.samdesign.nl/portfolio/ (R9), gemeten
 * met getComputedStyle en getBoundingClientRect op 1440, 1255, 1024, 767 en
 * 390px. Waar hieronder een getal met een decimaal staat, is dat wat de
 * bestaande site berekent — niet een keuze van ons.
 *
 * Breekpunten: 1255px (de introtekst valt onder de kop), 1024px (kleinere kop)
 * en 767px (één kolom, kleinere teksten). De 1255 is een eigen grens van de
 * bestaande site en geen van de twee gebruikelijke.
 *
 * Laadt alleen op dit archief; zie mu-plugins/samdesign-portfolio/inc/assets.php.
 */

/* ==================================================================
   Tokens van deze pagina
   ================================================================== */

.portfolioIntro,
.portfolioFilter,
.portfolioBody {
  /*
   * Het roze streepje vóór een filterlink en vóór het label op een kaart.
   * Eén decoratieve achtergrond, geen inline SVG: hij komt dertig keer op de
   * pagina voor en een achtergrond kost geen extra markup of verzoek.
   *
   * De vulling is #dc0356 — nét een andere roze dan --colorPink (#dc0155) en
   * --colorPinkDeep (#dc0556). Zo staat het in de bron van samdesign.nl.
   */
  --portfolioMark: 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");
}

/* ==================================================================
   Regelafbreking terug naar de browserstandaard
   ------------------------------------------------------------------
   De reset zet `text-wrap: balance` op koppen en `text-wrap: pretty` op
   alinea's. Mooie standaarden, maar samdesign.nl heeft ze niet: daar breken de
   regels gewoon op de eerste plek die niet meer past. Met balance verdeelt
   Chromium de dienstenregel van een kaart over twee even lange regels en breekt
   hij dus op een ander woord dan op de bestaande site.
   R9 gaat hier voor de typografische standaard van de reset.
   ================================================================== */

.portfolioTitle,
.portfolioLead p,
.portfolioCardServices,
.portfolioCardLabel {
  text-wrap: wrap;
}

/* ==================================================================
   Kop en introtekst
   ------------------------------------------------------------------
   Twee blokken op één regel, met hun onderkanten gelijk: de kop links, de
   tekst rechts tegen de rand. Vanaf 1255px naar beneden zakt de tekst onder de
   kop.
   ================================================================== */

.portfolioIntro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-block: 80px;
}

.portfolioTitle {
  max-width: fit-content;
  color: var(--colorNavy);
  font-size: 100px;
  font-weight: 500;
  line-height: 90px;
  letter-spacing: -0.05em;
}

.portfolioTitleDot {
  color: var(--colorPinkDeep);
}

/*
 * flex-basis 100% met een max-width erover: op een breed scherm klemt de
 * max-width de tekst op zijn eigen breedte en past hij naast de kop; zodra de
 * max-width 100% wordt, dwingt de basis hem naar de volgende regel.
 *
 * De streep zit op dit blok en loopt dus alleen langs de tekst, niet langs de
 * 40px lucht erboven.
 */
.portfolioLead {
  flex: 0 0 100%;
  max-width: fit-content;
  margin-top: 40px;
  margin-left: auto;
  border-left: 1px solid var(--colorNavy);
}

.portfolioLead p {
  max-width: 570px;
  margin-left: 30px;
  font-size: 20px;
  line-height: 33px;
}

/* ==================================================================
   Het filter
   ------------------------------------------------------------------
   Navigatie, geen koppen: op samdesign.nl staat elk item in een <h3> om zijn
   lettergrootte. De maten zijn gelijk, de betekenis niet (§6).
   ================================================================== */

.portfolioFilter {
  margin-block: 50px;
}

.portfolioFilterList {
  display: flex;
  flex-wrap: wrap;
  column-gap: 50px;
}

.portfolioFilterItem {
  display: flex;
  align-items: center;
  width: fit-content;
}

/*
 * Het streepje staat 7px buiten de container. Dat is geen vergissing maar wat
 * de bestaande site doet: een negatieve marge op het icoon, zodat de tekst wél
 * netjes op de containerrand begint.
 */
.portfolioFilterItem::before {
  content: "";
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: -7px;
  background: var(--portfolioMark) no-repeat center / cover;
}

.portfolioFilterLink {
  color: var(--colorNavy);
  font-size: 20px;
  line-height: 23px;
  letter-spacing: -0.05em;
  text-decoration: none;
}

/* ==================================================================
   Het raster
   ================================================================== */

.portfolioBody {
  margin-block: 50px 80px;
}

.portfolioGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.portfolioCard {
  display: flex;
  flex-direction: column;
}

/* Het inzoomen mag niet buiten de kaart komen. */
.portfolioCardMedia {
  overflow: hidden;
}

/*
 * Vaste hoogte, ook op mobiel: de afbeeldingen zijn staand en worden door
 * object-fit gevuld.
 *
 * Drie classes in de selector, want de reset heeft `img[width][height] {
 * height: auto }` staan — die weegt zwaarder dan twee classes en zou de
 * hoogte hier ongedaan maken.
 */
.portfolioCard .portfolioCardMedia .portfolioCardImage {
  width: 100%;
  height: 747px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease-out;
}

.portfolioCardMedia:hover .portfolioCardImage,
.portfolioCardMedia:focus-visible .portfolioCardImage {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .portfolioCard .portfolioCardMedia .portfolioCardImage {
    transition: none;
  }

  .portfolioCardMedia:hover .portfolioCardImage,
  .portfolioCardMedia:focus-visible .portfolioCardImage {
    transform: none;
  }
}

/*
 * 28px = de 8px onder de afbeelding plus de 20px boven de kop, zoals de
 * bestaande site het opbouwt.
 */
.portfolioCardServices {
  margin-top: 28px;
  color: var(--colorNavy);
  font-size: 25px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: -0.05em;
}

.portfolioCardLabel {
  display: flex;
  align-items: center;
  margin-top: 8px;
  color: var(--colorNavy);
  font-size: 33px;
  font-weight: 500;
  line-height: 33px;
  letter-spacing: -0.05em;
}

.portfolioCardLabel::before {
  content: "";
  display: block;
  flex: none;
  width: 29px;
  height: 29px;
  margin-left: -7px;
  background: var(--portfolioMark) no-repeat center / cover;
}

/* ==================================================================
   Meer bekijken
   ------------------------------------------------------------------
   Een echte link naar de volgende pagina. assets/js/pages/portfolio.js maakt
   er een "meer laden" van; zonder JavaScript blijft het een link die werkt.
   ================================================================== */

.portfolioMore {
  margin-top: 80px;
  text-align: center;
}

.portfolioMoreLink {
  display: inline-block;
  color: var(--colorNavy);
  font-size: 20px;
  line-height: 35px;
  text-decoration: none;
}

.portfolioMoreLink[aria-disabled="true"] {
  cursor: default;
  opacity: 0.4;
}

.portfolioEmpty {
  font-size: 20px;
  line-height: 33px;
}

/* ==================================================================
   1255px — de introtekst gaat onder de kop
   ================================================================== */

@media (max-width: 1255px) {
  .portfolioLead {
    max-width: 100%;
    margin-left: 0;
  }
}

/* ==================================================================
   1024px — kleinere kop
   ================================================================== */

@media (max-width: 1024px) {
  .portfolioTitle {
    font-size: 55px;
    line-height: 66px;
  }
}

/* ==================================================================
   767px — één kolom
   ================================================================== */

@media (max-width: 767px) {
  /* Alleen de introsectie houdt hier meer lucht aan de zijkant, het filter en
     het raster niet. Zo staat het op samdesign.nl. */
  .portfolioIntro {
    margin-block: 80px 50px;
    padding-inline: 30px;
  }

  .portfolioTitle {
    font-size: 44px;
    line-height: 36px;
  }

  .portfolioLead p {
    font-size: 15px;
    line-height: 25px;
  }

  .portfolioFilterLink {
    font-size: 23px;
    line-height: 29px;
  }

  .portfolioGrid {
    grid-template-columns: 1fr;
  }

  .portfolioCardServices {
    font-size: 15px;
    line-height: 25px;
  }

  .portfolioCardLabel {
    font-size: 23px;
    line-height: 29px;
  }
}