/* cadeautegel.css — de ene cadeautegel van de site (golf 2, oktober 2026).
   Hoort bij assets/js/cadeautegel.js; ontwerp in
   _concepten/cadeau-eenheid/RAPPORT-tegels.md. Basis is de lootjes-tegel,
   met de titel op twee regels, de winkel op een eigen regel en een vierkant
   wit fotovak.

   Gebruik:
     <div class="ct-wikkel"><ul class="ct-rooster"> tegelHtml(...) </ul></div>
   Het rooster luistert naar de breedte van .ct-wikkel (container query), niet
   naar het scherm: zo werkt hij ook naast een zijbalk of in een paneel.
   Twee kolommen op een telefoon, drie vanaf 520 px, vier vanaf 760 px, vijf
   vanaf 1060 px. Altijd minmax(0,1fr), zodat een lange titel nooit het
   rooster breder duwt dan de kolom. */

.ct-wikkel{container:ct / inline-size}
.ct-rooster{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@container ct (min-width:520px){.ct-rooster{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@container ct (min-width:760px){.ct-rooster{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@container ct (min-width:1060px){.ct-rooster{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* Oudere browsers zonder container queries: dan maar op schermbreedte. */
@supports not (container-type:inline-size){
  @media(min-width:700px){.ct-rooster{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(min-width:1100px){.ct-rooster{grid-template-columns:repeat(4,minmax(0,1fr))}}
}
/* Een melding in het rooster (geen treffers en dergelijke) neemt de hele rij. */
.ct-rooster > :not(.ct){grid-column:1/-1}

.ct{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:9px 9px 11px;
  border:2px solid rgba(39,52,47,.12);border-radius:14px;background:#fff8e9;
  transition:transform .15s ease,border-color .15s ease}
.ct:hover{transform:translateY(-2px);border-color:rgba(49,87,68,.55)}
.ct:focus-within{border-color:var(--green,#315744)}

/* Foto: altijd een vierkant wit vak, de foto past erin. Zo zijn alle tegels
   in een rij even hoog, wat voor foto het ook is. */
.ct-beeld{position:relative;aspect-ratio:1/1;border-radius:10px;background:#fff;
  border:1px solid rgba(39,52,47,.08);overflow:hidden}
.ct-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;box-sizing:border-box;
  margin:0;border-radius:0}
.ct-beeld--tekst{display:grid;place-items:center;padding:10px;box-sizing:border-box;background:#f7ead0;
  border:1.5px dashed rgba(39,52,47,.28);font-weight:800;font-size:16px;line-height:1.25;text-align:center;
  overflow-wrap:anywhere;color:var(--ink,#27342f)}

/* Label op een eigen regel, nooit over de foto. */
.ct-label{align-self:flex-start;margin:10px 0 -4px;padding:3px 9px;border-radius:999px;background:#f0d38d;
  border:1px solid var(--gold,#d4a44c);font-size:13px;font-weight:800;color:#6d4f16;line-height:1.3}

/* PEGI-chipje (videogames, besluit Stijn 8 okt 2026): klein en neutraal,
   naast het label op dezelfde regel. Zonder PEGI komt .ct-chips er niet. */
.ct-chips{align-self:flex-start;display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:10px 0 -4px}
.ct-chips .ct-label{margin:0}
.ct-pegi{padding:2px 7px;border-radius:6px;background:#fff;border:1.5px solid rgba(39,52,47,.4);
  font-size:12px;font-weight:800;color:var(--ink,#27342f);line-height:1.3;letter-spacing:.02em;white-space:nowrap}

.ct-titel{margin:11px 0 0;font:700 16px/1.3 "Source Sans 3",system-ui,sans-serif;color:var(--ink,#27342f);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;
  overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
/* De hoofdactie (link of knop) zit in de titel en spant met ::after de hele
   tegel: één tabstop, één groot raakvlak, één link voor de meting. */
.ct-hoofd{all:unset;cursor:pointer;color:inherit}
.ct-hoofd::after{content:"";position:absolute;inset:0;border-radius:12px;z-index:1}
.ct-hoofd:focus-visible::after{outline:3px solid var(--gold,#d4a44c);outline-offset:2px}
.ct-hoofd:disabled{cursor:default}
/* kies: de hoofdactie is een <button>. Die is altijd een eigen blokje, dus
   daar zit het afkappen op twee regels op de span erbinnen. */
button.ct-hoofd{display:block;width:100%;text-align:left}
.ct-naam{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.ct-sub{margin:4px 0 0;font-size:14px;font-weight:700;line-height:1.3;color:var(--muted,#637069)}
.ct-reden{margin:5px 0 0;font-size:15px;line-height:1.4;color:#5a675f;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

.ct-voet{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px;
  margin-top:auto;padding-top:8px;min-height:30px}
.ct-pw{min-width:0}
.ct-prijs{display:block;font-size:16px;font-weight:800;color:var(--ink,#27342f);font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-prijs--los{font-size:15px;font-weight:700;color:var(--muted,#637069);white-space:normal}
.ct-prijsnoot{display:block;margin-top:1px;font-size:13px;font-weight:600;color:var(--muted,#637069);line-height:1.25}
.ct-winkel{display:block;margin-top:1px;font-size:15px;font-weight:600;color:var(--muted,#637069);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-winkel[data-tekst]::before{content:attr(data-tekst)}

/* Secundaire link naar de winkel (kies en mijn): ligt boven de uitgerekte
   hoofdknop, met een onzichtbaar raakvlak van ruim 44 px. */
.ct-bekijk{position:relative;z-index:2;flex:none;padding:3px 11px;border:1.5px solid rgba(49,87,68,.5);
  border-radius:999px;background:#fffdf6;color:var(--green,#315744);font-size:15px;font-weight:700;
  text-decoration:none;line-height:1.35}
.ct-bekijk::before{content:"";position:absolute;inset:-10px -7px}
.ct-bekijk:hover{background:#eef3e4;border-color:var(--green,#315744);text-decoration:none}
.ct-bekijk:focus-visible{outline:3px solid var(--gold,#d4a44c);outline-offset:2px}

/* koop: de klik die we willen is de winkel, dus een volle groene knop.
   Visueel een knop, technisch deel van de ene titellink (aria-hidden). */
.ct-knop{display:block;margin-top:10px;padding:10px 8px;border-radius:11px;background:var(--green,#315744);
  color:#fff6e1;font-size:15px;font-weight:800;text-align:center;line-height:1.2;
  box-shadow:0 4px 0 var(--green-dark,#203e32);overflow-wrap:anywhere}
.ct-knop::before{content:attr(data-tekst)}
.ct:hover .ct-knop{background:#27463a}

/* kies: gekozen = groene rand, groene achtergrond en een vinkje. */
.ct--kies.is-gekozen{border-color:var(--green,#315744);background:#eef3e4}
.ct--kies.is-gekozen::after{content:"✓";position:absolute;top:6px;right:6px;z-index:2;width:26px;height:26px;
  border-radius:50%;background:var(--green,#315744);color:#fff;display:grid;place-items:center;font-weight:900;
  font-size:15px;pointer-events:none}

/* kies met een knop (de lootjes, oktober 2026): "Voeg toe" is groen, net als
   bij koop. Staat het cadeau erop, dan zegt de knop dat zelf ("✓ Op je
   lijstje", lichtgroen met een groene rand) en is het ronde vinkje overbodig. */
.ct-knop--kies::before{content:attr(data-tekst)}
.ct--kies.is-gekozen .ct-knop--kies{background:#dcebcf;color:var(--green-dark,#203e32);
  box-shadow:inset 0 0 0 2px var(--green,#315744)}
.ct--kies.is-gekozen .ct-knop--kies::before{content:attr(data-aan)}
.ct--kies.is-gekozen:hover .ct-knop--kies{background:#d2e4c3}
.ct--kiesknop.is-gekozen::after{content:none}

/* mijn: weghalen is destructief, dus hier mag rood. */
.ct-weg{position:absolute;top:-8px;right:-8px;z-index:3;width:28px;height:28px;padding:0;border:2px solid #fff8e9;
  border-radius:50%;background:var(--red,#a52d29);color:#fff;font-size:16px;font-weight:900;line-height:1;
  cursor:pointer;display:grid;place-items:center}
.ct-weg:focus-visible{outline:3px solid var(--gold,#d4a44c);outline-offset:2px}

/* Een slot onder de tegel (keurmodus op /cadeaus/): boven de uitgerekte link. */
.ct-slot{position:relative;z-index:2}

.ct--compact{padding:7px 7px 9px}
.ct--compact .ct-titel{margin-top:9px}

.ct-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;border:0}

@media(max-width:420px){
  .ct{padding:8px 8px 10px}
  .ct-reden{font-size:14.5px}
  .ct-knop{padding:9px 6px;font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){.ct{transition:none}.ct:hover{transform:none}}
@media print{
  .ct-bekijk,.ct-knop,.ct-weg,.ct-slot{display:none !important}
  .ct{break-inside:avoid;page-break-inside:avoid}
  .ct:hover{transform:none}
}