/* ============================================================
   ARVIO · pages/home.css
   Stili specifici della home. Generico vive in layout/components.
   ============================================================ */

/* ---- Hero · allineata a sinistra, centrata in verticale (D12) ---- */
.hero-home {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  /* aria sotto la navbar fissa: gap chiaro navbar to eyebrow (D15) */
  padding-top: calc(var(--header-h) + var(--space-m));
  padding-bottom: var(--space-m);
  overflow: hidden;
}

/* ---- Hero · fotografia di sfondo + velo navy per leggibilita ---- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Scrim neutro (nero, non blu): scurisce solo dietro al testo per leggibilita */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.55) 34%,
    rgba(0, 0, 0, 0.22) 62%,
    rgba(0, 0, 0, 0) 88%
  );
}

.hero-home > .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .hero-bg img { object-position: center; }
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.74) 0%,
      rgba(0, 0, 0, 0.42) 40%,
      rgba(0, 0, 0, 0.16) 66%,
      rgba(0, 0, 0, 0) 86%
    );
  }

  /* Blocco testo centrato verticalmente nel fold (feedback Davide, vista iPhone).
     Padding simmetrico sopra/sotto cosi titolo, lead e CTA cadono a meta schermo. */
  .hero-home {
    justify-content: center;
    padding-top: var(--header-h);
    padding-bottom: var(--header-h);
  }
  .hero-home .eyebrow { display: none; }

  /* Piu peso al blocco testo della hero su mobile (feedback Davide) */
  .hero-home h1 { font-size: 2.65rem; }
  .hero-home .lead { font-size: 1.35rem; }

  /* CTA impilati e allineati a sinistra. Selettore piu specifico (.hero-home .hero-cta)
     per battere la regola base .hero-cta { align-items: center } che viene dopo nel file. */
  .hero-home .hero-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  /* CTA hero su mobile: pill stessa misura, font interno piu grande per leggibilita */
  .hero-home .hero-cta .btn {
    margin-left: 0;
    font-size: 0.8125rem;
    padding: 0.62rem 1.55rem;
    gap: 0.45em;
  }
  /* Su mobile il copper si confonde con la tenda calda: CTA parchment, testo navy */
  .hero-home .hero-cta .btn-copper {
    background: var(--parchment);
    color: var(--navy);
    border-color: var(--parchment);
  }
  .hero-home .hero-cta .btn-copper:hover {
    background: var(--white);
    color: var(--navy);
    border-color: var(--white);
  }
}

.hero-home__inner {
  max-width: var(--container-editorial);
}

.hero-home .eyebrow {
  margin-bottom: var(--space-s);
}

.hero-home .lead {
  margin-top: var(--space-s);
  max-width: 42ch;
}

.hero-home .scroll-indicator {
  position: absolute;
  bottom: var(--space-m);
  left: 50%;
  transform: translateX(-50%);
}

/* CTA hero · allineati a sinistra */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

/* Hover del CTA in hero home: bianco (richiesta Davide) */
.hero-home .btn-copper:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.hero-home .btn-link {
  color: var(--white);
}

.hero-home .btn-link:hover {
  color: var(--copper-light);
}

/* ---- Sezione 01 · Manifesto · asimmetrico, a sinistra (D32) ---- */
.manifesto {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

@media (min-width: 900px) {
  .manifesto {
    grid-template-columns: 5fr 6fr;
    column-gap: var(--space-l);
    align-items: start;
  }
}

.manifesto__statement {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
}

.manifesto__body {
  max-width: 56ch;
}

.manifesto__body > * + * {
  margin-top: var(--space-s);
}

/* ---- Sezione 02 · La sequenza (colonna verticale, numero a sinistra) ---- */
.sequence {
  margin-top: var(--space-m);
}

.sequence__step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  padding-block: var(--space-m);
  border-top: 0.5px solid var(--hairline-stone);
}

.sequence__step:last-child {
  border-bottom: 0.5px solid var(--hairline-stone);
}

.sequence__num {
  line-height: 1;
}

@media (min-width: 768px) {
  .sequence__step {
    grid-template-columns: 8rem 1fr;
    column-gap: var(--space-l);
    align-items: start;
  }
}

.sequence__body {
  max-width: 52ch;
}

.sequence__body h3 {
  margin-bottom: var(--space-xs);
}

/* ---- Sezione 03 · Quattro servizi (card navy 2x2) ---- */
.services-grid .card-navy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 100%;
}

.services-grid .card-navy h3 {
  color: inherit;
}

.services-grid .card-navy p {
  color: inherit;
  opacity: 0.82;
  flex: 1;
}

.services-grid .card-navy .big-numeral {
  color: var(--copper-light);
  transition: color var(--t-medium);
}

.services-grid .card-navy:hover .big-numeral {
  color: var(--copper-text);
}

.services-grid .card-navy .btn-link {
  margin-top: var(--space-s);
  color: var(--copper-light);
  transition: color var(--t-medium);
}

.services-grid .card-navy:hover .btn-link {
  color: var(--copper-text);
}

/* ---- Sezione 04 · Teaser Analisi (card bianche su parchment) ---- */
.analisi-grid .card-white {
  display: flex;
  flex-direction: column;
}

.analisi-grid .card-white .card-title {
  margin-block: var(--space-xs);
}

.analisi-grid .card-white .card-excerpt {
  flex: 1;
}

.analisi-grid .card-white .btn-link {
  margin-top: var(--space-s);
}

/* ---- Header di sezione + link di coda ---- */
.section-head {
  margin-bottom: var(--space-m);
}

.section-head .lead {
  margin-top: var(--space-s);
  max-width: 48ch;
}

.section-tail {
  margin-top: var(--space-m);
}

/* ---- Teaser contatto ---- */
.contact-teaser .lead {
  margin-block: var(--space-s) var(--space-m);
  max-width: 40ch;
  margin-inline: auto;
}