/* ==========================================================================
   LIDO — Componenti
   ========================================================================== */

/* --- La barra di servizio ------------------------------------------------ */
.barra {
  background: var(--tenda-900);
  color: rgba(248, 248, 248, 0.85);
  height: var(--barra-h);
  display: flex; align-items: center;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
}
.barra__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; gap: var(--s-4); }
.barra a:hover { color: var(--mare-400); }
.barra__dx { display: none; gap: var(--s-5); }
@media (min-width: 780px) { .barra__dx { display: flex; } }

/* --- La tenda sopra l'intestazione --------------------------------------- */
/* Le righe non sono una decorazione: sono l'insegna. Stanno sempre in cima. */
.tenda-testata {
  height: 14px;
  background: repeating-linear-gradient(90deg, var(--lino) 0 15px, var(--mare) 15px 30px);
}

/* --- Intestazione -------------------------------------------------------- */
/* L'intestazione è bordeaux, non bianca: è il cambio che sposta più di tutti
   il rapporto fra rosso e bianco, perché sta su ogni pagina e resta fissa. */
.testata-sito {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--tenda);
  color: var(--lino);
  border-bottom: 1px solid rgba(248, 248, 248, 0.18);
  transition: transform var(--dur) var(--ease);
}
.testata-sito--via { transform: translateY(-100%); }
.testata-sito__bar {
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--s-4);
}
.marchio {
  justify-self: center;
  color: var(--lino);
  font-family: var(--font-insegna);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-insegna);
  text-indent: var(--tracking-insegna);
  white-space: nowrap;
  line-height: 1;
}
@media (max-width: 520px) { .marchio { font-size: 1.3rem; } }

.nav-sito { display: none; gap: var(--s-6); }
@media (min-width: 1060px) { .nav-sito { display: flex; } }
.nav-sito__link {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-medio);
  padding-block: var(--s-2);
  position: relative; white-space: nowrap;
}
.nav-sito__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--mare);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav-sito__link:hover::after, .nav-sito__link.corrente::after { transform: scaleX(1); transform-origin: left; }

.testata-sito__azioni { justify-self: end; display: flex; align-items: center; gap: var(--s-3); }
.testata-sito__azioni .btn {
  --btn-sfondo: var(--lino); --btn-testo: var(--tenda); --btn-bordo: var(--lino);
}
.testata-sito__azioni .btn:hover { background: var(--mare); border-color: var(--mare); color: var(--tenda-900); }
.testata-sito__sx { justify-self: start; display: flex; align-items: center; gap: var(--s-4); }
.hamburger { display: inline-flex; padding: var(--s-2); color: var(--lino); }
@media (min-width: 1060px) { .hamburger { display: none; } }
.tel-testata { display: none; font-size: var(--fs-xs); letter-spacing: var(--tracking-medio); color: rgba(248,248,248,.9); }
@media (min-width: 640px) { .tel-testata { display: inline; } }

/* --- Pannelli ------------------------------------------------------------ */
.velo {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(31, 17, 19, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.velo.aperto { opacity: 1; visibility: visible; }

.pannello {
  position: fixed; top: 0; bottom: 0; z-index: var(--z-drawer);
  width: min(420px, 92vw);
  background: var(--lino);
  display: flex; flex-direction: column;
  box-shadow: var(--ombra-lg);
  transition: transform var(--dur-lento) var(--ease);
}
.pannello--sx { left: 0; transform: translateX(-100%); }
.pannello--dx { right: 0; transform: translateX(100%); }
.pannello.aperto { transform: none; }
.pannello__testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--linea);
  flex-shrink: 0;
}
.pannello__corpo { flex: 1; overflow-y: auto; padding: var(--s-6); }
.pannello__corpo--raso { padding: 0; }
.pannello__piede { border-top: 1px solid var(--linea); padding: var(--s-6); background: var(--sabbia-soft); flex-shrink: 0; }

.menu-mobile__voce {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--linea-soft);
  font-family: var(--font-insegna);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-largo);
  color: var(--tenda);
  text-align: left;
}
.menu-mobile__voce:hover { background: var(--sabbia-soft); }

/* --- Finestra modale ----------------------------------------------------- */
.modale {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: grid; place-items: center; padding: var(--s-4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.modale.aperto { opacity: 1; visibility: visible; }
.modale__pannello {
  position: relative; background: var(--lino);
  width: min(680px, 100%); max-height: 86vh; overflow-y: auto;
  padding: var(--s-10);
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-lg);
  transform: translateY(14px);
  transition: transform var(--dur-lento) var(--ease);
}
.modale.aperto .modale__pannello { transform: none; }
.modale__chiudi { position: absolute; top: var(--s-5); right: var(--s-5); padding: var(--s-2); }
@media (max-width: 640px) { .modale__pannello { padding: var(--s-6); } }

/* --- Avvisi -------------------------------------------------------------- */
.pila-avvisi {
  position: fixed; bottom: var(--s-6); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2);
  pointer-events: none; width: min(440px, calc(100vw - 2rem));
}
.avviso {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--tenda-900); color: var(--lino);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--raggio);
  font-size: var(--fs-xs);
  box-shadow: var(--ombra-lg);
  animation: avviso-entra var(--dur) var(--ease) both;
  pointer-events: auto;
}
.avviso--via { animation: avviso-esce var(--dur) var(--ease) both; }
.avviso i { width: 6px; height: 6px; border-radius: 50%; background: var(--mare-400); flex-shrink: 0; }
@keyframes avviso-entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes avviso-esce { to { opacity: 0; transform: translateY(12px); } }

