/* ============================================================
   VERTER — STYLE.CSS
   Sito vetrina accessibile (target: WCAG 2.2 AA)
   Convenzione naming: BEM in italiano

   INDICE
   1.  Variabili globali (:root)
   2.  Reset e base
   3.  Utility di accessibilità (skip link, sr-only, focus, motion)
   4.  Contenitore generico
   5.  Navigazione principale (desktop)
   6.  Burger menu (mobile)
   7.  Pannello menu mobile
   8.  Hero (base + varianti --experiences e --home)
   9.  Pulsante hero "Show all" (pagina experiences)
   10. Pulsante pillola riutilizzabile (homepage)
   11. Sezione esperienze (pagina experiences)
   12. Carosello
   13. Banner loghi scorrevole
   14. Sezione articoli (titolo sottolineato + cerchiato)
   15. Griglia articoli e card
   16. Footer
   17. Sezione "Some experiences" (homepage)
   18. CTA evidenziata "view all experiences" (homepage)
   19. Animazioni di entrata
   20. Responsive
============================================================ */


/* ============================================================
   1. VARIABILI GLOBALI
============================================================ */
:root {
  /* Palette */
  --colore-primario: #e8001d;
  --colore-primario-scuro: #b3001a;        /* 🆕 hover/contrasti, contrasto AA su bianco */
  --colore-giallo: #f5e100;
  --colore-nero: #111111;
  --colore-bianco: #ffffff;
  --colore-grigio-chiaro: #f2f2f2;
  --colore-grigio-testo: #333333;          /* contrasto 12.6:1 su bianco — AA OK */
  --colore-grigio-bordo: #6b6b6b;          /* 🆕 contrasto 4.83:1 — risolve WCAG 1.4.11 per UI/bordi */
  --colore-focus: #005fcc;                 /* 🆕 blu accessibile per focus su sfondi chiari */
  --colore-focus-chiaro: #ffffff;          /* 🆕 anello bianco per focus su sfondi scuri */

  /* Tipografia */
  --font-titolo: 'Barlow', sans-serif;
  --font-condensed: 'Barlow Condensed', sans-serif;

  /* Spaziature */
  --spazio-sezione: 80px;
  --spazio-sezione-mobile: 48px;           /* 🆕 */
  --larghezza-contenitore: 1200px;

  /* Altro */
  --raggio-card: 12px;
  --transizione: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Dimensioni minime di target (WCAG 2.5.8) */
  --target-minimo: 44px;                   /* 🆕 best-practice (supera ampiamente 24px) */
}


/* ============================================================
   2. RESET E BASE
============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-titolo);
  color: var(--colore-nero);
  background: var(--colore-bianco);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* ✏️ RIMOSSO: overflow-x: hidden — nascondeva bug invece di risolverli e
     creava problemi con lo zoom (WCAG 1.4.10). Se qualcosa sborda, lo
     correggiamo alla radice. */
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}


/* ============================================================
   3. UTILITY DI ACCESSIBILITÀ
============================================================ */

/* Skip link: visibile solo al focus (WCAG 2.4.1 Bypass Blocks) — 🆕 */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 20px;
  background: var(--colore-nero);
  color: var(--colore-bianco);
  font-weight: 700;
  font-size: 16px;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform var(--transizione);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--colore-giallo);
  outline-offset: 2px;
}

/* Testo solo per screen reader — 🆕 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visibile globale (WCAG 2.4.7 + 2.4.11) — 🆕
   Anello blu su sfondi chiari, bianco su scuri */
:focus-visible {
  outline: 3px solid var(--colore-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.hero :focus-visible,
.menu-mobile :focus-visible,
.footer__social-link:focus-visible {
  outline-color: var(--colore-focus-chiaro);
  box-shadow: 0 0 0 6px var(--colore-nero);
}

/* Riduzione movimento (WCAG 2.3.3) — 🆕 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Disattiva esplicitamente lo scorrimento dei loghi e l'autoplay del carosello */
  .banner-loghi__binario { animation: none !important; }
}


/* ============================================================
   4. CONTENITORE GENERICO
============================================================ */
.contenitore {
  max-width: var(--larghezza-contenitore);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 600px) {
  .contenitore { padding: 0 20px; }
}


/* ============================================================
   5. NAVIGAZIONE PRINCIPALE (DESKTOP)
============================================================ */
.navigazione {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 40px;
  color: var(--colore-bianco);
}

.navigazione__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--colore-bianco);
  min-height: var(--target-minimo);        /* ✏️ target ≥ 44px (WCAG 2.5.8) */
  padding: 4px;
}

.navigazione__logo-icona {
  width: 44px;
  height: 44px;
  color: var(--colore-bianco);             /* ✏️ era fill:white, ora usa currentColor */
}

.navigazione__logo-testo {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--colore-bianco);
}

.navigazione__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;                                /* ✏️ era 6px, aumentato per spaziatura */
}

.navigazione__voce {
  display: inline-block;                   /* ✏️ permette il padding */
  font-family: var(--font-titolo);
  font-weight: 600;
  font-size: 15px;
  color: var(--colore-bianco);
  letter-spacing: 0.02em;
  padding: 8px 4px;                        /* ✏️ target ≥ 44px (WCAG 2.5.8) */
  transition: opacity var(--transizione);
}

.navigazione__voce:hover {
  opacity: 0.85;                           /* ✏️ era 0.6, troppo contrasto perso */
  text-decoration: underline;              /* ✏️ NUOVO: non si affida solo al colore (WCAG 1.4.1) */
  text-underline-offset: 4px;
}

.navigazione__voce--attiva {
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 700;                        /* ✏️ NUOVO: peso differente, non solo sottolineatura */
}


/* ============================================================
   6. BURGER MENU (MOBILE)
   🆕 INTERA SEZIONE — risolve WCAG 2.1.1 (operabile da tastiera)
============================================================ */
.burger {
  display: none;                           /* nascosto su desktop */
  width: var(--target-minimo);
  height: var(--target-minimo);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  color: var(--colore-bianco);
  position: relative;
  z-index: 101;
}

.burger__linea {
  display: block;
  width: 26px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transizione), opacity var(--transizione);
}

/* Stato aperto = trasformazione in X */
.burger[aria-expanded="true"] .burger__linea:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__linea:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] .burger__linea:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ============================================================
   7. PANNELLO MENU MOBILE
   🆕 INTERA SEZIONE
