/* =========================================================================
   Correzioni chieste da Ana alla reference (29/09/2026).
   Caricato dopo style.css: quello resta identico alla reference, qui c'e'
   solo cio' che cambia. Ogni blocco cita il commento a cui risponde.
   ========================================================================= */

/* "el footer ok, con el logo menos invasivo" ------------------------------ */
.footer-brand .brand-mark {
  display: block;
  width: 30px;
  height: 30px;
  opacity: .7;
}
.footer-tag { margin-top: 1rem; }

/* "pondria solo UN proyecto" (home) --------------------------------------- */
.project-row--feature { padding-bottom: 0; }
@media (min-width: 900px) {
  .project-row--feature { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
}

/* "no me gusta el grill" + "no tengo muchos proyectos" (Selected Works) ----
   Niente griglia e niente contatori: ogni progetto e' un capitolo a tutta
   larghezza, con copertina grande e scheda. La pagina si legge in verticale
   come un editoriale e il numero dei progetti non si coglie a colpo d'occhio. */
.works-chapters { padding-bottom: var(--section-y); }

.work-chapter + .work-chapter { margin-top: clamp(4rem, 12vh, 9rem); }

.work-cover {
  display: block;
  overflow: hidden;
  background: var(--sand-dark);
}
.work-cover img {
  width: 100%;
  height: clamp(320px, 78svh, 900px);
  object-fit: cover;
  transition: transform 1.8s var(--ease);
}
.work-cover:hover img { transform: scale(1.03); }

.work-chapter .project-row,
.work-chapter .project-row:first-of-type {
  border-top: 0;
  padding-block: clamp(2rem, 5vh, 4rem) 0;
}

/* "la parte de About ok, pero aumentarle a los numeros de abajo" ---------- */
.fact { padding-block: clamp(2rem, 5vh, 3.6rem); }
.fact strong { font-size: clamp(3.2rem, 8.5vw, 7rem); }
.fact span { margin-top: 1.1rem; }

/* "la parte del proceso deberia estar hecho mejor y en otra seccion" -------
   Ora vive nella pagina Services, come linea del tempo: una riga continua,
   un nodo per fase, numero grande in secondo piano. */
.timeline {
  position: relative;
  display: grid;
  gap: clamp(2.2rem, 5vh, 3rem);
  counter-reset: none;
}
.timeline-step {
  position: relative;
  padding-left: 2.4rem;
}
/* riga e nodo: verticali su telefono */
.timeline-step::before {
  content: "";
  position: absolute;
  left: 4px; top: .9rem; bottom: calc(-1 * clamp(2.2rem, 5vh, 3rem));
  width: 1px;
  background: var(--line);
}
.timeline-step:last-child::before { display: none; }
.timeline-step::after {
  content: "";
  position: absolute;
  left: 0; top: .55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--on-dark);
}
.timeline-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: .02em;
  color: var(--on-dark);
  opacity: .28;
}
.timeline-step h3 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.2;
}
.timeline-step p {
  margin-top: .8rem;
  font-size: .88rem;
  color: var(--ink-muted);
  max-width: 34ch;
}

@media (min-width: 900px) {
  .timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-top: 2.6rem;
  }
  /* riga orizzontale continua sopra le quattro fasi */
  .timeline::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 4px;
    height: 1px;
    background: var(--line);
  }
  .timeline-step { padding-left: 0; }
  .timeline-step::before { display: none; }
  .timeline-step::after { top: -2.6rem; }
}

/* =========================================================================
   Telefono (fino a 699 px). Richiesta di Marco, 30/09/2026.
   Tre obiettivi: testi leggibili, link facili da toccare, pagine meno lunghe.
   Nessun testo cambia: solo dimensioni, spazi e griglie.
   ========================================================================= */
