/* ==================================================================
   HEADER
   ================================================================== */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 245, 236, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filetto);
}

.testata__interno {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-s);
  padding-block: 18px;
}

.marchio {
  display: block;
  justify-self: center;
  text-align: center;
  color: var(--bordeaux);
}

.marchio__immagine {
  display: block;
  height: 38px;
  width: auto;
  margin-inline: auto;
}
.marchio--pie .marchio__immagine { margin-inline: 0; }

/* I due pezzi devono impilarsi sempre: da inline non lo farebbero mai,
   e il sottotitolo finirebbe di fianco al wordmark. */
.marchio__nome,
.marchio__sottotitolo { display: block; }

.marchio__nome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.01em;
}
.marchio__sottotitolo {
  font-family: var(--font-etichetta);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 6px;
  padding-left: 0.42em; /* compensa il tracking sull'ultima lettera */
}

/* Nel footer il marchio e' allineato a sinistra come il resto della colonna. */
.marchio--pie {
  justify-self: start;
  text-align: left;
}
.marchio--pie .marchio__sottotitolo { padding-left: 0; }

/* Su fondo scuro il marchio passa in oro, come da manuale. */
.marchio--oro { color: var(--oro-chiaro); }

.nav-principale ul {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
}
.nav-principale a {
  font-family: var(--font-etichetta);
  font-size: var(--fs-piccolo);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--inchiostro);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color var(--t-breve) var(--easing),
              border-color var(--t-breve) var(--easing);
}
.nav-principale a:hover,
.nav-principale a[aria-current="page"] {
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}

.nav-principale--destra { justify-self: end; }
.nav-principale--destra ul { justify-content: flex-end; }

.testata__azioni {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-xs);
}

/* Interruttore del menu, visibile solo sotto i 980px. */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--filo-bordeaux);
  border-radius: var(--r-bottone);
  color: var(--bordeaux);
  font-family: var(--font-etichetta);
  font-size: 12px;
  letter-spacing: var(--ls-bottone);
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
}
.menu-toggle__barre {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.menu-toggle__barre::before,
.menu-toggle__barre::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 1px;
  background: currentColor;
}
.menu-toggle__barre::before { top: -5px; }
.menu-toggle__barre::after { top: 5px; }

/* ==================================================================
   HERO
   ================================================================== */

.cover {
  position: relative;
  display: grid;
  /* Il contenuto sta in basso, dove lo scrim e' denso: cosi' la foto resta
     leggibile in alto e il testo non ha bisogno di un velo piatto. */
  align-items: end;
  min-height: 640px;
  isolation: isolate;
  overflow: hidden;
}

/* Impilamento tutto in positivo: con z-index negativi dentro un contesto
   isolato l'immagine non veniva dipinta. */
.cover__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cover__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Solo per l'hero della home: privilegia la parte bassa dell'inquadratura
   (persone/terreno) invece del centro geometrico dell'immagine. */
.cover__media__img--basso {
  object-position: center bottom;
}

/* Varianti per privilegiare la parte alta dell'inquadratura (es. volti) */
.cover__media__img--alto {
  object-position: center 32%;
}

/* Servizi: privilegia il tavolo con i prodotti invece delle gambe del tavolo */
.cover__media__img--prodotti {
  object-position: center 65%;
}

/* Scrim direzionale invece di un velo piatto: il testo sta in basso a
   sinistra e li' serve piu' densita', il cielo in alto resta leggibile.
   Sta dentro .cover__media come pseudo-elemento, non come div fratello:
   due assoluti fratelli nello stesso contesto isolato impedivano alla
   foto di comporsi. */
.cover__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(35, 18, 22, 0.86) 0%, rgba(35, 18, 22, 0.70) 34%, rgba(35, 18, 22, 0.38) 62%, rgba(35, 18, 22, 0) 100%),
    linear-gradient(to right, rgba(35, 18, 22, 0.42) 0%, rgba(35, 18, 22, 0) 60%);
}

.cover__contenuto {
  position: relative;
  z-index: 2;
  padding-block: var(--sp-l);
}

