/* ============================================================================
   SITE — MU Mercato Urbano
   Impianto editoriale, apertura split-asimmetrica, forma morbida,
   respiro alternato (sezioni dense/quasi vuote), movimento riservato.
   ========================================================================= */

/* ——— Occhielli, elementi editoriali comuni ————————————————————————————— */

.occhiello {
  font-family: var(--font-testo);
  font-size: var(--t-piccolo);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accento-testo);
  margin-bottom: 0.9rem;
}

.sez-scura .occhiello {
  color: var(--accento);
}

h1 em,
.marchio em {
  font-style: italic;
  font-weight: 400;
}

/* ——— Pulsanti ———————————————————————————————————————————————————————————— */

.pulsante {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--raggio-interattivo);
  font-size: var(--t-piccolo);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--durata-breve) var(--curva), background-color var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva), box-shadow var(--durata-breve) var(--curva);
}

.pulsante--pieno {
  background: var(--fondo-alt);
  color: var(--accento);
  box-shadow: var(--ombra);
}

.pulsante--pieno:hover {
  background: var(--accento);
  color: var(--su-accento);
  transform: translateY(-2px);
}

.sez-scura .pulsante--pieno {
  background: var(--accento);
  color: var(--su-accento);
}

.sez-scura .pulsante--pieno:hover {
  background: var(--testo-su-scuro);
  color: var(--fondo-alt);
}

.pulsante--fantasma {
  background: transparent;
  color: var(--testo);
  border: 1px solid var(--bordo);
}

.pulsante--fantasma:hover {
  border-color: var(--accento-testo);
  color: var(--accento-testo);
  transform: translateY(-2px);
}

.sez-scura .pulsante--fantasma {
  color: var(--testo-su-scuro);
  border-color: rgba(243, 236, 224, 0.28);
}

.sez-scura .pulsante--fantasma:hover {
  border-color: var(--accento);
  color: var(--accento);
}

/* ——— Sezioni scure (alternanza del respiro) ———————————————————————————— */

.sez-scura {
  background: var(--fondo-alt);
  color: var(--testo-su-scuro);
}

.sez-scura h2,
.sez-scura h3 {
  color: var(--testo-su-scuro);
}

.sez-scura .u-lettura,
.sez-scura p {
  color: var(--testo-tenue-su-scuro);
}

/* ——— Header ————————————————————————————————————————————————————————————— */

[data-sito-header] {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.intestazione {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1rem;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--testo);
  margin-right: auto;
}

.marchio img {
  border-radius: var(--raggio-interattivo);
}

.marchio span {
  font-family: var(--font-titoli);
  font-size: 1.15rem;
  line-height: 1.1;
}

.intestazione nav[aria-label='Navigazione principale'] {
  display: none;
}

.intestazione ul[data-menu-desktop] {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  font-size: var(--t-piccolo);
}

.intestazione ul[data-menu-desktop] a {
  text-decoration: none;
  color: var(--testo-tenue);
  transition: color var(--durata-breve) var(--curva);
}

.intestazione ul[data-menu-desktop] a:hover {
  color: var(--accento-testo);
}

.intestazione__cta {
  display: none;
}

[data-menu-toggle] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -0.25rem;
}

.icona-hamburger {
  position: relative;
  width: 22px;
  height: 14px;
}

.icona-hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--testo);
  border-radius: 2px;
  transition: transform var(--durata) var(--curva), opacity var(--durata-breve) var(--curva), top var(--durata) var(--curva);
}

.icona-hamburger span:nth-child(1) { top: 0; }
.icona-hamburger span:nth-child(2) { top: 6px; }
.icona-hamburger span:nth-child(3) { top: 12px; }

.menu-aperto .icona-hamburger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-aperto .icona-hamburger span:nth-child(2) { opacity: 0; }
.menu-aperto .icona-hamburger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (min-width: 880px) {
  .intestazione nav[aria-label='Navigazione principale'] { display: block; }
  .intestazione__cta { display: inline-flex; }
  [data-menu-toggle] { display: none; }
}

/* Pannello menu mobile: fuori da <header> di proposito, vedi GUIDA-TEMPLATE.md */
#menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo-alt);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--durata) var(--curva), visibility var(--durata) var(--curva);
}

.menu-aperto #menu-mobile {
  opacity: 1;
  visibility: visible;
}

#menu-mobile ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

#menu-mobile a {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  color: var(--testo-su-scuro);
  text-decoration: none;
}

