/* =============================================================
   OTTIMIZZAZIONI SCHERMI INTERMEDI
   Caricato dopo mobile.css. Copre le fasce che le regole mobile
   non intercettano: laptop 13-15", tablet in verticale e
   orizzontale, monitor grandi.
   ============================================================= */

/* ---------- TABLET ORIZZONTALE / LAPTOP PICCOLI (901-1180) ---------- */
@media (min-width:901px) and (max-width:1180px){
  /* Footer: le cinque colonne si stringono troppo */
  .foot__top{
    grid-template-columns:auto 1fr 1fr;
    row-gap:22px;
    align-items:start;
  }
  .foot__social{ align-self:center; }
  .foot__ctas{
    grid-column:1 / -1;
    flex-direction:row;
    flex-wrap:wrap;
  }
  .foot__ctas .btn{ flex:1 1 200px; }

  /* Griglia clienti: 3 colonne invece di 4 */
  .ourclients__grid{ grid-template-columns:repeat(3,1fr); }

  /* Servizi: un filo di respiro in meno fra i riquadri */
  .services__grid{ gap:14px; }
}

/* ---------- NOMI CLIENTI LUNGHI (da tablet in su) ---------- */
@media (min-width:901px){
  .ourclients__cell{
    font-size:clamp(15px, 1.2vw, 20px);
    padding:30px 20px;
    overflow-wrap:break-word;
    hyphens:auto;
  }
}

/* ---------- TITOLO "OUR CLIENTS" SU UNA RIGA (mobile) ----------
   A 54px il titolo non entrava nella larghezza dello schermo:
   andava a capo e la sillabazione lo spezzava con un trattino.
   Ridotto quanto basta per stare su una riga, senza sillabazione. */
@media (max-width:900px){
  .ourclients__title{
    font-size:clamp(30px, 11vw, 54px) !important;
    white-space:nowrap;
    hyphens:none !important;
    -webkit-hyphens:none !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    margin-bottom:32px;
  }
}

/* ---------- TABELLA CLIENTI: COLONNE SEMPRE UGUALI ----------
   Con `1fr` i nomi lunghi (es. IMPRESA COSTRUZIONI ULRICO DE
   CESARE) allargavano la prima colonna: il divisorio non cadeva a
   meta' e la tabella sembrava spostata a destra, con lo spazio
   tutto a sinistra. `minmax(0,1fr)` tiene le colonne identiche e
   manda a capo i nomi lunghi. */
.ourclients__grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.ourclients__cell{
  min-width:0;
  overflow-wrap:anywhere;
}
@media (min-width:901px) and (max-width:1180px){
  .ourclients__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .ourclients__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  /* le celle usavano ancora i valori desktop (20px di testo con
     24px di padding in una cella da 161px): le parole venivano
     spezzate a meta'. Ora il testo entra e va a capo tra parole. */
  .ourclients__cell{
    font-size:clamp(12px, 3.6vw, 15px) !important;
    line-height:1.15;
    padding:20px 12px !important;
    min-height:104px !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
  }
  .ourclients__cell small{ font-size:9px; letter-spacing:.14em; margin-top:5px; }
}
@media (min-width:641px) and (max-width:900px){
  /* su tablet verticale restano tre colonne, ora uguali */
  .ourclients__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}

/* ---------- TABLET VERTICALE (641-900) ---------- */
@media (min-width:641px) and (max-width:900px){
  /* I tre riquadri servizi su una colonna sola erano enormi: due per riga */
  .services__grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px;
  }
  .services__grid .tile:last-child{ grid-column:1 / -1; }
  .tile{ aspect-ratio:3 / 4 !important; }
  .tile img{ height:100% !important; object-fit:cover; }
  .tile__label{
    font-size:12px !important;
    letter-spacing:.12em !important;
    padding:9px 16px !important;
    width:auto !important;
  }

  /* Titoli grandi: un gradino in meno per non toccare i bordi */
  .pillar__title{ font-size:clamp(52px, 11vw, 96px) !important; }
  .intro__headline{ font-size:clamp(40px, 8vw, 68px) !important; }

  /* Griglia clienti a 3 colonne: le celle a 2 restavano molto vuote */
  .ourclients__grid{ grid-template-columns:repeat(3,1fr) !important; }
  .ourclients__cell{ font-size:15px; min-height:120px; padding:22px 14px; }

  /* Team: card più larghe, si vedono tre schede piene */
  .team__track .member{ flex:0 0 calc((100% - 16px) / 3) !important; max-width:none !important; }

  /* Footer: due colonne piene invece di una */
  .foot__top{ grid-template-columns:1fr 1fr !important; row-gap:22px; }
  .foot__ctas{ grid-column:1 / -1; flex-direction:row !important; }
  .foot__ctas .btn{ flex:1 1 180px; }
}

