/* landing-card.css — landing di vendita in versione compatta, sul retro del
   box quadrato "?" della pre-landing (#lavagna-quadrato).
   ISOLAMENTO: tutte le regole partono da .landing-card, le classi hanno il
   prefisso lc-, le variabili il prefisso --lc- e sono dichiarate sulla card.
   Eccezioni: il @font-face qui sotto (i @font-face non si possono limitare a
   un selettore) e la regola sullo sfondo del retro del box quadrato. */

/* JetBrains Mono 700 per le prime due scritte. Il peso 800 ("for sale!") è
   quello già caricato da style.css della pre-landing (stessa famiglia, stesso
   file): non viene dichiarato di nuovo. Aggiungere il 700 non cambia i testi
   della pre-landing, che chiedono 400, 800 o 900 (il 900 resta sull'800). */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Sfondo del retro del box quadrato: il crema di .faccia-retro (style.css)
   resterebbe visibile negli angoli arrotondati. Unica regola fuori da
   .landing-card, con specificità più alta solo per il retro che contiene la
   card (stesso valore di --lc-bg qui sotto: tenerli uguali). */
#lavagna-quadrato .faccia-retro:has(> .landing-card) {
  background-color: #E6EEF3;
}

/* ============ VARIABILI (colori e dimensioni) ============ */
.landing-card {
  /* Sfondo: il --bg della landing */
  --lc-bg: #E6EEF3;
  --lc-text: #13294B;
  --lc-muted: #355A80;
  --lc-border: #9DB4C8;
  --lc-focus: #1D5BA6;

  /* Tre scritte: progressione blu, teal, verde */
  --lc-hero1: #1D5BA6;
  --lc-hero2: #1F7F8E;
  --lc-hero3: #188B18;
  /* --lc-hero3: #2A8A3C; */

  /* Pulsante: tre opzioni intercambiabili (A attiva).
     Per cambiare opzione: commentare il blocco attivo e togliere i commenti all'altro. */

  /* Opzione A: verde profondo con testo bianco (attiva) */
  --lc-btn: #0F5132; --lc-btn-hover: #145537; --lc-btn-text: #FFFFFF; --lc-btn-border: #0F5132;

  /* Opzione B: verde più morbido con testo bianco */
  /* --lc-btn: #2F855A; --lc-btn-hover: #276F4A; --lc-btn-text: #FFFFFF; --lc-btn-border: #2F855A; */

  /* Opzione C: verde pastello con testo navy e bordo verde */
  /* --lc-btn: #9ADBB4; --lc-btn-hover: #86D0A4; --lc-btn-text: #13294B; --lc-btn-border: #247A52; */

  /* Font: JetBrains Mono solo sulle tre scritte; il resto eredita il font
     del retro della pre-landing */
  --lc-font-hero: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Dimensioni in cqi: 1cqi = 1% della larghezza della card */
  --lc-pad: 3.5cqi;
  --lc-gap: 2.6cqi;
  --lc-line1: 7cqi;
  --lc-line2: 8.3cqi;
  --lc-line3: 16.5cqi;
  --lc-btn-size: 4.4cqi;
  --lc-notice-size: max(9.5px, 2.9cqi);   /* minimi in px: leggibili anche a 320px */
  --lc-small-size: max(8.5px, 2.35cqi);

  /* Spaziatura tra le scritte: come nella landing (JetBrains Mono) */
  --lc-hero-gap: 0.15em;
  --lc-hero-gap-min: 4px;
  --lc-hero-line1-desc: 0.008em;
  --lc-hero-line2-asc: 0.09em;
  --lc-hero-line2-desc: 0.005em;
  --lc-hero-line3-asc: 0.147em;
}

/* ============ CARD ============ */
/* Riempie tutta la faccia del retro; è il contenitore delle misure in cqi e
   la base del link esteso (stretched link) */
.landing-card {
  container-type: inline-size;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--lc-gap);
  padding: var(--lc-pad);
  overflow: hidden;
  border-radius: inherit;
  background: var(--lc-bg);
  color: var(--lc-text);
  text-align: center;
  line-height: 1.35;
  cursor: pointer;
}

.landing-card *,
.landing-card *::before,
.landing-card *::after { box-sizing: border-box; }

.landing-card .lc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============ TRE SCRITTE ============ */
.landing-card .lc-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin: 0;
  font-family: var(--lc-font-hero);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.landing-card .lc-line {
  display: block;
  max-width: 100%;
  white-space: nowrap;      /* una riga sola, parole mai spezzate */
}

.landing-card .lc-line--1 { font-size: var(--lc-line1); color: var(--lc-hero1); font-weight: 700; }
.landing-card .lc-line--2 { font-size: var(--lc-line2); color: var(--lc-hero2); font-weight: 700; }
.landing-card .lc-line--3 { font-size: var(--lc-line3); color: var(--lc-hero3); font-weight: 800; letter-spacing: -0.02em; }