/* --- Fisarmonica --------------------------------------------------------- */
.fisa__voce { border-top: 1px solid var(--linea); }
.fisa__voce:last-child { border-bottom: 1px solid var(--linea); }
.fisa__leva {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; text-align: left;
  font-size: var(--fs-md);
}
.fisa__segno { position: relative; width: 12px; height: 12px; flex-shrink: 0; color: var(--tenda); }
.fisa__segno::before, .fisa__segno::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.fisa__segno::before { top: 5.5px; left: 0; width: 12px; height: 1.5px; }
.fisa__segno::after { left: 5.25px; top: 0; width: 1.5px; height: 12px; }
.fisa__leva[aria-expanded="true"] .fisa__segno::after { transform: rotate(90deg); opacity: 0; }
.fisa__pannello { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.fisa__pannello > div { overflow: hidden; }
.fisa__pannello.aperto { grid-template-rows: 1fr; }
.fisa__contenuto { padding-bottom: var(--s-5); color: var(--inchiostro-soft); line-height: var(--lh-largo); max-width: 62ch; }

/* Fisarmoniche su fondo bordeaux. */
.sezione--tenda .fisa__voce,
.testa-pagina--tenda .fisa__voce { border-color: rgba(248, 248, 248, 0.22); }
.sezione--tenda .fisa__segno { color: var(--mare-400); }
.sezione--tenda .fisa__contenuto { color: rgba(248, 248, 248, 0.82); }

/* --- Schede -------------------------------------------------------------- */
.scheda {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.scheda:hover { box-shadow: var(--ombra); }

/* Su fondo bordeaux la scheda resta bianca ma perde il bordo: il contrasto
   lo fa già lo sfondo, e il filetto scuro sporcherebbe il rosso. */
.sezione--tenda .scheda,
.sezione--scura .scheda { border-color: transparent; }
.sezione--tenda .testata,
.sezione--scura .testata { border-bottom-color: rgba(248, 248, 248, 0.25); }
.sezione--tenda .testata__titolo,
.sezione--scura .testata__titolo { color: var(--lino); }
.sezione--tenda .occhiello { color: var(--mare-400); }
.scheda__figura { background: var(--sabbia); aspect-ratio: 4 / 3; overflow: hidden; }
.scheda__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lento) var(--ease); }
.scheda:hover .scheda__figura img { transform: scale(1.04); }
.scheda__corpo { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.scheda__titolo { font-family: var(--font-insegna); font-size: var(--fs-lg); color: var(--tenda); }
.scheda__testo { font-size: var(--fs-sm); color: var(--inchiostro-soft); line-height: var(--lh-largo); }
.scheda__piede { margin-top: auto; padding-top: var(--s-4); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }

/* --- Piede di pagina ----------------------------------------------------- */
.piede { background: var(--tenda-900); color: var(--lino); }
.piede a:hover { color: var(--mare-400); }
.piede__alto {
  padding-block: var(--s-16) var(--s-12);
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s-10);
}
@media (max-width: 1000px) { .piede__alto { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .piede__alto { grid-template-columns: 1fr; gap: var(--s-8); } }
.piede__marchio {
  font-family: var(--font-insegna);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing: var(--tracking-insegna);
  text-indent: var(--tracking-insegna);
  text-transform: uppercase;
}
.piede__titolo {
  font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-largo);
  color: rgba(248, 248, 248, 0.75); margin-bottom: var(--s-4);
}
.piede__lista li + li { margin-top: var(--s-2); }
.piede__lista a, .piede__lista span { font-size: var(--fs-sm); color: rgba(248, 248, 248, 0.92); }
.piede__basso {
  border-top: 1px solid rgba(248, 248, 248, 0.18);
  padding-block: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-2xs); color: rgba(248, 248, 248, 0.75);
}
.piede__righe { height: 16px; background: repeating-linear-gradient(90deg, var(--lino) 0 16px, var(--mare) 16px 32px); }

/* --- Briciole ------------------------------------------------------------ */
.briciole { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-2xs); color: var(--inchiostro-muto); padding-block: var(--s-5); }
.briciole li { display: inline-flex; }
.briciole li:not(:last-child)::after { content: "/"; margin-left: var(--s-2); color: var(--inchiostro-lieve); }
.briciole a:hover { color: var(--tenda); }
.briciole [aria-current] { color: var(--tenda); }