/* ==========================================================================
   Trusted By — 14:585 · responsive

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui dentro e una mia
   scelta di riflusso, non una misura di Figma.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 la fascia resta
   identica al mockup: 1512 x 236 (80 + 76 + 80), riga 1432 x 76, 3 celle da
   477.3333, loghi alle dimensioni native.

   I tre loghi hanno proporzioni MOLTO diverse e non ammettono una regola di
   dimensionamento unica:
     Iren          73.04 x 40   -> ratio  1.83
     Idealservice 212.12 x 48   -> ratio  4.42
     Atzwanger    257.14 x 12   -> ratio 21.43  (il piu largo, e il piu basso)
   Sotto i 1512 ciascuno scala per conto proprio, sempre a ratio conservato.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1280-1511 · Desktop compresso
   La riga resta a 3 celle: la cella piu stretta di questo intervallo e
   (1280 - 80) / 3 = 400px, e il logo piu largo ne misura 257. Nessuna
   compressione necessaria, si sciolgono solo le misure fisse.

   Il cappello anti-sfondamento e comunque obbligatorio: il core mette
   max-width:100% su tutti i .ph, e con height fissa quel cap deformerebbe il
   logo invece di rimpicciolirlo. Ogni logo riceve quindi il proprio
   aspect-ratio (valori di Figma) e height auto, cosi il cap scala e non
   schiaccia. A larghezza piena il render resta identico al mockup.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .trusted__row {
    width: 100%;
    height: auto;
  }
  .trusted__cell {
    height: auto;
    min-height: 76px;               /* 76 = altezza riga Figma, tenuta come minimo */
  }

  .trusted__logo--iren {
    width: 73.03851318359375px;
    height: auto;
    aspect-ratio: 73.03851318359375 / 40;
  }
  .trusted__logo--idealservice {
    width: 212.11764526367188px;
    height: auto;
    aspect-ratio: 212.11764526367188 / 48;
  }
  .trusted__logo--atzwanger {
    width: 257.1428527832031px;
    height: auto;
    aspect-ratio: 257.1428527832031 / 12;
  }
}


/* --------------------------------------------------------------------------
   1024-1279 · Laptop
   Cella minima (1024 - 80) / 3 = 314.7px: Atzwanger (257) ci sta ancora, ma
   senza margine laterale. Si concede un padding di cella cosi i tre marchi
   non si toccano. Valore MIO: in Figma le celle sono a filo.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .trusted__cell {
    padding-inline: var(--space-3);
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — i tre marchi si impilano

   La riga a tre regge finche la cella resta piu larga dei 257px di Atzwanger
   piu un margine: serve (W - 80) / 3 >= ~290, cioe W >= ~950. Sotto, il
   logo piu largo verrebbe cappato dal max-width:100% del core e, avendo
   ratio 21.43, si ridurrebbe a ~10px di altezza a 768 e a ~5px a 375: una
   riga grigia, non un marchio. Gli altri due invece non avrebbero bisogno di
   nulla — ed e esattamente il motivo per cui non esiste una regola di
   dimensionamento unica per i tre.

   Scelta MIA: colonna singola dal tablet in giu. Cosi ogni logo resta alla
   propria dimensione nativa (257 sta in 343px di larghezza utile a 375) e le
   proporzioni non vengono toccate da nessuna parte.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .trusted {
    padding-block: 64px;            /* 80 -> 64, valore MIO */
  }
  .trusted__row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);            /* 32, valore MIO: in Figma il gap e 0 */
  }
  /* In riga la cella e `flex: 1 0 0` e si spartisce la larghezza. Girata la
     direzione, quel flex-basis 0 agisce sull'ALTEZZA e fa collassare le tre
     celle a zero: va riportata a hug sul proprio contenuto. */
  .trusted__cell {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    padding-inline: 0;
  }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .trusted {
    padding-block: 48px;            /* valore MIO */
  }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   A 375 restano 343px (gutter 16): Atzwanger a 257 ci sta, ma appiccicato.
   Si cappa il logo piu largo all'80% della colonna. Valore MIO.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .trusted__logo--atzwanger {
    width: min(257.1428527832031px, 80%);
  }
  .trusted__row {
    gap: var(--space-4);
  }
}