/* ==========================================================================
   Argenteria Lanzellotti — Lanciano (CH)

   TESI
   L'argento non ha colore proprio: ha la luce che gli passa sopra. In una
   vetrina di argenteria il fondo e' scuro apposta, gli oggetti sono pochi e
   distanti, e l'unica cosa che si muove e' il riflesso quando ci si sposta
   davanti al vetro. Quindi questa pagina NON si scorre: e' una vetrina ferma,
   una schermata sola, e si sceglie quale teca guardare. Il riflesso
   attraversa la teca a ogni cambio ed e' l'unico movimento del sito.

   PALETTE (ruoli, non nomi di colore)
   --teca        #14151A  fondo: il buio dentro la vetrina
   --teca-alta   #1E2027  superficie del pannello e dei cartellini
   --argento     #E8EAEF  testo primario
   --argento-tenue #A8AEBC testo secondario ed etichette
   --ottone      #C9A227  accento: interattivo, cartellino attivo, punzone

   CONTRASTI misurati con agenti/contrasto.py (non stimati)
   --argento       su --teca       15.15:1  AAA
   --argento-tenue su --teca        8.20:1  AAA
   --ottone        su --teca        7.54:1  AAA
   --argento       su --teca-alta  13.51:1  AAA
   --argento-tenue su --teca-alta   7.32:1  AAA
   --ottone        su --teca-alta   6.72:1  AA
   --teca          su --ottone      7.54:1  AAA  (pulsante pieno)

   SCALA TIPOGRAFICA — tre livelli soli, nessun titolone
   nome          1.625rem  Constantia, tracking +0.16em, maiuscoletto
   titolo teca   1.125rem  Constantia
   testo         1rem      Candara, interlinea 1.6
   etichetta     0.75rem   maiuscoletto, tracking +0.1em

   Vincolante: .design/style-lock.md
   ========================================================================== */

:root {
  --teca: #14151A;
  --teca-alta: #1E2027;
  --argento: #E8EAEF;
  --argento-tenue: #A8AEBC;
  --ottone: #C9A227;

  --serif: Constantia, Cambria, ui-serif, serif;
  --sans: Candara, Corbel, "Segoe UI", system-ui, sans-serif;

  --passo: 8px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--teca);
  color: var(--argento);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.salta {
  position: absolute;
  inset-inline-start: calc(var(--passo) * 2);
  inset-block-start: calc(var(--passo) * 2);
  z-index: 10;
  padding: calc(var(--passo) * 1.5) calc(var(--passo) * 2);
  border-radius: 6px;
  background: var(--ottone);
  color: var(--teca);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-out);
}

.salta:focus-visible { transform: translateY(0); }

/* --- il banco: la schermata unica --------------------------------------
   min-block-size, non block-size: a zoom 200% o su schermi bassi la pagina
   deve poter scorrere invece di tagliare il contenuto. */

.banco {
  min-block-size: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: calc(var(--passo) * 5);
  padding: clamp(24px, 5vw, 56px);
}

@media (min-width: 880px) {
  .banco {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-content: stretch;
    gap: clamp(32px, 5vw, 72px);
  }

  .pie { grid-column: 1 / -1; }
}

/* --- insegna ------------------------------------------------------------ */

.insegna { align-self: center; }

.punzone {
  margin: 0 0 calc(var(--passo) * 2);
  color: var(--ottone);
  line-height: 0;
}

.insegna__nome {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-wrap: balance;
}

.insegna__luogo {
  margin: calc(var(--passo) * 1.5) 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--argento-tenue);
  font-variant-numeric: tabular-nums;
}

.insegna__testo {
  margin: calc(var(--passo) * 3) 0 0;
  max-inline-size: 56ch;
  color: var(--argento-tenue);
  text-wrap: pretty;
}

.insegna__nota {
  margin: calc(var(--passo) * 3) 0 0;
  max-inline-size: 56ch;
  font-size: 0.8125rem;
  color: var(--argento-tenue);
}

/* --- azioni ------------------------------------------------------------- */

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--passo) * 1.5);
  margin-block-start: calc(var(--passo) * 4);
}

.azioni--teca { margin-block-start: calc(var(--passo) * 3); }

.bottone {
  display: inline-block;
  padding: calc(var(--passo) * 1.5) calc(var(--passo) * 2.5);
  min-block-size: 44px;
  border: 1px solid var(--ottone);
  border-radius: 6px;
  background: transparent;
  color: var(--ottone);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.7;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: transform 140ms var(--ease-out), background-color 140ms ease, color 140ms ease;
}

.bottone--pieno {
  background: var(--ottone);
  color: var(--teca);
}

.bottone:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .bottone:hover { background: var(--teca-alta); }
  .bottone--pieno:hover { background: var(--argento); color: var(--teca); }
}