/* ---------- ALTEZZE REALI SU MOBILE (barre del browser) ---------- */
@supports (height:100dvh){
  @media (max-width:900px){
    .hero{ height:min(78dvh, 640px); }
    .mm__panel{ height:100dvh; }
  }
  @media (max-width:640px){
    .hero{ height:min(82dvh, 580px); }
  }
}

/* ---------- MONITOR GRANDI (oltre 1600) ---------- */
@media (min-width:1600px){
  /* Il contenuto è centrato a 1350px: le sezioni piene restano allineate */
  .services__grid{ gap:20px; }
  .ourclients__cell{ min-height:150px; }
}

/* ---------- SCHERMI BASSI (laptop 13" 1280x720) ---------- */
@media (min-width:901px) and (max-height:760px){
  .hero{ height:min(88vh, 700px); min-height:520px; }
  .hero__badge{ bottom:44px; }
}

/* ---------- SICUREZZA ANTI-OVERFLOW ---------- */
.wrap, .foot, .services, .team, .clients, .ourclients{ max-width:100%; }
img, video, iframe{ max-width:100%; }

/* =============================================================
   CORREZIONI MOBILE
   Caricato per ultimo: sovrascrive mobile.css dove serve.
   ============================================================= */
@media (max-width:900px){

  /* ---------- HERO: video intero, mai tagliato ----------
     Il video (16:9) sta in alto a tutta larghezza e si vede per
     intero; sotto resta una fascia nera con il pulsante
     "social needs". Niente ritaglio laterale come prima. */
  .hero{
    height:auto !important;
    min-height:0 !important;
    padding-bottom:0 !important;
    display:block;
  }
  .hero__img{
    position:relative !important;
    inset:auto !important;
    width:100%;
    height:auto !important;
    aspect-ratio:16 / 9;
    object-fit:contain;
    display:block;
  }
  /* la sfumatura serviva a leggere il titolo sopra al video:
     sul mobile il titolo non c'e', quindi non scurisce piu' il video */
  .hero > div[aria-hidden="true"]{ display:none; }
  .hero__badge{
    position:static !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    padding:12px 20px 10px;
  }
  /* pulsante con area di tocco piena (44px) senza aggiungere aria */
  .hero__badge .pill{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  /* meno nero tra il pulsante e "WE ARE A FULL FUNNEL" */
  .intro{ padding-top:28px !important; }

  /* ---------- Il pulsante del menu non copre i contenuti ---------- */
  .mm{ pointer-events:none; }
  .mm__burger,
  .mm__panel{ pointer-events:auto; }

  /* ---------- OUR TEAM: foto centrata, corsa finita ----------
     Fino a 640px si vede una foto per volta, portata al centro
     dello schermo (il margine laterale lo calcola lo script sulla
     larghezza reale). Sopra i 640px entrano tre foto, quindi lo
     slider resta allineato a sinistra: centrare lascerebbe troppo
     vuoto ai lati. L'ultima foto chiude sempre la corsa. */
  .team__track{
    --cardW:200px;
    gap:22px !important;
  }
  .team__track .member{
    flex:0 0 var(--cardW) !important;
    width:var(--cardW) !important;
    max-width:none !important;
    min-width:0 !important;
    /* i margini laterali (40px) sfalsavano il passo dello slider:
       la distanza tra le foto ora la da' il gap */
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

@media (max-width:640px){
  /* foto piu' larga = meno vuoto a sinistra della prima e a destra
     dell'ultima, e le vicine si affacciano ai bordi */
  .team__track{ --cardW:min(270px, 72vw); }
}