@media (max-width: 699px) {

  /* --- Leggibilita': nessuna etichetta sotto gli 11 px ------------------- */
  .project-meta dt,
  .project-dl dt,
  .meta-label,
  .field label,
  .footer-col h4,
  .video-play-label,
  .fact span,
  .testi-count,
  .project-hero-facts { font-size: .7rem; }
  .lang-switch { font-size: .72rem; }
  .statement-media figcaption,
  .video-credit { font-size: .68rem; }

  /* Sotto i 16 px iOS ingrandisce la pagina appena si tocca un campo */
  input, textarea, select { font-size: 1rem; }

  /* --- Link e pulsanti: almeno 40 px di altezza utile -------------------- */
  .footer-col ul { gap: 0; }
  .footer-col a,
  .cta-contacts a,
  .nav-mobile-foot a,
  .contact-line a { display: inline-block; padding-block: .62rem; }
  .cta-contacts { gap: 0; }
  .contact-line a { padding-block: .45rem; }
  .lang-switch button { padding: .85rem .4rem; }
  .link-arrow { padding-top: .9rem; padding-bottom: .55rem; }
  .video-credit a { display: inline-block; padding-block: .5rem; }

  /* i trattini dell'hero restano sottili, ma l'area da toccare e' ampia */
  .hero-dots { gap: .2rem; }
  .hero-dots button { position: relative; width: 30px; background: none; }
  .hero-dots button::before {
    content: "";
    position: absolute;
    inset: -16px 0;
  }
  .hero-dots button::after {
    content: "";
    position: absolute;
    left: 3px; right: 3px; top: 0;
    height: 2px;
    background: rgba(236, 233, 228, .35);
    transition: background .4s var(--ease);
  }
  .hero-dots button[aria-pressed="true"] { background: none; }
  .hero-dots button[aria-pressed="true"]::after { background: rgba(236, 233, 228, .95); }

  /* --- Hero ---------------------------------------------------------------- */
  .hero-content { padding-inline: 1.5rem; }
  .hero-sub { font-size: .95rem; line-height: 1.75; }
  .hero-actions { flex-direction: column; align-items: center; gap: .7rem; }
  .hero-actions .btn { width: min(100%, 17rem); justify-content: center; }
  .project-hero { min-height: 72svh; }

  /* --- Spazi: niente vuoti doppi tra una sezione e l'altra ---------------- */
  .section--tight { padding-block: 2.2rem; }
  .section--tight + .section { padding-top: 2.6rem; }
  .page-hero { padding-top: calc(var(--nav-h) + 3.2rem); padding-bottom: 2.4rem; }
  .work-chapter + .work-chapter { margin-top: 3.5rem; }
  .work-cover img { height: clamp(260px, 56svh, 520px); }

  /* --- Griglie: due colonne dove le foto lo reggono ----------------------- */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .gallery-item,
  .gallery-item--full,
  .gallery-item--two-thirds { grid-column: span 2; }
  .gallery-item--half,
  .gallery-item--third { grid-column: span 1; }
  .gallery-item img { aspect-ratio: 3 / 2; }
  .gallery-item--half img,
  .gallery-item--third img { aspect-ratio: 3 / 4; }

  .other-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem .8rem; }
  .other-card h3 { font-size: 1.05rem; margin-top: .7rem; }

  /* --- Numeri di About: due per riga, senza andare a capo ----------------- */
  .fact { padding: 1.6rem .9rem 1.6rem 0; }
  .fact:nth-child(even) { padding-left: 1rem; }
  .fact strong { font-size: clamp(2.6rem, 13vw, 3.4rem); }

  /* --- Footer --------------------------------------------------------------- */
  .footer-col p { font-size: .8rem; }
}

/* --- Gallery di A+ (01/10/2026): due verticali affiancate e un'apertura
   meno schiacciata, come nel layout mandato da Ana. Sotto i 700 px valgono
   le regole per telefono qui sopra. -------------------------------------- */
@media (min-width: 700px) {
  .gallery-item--half.gallery-item--tall img { aspect-ratio: 3 / 4; }
  .gallery-item--full.gallery-item--open img { aspect-ratio: 3 / 2; }
}

/* Aitana (07/10/2026): il progetto in cui Ana ha coperto tutti e sei i servizi.
   Lo scope elenca i servizi con titolo e descrizione, come nella pagina Services. */
.scope-full-head .display { margin-top: 1.5rem; }
.scope-full-head .lead { margin-top: 1.2rem; max-width: 34ch; }
.scope-full-head .link-arrow { margin-top: 2rem; }
.scope-list--full { margin-top: 0; }
.scope-list--full li { padding-block: 1.15rem; }
.scope-list--full h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--ink);
}
.scope-list--full p { margin-top: .35rem; font-size: .86rem; line-height: 1.6; }
.aitana-quote { margin-top: 2rem; font-size: clamp(1.5rem, 2.4vw, 2.2rem); max-width: 18ch; }
.tbc { color: var(--ink-muted); font-style: italic; }