============================================================ */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--colore-nero);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow-y: auto;
}

.menu-mobile[hidden] {
  display: none;
}

.menu-mobile__lista {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

.menu-mobile__voce {
  display: inline-block;
  font-family: var(--font-titolo);
  font-weight: 700;
  font-size: 32px;
  color: var(--colore-bianco);
  letter-spacing: 0.02em;
  padding: 12px 20px;
  min-height: var(--target-minimo);
  transition: color var(--transizione);
}

.menu-mobile__voce:hover,
.menu-mobile__voce:focus-visible {
  color: var(--colore-giallo);             /* giallo su nero = AAA */
}

.menu-mobile__voce--attiva {
  color: var(--colore-giallo);
  text-decoration: underline;
  text-underline-offset: 6px;
}


/* ============================================================
   8. HERO — base e varianti
============================================================ */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--colore-primario);
}

.hero__sfondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero__overlay {
  position: absolute;
  inset: 0;
}

/* ----- Variante EXPERIENCES (mantiene lo stile originale) ----- */
.hero--experiences {
  height: 600px;
}

.hero--experiences .hero__sfondo {
  mix-blend-mode: multiply;
  opacity: 0.75;
}

.hero--experiences .hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(232, 0, 29, 0.72) 0%,
    rgba(80, 0, 80, 0.35) 60%,
    transparent 100%
  );
}

/* ----- Variante HOME 🆕 ----- */
.hero--home {
  min-height: 600px;
  height: 80vh;
  max-height: 800px;
}

.hero__overlay--scuro {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.45) 100%
  );
  /* Garantisce contrasto AA del testo bianco sopra l'immagine (WCAG 1.4.3) */
}

/* ----- Layout hero pagina Experiences (griglia 2x2) ----- */
/* ♻️ Mantenuto dal codice originale */
.hero__contenuto {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 40px;
  height: 260px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.hero__top-left {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.hero__top-right {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}

.hero__bottom-left {
  grid-column: 1;
  grid-row: 2;
}

.hero__bottom-right {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: end;
}

.hero__titolo {
  font-family: var(--font-titolo);
  font-weight: 900;
  font-size: clamp(4rem, 8rem, 8rem);
  width: clamp(200px, 100%, 720px);
  /* ✏️ era rgba(255,255,255,0.82) — contrasto insufficiente
     (WCAG 1.4.3). Ora bianco pieno + text-shadow per leggibilità. */
  color: var(--colore-bianco);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero__titolo--right {
  text-align: right;
  display: block;
}

/* ----- Layout hero HOMEPAGE 🆕 ----- */
.hero__contenuto-home {
  position: relative;
  z-index: 3;
  max-width: var(--larghezza-contenitore);
  margin: 0 auto;
  padding: 140px 40px 60px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}

.hero__titolo-home {
  font-family: var(--font-titolo);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--colore-bianco);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  max-width: 14ch;
}

.hero__cta-home {
  align-self: flex-end;
}


/* ============================================================
   9. PULSANTE HERO "SHOW ALL" (pagina experiences)
   ✏️ ora applicato a <a>, non a <button> (è un link a sezione)
============================================================ */
.hero__pulsante {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--colore-bianco);
  color: var(--colore-nero);
  border-radius: 50px;
  padding: 10px 22px 10px 10px;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-titolo);
  white-space: nowrap;
  min-height: var(--target-minimo);        /* 🆕 target ≥ 44px */
  transition: transform var(--transizione), box-shadow var(--transizione), background var(--transizione), color var(--transizione);
  cursor: pointer;
  border: none;
}

.hero__pulsante:hover {
  background: var(--colore-nero);          /* ✏️ inverte i colori (era solo shadow) */
  color: var(--colore-bianco);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.hero__pulsante-icona {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--colore-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colore-bianco);             /* ✏️ NUOVO: per currentColor sull'SVG */
  flex-shrink: 0;
  transition: background var(--transizione);
}

.hero__pulsante-icona svg {
  width: 14px;
  height: 14px;
}

.hero__pulsante:hover .hero__pulsante-icona {
  background: var(--colore-bianco);
  color: var(--colore-primario);
}


/* ============================================================
   10. PULSANTE PILLOLA RIUTILIZZABILE 🆕
   Usato nella homepage e in altre pagine; pattern accessibile riutilizzabile
============================================================ */
.pulsante-pillola {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--colore-bianco);
  color: var(--colore-nero);
  font-family: var(--font-titolo);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 24px 12px 14px;
  border-radius: 999px;
  min-height: var(--target-minimo);
  transition: background var(--transizione), color var(--transizione), transform var(--transizione);
}

.pulsante-pillola:hover {
  background: var(--colore-nero);
  color: var(--colore-bianco);
  transform: translateY(-1px);
}

.pulsante-pillola__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--colore-nero);
  color: var(--colore-bianco);
  flex-shrink: 0;
  transition: background var(--transizione), color var(--transizione);
}

.pulsante-pillola__icona svg {
  width: 16px;
  height: 16px;
}

.pulsante-pillola:hover .pulsante-pillola__icona {
  background: var(--colore-bianco);
  color: var(--colore-nero);
}


/* ============================================================
   11. SEZIONE ESPERIENZE (pagina experiences)
   ♻️ Mantenuta dal codice originale
============================================================ */
.sezione-esperienze {
  padding: var(--spazio-sezione) 0 60px;
}

.sezione-esperienze__intestazione {
  text-align: center;
  margin-bottom: 28px;
  align-items: center;
}

.titolo-sezione {
  font-family: var(--font-titolo);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 52px);        /* ✏️ era clamp(32px, 100%, 52px) — bug del clamp */
  letter-spacing: -0.02em;
  color: var(--colore-nero);
  line-height: 1.05;
}

.testo-descrizione {
  font-size: 15px;
  line-height: 1.7;
  color: var(--colore-grigio-testo);
  max-width: 600px;
  margin: 0 auto;
}


/* ============================================================
   12. CAROSELLO
============================================================ */
.carosello-wrapper {
  position: relative;
  padding: 0 40px;
  margin-left: 50px;
}

.carosello {
  overflow: hidden;
  border-radius: var(--raggio-card);
}

