/*
 * packageCards + packageCard — de donkerblauwe band "Wat kost een WordPress
 * website laten maken?".
 *
 * Maten 1-op-1 van https://www.samdesign.nl/wordpress-website-laten-maken/ (R9),
 * gemeten op 1440, 1024, 767 en 390px.
 *
 * De drie kaarten liggen in een rij die opzij schuift zodra ze niet meer passen.
 * Op een breed scherm passen ze precies in de container en krimpen ze naar hun
 * eigen inhoud; vanaf 1024px naar beneden houden ze hun 340 (300 onder 768px) en
 * steekt de rij buiten beeld.
 */

/*
 * Dezelfde tekening als bij highlightBand: twee flauwe lijnen die schuin door
 * het vlak lopen, uitgesneden over de hele band. Als data-URI en niet als
 * bestand — dat scheelt een verzoek (R6) en het is maar een kilobyte. Elke `#`
 * staat als `%23`; onversleuteld begint een `#` in een URL de
 * fragment-identifier en laadt de browser de tekening helemaal niet.
 *
 * Dit is de derde kopie van deze data-URI in de map (benefitGrid, highlightBand,
 * hier). Dat hoort in een gedeeld bestand — zie docs/openstaand.md.
 */
.packageCards {
  margin-block: 150px;
  padding-block: 150px;
  background: var(--colorNavyMenu) url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1183' viewBox='0 0 1920 1183'><defs><clipPath id='packageCardsClip'><rect width='1920' height='1183' transform='translate(0 5169.573)' fill='%231a223e'/></clipPath></defs><g transform='translate(0 -5169.572)' clip-path='url(%23packageCardsClip)'><path d='M102.436,986.8,6.356,622.122a86.678,86.678,0,0,1,28.971-89.449L627.94,20.6A90.124,90.124,0,0,1,722.186,7.927l347.28,156.808c59.408,26.8,70.043,105.746,20.169,147.03l-843.814,720.3c-49.873,41.647-126.884,17.383-143.386-45.268' transform='translate(908.486 4696.523)' fill='none' stroke='%23fff' stroke-width='1' opacity='0.25'/><path d='M1019.258,89.18l96.08,364.678a86.677,86.677,0,0,1-28.971,89.449l-592.98,512.071a90.125,90.125,0,0,1-94.246,12.675L51.861,911.245c-59.408-26.8-70.043-105.746-20.169-147.03l843.814-720.3c49.873-41.646,126.884-17.383,143.386,45.268' transform='translate(786.013 5428.814)' fill='none' stroke='%23fff' stroke-width='1' opacity='0.25'/></g></svg>") center / cover no-repeat;
  color: var(--colorWhite);

  /* Onder de muis houdt een link hier zijn roze: #092041 is de achtergrond (main.css). */
  --linkHoverColor: var(--colorPink);
}

/*
 * Vijf blokken onder elkaar met 57px ertussen: kop, tekst, de rij, tekst, knop.
 * Onder 768px is die 57 nog 25.
 */
.packageCardsInner {
  display: flex;
  flex-direction: column;
  row-gap: 57px;
}

.packageCardsTitle {
  max-width: var(--titleWidth, none);
}

/* ------------------------------------------------------------------
   De twee tekstblokken
   ------------------------------------------------------------------ */

/*
 * De witregel onder de laatste alinea blijft staan (.richText haalt hem weg) en
 * het blok wordt er 30px voor omhoog getrokken. Netto is dat niets op een breed
 * scherm en 7,5px minder onder 768px, want die witregel is 1,5em en de 30 een
 * vast getal — dezelfde afspraak als bij mediaText (§26).
 */
.packageCardsBlock {
  max-width: var(--packageCardsBlockWidth, 630px);
  margin-bottom: -30px;
}

.packageCardsBlock > :last-child {
  margin-bottom: 1.5em;
}

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

/*
 * `overflow-x: auto` en niet de `scroll` van samdesign.nl: op een breed scherm
 * valt er niets te schuiven, en `scroll` zet daar op Windows en Linux een lege
 * schuifbalk onder de kaarten die de band hoger maakt. Zie docs/beslissingen.md.
 *
 * De 20px is de maat van de tekst in de kaarten; die erft naar beneden, net als
 * daar. De regelhoogte komt van de body (1,5), dus 30px — en 24 onder 768px.
 */
.packageCardsRow {
  display: flex;
  column-gap: 37px;
  /* Dicht op de y-as, anders vangt de rij het scrollen van de pagina op (§7). */
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 20px;
}

