/* ============================================================
   Home (mobile first): il film del giardino che si costruisce
   mentre scorri, poi introduzione, listino, lavori, voci dei
   clienti e chiusura. Listino e schede foto servono anche a
   servizi.html e portfolio.html.
   ============================================================ */

/* --- Film guidato dallo scroll --- */
.film {
  position: relative;
  height: 380vh;
  background: var(--bosco);
}

.film__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  color: #fff;
}

.film__video,
.film__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* in verticale teniamo al centro il sentiero e il muro a secco */
  object-position: 40% 70%;
}

/* L'immagine finale fa da riserva: prima che il video sia pronto,
   se non arriva, o con il movimento ridotto */
.film__still--end {
  opacity: 0;
}

.film.is-fallback .film__video {
  display: none;
}

.film__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(14, 22, 17, 0.85) 0%, rgba(14, 22, 17, 0.45) 45%, rgba(14, 22, 17, 0) 70%),
    linear-gradient(to bottom, rgba(14, 22, 17, 0.5) 0%, rgba(14, 22, 17, 0) 22%);
  pointer-events: none;
  transition: opacity 350ms var(--ease);
}

.film__layout {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: var(--s-3);
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

.film__copy {
  transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}

.film__copy h1 {
  color: #fff;
  max-width: 11ch;
  margin-bottom: var(--s-2);
}

.film__copy p {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  max-width: 40ch;
}

.film__copy .actions {
  margin-top: var(--s-3);
}

/* Su telefono il testo coprirebbe il giardino: si ritira mentre il
   giardino si costruisce e torna alla fine */
.film.is-building .film__copy {
  opacity: 0;
  transform: translateY(1.5rem);
  pointer-events: none;
}

.film.is-building .film__scrim {
  opacity: 0.4;
}

/* Fasi del cantiere: è davvero una sequenza.
   Telefono: quattro segmenti in riga. Desktop: elenco numerato. */
.film__phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  counter-reset: fase;
}

.film__phases li {
  counter-increment: fase;
  padding-top: 0.5rem;
  border-top: 2px solid rgba(255, 255, 255, 0.28);
  font-size: 0.75rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.6);
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}

.film__phases li.is-done,
.film__phases li.is-active {
  border-top-color: var(--sera);
}

.film__phases li.is-active {
  color: #fff;
  font-weight: 600;
}

.film__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
}

.film__progress span {
  display: block;
  height: 100%;
  background: var(--sera);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}

.film__hint {
  position: absolute;
  top: 24%;
  left: 50%;
  translate: -50% 0;
  margin: 0;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  background: rgba(14, 22, 17, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.9rem;
  white-space: nowrap;
  color: #fff;
  transition: opacity 400ms var(--ease);
}

.film.is-scrolled .film__hint {
  opacity: 0;
}

.film__credit {
  position: absolute;
  top: calc(var(--header-h) + 0.25rem);
  right: var(--gutter);
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 640px) {
  .film__phases li {
    font-size: 0.85rem;
  }
}

@media (min-width: 900px) {
  .film {
    height: 480vh;
  }

  .film__video,
  .film__still {
    object-position: 42% 60%;
  }

  .film__layout {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--s-4);
    padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  }

  /* Su schermo largo c'è spazio: il testo resta sempre visibile */
  .film.is-building .film__copy {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .film.is-building .film__scrim {
    opacity: 1;
  }

  .film__phases {
    grid-template-columns: none;
    gap: 0.35rem;
    min-width: 15rem;
  }

  .film__phases li {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    align-items: baseline;
    padding-top: 0;
    border-top: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
  }

  .film__phases li::before {
    content: counter(fase);
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
  }

  .film__phases li.is-done {
    color: rgba(255, 255, 255, 0.75);
  }

  .film__phases li.is-active::before {
    color: var(--sera);
  }

  .film__hint {
    top: 50%;
    translate: -50% -50%;
  }
}

/* Movimento ridotto: niente film da scorrere, solo il giardino finito */
.film.is-static {
  height: auto;
}

.film.is-static .film__stage {
  position: relative;
}

.film.is-static .film__still--end {
  opacity: 1;
}

.film.is-static .film__hint,
.film.is-static .film__progress,
.film.is-static .film__phases {
  display: none;
}

/* --- Blocchi della home --- */
/* --s-6 cresce già da sola con lo schermo (clamp) */
.band {
  padding-block: var(--s-6);
}

.band--tight,
.band + .band--tight {
  padding-top: 0;
}

/* Introduzione: una frase grande, poi i fatti */
.intro {
  display: grid;
  gap: var(--s-4);
}

.intro__facts p {
  color: var(--granito);
}

.intro__facts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 900px) {
  .intro {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: end;
  }
}

