/* ============================================================
   passport-indice.css — l'indice delle Passport

   [NEW-345] Tre colonne sul desktop, due sul telefono: numeri chiesti da
   Fabio, quindi SCRITTI e non lasciati decidere a un `auto-fit`. Con
   `auto-fit` il numero di colonne dipende dalla larghezza disponibile e il
   giorno che cambia il gutter cambiano anche le colonne, in silenzio.

   Il vestito e' quello del sito: maiuscolo, lettere spaziate, nessun colore
   che non ci sia gia', il nero del testo e la riga sottile come separatore.
   ============================================================ */

body.bb-passport-indice-tpl {
  background: #fff;
}

.bb-passport-indice {
  color: var(--bb-fg, #111);
  padding-block: clamp(28px, 4vw, 72px) clamp(48px, 7vw, 120px);
}

/* ============================================================
   APERTURA
   ============================================================ */
.bb-passport-indice__apertura {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 64px);
}

/* ⚠ Due classi: sotto i 768px `.site h1` di Shoptimizer vale (0,1,1) e batte
   una classe sola, rimandando il titolo alla misura del tema. E' la trappola
   di NEW-198 e NEW-333, ricomparsa ogni volta che si scrive un titolo nuovo. */
.bb-passport-indice .bb-passport-indice__titolo {
  margin: 0;
  font-size: var(--bb-h1-hero, clamp(22px, 2.2vw, 32px));
  font-weight: 300;
  letter-spacing: var(--bb-ls-title, .18em);
  text-transform: uppercase;
  line-height: 1.25;
}

.bb-passport-indice__intro {
  margin: clamp(14px, 2vw, 24px) auto 0;
  max-width: 62ch;
  font-size: var(--bb-body, 14px);
  line-height: 1.75;
}

.bb-passport-indice__vuoto {
  text-align: center;
  font-size: var(--bb-body, 14px);
}

/* ============================================================
   LA GRIGLIA
   ============================================================ */
.bb-passport-indice__griglia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* due colonne: e' il telefono il caso di partenza, il desktop arriva dopo */
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.6vw, 22px);
}

@media (min-width: 768px) {
  .bb-passport-indice__griglia {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   LA SCHEDA
   ============================================================ */
.bb-passport-card {
  margin: 0;
}

.bb-passport-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  min-height: clamp(84px, 9vw, 132px);
  padding: clamp(14px, 1.6vw, 26px);
  border: 1px solid var(--bb-line, #e3e3e3);
  color: inherit;
  text-decoration: none;
  /* il colore e il bordo cambiano insieme, cosi' il passaggio del mouse si
     legge come un unico gesto e non come due animazioni scollegate */
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.bb-passport-card__nome {
  /* ⚠ 12px e non 11 come minimo: la scala del tema ha i passi 10/12/14
     (NEW-172) e 11 non e' uno di quelli. Il minimo lo tocca solo sotto i
     ~400px, dove la scheda e' larga 155: a 12px il nome piu' lungo
     («Giulietta Degli Spiriti Passport») sta in tre righe, che la scheda
     regge perche' ha un'altezza minima e non un'altezza fissa. */
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: var(--bb-ls-title, .12em);
  text-transform: uppercase;
  line-height: 1.45;
}

.bb-passport-card__freccia {
  flex: 0 0 auto;
  font-size: 1.1em;
  opacity: .45;
  transition: opacity .25s ease, transform .25s ease;
}

.bb-passport-card__link:hover,
.bb-passport-card__link:focus-visible {
  background: var(--bb-fg, #111);
  border-color: var(--bb-fg, #111);
  color: #fff;
}

.bb-passport-card__link:hover .bb-passport-card__freccia,
.bb-passport-card__link:focus-visible .bb-passport-card__freccia {
  opacity: 1;
  transform: translateX(3px);
}

/* ⚠ Il contorno del fuoco NON si toglie: chi gira con la tastiera deve vedere
   dove si trova. Si rende solo coerente col resto. */
.bb-passport-card__link:focus-visible {
  outline: 2px solid var(--bb-fg, #111);
  outline-offset: 2px;
}

/* ⚠ Chi ha chiesto meno animazioni non le riceve: il passaggio di colore
   resta, il movimento della freccia no. */
@media (prefers-reduced-motion: reduce) {
  .bb-passport-card__link,
  .bb-passport-card__freccia {
    transition: none;
  }
  .bb-passport-card__link:hover .bb-passport-card__freccia {
    transform: none;
  }
}