/*
 * De <li> is het flex-item en wordt zo hoog als de hoogste van de drie; de kaart
 * erin blijft zo hoog als zijn eigen inhoud. Daardoor zijn de vlakken op een
 * tablet niet even hoog — zo staat het op samdesign.nl.
 */
.packageCardItem {
  display: flex;
  align-items: flex-start;
}

/* ------------------------------------------------------------------
   Eén kaart
   ------------------------------------------------------------------ */

/*
 * De 340 is een minimum en geen breedte: op 1440px krimpen de drie kaarten naar
 * wat hun inhoud nodig heeft en vullen ze samen precies de container.
 */
.packageCard {
  min-width: 340px;
  padding: 50px 35px 50px 50px;
  background: var(--colorFooter);
}

.packageCardTitle {
  margin-bottom: 13px;
  font-size: 35px;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: -1.75px;
}

.packageCardPrice {
  margin-bottom: 13px;
}

/* ------------------------------------------------------------------
   De omschrijving die uitklapt
   ------------------------------------------------------------------ */

.packageCardDescription {
  margin-bottom: 40px;
}

/*
 * Twee regels van 30px, en onder de muis zoveel als er nodig is. Een max-height
 * die ruim boven de echte hoogte ligt in plaats van `none`: alleen een maat kan
 * een overgang maken. Eén class erbij en eraf, dus CSS en geen Motion (§8).
 */
.packageCardSummary {
  max-height: 60px;
  overflow: hidden;
  line-height: 30px;
  opacity: 0.69;
  transition: max-height 0.5s;
}

.packageCard:hover .packageCardSummary {
  max-height: 500px;
}

/*
 * Het pijltje staat als inline element op zijn eigen regel van 30px, precies
 * zoals daar; de reset zet elke svg op `display: block` en dat zou die regel
 * wegnemen. Het verdwijnt zodra de omschrijving uitklapt.
 */
.packageCardChevron {
  display: inline;
  opacity: 0.69;
  visibility: visible;
  transition: opacity 0.5s, visibility 0.5s;
}

.packageCard:hover .packageCardChevron {
  opacity: 0;
  visibility: hidden;
}

/* ------------------------------------------------------------------
   Wat er in een pakket zit
   ------------------------------------------------------------------ */

/*
 * Het vinkje als `content` op een ::before dat flex-item is, net als daar. Niet
 * als achtergrond zoals in .richText: in deze lijst staat geen opmaak binnen een
 * punt, dus de witruimte tussen inline-elementen kan hier niet wegvallen, en zo
 * staat de tekening op de pixel waar samdesign.nl hem zet.
 */
.packageCardUsps li {
  display: flex;
  column-gap: 16.2px;
}

.packageCardUsps li::before {
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.819' height='11.458' viewBox='0 0 16.819 11.458'%3E%3Cpath d='M5.431 82.031a1.85 1.85 0 0 1-1.273-.5L.311 77.9a.96.96 0 0 1 0-1.415 1.106 1.106 0 0 1 1.5 0l3.621 3.417 9.579-9.039a1.106 1.106 0 0 1 1.5 0 .96.96 0 0 1 0 1.415L6.7 81.533a1.85 1.85 0 0 1-1.269.498' transform='translate(0 -70.573)' fill='%23dc0155'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   De knop
   ------------------------------------------------------------------ */

/*
 * Een flexrij en geen alinea: de knop is `inline-flex` en zou in een regelbox
 * hoger uitvallen dan zijn eigen 55px.
 */
.packageCardsActions {
  display: flex;
}

/*
 * Op een donker vlak schuift er bij hover wit voor de knop in plaats van
 * donkerblauw, en wordt de tekst donker: dat is `.knopPrimair.dark` op
 * samdesign.nl. Zonder dat zou de knop hier onder de muis wegvallen tegen de
 * band. Alleen de eerste helft van het verloop verandert; de roze helft blijft
 * die van `.buttonPrimary`.
 */
.packageCardsButton::before {
  background: linear-gradient(
    90deg,
    var(--colorWhite) 0%,
    var(--colorWhite) 50%,
    var(--colorPinkDeep) 50%,
    var(--colorPinkLight) 100%
  );
}

.packageCardsButton:hover {
  color: var(--colorNavyMenu);
}

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

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

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

  .packageCardsInner {
    row-gap: 25px;
  }

  .packageCardsRow {
    font-size: 16px;
  }

  .packageCard {
    min-width: 300px;
    padding: 30px;
  }

  /* De kop houdt zijn 35/50: die zakt hier als enige niet mee. */
  .packageCardSummary {
    max-height: 44px;
    line-height: 22px;
  }
}