/* ═══════════════════════════════════════
   RESPONSIVE — mobile & tablet
   Breakpoint principale: 768px
═══════════════════════════════════════ */

@media (max-width: 768px) {

  /* ════════════════════════════════════
     SCALA TIPOGRAFICA
  ════════════════════════════════════ */

  /* Il corpo del testo su desktop e' 14px (vedi base.css). Su mobile
     resta 17px: la colonna e' larga meno di un terzo e si legge a
     distanza di braccio, quindi la stessa misura risulterebbe piu'
     piccola di quanto sembri da scrivania. */
  :root {
    --t-testo: 17px;
    /* I titoloni: 7,5vw su un telefono varrebbe 29px, quindi scatterebbe il
       minimo da 52px e "destinazioni." sborderebbe dallo schermo. Qui il
       corpo torna a seguire la larghezza, con un tetto a 52px. */
    --t-titolo: clamp(30px, 9vw, 52px);
  }


  /* ════════════════════════════════════
     BADGE DI SEZIONE
  ════════════════════════════════════ */

  /* Su mobile i badge stanno a sinistra, sul filo del testo, come nella
     sezione progetti. Prima erano centrati (display:table + margin auto +
     align-self:center): restavano centrati solo servizi, sostenibilita' e
     placemaking, perche' progetti, numeri e le schede servizio avevano
     gia' la loro eccezione a sinistra. Tolta la centratura globale,
     il badge torna al comportamento di base.css (inline-block,
     align-self:flex-start) e tutte le sezioni si allineano fra loro. */
  .section-label {
    display: inline-block;
    margin-left: 0;
    margin-right: 0;
    align-self: flex-start;
  }


  /* ════════════════════════════════════
     NAV
  ════════════════════════════════════ */

  /* padding 36px = i vecchi 16px di margine + 20px di padding interno,
     il logo resta dov'era */
  nav {
    padding: 0 36px;
  }

  .nav-hamburger {
    right: 36px;
  }

  .mobile-menu-logo {
    left: 36px;
  }

  .nav-lang {
    margin-right: 52px; /* clearance hamburger mobile */
  }

  .mobile-menu {
    padding-left: 36px;
  }

  .mobile-menu-link {
    font-size: clamp(36px, 11vw, 56px);
  }


  /* ════════════════════════════════════
     CURTAIN
  ════════════════════════════════════ */

  .curtain-deco {
    height: 38svh; /* svh = small viewport height, stabile su mobile */
  }

  /* ════════════════════════════════════
     HERO
  ════════════════════════════════════ */

  .hero-content {
    padding: 60px 24px 32px;
  }


  /* ════════════════════════════════════
     SERVIZI
  ════════════════════════════════════ */

  .services-section {
    padding: 40px 24px 48px;
  }

  /* Blocco desktop nascosto su mobile */
  .services-text {
    display: none;
  }

  /* Lista mobile: ogni servizio = una riga, allineata a sinistra sotto al
     badge. Su desktop il blocco e' a bandiera destra; da telefono va a
     sinistra come il titolo dei progetti, cosi' badge e titolo partono
     dallo stesso filo in tutte le sezioni. */
  .services-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 16px;
  }

  .service-item {
    font-family: 'Inter', sans-serif;
    font-size: 8vw;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dark);
    /* Le voci lunghe vanno a capo dentro la riga: con "right" la seconda
       riga tornava a destra. A sinistra restano tutte sul filo del badge. */
    text-align: left;
  }

  /* "/" dopo ogni servizio; "e" prima dell'ultimo, niente sull'ultimo */
  .service-item::after {
    content: ' /';
  }

  .service-item:nth-last-child(2)::after {
    content: ' e';
  }

  .service-item:last-child::after {
    content: '';
  }


    /* ════════════════════════════════════
     PROGETTI
  ════════════════════════════════════ */

  /* Il passaggio da tre colonne a una avviene gia' a 900px, in projects.css:
     qui sotto restano solo i margini e i corpi da telefono. */
  .projects {
    padding: 40px 24px 64px;
  }

  .projects-intro {
    margin-bottom: 40px;
  }

  /* L'allineamento a sinistra ora e' quello di default su mobile:
     qui resta solo lo stacco sotto al badge. */
  .projects-intro .section-label {
    margin-bottom: 24px;
  }

  /* Serve ripeterla qui: questo file viene caricato per ultimo e la regola
     sopra ha la stessa specificita' di quella in projects.css, quindi
     senza questa righe i 24px vincerebbero anche a titolo spento. */
  .projects-intro--sola-etichetta .section-label {
    margin-bottom: 0;
  }

  .projects-grid {
    gap: 48px;
  }

  .project-card-foto {
    margin-bottom: 10px;
  }

  /* Su desktop il nome e' centrato sulla scheda; qui, a colonna piena,
     torna sul filo sinistro come citta', descrizione e pulsante. */
  h3.project-card-nome {
    font-size: clamp(22px, 6.5vw, 30px);
    text-align: left;
    margin-bottom: 10px;
  }

  .project-card-desc {
    margin-bottom: 22px;
  }