.landing-card .lc-line--1 { margin-bottom: calc(max(var(--lc-hero-gap), var(--lc-hero-gap-min)) + var(--lc-hero-line1-desc)); }
.landing-card .lc-line--2 { margin-top: calc(-1 * var(--lc-hero-line2-asc)); margin-bottom: calc(max(var(--lc-hero-gap), var(--lc-hero-gap-min)) + var(--lc-hero-line2-desc)); }
.landing-card .lc-line--3 { margin-top: calc(-1 * var(--lc-hero-line3-asc)); }

/* Macchina da scrivere (landing-card.js): testo completo invisibile che fissa
   il layout + lettere battute sovrapposte */
.landing-card .lc-type { position: relative; display: inline-block; max-width: 100%; }
.landing-card .lc-ghost { visibility: hidden; }
.landing-card .lc-typed { position: absolute; top: 0; left: 0; right: 0; text-align: left; }

.landing-card .lc-cursor {
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
}

.landing-card .lc-cursor::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 0.6em;
  height: 0.92em;
  background: currentColor;
  animation: lc-cursor-blink 1s linear infinite;
}

@keyframes lc-cursor-blink {
  0%, 49.9%  { opacity: 1; }
  50%, 100%  { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-card .lc-cursor { display: none; }
}

/* ============ PULSANTE = UNICO LINK, ESTESO A TUTTA LA CARD ============ */
.landing-card .lc-buy {
  display: inline-block;
  max-width: 100%;
  padding: calc(0.7em - 2px) calc(2em - 2px);
  border: 2px solid var(--lc-btn-border);
  border-radius: 0.6em;
  background: var(--lc-btn);
  color: var(--lc-btn-text);
  font-size: var(--lc-btn-size);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 0.5em 1.5em rgba(19, 41, 75, 0.08);
  /* niente transform: un transform qui renderebbe il pulsante il riferimento
     del ::after, che si ridurrebbe al solo pulsante */
}

/* Stretched link: il ::after copre tutta la card (position:relative) */
.landing-card .lc-buy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  cursor: pointer;
}

/* Nessun cambio di colore al passaggio del mouse o al click: il pulsante resta
   sempre --lc-btn (sfondo e bordo). Con il link esteso a tutta la card, :hover
   sarebbe attivo ovunque nel card (anche subito dopo aver girato il box, mentre
   compaiono le scritte). --lc-btn-hover resta nelle opzioni ma il card non lo usa.
   Restano il puntatore a manina su tutto il card e il contorno di focus da tastiera. */
.landing-card .lc-buy:focus-visible {
  outline: 3px solid var(--lc-focus);
  outline-offset: 3px;
}

.landing-card .lc-notice {
  max-width: 34em;
  margin: 0;
  color: var(--lc-muted);
  font-size: var(--lc-notice-size);
}

/* Riga sopra le schede dei pagamenti (config.js -> texts.card.note):
   corpo piccolo, stesso colore dell'avviso di reindirizzamento, al massimo
   due righe (oltre, il testo verrebbe troncato con i puntini) */
.landing-card .lc-note {
  max-width: 100%;
  margin: 0;
  color: var(--lc-muted);
  font-size: var(--lc-small-size);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ============ METODI DI PAGAMENTO (compatti) ============ */
/* ELENCO PROVVISORIO, come nella landing: da confermare (vedi TODO.txt).
   Icone SVG da img/payments/: i badge a scheda hanno già un loro fondo; Bitcoin (senza
   fondo) e Bank transfer (icona Lucide, ISC) stanno in una scheda bianca della stessa
   altezza e proporzione dei badge (750:471), con gli stessi angoli arrotondati. */
.landing-card .lc-pay {
  --lc-pay-h: 6.6cqi;             /* altezza uniforme di tutte le icone */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1cqi;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-card .lc-pay__item { display: block; flex: none; line-height: 0; }

.landing-card .lc-pay__img { display: block; width: auto; height: var(--lc-pay-h); }

.landing-card .lc-pay__item--tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--lc-pay-h);
  aspect-ratio: 750 / 471;
  background: #FFFFFF;
  border-radius: calc(var(--lc-pay-h) * 0.085);
}

.landing-card .lc-pay__item--tile .lc-pay__img { height: 72%; }

/* Bank transfer: solo l'icona; il nome è nel testo lc-sr-only per gli screen reader */
.landing-card .lc-pay__item--bank { position: relative; color: var(--lc-text); }

.landing-card .lc-pay__bank-icon { display: block; width: auto; height: 62%; }

/* Riga sui wallet (config.js -> texts.footer.walletNote), sotto le icone: corpo
   piccolo, colore dell'avviso di reindirizzamento. Nessun display qui, così
   l'attributo hidden (valore vuoto in config.js) la nasconde. */
.landing-card .lc-wallet {
  max-width: 100%;
  margin: 0;
  color: var(--lc-muted);
  font-size: var(--lc-small-size);
  line-height: 1.3;
}

/* ============ AVVISO SUI MARCHI ============ */
.landing-card .lc-small {
  max-width: 100%;
  margin: 0;
  color: var(--lc-muted);
  font-size: var(--lc-small-size);
  line-height: 1.3;
}