.carosello__binario {
  display: flex;
  gap: 16px;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carosello__scheda {
  flex: 0 0 calc(25% - 12px);
  min-width: 0;
  position: relative;
  border-radius: var(--raggio-card);
  overflow: hidden;
  aspect-ratio: 3/4;
}

/* Link area che copre tutta la scheda 🆕 (era un <a> piccolo solo sull'icona) */
.carosello__link-area {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--colore-bianco);
}

.carosello__scheda::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 1;
  transition: opacity var(--transizione);
}

.carosello__scheda:hover::before { opacity: 0.9; }

.carosello__immagine {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.carosello__scheda:hover .carosello__immagine {
  transform: scale(1.06);
}

.carosello__etichetta {
  position: absolute;
  bottom: 20px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-condensed);
  font-weight: 900;
  font-size: clamp(20px, 2.5vw, 30px);
  color: var(--colore-bianco);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  line-height: 1;
  letter-spacing: 0.04em;
}

/* Icona "↗" come elemento decorativo dentro al link 🆕 (era un <a> a parte) */
.carosello__icona-link {
  position: absolute;
  bottom: 18px;
  right: 16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);  /* ✏️ era 0.7, ora più visibile */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colore-bianco);
  font-size: 16px;
  transition: background var(--transizione), color var(--transizione), border-color var(--transizione);
}

.carosello__link-area:hover .carosello__icona-link {
  background: var(--colore-bianco);
  color: var(--colore-nero);
}

/* Frecce navigazione */
.carosello__freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--target-minimo);             /* ✏️ era 40px, ora 44px (WCAG 2.5.8) */
  height: var(--target-minimo);
  border-radius: 50%;
  border: 2px solid var(--colore-nero);    /* ✏️ era 1.5px solid — più contrastato */
  background: var(--colore-bianco);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background var(--transizione), color var(--transizione), transform var(--transizione);
  color: var(--colore-nero);
  margin: 0 -50px;
}

.carosello__freccia svg {
  width: 20px;
  height: 20px;
}

.carosello__freccia:hover {
  background: var(--colore-nero);
  color: var(--colore-bianco);
  transform: translateY(-50%) scale(1.08);
}

.carosello__freccia--sinistra { left: 0; }
.carosello__freccia--destra { right: 0; }

/* Pulsante pausa/play 🆕 (WCAG 2.2.2 Pause, Stop, Hide) */
.carosello__pausa {
  position: absolute;
  top: -56px;
  right: 0;
  width: var(--target-minimo);
  height: var(--target-minimo);
  border-radius: 50%;
  border: 2px solid var(--colore-nero);
  background: var(--colore-bianco);
  color: var(--colore-nero);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background var(--transizione), color var(--transizione);
}

.carosello__pausa:hover,
.carosello__pausa[aria-pressed="true"] {
  background: var(--colore-nero);
  color: var(--colore-bianco);
}

.carosello__pausa-icona {
  width: 18px;
  height: 18px;
}


/* ============================================================
   13. BANNER LOGHI (scorrimento automatico)
   ♻️ Mantenuto, solo l'animazione si ferma con prefers-reduced-motion
============================================================ */
.banner-loghi {
  border-top: 1px solid var(--colore-grigio-bordo);  /* ✏️ era #e0e0e0 (contrasto basso) */
  border-bottom: 1px solid var(--colore-grigio-bordo);
  padding: 32px 0;
  overflow: hidden;
  margin: 60px 0;
}

.banner-loghi__binario {
  display: flex;
  gap: 60px;
  animation: scorrimento-loghi 18s linear infinite;
}

.banner-loghi__elemento {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}


@keyframes scorrimento-loghi {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ============================================================
   14. SEZIONE ARTICOLI (titoli)
============================================================ */
.sezione-articoli {
  padding: 0 0 var(--spazio-sezione);
}

.sezione-articoli--home {
  padding: var(--spazio-sezione) 0;        /* 🆕 variante per home */
}

.sezione-articoli__intestazione {
  text-align: center;
  margin-bottom: 40px;
}

/* Titolo sottolineato (pagina experiences) ♻️ */
.titolo-sezione--sottolineato {
  position: relative;
  display: inline-block;
}

.titolo-sezione--sottolineato::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: -4px;
  width: 90%;
  height: 3px;
  background: var(--colore-nero);
  border-radius: 2px;
}

/* Titolo cerchiato (homepage) 🆕
   Cerchio disegnato a mano riprodotto via SVG inline come background */
.titolo-sezione--cerchiato {
  display: inline-block;
  position: relative;
}

.titolo-sezione__cerchio {
  position: relative;
  display: inline-block;
  padding: 0 16px;
}

.titolo-sezione__cerchio::after {
  content: "";
  position: absolute;
  inset: -8px -4px -10px -4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round'><path d='M40 6 C 12 6, 4 32, 14 48 C 24 60, 64 58, 74 42 C 82 28, 68 8, 36 8'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}


/* ============================================================
   15. GRIGLIA ARTICOLI E CARD
   ✏️ APPROCCIO RIVISTO: usiamo CSS Columns (multi-column) invece di
   Grid con span asimmetrici. È un layout "a giornale" che riempie
   automaticamente le colonne senza vuoti, indipendentemente dalle
   proporzioni delle immagini. Pattern molto usato per gallerie tipo
   Pinterest.
============================================================ */
/* ============================================================
   15. GRIGLIA ARTICOLI E CARD
   Layout semplice: griglia uniforme, tutte le card stessa dimensione
============================================================ */

/* ============================================================
   15. GRIGLIA ARTICOLI E CARD
   Layout semplice: griglia uniforme, tutte le card stessa dimensione
   + effetto hover/focus che mostra il titolo dell'articolo
============================================================ */

.griglia-articoli {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0;
  list-style: none;
}

.griglia-articoli > li {
  list-style: none;
}

/* Variante per la homepage (identica per ora) */
.griglia-articoli--home {
  grid-template-columns: repeat(4, 1fr);
}

/* Card: <a> cliccabile, sempre quadrata grazie a aspect-ratio */
.articolo-card {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 5/4;
  border-radius: var(--raggio-card);
  overflow: hidden;
  color: inherit;
  transition: transform var(--transizione), box-shadow var(--transizione);
}

.articolo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.articolo-card__immagine {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Overlay scuro semitrasparente che appare sopra l'immagine al hover/focus */
.articolo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity var(--transizione);
  z-index: 1;
  pointer-events: none;
}

/* Titolo dell'articolo: nascosto di default, appare al hover/focus */
.articolo-card__titolo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-family: var(--font-titolo);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--colore-bianco);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transizione), transform var(--transizione);
  pointer-events: none;
}

