/* ---------------------------------------------------------------------------
   Endorsements — "Un programma di" / "Con il supporto di".

   mobile   the two groups stack
   tablet   two columns, one group each
   desktop  a four-column track so the marks line up across the container,
            with each group spanning two of them — as in the desktop mock
   --------------------------------------------------------------------------- */

.endorsements { padding-block: var(--space-8); }

.endorsements__grid {
  display: grid;
  gap: var(--space-7);
}

/* Mobile only. Direct measurement on the live site at 375px: each group is
   a single stacked column (not the shared 2-up --logo-cols default), a
   20px gap between the two marks in a group, and every mark keeps its own
   independent width rather than stretching to fill the column — the same
   "each logo picked its own size by eye" pattern already established for
   the executive-board row, just with different numbers here:
   Intesa Sanpaolo Innovation Center 242px, Fondazione CR Firenze 178px,
   Nana Bianca 145px, Fondazione per la Ricerca e l'Innovazione 242px
   (all at their native aspect ratio, confirmed against each PNG's real
   width/height attributes). */
@media (max-width: 767px) {
  .ils-logo-group__list { grid-template-columns: 1fr; gap: 20px; justify-items: start; }
  .ils-logo-group__link img { width: auto; }

  /* Direct measurement: 19px flat (not the shared 32px, which is a
     tablet/desktop value) — confirmed identical at 375/414/767px, so it's
     one flat mobile size, not a scaling one. Line-height matches at
     ratio 1.0, same "no extra leading" pattern as the hero title fix. */
  .ils-logo-group__label { font-size: 19px; line-height: 19px; }

  .endorsements__grid > .ils-logo-group:nth-child(1) li:nth-child(1) img { width: 242px; }
  .endorsements__grid > .ils-logo-group:nth-child(1) li:nth-child(2) img { width: 178px; }
  .endorsements__grid > .ils-logo-group:nth-child(2) li:nth-child(1) img { width: 145px; }
  .endorsements__grid > .ils-logo-group:nth-child(2) li:nth-child(2) img { width: 242px; }
}

@media (min-width: 600px) {
  .endorsements { padding-block: var(--space-8) var(--space-9); }
  .endorsements__grid { grid-template-columns: 1fr 1fr; }
}

/* Nana Bianca scaled to 80%, per direct request — measured 256x75 at the
   shared full-column width against 256x37 and 256x58 for the marks around
   it, so it carried noticeably more visual weight than its neighbours.
   Scoped to 768px up, where these logos are sized by their column width;
   mobile keeps the 145px picked for it by eye above. It is not the mark that
   sets this band's height either (Fondazione CR Firenze is, at 81px), so
   this doesn't move the band content height the hero reserves space
   against — see hero.css. */
@media (min-width: 768px) {
  .endorsements__grid > .ils-logo-group:nth-child(2) li:nth-child(1) img { width: 80%; }

  /* Fondazione CR Firenze -10%, per direct request — the tallest mark in the
     band (256x81) and the last one out of step after Nana Bianca came down. */
  .endorsements__grid > .ils-logo-group:nth-child(1) li:nth-child(2) img { width: 90%; }

  /* All four marks on one horizontal line, per direct request. They sat on
     two: each group's list was only as tall as its own tallest logo (81px vs
     60px), so "centered" meant centered on two different axes.

     The groups are grid items and already stretch to the same height, and
     both labels are one line, so giving the list the leftover height makes
     the two lists identical — and the align-items: center the component
     already carries then resolves to the same axis for every mark. Done this
     way rather than by hard-coding a row height, so it still holds if a logo
     or a label changes. */
  .ils-logo-group__list { flex: 1 1 auto; }
}

@media (min-width: 960px) {
  .endorsements { padding-block: var(--space-9); }

  .endorsements__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .endorsements__grid > .ils-logo-group { grid-column: span 2; }
  .endorsements__grid .ils-logo-group__list { gap: var(--space-6); }
}