#menu-mobile a:hover {
  color: var(--accento);
}

@media (min-width: 880px) {
  #menu-mobile { display: none; }
}

/* ——— Hero ———————————————————————————————————————————————————————————————— */

.sez-hero {
  padding-block-start: clamp(2.5rem, 3vw, 4rem);
  padding-block-end: var(--spazio-sezione);
  overflow: hidden;
}

.sez-hero__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 880px) {
  .sez-hero__griglia {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.sez-hero__sotto {
  color: var(--testo-tenue);
  margin-bottom: var(--spazio-blocco);
}

.sez-hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sez-hero__immagine img {
  width: 100%;
  height: 100%;
  max-height: 34rem;
  object-fit: cover;
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

@media (min-width: 880px) {
  .sez-hero__immagine {
    margin-block: -2.5rem;
  }
  .sez-hero__immagine img {
    max-height: 42rem;
  }
}

/* ——— Concetto (apertura split-asimmetrica, ripetuta come firma visiva) —— */

.sez-concetto__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 880px) {
  .sez-concetto__griglia {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .sez-concetto__testo { order: 2; }
  .sez-concetto__immagine { order: 1; }
}

.sez-concetto__testo p + p {
  margin-top: 1.25rem;
}

.sez-concetto__immagine img {
  width: 100%;
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

/* ——— Stand ——————————————————————————————————————————————————————————————— */

.sez-stand__intestazione {
  max-width: var(--larghezza-lettura);
  margin-bottom: var(--spazio-blocco);
}

.sez-stand__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .sez-stand__griglia {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sez-stand__griglia {
    grid-template-columns: repeat(3, 1fr);
  }
  .carta-stand--immagine {
    grid-row: span 2;
  }
}

.carta-stand {
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  background: rgba(243, 236, 224, 0.04);
  border-radius: var(--raggio);
  transition: background-color var(--durata) var(--curva), transform var(--durata) var(--curva);
}

.carta-stand:hover {
  background: rgba(243, 236, 224, 0.09);
  /* `translate` (proprietà CSS a sé, non `transform`) di proposito: l'articolo
     porta anche [data-reveal], e GSAP scrive il suo tween su `transform` come
     stile inline che resta dopo il reveal (vedi nota in app.js) — usando
     `transform` anche qui, l'inline di GSAP lo sovrascriverebbe per sempre e
     l'hover non si vedrebbe mai. `translate` compone con `transform` invece
     di competere. */
  translate: 0 -4px;
}

.carta-stand__numero {
  display: block;
  font-family: var(--font-titoli);
  font-size: var(--t-piccolo);
  color: var(--accento);
  margin-bottom: 1rem;
  opacity: 0.8;
}

.carta-stand h3 {
  margin-bottom: 0.6rem;
}

.carta-stand p {
  color: var(--testo-tenue-su-scuro);
  margin-bottom: 0;
}

.carta-stand--immagine {
  padding: 0;
  overflow: hidden;
}

.carta-stand--immagine img {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
  border-radius: var(--raggio);
  transition: transform 600ms var(--curva);
}

.carta-stand--immagine:hover img {
  transform: scale(1.04);
}

/* ——— Dolci (sezione quasi vuota, contrasto di respiro) ————————————————— */

.sez-dolci__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 720px) {
  .sez-dolci__griglia {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

.sez-dolci__immagine img {
  width: 100%;
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.sez-dolci__testo h2 {
  font-size: var(--t-h1);
}

/* ——— Formule (come funziona) ———————————————————————————————————————————— */

.sez-formule__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: var(--spazio-blocco);
  align-items: start;
}

@media (min-width: 880px) {
  .sez-formule__griglia {
    grid-template-columns: repeat(3, 1fr);
  }
}

.carta-formula {
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  transition: transform var(--durata) var(--curva), box-shadow var(--durata) var(--curva);
}

.carta-formula:hover {
  /* `translate`, non `transform`: l'articolo porta [data-reveal], vedi nota
     su .carta-stand:hover più sopra. */
  translate: 0 -6px;
  box-shadow: var(--ombra);
}

.carta-formula--evidenza {
  background: var(--fondo-alt);
  border-color: transparent;
  color: var(--testo-su-scuro);
  box-shadow: var(--ombra);
}

@media (min-width: 880px) {
  .carta-formula--evidenza {
    translate: 0 -1.25rem;
  }
  .carta-formula--evidenza:hover {
    translate: 0 -1.75rem;
  }
}

.carta-formula--evidenza h3,
.carta-formula--evidenza p {
  color: var(--testo-su-scuro);
}

.carta-formula__quando {
  font-size: var(--t-piccolo);
  color: var(--accento-testo);
  margin-bottom: 1rem;
}

.carta-formula--evidenza .carta-formula__quando {
  color: var(--accento);
}

.carta-formula__prezzi {
  margin-block: 1.25rem;
  display: grid;
  gap: 0.55rem;
}

.carta-formula__prezzi li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-piccolo);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(243, 236, 224, 0.14);
}

.carta-formula__prezzi strong {
  color: var(--accento);
  font-weight: 400;
  font-family: var(--font-titoli);
  font-size: 1.05rem;
}

.carta-formula .u-nota {
  margin-top: 1.25rem;
}

/* ——— La sala ———————————————————————————————————————————————————————————— */

.sez-sala__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .sez-sala__griglia {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.lista-caratteristiche {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--spazio-blocco);
}

.lista-caratteristiche li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue-su-scuro);
}

.lista-caratteristiche li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accento);
}

