/**
 * Het eindscherm op /klaar/.
 *
 * Twee kolommen: links het beeld, rechts wat je ermee kunt. Het beeld is de
 * hoofdzaak en krijgt de meeste ruimte; de knoppen staan ernaast en niet
 * eronder, zodat de eerste vraag ("wat wil je ermee") in beeld staat zonder
 * scrollen.
 *
 * De deuren onderaan komen uit maak.css (`.maak-deur`). Die vorm heeft één
 * definitie en die staat daar; hier alleen de ruimte eromheen.
 *
 * @package complimentje-bridge
 */

.klaar-hero {
  padding-bottom: 24px;
}

.klaar-sectie {
  padding-top: 8px;
}

.klaar {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* --- het beeld --------------------------------------------------------- */

.klaar__kaart {
  margin: 0;
  position: relative;
  background: var(--white);
  border:var(--lijn-dikte) solid var(--line);
  border-radius: var(--r-vlak);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.klaar__kaart img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-vlak);
  box-shadow:none;
}

.klaar__wachten {
  margin: 0;
  font-size:var(--fs-body);
  color: var(--muted);
  text-align: center;
}

/* --- de kolom ernaast --------------------------------------------------- */

.klaar__naast {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* .klaar__citaat is weg per 5 september 2026. Het citaat herhaalde de zin die
   al op de kaart staat en duwde de deelknop omlaag; zie template-klaar.php.
   De regels stonden hier nog en zouden bij de volgende opruiming als
   "onbekende klasse" zijn opgevallen zonder dat iemand nog wist waarom. */

.klaar__namen {
  margin-top: var(--s2);
  font-size:var(--fs-body);
  color: var(--muted);
}

.klaar__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.klaar__deel,
.klaar__bewaar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* De ster vult zich zodra er bewaard is. Twee toestanden op één knop, want een
   tweede knop ernaast ("Niet meer bewaren") zou een even zware keuze lijken. */
.klaar__bewaar[aria-pressed="true"] .klaar__bewaar-ic {
  color: var(--terra);
}

.klaar__melding {
  margin: 0;
  min-height: 20px;
  font-size:var(--fs-body);
  color: var(--muted);
}

.klaar__melding:empty {
  min-height: 0;
}

/* --- de kleine acties --------------------------------------------------- */

/*
 * Een raster en geen flexrij met wrap.
 *
 * Met `flex-wrap` bepaalt de lengte van het label waar een regel ophoudt, en
 * dan begint elk van de drie knoppen op een andere x. Dat is exact dezelfde
 * val als bij `.maak-tekenknop`, die op 8 september 2026 om die reden al van
 * een flexrij naar een raster ging; hier stond hij nog.
 *
 * Naast elkaar zolang ze passen, anders onder elkaar, en altijd op één lijn.
 */
.klaar__klein {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s2) var(--s4);
  padding-top: 4px;
  border-top:var(--lijn-dikte) solid var(--line);
}

.klaar__kleinknop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Stond op 8 boven en onder, wat met een label van 15 px op ongeveer 36
     uitkomt. Het thema schrijft zelf op dat 44 de kleinste maat is die een duim
     betrouwbaar raakt (zie .btn-icon in style.css), en dit zijn knoppen die je
     op een telefoon gebruikt. */
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size:var(--fs-body);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}

.klaar__kleinknop:focus-visible{
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine){.klaar__kleinknop:hover{
  color: var(--ink);
}}

.klaar__kleinknop:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 0;
}

.klaar__deuren {
  display: grid;
  gap: 12px;
}

/* --- bewaarde complimentjes --------------------------------------------- */

.klaar-bewaard__kop {
  margin: 0 0 8px;
}

.klaar-bewaard__uitleg {
  margin: 0 0 24px;
  max-width: 62ch;
  color: var(--muted);
  font-size:var(--fs-body);
}

.klaar-bewaard__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.klaar-bewaard__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--white);
  border:var(--lijn-dikte) solid var(--line);
  border-radius: var(--r-vlak);
  padding: 12px 16px;
}

.klaar-bewaard__tekst {
  font-family: var(--serif, Georgia, serif);
  font-size:var(--fs-body);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  flex: 1 1 260px;
}

.klaar-bewaard__acties {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size:var(--fs-body);
  white-space: nowrap;
}

.klaar-bewaard__weg {
  border: 0;
  background: none;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.klaar-bewaard__weg:focus-visible{
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine){.klaar-bewaard__weg:hover{
  color: var(--ink);
}}

/* --- smal scherm --------------------------------------------------------- */

@media (max-width: 860px) {
  .klaar {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .klaar__kaart {
    padding: 12px;
    min-height: 0;
  }

  .klaar__kaart img {
    max-height: 52vh;
    width: auto;
  }

  .klaar__deel,
  .klaar__bewaar {
    flex: 1 1 100%;
    justify-content: center;
  }
}


/* --- de voorproef ---------------------------------------------------------
 * Zolang het definitieve bestand nog getekend wordt, staat hier de kaart die de
 * bezoeker net zelf maakte: dezelfde vorm, dezelfde letter, dezelfde tekening.
 * Zodra het beeld binnen is haalt klaar.js dit blok weg (het draagt
 * `data-cmpl-klaar-wachten`, net als de regel die hier eerst stond).
 * ------------------------------------------------------------------------ */

.klaar__voorproef{
  width:100%;
}

/* `.preview .preview-art .q` uit homepage.css brengt de letter van de drukker
   mee, maar die stylesheet laadt alleen op de voorpagina. Hier moet dezelfde
   letter staan, anders leest de voorproef anders dan de kaart die de bezoeker
   een tel eerder zag. Dezelfde waarden, en de reden staat in maak.css. */
.klaar__voorproef .preview-art .q{
  font-family:'CmplStatig',Georgia,serif;
  font-weight:600;
  font-size:var(--fs-kop);
  line-height:1.45;
  color:var(--kleur-ink);
  margin:0;
}

.klaar__voorproef-tekening{
  display:block;
  margin:0 auto var(--s4);
  max-width:120px;
  height:auto;
}