/**
 * De productstrook onder de maak-kaart.
 *
 * Rustig en op-merk: geen kortingsblokken, geen "nog maar 3 op voorraad". Wat
 * hem zichtbaar maakt is niet de kleur maar de plek — direct onder het moment
 * waarop iemand iets gemaakt heeft dat hij mooi vindt.
 *
 * De knoppen zijn met opzet secundair (`.btn-ghost`, alleen een rand). Vier
 * terracotta knoppen naast elkaar zouden de primaire actie van de pagina
 * overschreeuwen, en dat is het cadeau-blok in de deel-kolom hierboven.
 *
 * De kleuren en de knopvormen komen uit het thema. Deze stylesheet voegt alleen
 * de indeling toe; laadt het thema niet, dan valt de strook terug op leesbare
 * blokken onder elkaar in plaats van op iets kapots.
 */

/* Gelijk boven en onder. Met 8 boven plakte de strook aan het blok erboven,
   terwijl de regel in het ontwerpsysteem gelijke lucht vraagt buiten de hero. */
.cmpl-strook-sectie {
  padding: 64px 0;
}

.cmpl-strook__kop {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto 24px;
}

.cmpl-strook__uitleg {
  color: var(--muted, #6e685e);
  font-size:var(--fs-body);
  margin-top: 8px;
}

/* Vier kaarten. Op een smal scherm twee naast elkaar en niet één: naast elkaar
   zie je dat het een keuze is, onder elkaar wordt het een lijst waar je doorheen
   scrolt zonder te vergelijken. */
.cmpl-strook__rij {
  display: grid;
  grid-template-columns: repeat(var(--strook-aantal, 4), 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .cmpl-strook__rij { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/*
 * Op een echte telefoon één kolom.
 *
 * Twee naast elkaar houdt de vergelijking overeind zolang er iets te zien is.
 * Gemeten werd het dat niet meer: op 390 zijn de kaarten 155 breed, op 360
 * 140 en op 320 120, met productbeelden van 153, 138 en 118. Het product
 * beslaat dan een derde van zijn eigen kaart en elke knoptekst die zegt wat
 * hij doet valt over twee of vier regels. Vergelijken zonder iets te kunnen
 * zien is geen vergelijken.
 *
 * Hieronder staat er dus één per rij, op volle breedte. Dat lost meteen het
 * weesje op dat bij drie producten op de tweede rij achterbleef met een eigen
 * hoogte.
 */
@media (max-width: 480px) {
  .cmpl-strook__rij { grid-template-columns: 1fr; }
}

/* Drie of minder producten: de rij blijft gecentreerd in plaats van links te
   plakken met een lege kolom ernaast. */
@media (min-width: 901px) {
  .cmpl-strook__rij { max-width: calc(var(--strook-aantal, 4) * 260px); margin: 0 auto; }
}

/*
 * De vier lagen van een kaart liggen op gedeelde rijen.
 *
 * Elke kaart was een eigen kolom, dus alleen de buitenmaat was gelijk en de
 * inhoud niet. Het label boven de uitgelichte kaart duwde daar zijn beeld,
 * titel en prijs omlaag: eenendertig beeldpunten op een breed scherm en
 * vijfenvijftig op een telefoon, waar dat label over twee regels valt. Drie
 * titels op drie hoogtes.
 *
 * Nadruk hoort te zitten in kleur, vulling en het label, niet in verticale
 * verschuiving. Verschuiving leest niet als "belangrijker" maar als "scheef".
 *
 * De rij deelt nu vier rijen (label, beeld, tekst, actie) en elke kaart neemt
 * ze over met `subgrid`. Kaarten zonder label houden die eerste rij leeg in
 * plaats van door te schuiven, precies zoals elk prijzenoverzicht met een
 * "meest gekozen"-plan het doet.
 */
.cmpl-strook__rij { grid-template-rows: auto auto auto auto; }

.cmpl-strook__kaart {
  background: var(--white, var(--kleur-grond));
  border:var(--lijn-dikte) solid var(--line, var(--kleur-lijn));
  border-radius: var(--r-vlak);
  overflow: hidden;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  transition: transform .18s ease, box-shadow .25s ease;
}

/*
 * Elke laag krijgt zijn eigen rij, ook de kaarten zonder label.
 *
 * Alleen het beeld plaatsen is niet genoeg: de overige kinderen worden dan
 * automatisch geplaatst en het raster schuift ze in het eerste gat dat het
 * vindt, dus de titel sprong naar de lege labelrij bovenaan. Gemeten gaf dat
 * 352 beeldpunten verschil tussen de titels, tegen 31 in de oude opzet.
 */
.cmpl-strook__label { grid-row: 1; }
.cmpl-strook__beeld { grid-row: 2; }
.cmpl-strook__tekst { grid-row: 3; }
.cmpl-strook__knop  { grid-row: 4; }

@media (hover: hover) and (pointer: fine){.cmpl-strook__kaart:hover {
  transform: translateY(-4px);
  box-shadow:none;
}}

/* Twee lagen in één vierkant: de catalogusfoto eronder, de eigen render
   erboven zodra die klaar is. Zo staat er nooit een leeg vlak te wachten. */
.cmpl-strook__beeld {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cmpl-paper-warm, var(--kleur-grond));
  overflow: hidden;
}

/* De gedeelde opmaak van beide lagen. `object-fit` staat hier met opzet niet
   bij: de foto en de render vullen hun vakje niet op dezelfde manier, en een
   waarde hier zou die van de render overstemmen (`.cmpl-strook__beeld img` is
   specifieker dan `.cmpl-strook__render`). */
.cmpl-strook__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* De catalogusfoto is altijd vierkant, dus die mag vullen. */
.cmpl-strook__beeld .cmpl-strook__foto {
  object-fit: cover;
}

/* De render verschijnt zacht, want hij komt seconden na de foto binnen en een
   harde wissel leest als een fout. */
.cmpl-strook__render {
  opacity: 0;
  transition: opacity .35s ease;

  /*
   * En hij wordt passend gemaakt, niet bijgesneden.
   *
   * De catalogusfoto hierboven is altijd vierkant, dus daar doet `cover` precies
   * wat het moet. De render is het printbestand zelf, en dat heeft per product
   * een eigen verhouding: het canvas is 3 op 4, het tegeltje vierkant, en de
   * mok is 900 bij 450, de hele wikkel met de tekst twee keer, links en rechts
   * van het oor. Met `cover` werd daar een vierkante plak uit het midden
   * gesneden: op de mok viel de zin midden in een woord af ("Je bent p... goed
   * zoal... bent") en het canvas raakte zijn onderrand met "complimentje.nu"
   * kwijt.
   *
   * De kop erboven belooft "precies zoals je het hierboven maakte, zo gaat het
   * naar de drukker". Dat is met een uitsnede niet waar te maken op een vel
   * waarvan je de verhouding niet kent.
   */
  background: var(--cmpl-paper-warm, var(--kleur-grond));
}

/* Even specifiek als de foto hierboven, anders wint die van deze. */
.cmpl-strook__beeld .cmpl-strook__render {
  object-fit: contain;
}

/* De val uit de kennisbank: `hidden` verliest van `display` uit de regel
   hierboven, dus de renderlaag stond er al voordat hij een bron had. Vandaag
   dekt `opacity: 0` dat toevallig af; deze regel maakt het echt. */
.cmpl-strook__beeld img[hidden] {
  display: none;
}

.cmpl-strook__kaart.heeft-render .cmpl-strook__render {
  opacity: 1;
}

.cmpl-strook__tekst {
  padding: 16px 16px 8px;
}

.cmpl-strook__naam {
  font-family: 'Newsreader', serif;
  font-size:var(--fs-lead);
  line-height: 1.2;
  /* De korte naam is "de mok", "het canvas": met een hoofdletter leest dat als
     een merknaam in plaats van als een woord in een zin. */
  text-transform: none;
}

.cmpl-strook__naam::first-letter {
  text-transform: uppercase;
}

.cmpl-strook__prijs {
  font-weight: 700;
  margin-top: 4px;
  font-size:var(--fs-body);
}

/* De knop zit in de vierde rij, dus hij hoeft zichzelf niet meer op maat te
   rekenen en er valt geen lucht meer tussen prijs en knop. Dat gat was 63
   beeldpunten op een breed scherm en 146 op een kleine telefoon: het tekstblok
   erboven rekte mee terwijl de uitgelichte kaart daar een hogere knop had. */
.cmpl-strook__knop {
  margin: 12px 16px 16px;
  align-self: end;
  font-size:var(--fs-body);
  padding: 12px 16px;
  min-height: 44px;
}

/* De link naar de hele winkel. Bewust een tekstlink en geen vijfde knop: de
   vier kaarten zijn de keuze, dit is de uitweg voor wie iets anders wil. Een
   knop met dezelfde nadruk zou van vier opties er vijf maken. */
.cmpl-strook__meer {
  text-align: center;
  margin-top: 24px;
}
.cmpl-strook__meerlink {
  display: inline-block;
  min-height: 44px;
  padding: 12px 4px;
  font-size:var(--fs-body);
  color: var(--knop-vol, #d1495b);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine){.cmpl-strook__meerlink:hover { text-decoration-thickness: 2px; }}
.cmpl-strook__meerlink:focus-visible { outline: 2px solid var(--knop-vol, #d1495b); outline-offset: 3px; }

.cmpl-strook__vrij {
  text-align: center;
  color: var(--muted, #6e685e);
  font-size:var(--fs-label);
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .cmpl-strook__kaart,
  .cmpl-strook__render { transition: none; }
  @media (hover: hover) and (pointer: fine){.cmpl-strook__kaart:hover { transform: none; }}
}

/* De verborgen productnaam op de Bekijk-knop. WordPress levert deze klasse
   meestal zelf, maar niet op elke pagina en niet in elke thema-opbouw; zonder
   deze regel zou de naam gewoon zichtbaar naast "Bekijk" komen te staan. */
.cmpl-strook .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   De trap: een held, drie stille.

   Vier gelijkwaardige kaarten met vier keer "Bekijk" is geen keuze maar een
   kruispunt. De trechter van augustus laat zien wat dat kost: 31 mensen maakten
   iets, 3 legden iets in het mandje. Eén gevulde knop en drie rustige links
   maken er een trap van, zonder dat er iets uit de rij verdwijnt.
   --------------------------------------------------------------------------- */

/* Geen negatieve marge meer: die stond niet in de ruimteschaal en hoorde bij
   het oude raster, waar het label de kaart naar beneden duwde. */
.cmpl-strook__label {
  margin: 12px 16px 4px;
  font-size:var(--fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--knop-vol, #d1495b);
}

/*
 * De uitgelichte kaart draagt geen eigen rand.
 *
 * Hier stond een tint van 34 procent rood op wit. Die haalt een contrast van
 * ongeveer 1,35 op 1 en is dus in de praktijk onzichtbaar: je betaalt ervoor en
 * krijgt niets. Hij stond bovendien buiten de tabel, die maar een lijn kent
 * (1px, de lijnkleur), en een percentage dat in een stylesheet ontstaat is
 * precies hoe een tweede palet begint.
 *
 * Het label en de gevulde knop dragen de nadruk al. Een derde signaal maakte de
 * kaart alleen onrustiger.
 */
.cmpl-strook__kaart.is-held {
  box-shadow:none;
}

/* De gevulde knop draagt een hele zin en mag dus over twee regels vallen. */
.cmpl-strook__knop--held {
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  font-weight: 700;
}

/* De drie andere blijven bereikbaar maar vragen geen aandacht. Geen rand en
   geen vlak, zodat er op het scherm precies één knop staat die eruitziet als
   een knop.

   Twee klassen diep, en dat is geen slordigheid. Deze stylesheet staat in de
   bron vóór style.css van het thema, dus `.btn-ghost` daar zou met één klasse
   tegen één klasse winnen en de rand gewoon terugzetten. De kaart ervoor tilt
   het er net overheen. Vlak en rand komen daarmee goed.

   De kleur is het enige met een `!important`, en met tegenzin. systeem.css
   laadt hierna en zet `.btn-ghost` op `color: var(--terra) !important`; zonder
   dit blijven de drie stille knoppen terracotta en is er van een trap weinig
   over: vier keer dezelfde kleur, één ervan gevuld. Het gaat om precies één
   eigenschap op precies één knopsoort, niet om de knop uit het systeem tillen. */
.cmpl-strook__kaart .cmpl-strook__knop--stil {
  background: transparent;
  background-image: none;
  border-color: transparent;
  color: var(--muted, #6e685e) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
  box-shadow:none;
}

.cmpl-strook__kaart .cmpl-strook__knop--stil:focus-visible{
  background: transparent;
  border-color: transparent;
  color: var(--ink, var(--kleur-ink)) !important;
  text-decoration-thickness: 2px;
  transform: none;
}
@media (hover: hover) and (pointer: fine){.cmpl-strook__kaart .cmpl-strook__knop--stil:hover{
  background: transparent;
  border-color: transparent;
  color: var(--ink, var(--kleur-ink)) !important;
  text-decoration-thickness: 2px;
  transform: none;
}}