/* --- vetrina ------------------------------------------------------------ */

.vetrina {
  align-self: center;
  display: block;
  min-inline-size: 0;
}

.vetrina__titolo {
  margin: 0 0 calc(var(--passo) * 3);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--argento-tenue);
}

.cartellini {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--passo) * 1.5);
  margin-block-end: calc(var(--passo) * 3);
}

.cartellino {
  display: inline-flex;
  align-items: baseline;
  gap: var(--passo);
  padding: calc(var(--passo) * 1.25) calc(var(--passo) * 2);
  min-block-size: 40px;
  border: 1px solid var(--teca-alta);
  border-radius: 6px;
  background: var(--teca-alta);
  color: var(--argento-tenue);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), border-color 140ms ease, color 140ms ease;
}

.cartellino__n {
  font-family: var(--serif);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ottone);
}

/* la teca scelta non e' segnata dal solo colore: prende il bordo ottone e il
   numerale pieno, cosi' resta distinguibile in monocromia */
.cartellino[aria-selected="true"] {
  border-color: var(--ottone);
  color: var(--argento);
}

.cartellino[aria-selected="true"] .cartellino__n {
  background: var(--ottone);
  color: var(--teca);
  padding-inline: 5px;
  border-radius: 3px;
}

.cartellino:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .cartellino:hover { color: var(--argento); transform: translateY(-2px); }
}

/* --- le teche ----------------------------------------------------------- */

.teche {
  position: relative;
  overflow: hidden;
  padding: calc(var(--passo) * 3);
  min-block-size: 22rem;
  border: 1px solid var(--teca-alta);
  border-radius: 18px;
  background: var(--teca-alta);
  /* il vetro, non un'ombra da scheda che fluttua: e' un incasso */
  box-shadow: inset 0 1px 0 rgba(232, 234, 239, 0.08);
}

.teca {
  display: block;
  border-radius: 14px;
}

.teca[hidden] { display: none; }

.teca__titolo {
  margin: 0 0 calc(var(--passo) * 2);
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.teca__testo {
  margin: 0 0 calc(var(--passo) * 3);
  max-inline-size: 56ch;
  color: var(--argento-tenue);
  text-wrap: pretty;
}

.voci {
  margin: 0;
  padding: 0;
  list-style: none;
}

.voce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo) calc(var(--passo) * 2);
  justify-content: space-between;
  padding-block: calc(var(--passo) * 1.5);
  border-block-start: 1px solid rgba(168, 174, 188, 0.22);
}

.voce:first-child { border-block-start: 0; }

.voce__v { font-size: 0.9375rem; }

.voce__d {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--argento-tenue);
}

.voce__d--vero {
  letter-spacing: normal;
  font-size: 0.9375rem;
  color: var(--argento);
}

.collegamento {
  color: var(--ottone);
  font-variant-numeric: tabular-nums;
  text-underline-offset: 3px;
}

/* --- il riflesso -------------------------------------------------------- */

.riflesso {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 40%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    100deg in oklab,
    rgba(232, 234, 239, 0) 0%,
    rgba(232, 234, 239, 0.10) 45%,
    rgba(201, 162, 39, 0.13) 55%,
    rgba(232, 234, 239, 0) 100%
  );
  transform: translateX(-140%);
}

/* --- piede -------------------------------------------------------------- */

.pie {
  align-self: end;
  padding-block-start: calc(var(--passo) * 3);
  border-block-start: 1px solid var(--teca-alta);
}

.pie__riga {
  margin: 0 0 var(--passo);
  font-family: var(--serif);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pie__nota {
  margin: 0;
  max-inline-size: 56ch;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--argento-tenue);
  text-wrap: pretty;
}

/* --- messa a fuoco ------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--ottone);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- movimento ---------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* solo con JS attivo: senza JS le teche restano tutte visibili e leggibili */
  .js .teca {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }

  .js .teca.e-aperta { opacity: 1; transform: translateY(0); }

  /* durata dichiarata: 420ms — e' il riflesso che attraversa la vetrina, non
     un elemento di interfaccia. Sotto i 300ms non si legge come un riflesso
     ma come uno sfarfallio; e' decorativo, non blocca nessuna interazione e
     parte solo al cambio di teca. */
  .riflesso.e-passa { animation: passaggio 420ms var(--ease-out) 1; }

  @keyframes passaggio {
    from { opacity: 0; transform: translateX(-140%); }
    35%  { opacity: 1; }
    to   { opacity: 0; transform: translateX(340%); }
  }
}

/* a movimento ridotto il riflesso non esiste e le teche cambiano di netto */
@media (prefers-reduced-motion: reduce) {
  .riflesso { display: none; }
}