/* cards — le card in overlay di "cosa troverai": una sosta alla volta.
   Consuma: base (.glass), cine-engine (stato html.has-cine).
   Le coordinate --cx/--cy non vengono da un modulo: le stampa il markup.
   La regola prefers-reduced-motion viene da una lista di selettori spezzata. */
/* ---------- Card in overlay (cosa troverai) ---------- */

.cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  max-width: 34rem;
}

.cards__item {
  padding: 0.8rem 1.1rem;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 0.5rem;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Una voce alla volta: la card della sosta corrente entra (fade + salita),
   la precedente esce; coordinate per-card nel markup, tarabili senza JS. */
html.has-cine .cards {
  position: static;
  max-width: none;
}

html.has-cine .cards__item {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: min(84vw, 19rem);
  transform: translate(-50%, -50%) translateY(0.75rem);
  opacity: 0;
  pointer-events: none;
}

html.has-cine .cards__item.is-current {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

@media (width <= 860px) {
  html.has-cine .cards__item {
    left: var(--cx-m, var(--cx));
    top: var(--cy-m, var(--cy));
  }
}

.cards__n {
  color: var(--techne-copper-deep);
  grid-row: span 2;
}

.cards__item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--techne-ink-deep);
  font-size: 1.25rem;
}

.cards__item p { margin: 0.25rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .cards__item { transition: none; }
}