/* Hover/focus: mostra overlay + titolo + zoom immagine */
.articolo-card:hover::before,
.articolo-card:focus-visible::before {
  opacity: 1;
}

.articolo-card:hover .articolo-card__titolo,
.articolo-card:focus-visible .articolo-card__titolo {
  opacity: 1;
  transform: translateY(0);
}

.articolo-card:hover .articolo-card__immagine,
.articolo-card:focus-visible .articolo-card__immagine {
  transform: scale(1.06);
}

/* Colori di sfondo (placeholder se l'immagine non carica) */
.articolo-card--magenta   { background: #d4006e; }
.articolo-card--arancione { background: #ff8c00; }
.articolo-card--giallo    { background: #f5e100; }
.articolo-card--grigio    { background: #d8d8d8; }
.articolo-card--beige     { background: #e8d8c0; }
.articolo-card--azzurro   { background: #a8d0e8; }
.articolo-card--nero-card { background: #1a1a1a; }
.articolo-card--rosso,
.articolo-card--rosso-2,
.articolo-card--rosso-3,
.articolo-card--rosso-4 { background: #e8001d; }



/* Su touch device (tablet/mobile): titolo SEMPRE visibile con gradiente in basso */
@media (hover: none) {
  .articolo-card::before {
    background: linear-gradient(
      180deg,
      transparent 40%,
      rgba(0, 0, 0, 0.85) 100%
    );
    opacity: 1;
  }

  .articolo-card__titolo {
    opacity: 1;
    transform: none;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    padding: 16px;
    font-size: 15px;
  }
}


/* ============================================================
   16. FOOTER
============================================================ */
.footer {
  background: var(--colore-giallo);
  padding: 56px 0 24px;
  color: var(--colore-nero);
}

.footer__griglia {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer__logo {
  display: inline-flex;                    /* ✏️ era flex column; ora è <a> */
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--colore-nero);
  padding: 4px;
  width: fit-content;
}

.footer__logo-icona {
  width: 52px;
  height: 52px;
  color: var(--colore-nero);               /* ✏️ usa currentColor */
}

.footer__logo-testo {
  font-family: var(--font-condensed);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.25em;
}

.footer__nav {
  justify-self: center;
}

/* <ul> nel footer 🆕 (era una serie di <a> piatti) */
.footer__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__voce {
  display: inline-block;                   /* ✏️ permette padding */
  font-weight: 500;
  font-size: 15px;
  color: var(--colore-nero);
  padding: 6px 4px;                        /* ✏️ target ≥ 44px effettivo grazie a line-height */
  min-height: var(--target-minimo);
  line-height: 1.8;
  transition: opacity var(--transizione);
}

.footer__voce:hover {
  opacity: 0.7;                            /* ✏️ era 0.5 (troppo) */
  text-decoration: underline;              /* ✏️ NUOVO: non solo opacità */
  text-underline-offset: 3px;
}

.footer__voce--attiva {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

.footer__colonna-destra {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

/* <ul> 🆕 (erano <div>) */
.footer__link-secondari {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.footer__link-secondario {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  color: var(--colore-nero);
  padding: 6px 4px;
  min-height: var(--target-minimo);
  line-height: 1.8;
  transition: opacity var(--transizione);
}

.footer__link-secondario:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__social {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-end;
}

/* 🆕 RIDISEGNATE: erano <div title="...">, ora sono <a> con SVG */
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-minimo);
  height: var(--target-minimo);
  background: var(--colore-nero);
  color: var(--colore-bianco);             /* contrasto 21:1 */
  border-radius: 8px;
  transition: background var(--transizione), transform var(--transizione);
}

.footer__social-link:hover {
  background: var(--colore-grigio-testo);
  transform: translateY(-2px);
}

.footer__social-icona {
  width: 22px;
  height: 22px;
}

.footer__fondo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1.5px solid var(--colore-nero); /* ✏️ era rgba(0,0,0,0.15) — contrasto basso */
}

.footer__policy {
  display: inline-flex;
  align-items: center;
  font-size: 14px;                         /* ✏️ era 13px — sotto i 14px sconsigliato */
  color: var(--colore-nero);
  font-weight: 500;
  padding: 8px 4px;
  min-height: var(--target-minimo);
  transition: opacity var(--transizione);
}

.footer__policy:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   17. SEZIONE "SOME EXPERIENCES" (homepage) 🆕
============================================================ */
/* ============================================================
   17. SEZIONE "SOME EXPERIENCES" (homepage)
============================================================ */
.sezione-some-esperienze {
  padding: var(--spazio-sezione) 0;
  background: var(--colore-bianco);
}

/* 🆕 NUOVA: griglia principale a 2 colonne (foto | testo) */
.sezione-some-esperienze__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;       /* il testo a destra parte dall'alto, alla stessa altezza della prima foto */
}

/* ✏️ MODIFICATA: la galleria ora vive nella colonna sinistra (non più tutta larghezza)
   La rendo un grid interna per mantenere la composizione asimmetrica delle 3 foto */
.sezione-some-esperienze__galleria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;                 /* ✏️ rimosso il margin: 60px 0 di prima */
}

.sezione-some-esperienze__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--raggio-card);
  background: var(--colore-grigio-chiaro);
}

/* ✏️ MODIFICATE: le 3 foto ora vivono in una griglia 2 colonne (non più 12) */
.sezione-some-esperienze__foto--montagna {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 4 / 5;
}

.sezione-some-esperienze__foto--pasta {
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 5 / 4;
}

.div-foto-post-section {
  position: relative; /* fondamentale per l’overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  margin: 0 auto 3rem;
}

.experiences-giallo {
  background-color: var(--colore-giallo);
}

.foto-post-section {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;

  border-radius: var(--raggio-card);
  background: var(--colore-grigio-chiaro);

  display: block; /* invece di flex (non serve su img) */
  margin-top: 0px;
}

/* TESTO SOPRA L’IMMAGINE */
.testo-overlay {
  position: absolute;
  inset: 0; /* occupa tutto il contenitore */

  display: flex;
  align-items: center;
  justify-content: center;

  color: white;
  font-size: 1.5rem;
  font-weight: bold;

  text-align: center;

  /* opzionale: migliora leggibilità */
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--raggio-card);
}

/* 🆕 NUOVA: colonna destra con titolo + paragrafo */
.sezione-some-esperienze__testo {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: right;          /* allineamento a destra come richiesto */
}

.sezione-some-esperienze__descrizione {
  font-size: 16px;
  line-height: 1.6;
  color: var(--colore-grigio-testo);
  /* ✏️ rimosso text-align: right e max-width (ora gestiti dal contenitore __testo) */
}

.sezione-some-esperienze__cta-contenitore {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}


/* ============================================================
   18. CTA EVIDENZIATA "VIEW ALL EXPERIENCES" (homepage) 🆕
============================================================ */
.cta-evidenziata {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-titolo);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  color: var(--colore-nero);
  padding: 12px 16px;
  min-height: var(--target-minimo);
}

.cta-evidenziata__highlight {
  background: var(--colore-giallo);
  padding: 2px 12px;
  color: var(--colore-nero);                /* contrasto 15.3:1 — AAA */
}

.cta-evidenziata__freccia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--colore-nero);
  flex-shrink: 0;
  transition: background var(--transizione), color var(--transizione);
}