.cover--breve { min-height: 460px; align-items: center; }
.cover--breve .cover__media::after {
  background: linear-gradient(to bottom, rgba(35, 18, 22, 0.62), rgba(35, 18, 22, 0.76));
}

/* Scrim piu' leggero per gli hero dove il soggetto (persone, prodotti) deve restare leggibile. */
.cover__media--soft::after {
  background:
    linear-gradient(to top, rgba(35, 18, 22, 0.62) 0%, rgba(35, 18, 22, 0.46) 34%, rgba(35, 18, 22, 0.20) 62%, rgba(35, 18, 22, 0) 100%),
    linear-gradient(to right, rgba(35, 18, 22, 0.30) 0%, rgba(35, 18, 22, 0) 60%);
}

/* Massimo due righe: e' una regola del design, e tiene il blocco di testo
   dentro la fascia dove lo scrim e' denso. */
.hero__titolo {
  color: var(--crema-su-scuro);
  margin-block: var(--sp-xs) var(--sp-s);
  max-width: 21ch;
  text-shadow: 0 1px 24px rgba(35, 18, 22, 0.45);
  text-wrap: balance;
}
.hero__testo {
  color: var(--sabbia);
  max-width: 52ch;
  margin-bottom: var(--sp-m);
}
.hero__testo--centro { margin-inline: auto; }

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}
.azioni--centro { justify-content: center; }

/* ==================================================================
   MANIFESTO
   ================================================================== */

.manifesto { text-align: center; }
.manifesto .kicker { margin-bottom: var(--sp-s); }

/* ==================================================================
   GRIGLIA CATEGORIE
   ================================================================== */

.intestazione-sezione {
  text-align: center;
  margin-bottom: var(--sp-m);
}
.intestazione-sezione .kicker { margin-bottom: 10px; }

.griglia-categorie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-m) var(--sp-s);
}

.categoria { display: block; color: inherit; }

.categoria__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-media);
  margin-bottom: 18px;
}
.categoria__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-media) var(--easing);
}
.categoria:hover .categoria__media img { transform: scale(1.05); }

/* Cornice oro interna, elemento del manuale di marca. */
.categoria__media::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(230, 201, 138, 0.55);
  pointer-events: none;
}

.categoria__titolo { margin-bottom: 4px; }
.categoria__nota { color: var(--testo-tenue); }
.categoria:hover .categoria__titolo { color: var(--bordeaux); }

/* ==================================================================
   SPLIT immagine + testo
   ================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.split__media { position: relative; align-self: stretch; min-height: 460px; }
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split__testo {
  padding: var(--sp-l) var(--gutter);
  max-width: 620px;
}
/* Quando il testo sta a sinistra, allinealo al contenitore condiviso. */
.split__testo--sinistra { margin-inline-start: auto; padding-inline-end: var(--sp-m); }
.split__testo--destra { margin-inline-end: auto; padding-inline-start: var(--sp-m); }

.split__testo .kicker { margin-bottom: 10px; }
.split__testo h2 { margin-bottom: var(--sp-s); }
.split__testo p { margin-bottom: var(--sp-s); }

.split--scuro h2 { color: var(--crema-su-scuro); }
.split--scuro p { color: #F5ECE0; }

/* ==================================================================
   FILIERA (4 passi numerati)
   ================================================================== */

.filiera {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-s);
}

.passo__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-media);
  margin-bottom: 18px;
}
.passo__media img { width: 100%; height: 100%; object-fit: cover; }

.passo__numero {
  display: block;
  font-family: var(--font-etichetta);
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  color: var(--oro);
  margin-bottom: 8px;
}
.passo__titolo { color: var(--crema-su-scuro); margin-bottom: 8px; }
.passo p { color: var(--grigio-caldo); }

/* ==================================================================
   SERVIZI (tre voci separate da filetti, non card)
   ================================================================== */

.servizi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-m);
}

.servizio {
  border-top: 1px solid var(--oro);
  padding-top: var(--sp-s);
}
.servizio h3 { margin-bottom: 10px; }

