/* ECS — versione per tablet e telefono
   Collegato in ogni pagina DOPO lo <style> interno: a parità di selettore vince questo.
   Tutte le regole stanno sotto i 900px, quindi la versione per computer non cambia. */

@media (max-width: 900px) {
  .wrap { padding: 0 24px; }

  /* Barra in alto: restano "studio aperto" e lo scorrimento dei servizi */
  .meta-bar { grid-template-columns: 1fr; gap: 8px; }
  .meta-bar > :nth-child(n+3) { display: none; }

  /* Testate di sezione: etichetta sopra, titolo sotto */
  .hero-head, .page-head-grid,
  .featured-head, .index-head, .feature-headblock, .pf-head,
  .story-head, .principles-head, .gallery-head, .sectors-head,
  .svc-head, .dig-flow-head, .process-head,
  .featured-cs-head, .grid-head, .pf-cat-head, .numbers-head,
  .map-head, .faq-head,
  .hp-grid, .facts-head, .sched-head {
    grid-template-columns: 1fr; gap: 14px;
  }
  .pf-cat-desc { grid-column: auto; }
  .pf-head-cta { justify-self: start; }
  .feature-headblock { margin-bottom: 40px; }

  /* Blocchi a 2-3 colonne: una colonna */
  .hero-figure, .feat-grid, .feature-body, .colophon-inner,
  .story-body, .svc-body,
  .contact-grid, .faq-item, .id-card, .sched-grid {
    grid-template-columns: 1fr; gap: 28px;
  }
  .colophon-inner { padding-top: 44px; }
  .colophon-cta { flex-wrap: wrap; }

  /* Righe di dati a 4 colonne: due colonne */
  .hero-credits, .page-head-credits {
    grid-template-columns: repeat(2, 1fr); gap: 20px 24px;
  }
  /* ...e quelle con le linee divisorie: nessuno spazio tra le celle, così le linee si toccano */
  .sectors-list, .process-steps, .numbers-grid, .facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sec-cell:nth-child(n) { padding: 18px 14px; border-right: 1px solid var(--line); min-width: 0; }
  .sec-cell:nth-child(2n) { border-right: none; }
  .step, .num-cell, .fact-cell { min-width: 0; }
  .step { border-bottom: 1px solid var(--line); }
  .step:nth-child(odd), .num-cell:nth-child(odd), .fact-cell:nth-child(odd) { padding-left: 0; padding-right: 20px; }
  .step:nth-child(even), .num-cell:nth-child(even), .fact-cell:nth-child(even) { padding-left: 20px; padding-right: 0; border-right: none; }
  .num-cell:nth-child(-n+2), .fact-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.16); }

  /* Spazi verticali delle sezioni */
  .featured, .index-sec, .feature, .pf-sec, .colophon,
  .story-sec, .principles, .gallery-sec, .sectors-sec,
  .svc-sec, .process, .numbers-sec, .facts-sec, .sched-sec {
    padding-top: 72px; padding-bottom: 64px;
  }

  /* --- Home --- */
  .hero { padding-top: 44px; }
  .hero-logo { margin-top: 32px; }
  .hero-logo img, .cover.cover--logo img { max-width: 100%; }
  .hf-side { flex-direction: row; }
  .hf-side > * { flex: 1; min-width: 0; }
  .feat-card-meta { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .press-strip-head .lbl::after { display: none; }
  .press-strip-track { grid-template-columns: repeat(3, 1fr); }

  .index-row { grid-template-columns: 1fr 64px; gap: 8px 16px; padding: 22px 0; }
  .index-row .row-num, .index-row .row-name { grid-column: 1; }
  .index-row .row-thumb { grid-column: 2; grid-row: 1 / span 2; }
  .index-row .row-desc { grid-column: 1 / -1; }
  .index-row .row-act { display: none; }
  .index-row:hover { padding-left: 0; padding-right: 0; background: none; }

  .pf-row { grid-template-columns: 1fr 72px; gap: 8px 16px; padding: 22px 0; }
  .pf-row .pf-tag, .pf-row .pf-name { grid-column: 1; }
  .pf-row .pf-preview { grid-column: 2; grid-row: 1 / span 2; width: 72px; height: 72px; }
  .pf-row .pf-desc { grid-column: 1 / -1; }
  .pf-row:hover { padding-left: 0; padding-right: 0; background: none; }

  .pf-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 10px; margin-top: 40px; }
  .pf-tile-1 { grid-column: span 2; grid-row: span 2; }
  .pf-tile-2, .pf-tile-3, .pf-tile-4, .pf-tile-5, .pf-tile-6, .pf-tile-7 { grid-column: span 1; grid-row: span 1; }
  .pf-tile-8 { grid-column: span 2; grid-row: span 1; }

  .feature-stats { gap: 16px; }
  .feature-stats .num { font-size: 2.6rem; }

  /* --- Chi siamo --- */
  .principle { grid-template-columns: 56px 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .gal-tile-1 { grid-column: 1 / -1; grid-row: span 2; }
  .gal-tile-3, .gal-tile-4, .gal-tile-5, .gal-tile-6 { grid-column: span 1; }
  /* la 2 (insegna ECS, foto larga) e la 7 a tutta larghezza: in un quadrato il logo verrebbe tagliato */
  .gal-tile-2, .gal-tile-7 { grid-column: 1 / -1; }

  /* --- Servizi --- */
  .dig-step { grid-template-columns: 56px 1fr; }

  /* --- Portfolio --- */
  .pf-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pf-item.wide { grid-column: 1 / -1; }
  .num-cell .num { font-size: 2.8rem; }

  /* --- Contatti --- */
  .map-frame { aspect-ratio: 4 / 3; }

  /* --- Pumba --- */
  .hp-caption { grid-template-columns: 1fr; }
  .sched-row { grid-template-columns: 90px 1fr; }
  .sched-row > :nth-child(3) { grid-column: 2; }

  /* Footer */
  .footer { padding-top: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  /* Link del piè di pagina più facili da toccare: l'area di tocco copre tutta la riga, non solo il testo */
  .footer ul li { margin-bottom: 0; padding: 6px 0; }
  .footer ul li > a { display: inline-block; padding: 6px 0; margin: -6px 0; }
  .footer-bottom a { display: inline-block; padding: 8px 0; }
}

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

  .hero h1, .page-head h1 { font-size: clamp(34px, 11.5vw, 56px); }
  .hero-credits, .page-head-credits { gap: 18px 20px; }

  /* Spazi verticali più stretti */
  .page-head { padding-top: 40px; }
  .featured, .index-sec, .feature, .pf-sec, .colophon,
  .story-sec, .principles, .gallery-sec, .sectors-sec,
  .svc-sec, .process, .numbers-sec, .facts-sec, .sched-sec,
  .contact-sec, .faq-sec {
    padding-top: 56px; padding-bottom: 48px;
  }
  .hero-portrait { padding-top: 56px; }

  /* Card con il testo sopra la foto: sul telefono il testo va sotto, su fondo scuro */
  .feat-card.feat-main, .featured-cs .feat-card, .hp-frame { aspect-ratio: auto; }
  .feat-card.feat-main > img, .featured-cs .feat-card > img { height: auto; aspect-ratio: 4 / 3; }
  .hp-frame > img { height: auto; aspect-ratio: 4 / 5; }
  .feat-card.feat-main::after, .featured-cs .feat-card::after, .hp-frame::after { display: none; }
  .feat-card.feat-main .feat-card-meta,
  .featured-cs .feat-card .feat-card-meta,
  .hp-frame .hp-caption { position: relative; padding: 22px 22px 26px; }
  .feat-card.feat-sec { aspect-ratio: 4 / 3; flex: none; }

  .ps-card-tag { left: 8px; right: 8px; bottom: 8px; font-size: 0.56rem; letter-spacing: 0.06em; }
  .svc-image, .svc-image-ph { aspect-ratio: 4 / 3; }

  .principles-list, .form-grid { grid-template-columns: 1fr; }
  .principle.left { padding-right: 0; }
  .principle.right { padding-left: 0; border-left: none; }
  .principle:nth-last-child(2) { padding-bottom: 36px; }
  .field.full { grid-column: 1 / -1; }

  .process-steps { grid-template-columns: 1fr; }
  .step:nth-child(n) { padding: 24px 0; border-right: none; }

  .num-cell:nth-child(odd), .fact-cell:nth-child(odd) { padding-right: 14px; }
  .num-cell:nth-child(even), .fact-cell:nth-child(even) { padding-left: 14px; }
  .num-cell .num { font-size: 2.3rem; }

  .sec-cell { font-size: 1.05rem; gap: 10px; }
  .feature-stats .num { font-size: 2.1rem; }
  .footer-mast { font-size: 2.6rem; }
}