/* ════════════════════════════════════
     SECTION TITLE BAND (Placemaking)
  ════════════════════════════════════ */

  .section-title-band {
    padding: 40px 24px 28px;
  }

  /* Su mobile: titolo in cima, poi le due metà del testo in colonna */
  .trademarks-header {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }

  /* Trademarks a sinistra: su desktop il titolo e' al centro fra i due
     testi, da telefono sta in cima e va allineato al badge come le altre
     sezioni. Serve anche text-align sul wrap perche' .section-title-label
     eredita il center dichiarato in activations.css. */
  .trademarks-name-wrap {
    order: -1;
    margin-bottom: 8px;
    text-align: left;
  }

  .section-title-label {
    text-align: left;
  }

  .trademarks-text--right {
    text-align: left;
  }


  /* ════════════════════════════════════
     ATTIVAZIONI
  ════════════════════════════════════ */

  .activations-grid {
    /* display:grid annulla columns:4 del desktop ed elimina
       il whitespace da column-fill:balance */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin: 0 4px;
  }

  /* Su mobile la griglia e' una matrice regolare a 2 colonne: i formati
     tarati per pareggiare le quattro colonne del desktop qui aprirebbero
     solo dei vuoti. Questi due tornano al formato che sta meglio in una
     matrice. !important perche' devono vincere sullo style inline. */
  .act-slideshow[data-detail="bicocca-pavilion"] { aspect-ratio: 3/4 !important; }
  .act-slideshow[data-detail="motel"]            { aspect-ratio: 2/3 !important; }


  /* ════════════════════════════════════
     PAGINE SERVIZIO
  ════════════════════════════════════ */

  .servizio-content {
    padding: 0 24px;
  }

  .servizio-title {
    font-size: clamp(32px, 9vw, 44px);
    margin-bottom: 24px;
  }

  .servizio-title--gruppo {
    font-size: clamp(24px, 6.2vw, 30px);
  }

  .servizio-list li {
    /* il corpo lo detta --t-testo, qui serve solo un filo di respiro in piu' */
    line-height: 1.6;
  }

  /* Allineamento a sinistra di default: qui resta solo lo stacco sotto. */
  .servizio-inner .section-label {
    margin-bottom: 20px;
  }


  /* ════════════════════════════════════
     FOOTER
  ════════════════════════════════════ */

  /* Ordine mobile, come da mockup:
       riga 1   logo a sinistra, social a destra
       riga 2   sedi operative su due colonne (Milano | Firenze)
       riga 3   menu su una riga
       riga 4   copyright
       riga 5   privacy e cookie
     Tutto parte dallo stesso filo a sinistra: il padding di 24px della
     sezione, senza rientri aggiuntivi. Le distanze verticali sono
     esplicite (row-gap: 0) perché nel layout non sono uniformi. */
  .footer-inner {
    grid-template-columns: 1fr auto;
    row-gap: 0;
    padding: 40px 24px 36px;
    margin: 0;
    justify-items: start;
  }

  /* display: contents scioglie la colonna 1: logo, copyright e link legali
     diventano figli diretti della grid e si possono riordinare con `order`,
     cosa impossibile finché restano annidati. */
  .footer-if {
    display: contents;
  }

  /* Riga 1 — logo e social affiancati, centrati fra loro sull'altezza.
     L'altezza del logo la detta footer.css (38px, come nell'header). */
  .footer-if-img {
    grid-column: 1;
    order: 1;
    align-self: center;
  }

  .footer-right {
    grid-column: 2;
    order: 1;
    justify-self: end;
    align-self: center;
    padding-top: 0;
  }

  /* Riga 2 — le due sedi affiancate sotto un solo titoletto.
     Il titoletto occupa tutta la riga sopra, così "Firenze" parte alla
     stessa quota di "Milano" senza doverlo spostare a mano. */
  .footer-info {
    grid-column: 1 / -1;
    order: 2;
    justify-self: stretch;
    margin-top: 27px;
    padding-top: 0;
  }

  /* Colonne a misura del testo, non due meta' fisse: "Viale Piero e Alberto
     Pirelli 10" chiede 175px e mezza colonna ne dava 159, mandando a capo
     il solo "10". Con auto le due sedi stanno su una riga ciascuna finche'
     c'e' spazio; sui telefoni piu' stretti le colonne si stringono da sole
     e il testo va a capo, invece di sfondare. */
  .footer-info-block {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 4px 24px;
  }

  .footer-info-label {
    grid-column: 1 / -1;
  }

  /* In colonna le due sedi erano una sotto l'altra e serviva lo stacco;
     qui sono affiancate, quindi parte dalla stessa riga. */
  .footer-info-text + .footer-info-text {
    margin-top: 0;
  }

  /* Riga 3 — menu su una riga sola */
  .footer-left {
    grid-column: 1 / -1;
    order: 3;
    justify-self: stretch;
    margin-top: 22px;
  }

  .footer-nav-col {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* Gap e corpo si stringono sui telefoni stretti, così le tre voci
       restano su una riga sola fino a ~360px di viewport. */
    gap: 4px clamp(14px, 7vw, 36px);
  }

  .footer-nav-col a {
    font-size: clamp(18px, 5.2vw, 22px);
  }

  /* Righe 4 e 5 — copyright e legali a sinistra, sul filo di tutto il resto */
  .footer-copy {
    grid-column: 1 / -1;
    order: 4;
    margin-top: 30px;
    font-size: var(--t-didascalia);
    text-align: left;
    white-space: normal;   /* su schermi molto stretti può andare a capo */
  }

  .footer-legal-links {
    grid-column: 1 / -1;
    order: 5;
    justify-self: start;
    margin-top: 14px;
  }


  /* ════════════════════════════════════
     DETAIL PANEL (schede placemaking)
  ════════════════════════════════════ */

  .detail-header {
    padding: 16px 20px;
  }

  .detail-body {
    padding: 40px 0 80px;
  }

  .detail-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 20px;
    margin-bottom: 40px;
  }

  .detail-title {
    font-size: clamp(36px, 10vw, 52px);
  }

  .detail-desc {
    max-width: 100%;
  }

  .detail-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .detail-col {
    gap: 4px;
  }


  /* ════════════════════════════════════
     CHI SIAMO — NUMERI
  ════════════════════════════════════ */

  /* Il nastro tocca i bordi: niente padding orizzontale sulla sezione,
     il rientro ce l'ha solo il badge. */
  .numbers-seq-section {
    padding: 40px 0;
  }

  .numbers-seq-section .section-label {
    margin-left: 24px;
    margin-bottom: 20px;
  }

  /* Su mobile il numero non deve piu' stare in una schermata da solo:
     scorre. Corpo fisso invece che in vw, cosi' resta leggibile anche
     sui telefoni stretti senza rimpicciolire fino a sparire. */
  .num-slide-val {
    font-size: 64px;
    gap: 1px;
  }

  .num-slide-unit,
  .num-slide-unit--pre {
    font-size: 34px;
  }

  .num-slide-lbl {
    font-size: 13px;
    letter-spacing: .1em;
    margin-top: 10px;
  }

  .num-voce {
    margin-right: 80px;
  }


  /* ════════════════════════════════════
     ESG
  ════════════════════════════════════ */

  .esg-section {
    padding: 40px 24px 64px;
  }

  .esg-section .section-label {
    margin-bottom: 32px;
  }

  .esg-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* ESG a sinistra, sul filo del badge (prima era centrato). */
  .esg-label {
    text-align: left;
  }

  .esg-logos {
    gap: 32px;
  }

  /* I loghi delle certificazioni restano a 72px anche da mobile: qui
     c'era un ridimensionamento a 52px, tolto perche' li rendeva
     illeggibili. La misura la detta solo esg.css. */


  /* ════════════════════════════════════
     CLIENTI
  ════════════════════════════════════ */

  .clienti-section {
    padding: 56px 0;
  }

  .clienti-title {
    margin: 0 24px 40px;
  }

  /* Celle piu' strette: sui telefoni ne devono passare due o tre in vista,
     altrimenti il nastro sembra fermo. */
  .clienti-item {
    width: 130px;
    margin-right: 40px;
  }


  /* ════════════════════════════════════
     PRESS
  ════════════════════════════════════ */

  .press-section {
    padding: 64px 24px 80px;
  }

  .press-title {
    text-align: center;
  }

  /* minmax(0, ...) e non 1fr secco: senza il minimo a zero la colonna si
     allarga fino al contenuto piu' largo (qui il logo FT) e la griglia
     sfora in orizzontale. Stessa accortezza della griglia clienti. */
  .press-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .press-card {
    padding-right: 0;   /* in colonna unica il gutter destro mangia larghezza */
  }

  .press-card:nth-child(n+4) {
    padding-top: 40px;
  }


  /* ════════════════════════════════════
     CONTATTI
  ════════════════════════════════════ */

  .contatti-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 24px 64px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contatti-subtitle {
    max-width: 100%;
  }

}

/* Qui c'era un quarto breakpoint (429-768px) che dava al footer un rientro
   di 33px: serviva quando il logo era centrato e sedi e menu andavano
   spostati per stare sotto di lui. Ora nel footer mobile e' tutto a filo
   del padding della sezione e il rientro non serve piu': restano le tre
   soglie del sito, 1400 / 900 / 768. */