.centrato { text-align: center; }
.mt-m { margin-top: var(--sp-m); }

/* ==================================================================
   FOOTER
   ================================================================== */

.pie {
  background: var(--nero-footer);
  color: var(--grigio-caldo);
  padding-block: var(--sp-l) var(--sp-s);
}

.pie__griglia {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: var(--sp-m);
  padding-bottom: var(--sp-m);
  border-bottom: 1px solid rgba(233, 220, 196, 0.16);
}

.pie__intro { max-width: 42ch; margin-top: var(--sp-s); }

.pie__titolo-colonna {
  font-family: var(--font-etichetta);
  font-size: 11px;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 18px;
}

.pie__lista li + li { margin-top: 10px; }
.pie__lista a,
.pie a { color: var(--grigio-caldo); }
.pie__lista a:hover,
.pie a:hover { color: var(--oro-chiaro); }

.pie__chiusura {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-xs);
  padding-top: var(--sp-s);
  font-size: 12px;
}

/* ==================================================================
   RESPONSIVE
   Breakpoint del manuale: 980px (menu a scomparsa) e 620px
   (colonna singola). Le griglie collassano progressivamente.
   ================================================================== */

@media (max-width: 1100px) {
  .filiera { grid-template-columns: repeat(2, 1fr); gap: var(--sp-m) var(--sp-s); }
}

@media (max-width: 980px) {
  .griglia-categorie { grid-template-columns: repeat(2, 1fr); }
  .servizi { grid-template-columns: 1fr; gap: var(--sp-s); }

  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 380px; }
  .split__testo {
    max-width: none;
    padding-inline: var(--gutter);
    margin-inline: auto;
    width: 100%;
  }
  /* L'immagine va sempre sopra al testo quando si impila. */
  .split__media { order: -1; }

  .cover { min-height: 560px; }
  .hero__titolo { max-width: none; }
}

@media (max-width: 620px) {
  .griglia-categorie { grid-template-columns: 1fr; gap: var(--sp-s); }
  .filiera { grid-template-columns: 1fr; }

  .cover { min-height: 520px; }
  .cover--breve { min-height: 400px; }

  .azioni { flex-direction: column; align-items: stretch; }
  .azioni .bottone { text-align: center; }
  .azioni--centro { align-items: center; }
  .azioni--centro .bottone { width: 100%; max-width: 320px; }

  .pie__griglia { grid-template-columns: 1fr; gap: var(--sp-s); }
  .pie__chiusura { flex-direction: column; }

  .categoria__media { aspect-ratio: 3 / 2; }
  .categoria__media::after { inset: 10px; }

  .passo__media { aspect-ratio: 3 / 2; }
}


/* ------------------------------------------------------------------
   Selettore di lingua (Polylang). Due varianti: barra desktop e
   pannello off canvas. Non compare affatto se e' attiva una sola
   lingua (mama_lingua_selettore() non stampa nulla in quel caso).
   ------------------------------------------------------------------ */
.selettore-lingua {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-etichetta);
  font-size: 12px;
  letter-spacing: var(--ls-nav);
}
.selettore-lingua li { display: flex; align-items: center; gap: 6px; }
.selettore-lingua li + li::before {
  content: "/";
  color: var(--filo-bordeaux);
}
.selettore-lingua a {
  color: var(--testo-tenue);
  text-decoration: none;
  padding: 2px 1px;
}
.selettore-lingua a:hover { color: var(--bordeaux); }
.selettore-lingua a.corrente {
  color: var(--bordeaux);
  font-weight: 600;
  border-bottom: 1px solid var(--bordeaux);
}

.selettore-lingua--desktop { margin-inline-end: var(--sp-xs); }

@media (max-width: 1024px) {
  .selettore-lingua--desktop { display: none; }
  .selettore-lingua--mobile {
    font-size: 13px;
    padding-top: var(--sp-xs);
    padding-bottom: var(--sp-xs);
    border-top: 1px solid var(--filetto);
    border-bottom: 1px solid var(--filetto);
  }
}
@media (min-width: 1025px) {
  .selettore-lingua--mobile { display: none; }
}