/* ==========================================================================
   index.css — stili specifici della home page
   ========================================================================== */

/* Il margine orizzontale unico della home (--page-gutter) è definito in
   base.css ed è condiviso da tutte le pagine. */

h1, h2, h3, p { margin-top: 0; }

/* In home le immagini riempiono sempre il loro contenitore */
img { width: 100%; height: 100%; object-fit: cover; }

/* Hero a tutto schermo: sostituisci il percorso della foto */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  color: var(--white);
  background: var(--green);
}
.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-image img { object-position: center; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Il logo resta al centro, il claim è ancorato in basso a sinistra */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12vh var(--page-gutter) 9vh;
}
.hero-logo {
  flex: 0 0 auto;
  width: min(clamp(160px, 24vw, 360px), 36vh);
}
.hero-logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.hero-text {
  position: absolute;
  left: var(--page-gutter);
  right: var(--page-gutter);
  bottom: 9vh;
  text-align: left;
}
.hero h1 {
  max-width: 900px;
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 3.8rem);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.05;
}
.hero-copy { max-width: 470px; margin: 0; font-size: clamp(.9rem, 1.1vw, 1.05rem); }

/* Intro della home: logo grande al centro, poi claim, menu e lingue.
   Le animazioni partono da sole (CSS) e riempiono lo stato finale.
   La classe .home-intro-animate viene aggiunta da index.html solo quando si
   arriva dall'esterno del sito: navigando da vini.html o visita.html la
   home compare subito, senza sequenza d'ingresso. */
@keyframes introLogoIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes introFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes introFadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.home-intro-animate .hero-logo {
  animation: introLogoIn .9s cubic-bezier(.22, 1, .36, 1) .15s both;
}
.home-intro-animate .hero-text {
  animation: introFadeUp .8s cubic-bezier(.22, 1, .36, 1) 1.4s both;
}
.home-intro-animate .menu-toggle,
.home-intro-animate .lang-toggle {
  animation: introFadeDown .7s ease 2.2s both;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid currentColor;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.text-link::after { content: "↗"; font-size: 1rem; }

/* Sezioni alternate foto/testo */
.story-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 650px;
}
.story-section.reverse .story-image { order: 2; }
.story-section.reverse .story-content { order: 1; }

/* L'Azienda: due immagini impilate nella colonna sinistra, testo a destra */
#azienda.story-section {
  grid-template-areas:
    "img1 text"
    "img2 text";
  align-items: center;
}
#azienda .story-image-duo-first { grid-area: img1; }
#azienda .story-image-duo-second { grid-area: img2; }
#azienda .story-content { grid-area: text; }
/* Margine bianco attorno alle foto: non toccano bordi, hero e altre immagini.
   La foto non occupa più tutta l'altezza della colonna di testo: ha un
   formato orizzontale (3:2) con un tetto di altezza e resta centrata. */