.cta-evidenziata__freccia svg {
  width: 20px;
  height: 20px;
  color: var(--colore-nero);
}

.cta-evidenziata:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.cta-evidenziata:hover .cta-evidenziata__freccia {
  background: var(--colore-nero);
}

.cta-evidenziata:hover .cta-evidenziata__freccia svg {
  color: var(--colore-bianco);
}


/* ============================================================
   19. ANIMAZIONI ENTRATA
   ♻️ Mantenute dal codice originale
============================================================ */
@keyframes apparizione-su {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sezione-esperienze,
.sezione-some-esperienze,
.banner-loghi,
.sezione-articoli {
  animation: apparizione-su 0.7s ease both;
}


/* ============================================================
   20. RESPONSIVE
============================================================ */

/* ----- Tablet (≤ 900px) ----- */
@media (max-width: 900px) {

  /* Carosello */
  .carosello__scheda { flex: 0 0 calc(50% - 8px); }

  /* Griglia articoli: passa a 2 colonne con CSS Columns */

  .griglia-articoli,
  .griglia-articoli--home {
    grid-template-columns: repeat(3, 1fr);
  }


  /* ✏️ Reset eventuali residui di grid (override per sicurezza) */
  .griglia-articoli:not(.griglia-articoli--home) > li {
    grid-column: auto;
    grid-row: auto;
  }

  /* Footer in 2 colonne */
  .footer__griglia { grid-template-columns: 1fr 1fr; }
  .footer__nav { justify-self: start; }

  /* Sezione Some experiences in colonna unica */
/* ✏️ Su tablet: la sezione passa a colonna unica (testo sopra, foto sotto) */
  .sezione-some-esperienze__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sezione-some-esperienze__testo {
    text-align: left;          /* su mobile torna a sinistra per leggibilità */
    order: -1;                 /* il testo passa SOPRA le foto */
  }
}


/* ----- Mobile (≤ 768px) ----- */
@media (max-width: 768px) {

  /* Mostra il burger, nasconde il menu inline */
  .burger { display: inline-flex; }
  .navigazione__menu { display: none; }

  .navigazione {
    padding: 20px 24px;
    align-items: center;
  }
}


/* ----- Smartphone (≤ 600px) ----- */
@media (max-width: 600px) {

  /* Hero experiences più bassa */
  .hero--experiences { height: 420px; }

  .hero__contenuto {
    height: auto;
    bottom: 24px;
    left: 20px;
    right: 20px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 16px;
  }

    .div-foto-post-section{
    width: 92%;
    }

  .hero__top-left,
  .hero__top-right,
  .hero__bottom-left,
  .hero__bottom-right {
    grid-column: 1;
    justify-self: start;
  }

  .hero__bottom-right { justify-self: start; }

  .hero__titolo { font-size: clamp(36px, 12vw, 64px); }

  /* Hero home */
  .hero--home { min-height: 520px; height: auto; }
  .hero__contenuto-home { padding: 100px 24px 40px; }
  .hero__cta-home { align-self: flex-start; }
  .hero__titolo-home { font-size: clamp(36px, 11vw, 56px); margin-top: 40px; }

  /* Carosello */
  .carosello-wrapper { padding: 0; margin-left: 0; }
  .carosello__scheda { flex: 0 0 100%; }
  .carosello__freccia { margin: 0 8px; }

  /* Griglie: 1 colonna su mobile */
  .griglia-articoli,
  .griglia-articoli--home {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* ✏️ Reset eventuali residui di grid */
  .griglia-articoli:not(.griglia-articoli--home) > li {
    grid-column: auto;
    grid-row: auto;
  }

  /* Sezione Some experiences: stack foto */
  .sezione-some-esperienze__galleria {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sezione-some-esperienze__foto--montagna,
  .sezione-some-esperienze__foto--pasta,
  .sezione-some-esperienze__foto--carne {
    grid-column: 1 / -1;
    margin-top: 0;
    aspect-ratio: 16 / 10;
  }

  /* Footer in colonna */
  .footer__griglia { grid-template-columns: 1fr; }
  .footer__nav { justify-self: start; }
  .footer__colonna-destra {
    align-items: flex-start;
  }
  .footer__link-secondari { align-items: flex-start; }
  .footer__social { justify-content: flex-start; }
  .footer__fondo {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  /* CTA evidenziata: a capo se non ci sta */
  .cta-evidenziata {
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* ----- Smartphone piccoli (≤ 480px) ----- */
@media (max-width: 480px) {
  .titolo-sezione { font-size: clamp(28px, 9vw, 40px); }

  /* Griglia home: 1 colonna su smartphone piccoli */
  .griglia-articoli,
  .griglia-articoli--home {
    grid-template-columns: 1fr;
  }

    .hero__titolo-home { 
      font-size: clamp(36px, 11vw, 56px);
      margin-top: 40px; 
    }
}

/* ============================================================
   21. PAGINA MANIFESTO 🆕
   Componenti specifici della pagina: sezioni testuali, citazioni
   evidenziate, banda ispirazioni, team griglia, modale
============================================================ */

/* Contenitore più stretto per i blocchi di testo (migliore leggibilità) */
.contenitore--stretto {
  max-width: 820px;
}

/* Sezione manifesto: padding verticale e allineamento centrale */
.sezione-manifesto {
  padding: var(--spazio-sezione) 0 40px;
  background: var(--colore-bianco);
}

/* Titolo h2 centrato (variante riutilizzabile) */
.titolo-sezione--centro {
  text-align: center;
  display: block;
  margin: 0 auto 32px;
}

/* Variante chiara per fondi scuri (banda nera "cosa ispira") */
.titolo-sezione--chiaro {
  color: var(--colore-bianco);
}

/* Paragrafi del manifesto */
.paragrafo-manifesto {
  font-size: 16px;
  line-height: 1.7;
  color: var(--colore-grigio-testo);     /* contrasto 12.6:1 su bianco — AAA */
  margin-bottom: 18px;
  text-align: left;
}

/* Citazione gialla evidenziata (riutilizzabile per il manifesto) */
.citazione-evidenziata {
  text-align: center;
  margin: 32px 0 8px;
}

.citazione-evidenziata__highlight {
  display: inline-block;
  background: var(--colore-giallo);
  color: var(--colore-nero);              /* nero su giallo = 15.3:1 — AAA */
  padding: 4px 18px;
  font-weight: 600;
  font-size: 15px;
  font-style: italic;
  border-radius: 2px;
}

/* Riga elenco servizi con highlight giallo */
.elenco-servizi {
  text-align: center;
  margin-top: 24px;
}

.elenco-servizi__highlight {
  display: inline-block;
  background: var(--colore-giallo);
  color: var(--colore-nero);
  padding: 4px 18px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-radius: 2px;
}


/* ============================================================
   22. SEZIONE ISPIRAZIONI (banda nera con 3 card) 🆕
============================================================ */
.sezione-ispirazioni {
  background: var(--colore-nero);
  padding: var(--spazio-sezione) 0;
  margin: 60px 0;
}

.sezione-ispirazioni .titolo-sezione {
  margin-bottom: 40px;
}

.ispirazioni-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}

/* Card grigio scuro su sfondo nero
   Contrasti verificati:
   - sfondo card #262626 su sfondo banda #111: contrasto 1.27:1 (decorativo, ok)
   - testo bianco #fff su card #262626: contrasto 15.1:1 — AAA */
.ispirazione-card {
  background: #262626;
  border: 1.5px solid #3a3a3a;            /* contrasto 1.62:1 con la card — un po' visibile */
  border-radius: 24px;
  padding: 24px 22px;
  color: var(--colore-bianco);
}

.ispirazione-card p {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}


/* ============================================================
   23. SEZIONE TEAM "Meet the minds" 🆕
============================================================ */
.sezione-team {
  padding: var(--spazio-sezione) 0 60px;
  background: var(--colore-bianco);
}

.sezione-team .titolo-sezione {
  margin-bottom: 40px;
}

.team-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Card del team: è un <button>, non un <div> cliccabile */
.team-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: none;
  border-radius: 18px;
  overflow: hidden;
  background: var(--colore-grigio-chiaro);
  cursor: pointer;
  padding: 0;
  transition: transform var(--transizione), box-shadow var(--transizione);
}

.team-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.team-card__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Filtro B&N come nel mock */
  filter: grayscale(100%);
}

/* Etichetta nome: pillola scura solida (NON semitrasparente)
   per garantire contrasto AA sul testo bianco indipendentemente
   dalla foto sottostante (WCAG 1.4.3) */
.team-card__etichetta {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(0, 0, 0, 0.85);        /* abbastanza opaco da garantire contrasto */
  color: var(--colore-bianco);             /* contrasto > 12:1 sul fondo scuro */
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;                    /* il click va al button, non all'etichetta */
}


/* ============================================================
   24. MODALE TEAM (<dialog> nativo) 🆕
============================================================ */
.modale-team {
  /* Reset stili default del <dialog> */
  border: none;
  padding: 0;
  background: transparent;
  max-width: 560px;
  width: calc(100% - 32px);
  border-radius: 20px;
  overflow: visible;

  /* 🆕 Centratura orizzontale + verticale forzata
     <dialog> nativo non centra in tutti i browser, lo facciamo noi */
  margin: auto;
  inset: 0;                    /* equivale a top:0 right:0 bottom:0 left:0 */
}

/* Stato aperto: il browser aggiunge automaticamente l'attributo [open] */
.modale-team[open] {
  animation: modale-apparizione 0.25s ease-out;
}

/* Animazione del backdrop (l'overlay che oscura la pagina dietro) */
.modale-team::backdrop {
  background: rgba(0, 0, 0, 0.6);
  animation: backdrop-apparizione 0.25s ease-out;
}

@keyframes modale-apparizione {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes backdrop-apparizione {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modale-team__contenuto {
  position: relative;
  background: var(--colore-bianco);
  border-radius: 20px;
  padding: 32px 28px 28px;
  text-align: center;
}

/* Pulsante chiudi (X in alto a destra) */
.modale-team__chiudi {
  position: absolute;
  top: 12px;
  right: 12px;
  width: var(--target-minimo);
  height: var(--target-minimo);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colore-grigio-chiaro);
  border-radius: 50%;
  color: var(--colore-nero);
  transition: background var(--transizione);
}

.modale-team__chiudi:hover {
  background: var(--colore-nero);
  color: var(--colore-bianco);
}

.modale-team__chiudi svg {
  width: 22px;
  height: 22px;
}

.modale-team__foto {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 20px;
  background: var(--colore-grigio-chiaro);
  filter: grayscale(100%);
}

.modale-team__nome {
  font-family: var(--font-titolo);
  font-weight: 900;
  font-size: 24px;
  color: var(--colore-nero);
  margin-bottom: 4px;
}

.modale-team__ruolo {
  font-size: 14px;
  font-weight: 600;
  color: var(--colore-primario);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.modale-team__bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--colore-grigio-testo);
  text-align: left;
}


/* ============================================================
   25. RESPONSIVE — PAGINA MANIFESTO 🆕
============================================================ */
@media (max-width: 900px) {
  .ispirazioni-griglia { grid-template-columns: 1fr; gap: 14px; }
  .team-griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .sezione-manifesto { padding: 48px 0 24px; }
  .sezione-ispirazioni { padding: 48px 0; margin: 40px 0; }
  .sezione-team { padding: 48px 0 32px; }

  .team-griglia { grid-template-columns: 1fr; }

  .citazione-evidenziata__highlight,
  .elenco-servizi__highlight {
    font-size: 14px;
    padding: 4px 12px;
  }

  .modale-team__contenuto { padding: 28px 20px 24px; }
  .modale-team__foto { width: 110px; height: 110px; }
  .modale-team__nome { font-size: 20px; }
}


/* ============================================================
   26. PAGINA BLOG 🆕
   Componenti: intro centrato + griglia articoli a mosaico
============================================================ */

/* Sezione intro con titolo + paragrafo centrati */
.sezione-blog-intro {
  padding: var(--spazio-sezione) 0 40px;
  background: var(--colore-bianco);
}

.blog-intro__paragrafo {
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: var(--colore-grigio-testo);     /* contrasto 12.6:1 — AAA */
  max-width: 560px;
  margin: 24px auto 0;
}


/* ============================================================
   27. GRIGLIA BLOG (mosaico asimmetrico) 🆕
============================================================ */
.sezione-blog-griglia {
  padding: 40px 0 var(--spazio-sezione);
  background: var(--colore-bianco);
}

.blog-griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 100px;            /* riga base; le card spannano più righe */
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Altezze diverse per creare la composizione asimmetrica del mock */
.blog-griglia__cella--media { grid-row: span 3; }
.blog-griglia__cella--alta  { grid-row: span 4; }


/* ============================================================
   28. BLOG CARD (immagine + etichetta titolo) 🆕
   Riusa il pattern della team-card ma è un <a> (link a pagina articolo)
============================================================ */
.blog-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--colore-grigio-chiaro);  /* placeholder finché carica l'immagine */
  color: inherit;
  transition: transform var(--transizione), box-shadow var(--transizione);
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.blog-card__immagine {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-card__immagine {
  transform: scale(1.04);
}

/* Etichetta titolo: pillola scura solida (NON troppo semitrasparente)
   per garantire contrasto AA del bianco sulla pillola, indipendentemente
   dalla foto sottostante (WCAG 1.4.3) */
.blog-card__etichetta {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;                            /* limita la larghezza alla card */
  max-width: max-content;
  background: rgba(0, 0, 0, 0.78);        /* abbastanza opaco per contrasto */
  color: var(--colore-bianco);             /* contrasto > 10:1 sul fondo scuro */
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: none;                    /* il click va al link, non all'etichetta */
  /* Backdrop-filter per un effetto "vetro" più moderno (degradante se non supportato) */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* ============================================================
   29. RESPONSIVE — PAGINA BLOG 🆕
============================================================ */
@media (max-width: 900px) {
  .blog-griglia {
    grid-auto-rows: 80px;
    gap: 18px;
  }
  .blog-griglia__cella--media { grid-row: span 3; }
  .blog-griglia__cella--alta  { grid-row: span 4; }
}

@media (max-width: 600px) {
  .sezione-blog-intro { padding: 48px 0 24px; }
  .sezione-blog-griglia { padding: 24px 0 48px; }

  /* Su mobile: una colonna sola, altezze più uniformi */
  .blog-griglia {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
    gap: 16px;
  }

  /* Tutte le card prendono span 1 su mobile (più leggibile) */
  .blog-griglia__cella--media,
  .blog-griglia__cella--alta {
    grid-row: span 1;
  }

  .blog-card__etichetta {
    font-size: 12px;
    padding: 7px 14px;
  }
}


/* ============================================================
   30. PAGINA CONTACT 🆕
============================================================ */

/* Variante hero per Contact: il titolo "Contact us" sta in basso a sinistra
   ma occupa una sola riga, e la colonna destra ha CTA + social verticali */
.hero--contact .hero__contenuto {
  height: 280px;
}

.hero__top-right--colonna {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

/* Social mini-list nell'hero */
.hero__social {
  display: flex;
  gap: 8px;
}

.hero__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-minimo);
  height: var(--target-minimo);
  background: rgba(0, 0, 0, 0.55);        /* scuro su rosso → contrasto del testo bianco interno garantito */
  color: var(--colore-bianco);
  border-radius: 8px;
  transition: background var(--transizione), transform var(--transizione);
}

.hero__social-link:hover {
  background: var(--colore-nero);
  transform: translateY(-2px);
}

.hero__social-link svg {
  width: 22px;
  height: 22px;
}


/* ============================================================
   31. SEZIONE CONTATTO (Get in touch + form) 🆕
============================================================ */
.sezione-contatto {
  padding: var(--spazio-sezione) 0;
  background: var(--colore-bianco);
}

.sezione-contatto__intestazione {
  text-align: center;
  margin-bottom: 48px;
}

.sezione-contatto__recapiti {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  margin-top: 24px;
  font-style: normal;                      /* reset <address> default italic */
}

.sezione-contatto__recapito {
  font-size: 16px;
  color: var(--colore-grigio-testo);       /* contrasto 12.6:1 — AAA */
  font-weight: 500;
  padding: 6px 4px;
  min-height: var(--target-minimo);
  display: inline-flex;
  align-items: center;
  transition: color var(--transizione);
}

.sezione-contatto__recapito:hover {
  color: var(--colore-primario);
  text-decoration: underline;              /* non solo cambio colore (WCAG 1.4.1) */
  text-underline-offset: 3px;
}


/* ============================================================
   32. FORM CONTATTO 🆕
   Accessibilità integrata:
   - WCAG 1.3.1 — <label> veri per ogni campo
   - WCAG 1.4.11 — bordi con contrasto sufficiente (--colore-grigio-bordo)
   - WCAG 2.5.8 — checkbox 24px+ (qui 26px) e target 44px
   - WCAG 3.3.2 — etichette persistenti, indicazioni "obbligatorio"
============================================================ */
.form-contatto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
  max-width: 980px;
  margin: 0 auto;
}

.form-contatto__campo {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Campo che occupa entrambe le colonne (Messaggio) */
.form-contatto__campo--largo {
  grid-column: 1 / -1;
}

/* Etichetta del campo: SEMPRE visibile (non placeholder!)
   Risolve WCAG 1.3.1 e 3.3.2 — l'etichetta non scompare mai */
.form-contatto__etichetta {
  font-size: 13px;
  font-weight: 500;
  color: var(--colore-grigio-testo);       /* contrasto 12.6:1 — AAA */
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

/* Asterisco "obbligatorio": visivo (aria-hidden), la nota testuale "Tutti i
   campi obbligatori" è il vero indicatore per gli screen reader */
.form-contatto__obbligatorio {
  color: var(--colore-primario);           /* rosso su bianco = 4.74:1 — AA */
  font-weight: 700;
  margin-left: 2px;
}

/* Input testuali e textarea: stile minimale con bordo INFERIORE
   Il bordo inferiore è abbastanza spesso (2px) e contrastato per essere
   visibile e percepibile (WCAG 1.4.11) */
.form-contatto__input,
.form-contatto__textarea {
  font-family: inherit;
  font-size: 16px;                          /* 16px minimo per evitare zoom su iOS */
  color: var(--colore-nero);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--colore-grigio-bordo);  /* 4.83:1 — AA */
  padding: 8px 0 10px;
  min-height: var(--target-minimo);
  width: 100%;
  transition: border-color var(--transizione);
}

.form-contatto__textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}

/* Focus visibile sul campo: cambio bordo + outline esterno (NON solo colore) */
.form-contatto__input:focus,
.form-contatto__textarea:focus {
  border-bottom-color: var(--colore-primario);
  outline: 3px solid var(--colore-focus);
  outline-offset: 6px;
  border-radius: 2px;
}

/* Stato di errore (per quando attiverai la validazione) */
.form-contatto__input:invalid:not(:placeholder-shown),
.form-contatto__textarea:invalid:not(:placeholder-shown) {
  border-bottom-color: var(--colore-primario);
}

/* Nota "campi obbligatori" */
.form-contatto__nota {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--colore-grigio-testo);
  text-align: right;
  margin-top: -16px;
}

.form-contatto__nota span {
  color: var(--colore-primario);
  font-weight: 700;
}

/* ----- Checkbox custom accessibile -----
   - <input type="checkbox"> nativo (mai sostituirlo con un div!)
   - L'input è visibile (24px+ → WCAG 2.5.8) ma stilizzato con appearance: none
   - L'etichetta è cliccabile (collegata via for/id)
*/
.form-contatto__checkbox-gruppo {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.form-contatto__checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 26px;                              /* > 24px → WCAG 2.5.8 */
  height: 26px;
  margin-top: 2px;                          /* allineamento con baseline testo */
  border: 2px solid var(--colore-grigio-bordo);  /* contrasto AA */
  border-radius: 4px;
  background: var(--colore-bianco);
  cursor: pointer;
  position: relative;
  transition: background var(--transizione), border-color var(--transizione);
}

.form-contatto__checkbox:checked {
  background: var(--colore-nero);
  border-color: var(--colore-nero);
}

/* Segno di spunta: SVG inline come pseudo-elemento */
.form-contatto__checkbox:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-11'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.form-contatto__checkbox:focus-visible {
  outline: 3px solid var(--colore-focus);
  outline-offset: 3px;
}