.sez-sala__immagini {
  position: relative;
  display: grid;
}

.sez-sala__img-grande {
  width: 100%;
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.sez-sala__img-piccola {
  display: none;
}

@media (min-width: 640px) {
  .sez-sala__img-piccola {
    display: block;
    position: absolute;
    width: 42%;
    right: -1.5rem;
    bottom: -2.5rem;
    border: 6px solid var(--fondo-alt);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
  }
}

/* ——— Prenota —————————————————————————————————————————————————————————————— */

.sez-prenota {
  background: var(--fondo);
}

.sez-prenota__riquadro {
  background: color-mix(in srgb, var(--accento) 10%, var(--fondo));
  border-radius: var(--raggio);
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
}

.sez-prenota__riquadro h2 {
  margin-inline: auto;
}

.sez-prenota__riquadro p {
  margin-inline: auto;
  color: var(--testo-tenue);
}

.sez-prenota__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--spazio-blocco);
}

/* ——— Dove siamo ———————————————————————————————————————————————————————————— */

.sez-dove__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 880px) {
  .sez-dove__griglia {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.sez-dove address {
  font-style: normal;
  color: var(--testo-tenue);
  margin-bottom: 1.25rem;
}

.sez-dove p.u-lettura {
  color: var(--testo-tenue);
  margin-bottom: var(--spazio-blocco);
}

.sez-dove__immagine img {
  width: 100%;
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

/* ——— FAQ ———————————————————————————————————————————————————————————————————— */

.lista-faq {
  margin-top: var(--spazio-blocco);
  display: grid;
  gap: 0.75rem;
}

.lista-faq__voce {
  border-bottom: 1px solid var(--bordo);
  padding-block: 1.1rem;
}

.lista-faq__voce summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  color: var(--testo);
}

.lista-faq__voce summary::-webkit-details-marker {
  display: none;
}

.lista-faq__voce summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-testo);
  font-size: 1.5rem;
  color: var(--accento-testo);
  transition: transform var(--durata) var(--curva);
}

.lista-faq__voce[open] summary::after {
  transform: rotate(45deg);
}

.lista-faq__voce p {
  color: var(--testo-tenue);
  margin-top: 0.9rem;
}

/* ——— Contatti finali ————————————————————————————————————————————————————— */

.sez-contatti__blocco {
  text-align: center;
}

.sez-contatti__blocco h2 {
  max-width: 30rem;
  margin-inline: auto;
}

.sez-contatti__righe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin-block: var(--spazio-blocco);
  font-size: var(--t-piccolo);
}

.sez-contatti__righe a {
  text-decoration: none;
  color: var(--testo-su-scuro);
  transition: color var(--durata-breve) var(--curva);
}

.sez-contatti__righe a:hover {
  color: var(--accento);
}

/* ——— Footer —————————————————————————————————————————————————————————————— */

footer {
  padding-block: var(--spazio-blocco);
  border-top: 1px solid var(--bordo);
}

.piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.piede__marchio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.piede__marchio img {
  border-radius: var(--raggio-interattivo);
}

.piede address {
  font-style: normal;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}

.piede__link {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: var(--t-piccolo);
}

.piede__link a {
  text-decoration: none;
  color: var(--testo-tenue);
}

.piede__link a:hover {
  color: var(--accento-testo);
}

.piede p {
  width: 100%;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}