.story-image {
  align-self: center;
  aspect-ratio: 3 / 2;
  max-height: 60vh;
  margin: var(--page-gutter);
  background: var(--sand);
  overflow: hidden;
}
/* Variante con due foto impilate (sezione "L'Azienda") */
.story-image-duo {
  display: flex;
  flex-direction: column;
  gap: clamp(.75rem, 1.5vw, 1.5rem);
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
  background: transparent;
}
.story-image-duo img {
  height: auto;
  aspect-ratio: 3 / 2;
  width: 100%;
}
.story-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6.5vw, 7rem) var(--page-gutter);
}
.story-content h2 {
  max-width: 600px;
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.08;
}
.story-content p:not(.eyebrow) { max-width: 490px; color: #353535; }
.story-content .text-link { margin-top: 1rem; }
.bg-green { background: var(--green); color: var(--white); }
.bg-green p:not(.eyebrow) { color: rgba(255,255,255,.82); }
.bg-sand { background: var(--sand); }
.bg-yellow { background: var(--yellow); }

/* Pannelli gialli (sezioni "Il territorio" e "Visita la nostra cantina"):
   hanno lo stesso margine bianco delle foto, così i bordi di immagini e
   pannelli restano allineati. Il padding interno è invece lo spazio tra il
   bordo del pannello e il testo e resta un valore a sé. */
.story-content.bg-yellow,
.contact-copy.bg-yellow {
  --panel-padding: clamp(1.25rem, 3vw, 3rem);
  /* Spazio verticale ridotto rispetto alle altre sezioni: il pannello
     giallo non ha bisogno di tutta l'aria dei blocchi senza sfondo. */
  --panel-padding-y: clamp(1.5rem, 3.5vw, 3.5rem);
  margin-left: var(--page-gutter);
  margin-right: var(--page-gutter);
  padding: var(--panel-padding-y) var(--panel-padding);
}
.contact-copy.bg-yellow {
  /* Stacca il pannello dalla riga verde che chiude il footer: il bianco
     sotto è lo stesso delle foto, così il giallo e l'immagine finiscono
     allineati. */
  margin-bottom: var(--page-gutter);
}

/* Sezioni senza pannello colorato: il testo occupa tutta la colonna, così
   anche il margine destro coincide con il gutter della pagina. */
.story-section:not(.reverse) .story-content:not(.bg-yellow) h2,
.story-section:not(.reverse) .story-content:not(.bg-yellow) p:not(.eyebrow) {
  width: 100%;
  max-width: none;
}

/* Stessa cosa nei pannelli gialli: h2 e paragrafi hanno dei max-width
   (600px / 490px / 480px) che, sommati ad align-items: flex-start, fanno
   fermare il testo molto prima del padding destro. Qui il testo deve
   occupare tutta la larghezza interna del pannello, così i due margini
   risultano uguali. */
.story-content.bg-yellow h2,
.story-content.bg-yellow p:not(.eyebrow),
.contact-copy.bg-yellow h2,
.contact-copy.bg-yellow p {
  width: 100%;
  max-width: none;
}

/* Vini */
/* Stesso margine bianco delle foto e dei pannelli delle altre sezioni:
   lo spazio sopra e sotto la sezione coincide con --page-gutter. */
.wine-section { padding: var(--page-gutter); background: var(--white); }
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}
.section-heading h2 {
  margin: 0;
  font: 600 clamp(2.4rem, 4.8vw, 4.6rem)/1.05 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.wine-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--page-gutter);
}
.wine-collection-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 760px;
  background: var(--green);
  overflow: hidden;
}
.wine-collection-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.wine-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 3vw, 3rem) 0;
}
/* Titolo uguale a quello de "Il territorio": stessa dimensione e stesso stile */
.wine-description h2 {
  max-width: 600px;
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .02em;
}
.wine-description p {
  max-width: 480px;
  margin: 0;
  color: #353535;
}
/* Anche qui il testo arriva al margine destro della colonna. */
.wine-description h2,
.wine-description p {
  width: 100%;
  max-width: none;
}
.wine-description .wine-note {
  margin-top: 1.5rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wine-description .text-link { margin-top: 1.5rem; }

/* Partner */
/* La sezione non ha padding superiore: lo spazio dalla sezione contatti è
   già quello lasciato dal margine inferiore della sezione precedente. */
.partners-section {
  padding: 0 var(--page-gutter) calc(var(--page-gutter) * 2);
  background: var(--white);
}
.partners-heading {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.partners-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .02em;
}
.partners-heading p {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #353535;
}
/* I loghi hanno formati molto diversi tra loro: ogni cella ha la stessa
   larghezza e il logo si adatta dentro i limiti senza deformarsi. */
.partners-logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
}
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(84px, 10vw, 140px);
}
.partner-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}
.partner-logo a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
.partner-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(64px, 8vw, 112px);
  object-fit: contain;
}

/* Contatti */
.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  color: var(--black);
}
.contact-copy { padding: clamp(3rem, 6.5vw, 7rem) var(--page-gutter); display: flex; flex-direction: column; justify-content: center; }
/* Il link non deve stirarsi alla larghezza della colonna: la riga di
   sotto deve coprire solo la frase, come nella sezione vini. */