.form-contatto__checkbox-etichetta {
  font-size: 14px;
  color: var(--colore-grigio-testo);
  line-height: 1.5;
  cursor: pointer;
  /* min-height per target tap totale (input + label) ≥ 44px */
  min-height: var(--target-minimo);
  display: flex;
  align-items: center;
}

.form-contatto__link-privacy {
  color: var(--colore-nero);
  text-decoration: underline;
  font-weight: 500;
}

.form-contatto__link-privacy:hover {
  color: var(--colore-primario);
}

/* Pulsante invio centrato */
.form-contatto__azioni {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.form-contatto__invio {
  /* il button submit eredita .pulsante-pillola */
  cursor: pointer;
  border: none;
}

/* Variante icona rossa per il bottone invio (come da mock) */
.pulsante-pillola__icona--rossa {
  background: var(--colore-primario);
}

.pulsante-pillola:hover .pulsante-pillola__icona--rossa {
  background: var(--colore-bianco);
  color: var(--colore-primario);
}


/* ============================================================
   33. MAPPA GOOGLE 🆕
============================================================ */
.sezione-mappa {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--colore-grigio-chiaro); /* fallback se la mappa non carica */
}

.sezione-mappa__iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: none;
}


/* ============================================================
   34. RESPONSIVE — PAGINA CONTACT 🆕
============================================================ */
@media (max-width: 768px) {
  .hero--contact .hero__contenuto {
    height: auto;
  }

  /* Form: una colonna sola */
  .form-contatto {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .form-contatto__nota {
    text-align: left;
    margin-top: -8px;
  }

  .form-contatto__campo--largo {
    grid-column: 1;
  }

  .form-contatto__checkbox-gruppo {
    grid-column: 1;
    justify-content: flex-start;
  }

  .form-contatto__azioni {
    grid-column: 1;
  }

  .sezione-mappa__iframe {
    height: 320px;
  }

  .hero__social {
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  .sezione-contatto { padding: 48px 0; }
  .form-contatto__checkbox-etichetta { font-size: 13px; }
}


/* ================================================================================================================================================================================================================================
BANNER LOGHI  ================================================================================================================================================================================================================================
*/

/* ✏️ banner-loghi: ora contiene loghi immagine veri, non testo */
.banner-loghi {
  background-color: #060606;
  border-top: 1px solid var(--colore-grigio-bordo);
  border-bottom: 1px solid var(--colore-grigio-bordo);
  padding: 32px 0;
  overflow: hidden;
  margin: 60px 0;
}

.banner-loghi__binario {
  display: flex;
  gap: 60px;
  align-items: center;
  animation: scorrimento-loghi 60s linear infinite;  /* ✏️ 60s perché ora sono 60 loghi (era 18s per 10) */
  width: max-content;
}

.banner-loghi__elemento {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;                     /* 🆕 altezza uniforme per tutti i loghi */
}

/* 🆕 NUOVA: stile per i loghi immagine */
.banner-loghi__immagine {
  max-height: 100%;
  width: auto;
  max-width: 140px;                 /* limite di larghezza per loghi orizzontali */
  object-fit: contain;              /* mantiene proporzioni senza ritaglio */
  display: block;
  /* Filtro grayscale leggero per uniformità visiva, si toglie al hover */
  filter: grayscale(60%);
  opacity: 0.85;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.banner-loghi__elemento:hover .banner-loghi__immagine {
  filter: grayscale(0%);
  opacity: 1;
}

/* Pausa l'animazione al hover (utile per leggere i loghi) */
.banner-loghi:hover .banner-loghi__binario {
  animation-play-state: paused;
}

/* Animazione: scorre del 50% (la prima metà = lista originale) */
@keyframes scorrimento-loghi {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}