/* Listino servizi: è un elenco di prezzi, quindi righe e colonne */
.listino {
  display: grid;
  gap: var(--s-4);
}

.listino__head p {
  color: var(--granito);
}

.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linea);
}

/* Telefono: nome e prezzo sulla stessa riga, descrizione sotto */
.price-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem var(--s-2);
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--linea);
}

.price-list__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.15;
  margin: 0;
}

.price-list__desc {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--granito);
  margin: 0;
  font-size: 0.975rem;
}

.price-list__price {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.price-list__price small {
  display: block;
  font-weight: 400;
  color: var(--granito);
  font-size: var(--t-small);
}

.price-list__foot {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--granito);
}

@media (min-width: 640px) {
  /* colonne fisse: le descrizioni restano allineate da una riga all'altra */
  .price-list__row {
    grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) 8.5rem;
    gap: var(--s-2) var(--s-3);
  }
  .price-list__desc {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (min-width: 900px) {
  .listino {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    gap: var(--s-5);
  }
  .listino__head {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* Lavori: una foto grande e due più piccole, come in un album */
.lavori__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-1) var(--s-3);
  margin-bottom: var(--s-4);
}

.lavori__head h2 {
  max-width: 18ch;
  margin: 0;
}

.lavori__head a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.album {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 900px) {
  .album {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--s-3);
  }
  .album > :nth-child(1) {
    grid-column: 1 / span 7;
    grid-row: span 2;
  }
  .album > :nth-child(2),
  .album > :nth-child(3) {
    grid-column: 8 / span 5;
  }
  .album > :nth-child(1) .photo-card__img img {
    aspect-ratio: auto;
  }
}

/* Scheda progetto con foto: condivisa con portfolio.html */
.photo-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.photo-card__img {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--linea);
  flex: 1;
  min-height: 0;
}

.photo-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 700ms var(--ease);
}

.photo-card__tag {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  background: rgba(14, 22, 17, 0.55);
  color: #fff;
  font-size: 0.75rem;
}

.photo-card__meta {
  display: grid;
  gap: 0.2rem;
}

.photo-card h3 {
  margin: 0;
  font-size: var(--t-h3);
}

.photo-card__where {
  color: var(--granito);
  font-size: 0.95rem;
}

@media (hover: hover) {
  .photo-card:hover .photo-card__img img {
    transform: scale(1.03);
  }
  .photo-card:hover h3 {
    color: var(--imposta);
  }
}

@media (min-width: 640px) {
  .photo-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-2);
  }
}

/* Voci dei clienti */
.voci {
  background: var(--bosco);
  color: rgba(255, 255, 255, 0.85);
}

.voci h2 {
  color: #fff;
  max-width: 16ch;
  margin-bottom: var(--s-4);
}

.voci__grid {
  display: grid;
  gap: var(--s-4);
}

.voce {
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.voce p {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
  color: #fff;
}

.voce:first-child {
  border-top: 0;
  padding-top: 0;
}

.voce:first-child p {
  font-size: var(--t-statement);
  line-height: 1.2;
  max-width: 30ch;
}

.voce footer {
  font-size: 0.95rem;
}

.voce footer strong {
  color: var(--sera);
  font-weight: 600;
}

@media (min-width: 900px) {
  .voci h2 {
    margin-bottom: var(--s-5);
  }
  .voci__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5) var(--s-4);
  }
  .voce:first-child {
    grid-column: 1 / -1;
  }
}

/* Chiusura sull'immagine del giardino finito */
.finale {
  position: relative;
  min-height: 80svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}

.finale > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 70%;
}

.finale::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 22, 17, 0.88), rgba(14, 22, 17, 0.15) 70%);
  z-index: 1;
}

.finale .wrap {
  position: relative;
  z-index: 2;
  padding-block: var(--s-5);
}

.finale h2 {
  color: #fff;
  max-width: 14ch;
  font-size: var(--t-h1);
}

.finale p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--t-lead);
  max-width: 44ch;
}

@media (min-width: 900px) {
  .finale {
    min-height: 88vh;
  }
  .finale .wrap {
    padding-block: var(--s-6);
  }
}