.contact-copy .text-link { align-self: flex-start; margin-top: 1.5rem; }
/* Titolo e paragrafo con gli stessi valori della sezione "I vini" */
.contact-copy h2 {
  max-width: 600px;
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .02em;
}
.contact-image { min-height: 500px; margin: var(--page-gutter); }
.contact-copy p { max-width: 480px; margin: 0; color: #353535; }

/* Logo alternativi (placeholder in attesa del file definitivo) */
.logo-pdf { display: block; width: 165px; height: 92px; border: 0; overflow: hidden; }
.logo-placeholder {
  display: inline-block;
  border: 1px solid currentColor;
  padding: .65rem .8rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: .12em;
}

/* Desktop: nelle sezioni a due colonne il gutter centrale è uno solo.
   Lo spazio viene diviso a metà tra i due elementi, così immagine e testo
   restano simmetrici e il centro misura esattamente --page-gutter. */
@media (min-width: 761px) {
  .story-section:not(.reverse) .story-image { margin-right: calc(var(--page-gutter) / 2); }
  .story-section.reverse .story-image { margin-left: calc(var(--page-gutter) / 2); }

  .story-section:not(.reverse) .story-content:not(.bg-yellow) { padding-left: calc(var(--page-gutter) / 2); }
  .story-section.reverse .story-content:not(.bg-yellow) { padding-right: calc(var(--page-gutter) / 2); }

  .story-section:not(.reverse) .story-content.bg-yellow { margin-left: calc(var(--page-gutter) / 2); }
  .story-section.reverse .story-content.bg-yellow { margin-right: calc(var(--page-gutter) / 2); }

  .contact-copy.bg-yellow { margin-right: calc(var(--page-gutter) / 2); }
  .contact-image { margin-left: calc(var(--page-gutter) / 2); }

  /* Nelle sezioni con pannello giallo l'immagine deve coprire esattamente
     la stessa altezza del pannello. L'immagine viene allungata sulla riga
     della griglia, mentre il figlio <img> è assoluto: così non contribuisce
     all'altezza della riga, che resta determinata dal pannello giallo.
     I margini orizzontali restano quelli definiti sopra. */
  .story-section:has(.story-content.bg-yellow) .story-image,
  .contact-image {
    position: relative;
    align-self: stretch;
    aspect-ratio: auto;
    max-height: none;
    margin-top: 0;
  }
  .story-section:has(.story-content.bg-yellow) {
    /* Il pannello giallo si dimensiona sul testo: senza l'altezza minima
       della sezione il contenuto non resta centrato in un blocco troppo
       alto, che lascerebbe molto giallo vuoto sopra e sotto. */
    min-height: 0;
  }
  .story-section:has(.story-content.bg-yellow) .story-image {
    margin-bottom: 0;
  }
  .contact-image {
    /* Stesso margine inferiore del pannello giallo. Niente altezza minima:
       è il testo del pannello a determinare l'altezza della riga e quindi
       anche quella della foto. */
    margin-bottom: var(--page-gutter);
    min-height: 0;
  }
  .story-section:has(.story-content.bg-yellow) .story-image img,
  .contact-image img {
    position: absolute;
    inset: 0;
  }
}

@media (max-width: 760px) {
  /* Ritmo verticale: --section-space separa le quattro sezioni,
     --block-space lega invece immagine e testo/pannello della stessa
     sezione. */
  :root {
    --section-space: 80px;
    --block-space: clamp(1.5rem, 4vw, 2.5rem);
  }

  /* Mobile: immagini e pannelli gialli a filo dello schermo. Il gutter
     orizzontale resta solo per i testi (padding interno dei pannelli,
     padding delle sezioni). */
  .story-image,
  .contact-image {
    margin-left: 0;
    margin-right: 0;
  }
  /* Con aspect-ratio + max-height l'immagine si restringe e lascia un
     margine a destra: la forziamo a tutta larghezza. I margini verticali
     sono gestiti dal ritmo di sezione qui sotto. */
  .story-image {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Solo il primo blocco immagini dopo la hero ha lo spazio di sezione
     sopra: gli altri lo ricevono dal padding della sezione precedente. */
  .hero + .story-section .story-image {
    margin-top: 0;
  }
  /* Per la prima foto dell'azienda dopo hero (deve restare sopra al testo) */
  .hero + #azienda .story-image-duo-first {
    margin-top: var(--block-space);
    margin-bottom: 0;
  }
  /* Spazio tra seconda foto dell'azienda e foto del territorio */
  #azienda .story-image-duo-second {
    margin-bottom: var(--block-space);
  }
  #territorio .story-image {
    margin-top: 0;
  }
  /* Nessun margine extra tra le altre sezioni */
  #azienda,
  #territorio,
  #vini,
  #contatti {
    margin: 0;
  }

  /* L'Azienda: su mobile la prima foto resta sopra al testo, la seconda va dopo */
  #azienda.story-section {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  #azienda .story-image-duo-first {
    order: 1;
    grid-area: unset;
    margin-top: var(--block-space);
    margin-bottom: 0;
  }
  #azienda .story-content {
    order: 2;
    padding-top: var(--block-space);
    padding-bottom: var(--block-space);
  }
  #azienda .story-image-duo-second {
    order: 3;
    grid-area: unset;
    margin-top: 0;
    margin-bottom: var(--block-space);
  }
  .story-content.bg-yellow,
  .contact-copy.bg-yellow {
    margin-left: 0;
    margin-right: 0;
    --panel-padding-y: var(--block-space);
  }
  /* Il pannello giallo attaccato alla sua immagine, senza margine bianco. */
  .story-content.bg-yellow {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* L'immagine dei vini sta dentro il padding della sezione: la allarghiamo
     di due gutter e la spostiamo a sinistra, così arriva ai bordi. */
  .wine-collection-image {
    width: calc(100% + var(--page-gutter) * 2);
    margin-left: calc(var(--page-gutter) * -1);
    margin-right: calc(var(--page-gutter) * -1);
  }

  .hero { min-height: 100svh; }
  .hero-content { padding: 14vh var(--page-gutter) 8vh; }
  .hero-logo {
    width: min(clamp(150px, 42vw, 240px), 34vh);
  }
  .hero-text {
    left: var(--page-gutter);
    right: var(--page-gutter);
    bottom: 8vh;
    text-align: left;
  }
  .hero h1 { font-size: clamp(1.5rem, 5.8vw, 2.6rem); max-width: 100%; overflow-wrap: break-word; line-height: 1.05; margin: 0 0 0.5rem; }
  .hero-copy { font-size: clamp(.85rem, 2.8vw, 1rem); margin: 0; }
  .story-section { grid-template-columns: 1fr; min-height: 0; margin: 0; }
  .story-section.reverse .story-image,
  .story-section.reverse .story-content { order: initial; }
  .story-image { aspect-ratio: 3 / 2; max-height: 60vw; }
  .story-image-duo { aspect-ratio: auto; max-height: none; gap: 40px; }
  .story-content { padding: var(--block-space) var(--page-gutter) var(--block-space); }
  .story-content h2 { font-size: clamp(1.8rem, 7.5vw, 3rem); }
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: var(--block-space);
  }
  .wine-section { padding: 0 var(--page-gutter); margin-bottom: 0; }
  .wine-feature { grid-template-columns: 1fr; gap: var(--block-space); }
  .wine-collection-image { aspect-ratio: 3 / 4; max-height: 680px; }
  .wine-description { padding: 0; padding-bottom: var(--block-space); }
  .wine-description h2 { font-size: clamp(1.8rem, 7.5vw, 3rem); }
  /* Partner su mobile: due loghi per riga, l'ultimo centrato */
  .partners-section { padding: 0 var(--page-gutter) calc(var(--block-space) * 2); }
  .partners-heading { margin-bottom: var(--block-space); }
  .partners-heading h2 { font-size: clamp(1.8rem, 7.5vw, 3rem); }
  .partners-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem var(--page-gutter);
  }
  .partner-logo { min-height: 88px; }
  .partner-logo img { max-height: 76px; }
  .partner-logo:last-child { grid-column: 1 / -1; }
  .contact-section { grid-template-columns: 1fr; }
  .contact-copy { padding: 4rem var(--page-gutter); }
  .contact-copy.bg-yellow { margin: 0; }
  .contact-copy h2 { font-size: clamp(1.8rem, 7.5vw, 3rem); }
  /* Su mobile l'immagine viene prima del pannello giallo */
  .contact-image {
    order: -1;
    min-height: 60vw;
    max-height: 500px;
    margin-top: var(--block-space);
    margin-bottom: 0;
  }
  .contact-section {
    margin-bottom: 0;
  }
  .contact-copy.bg-yellow {
    margin-bottom: var(--block-space);
  }
  .site-footer {
    margin-top: 0;
  }
}