/* ---------------------------------------------------------------------------
   Batch #1 → #4 — one 3-up grid of startup tiles per batch.

   Measured directly on the live site rather than following the design
   system's generic 3-up/2-up/1-up rule, which doesn't match what's actually
   shipped: 1 column below 768px (not 2 from 600px), jumping straight to 3
   columns at 768px — with a tight ~18px gap at 768px that opens up to a
   much wider ~60-80px gap by desktop, not a single fixed gutter.
   --------------------------------------------------------------------------- */

.batch { display: flex; flex-direction: column; gap: var(--space-6); }
.batch + .batch { margin-top: var(--space-8); }

.batch__heading { margin-bottom: 0; }

.batches__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .batches__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .batches__grid { gap: var(--space-8); }
}

/* Mobile only, per direct request: scale the tile height down from the
   shared 280px, with padding scaled down -40% (48/24px -> 29/14px) so
   every logo keeps the same proportional clearance from the rounded
   corners instead of the box just shrinking around a fixed-size mark.
   Scoped to <768px; tablet/desktop keep the shared 280px/48px/24px.

   Height went 168px (-40%) -> 200px -> 240px, each step per direct
   request. The driver is the hover/tap reveal panel: its type grew to
   24/15/14px, and its content is a fixed 150px tall (the body is clamped
   to 2 lines, so it does not vary by startup). At 168px that left ~9px of
   clearance and read as packed; 200px left 50px; 240px leaves 90px, so
   the panel is now mostly air around a fixed block of text.

   A fixed height, not an aspect-ratio rule: aspect-ratio would honour the
   reference proportion exactly but would shrink the tile back to ~157px on
   a 320px phone, which is the opposite of what every one of these requests
   has asked for. At 375px the tile is now 327x240 (1.36:1).

   The logo caps below (55px, 77px for five marks) are deliberately NOT
   rescaled with the tile — they were tuned by eye in their own right. Note
   the drift this creates: the shared cap was half the content box at 168px
   (55 of 110px) and is under a third of it at 240px (55 of 182px), so the
   marks read smaller inside the green with every height increase. */
@media (max-width: 767px) {
  .batches__grid .ils-startup-tile {
    height: 240px;
    padding-block: 29px;
    padding-inline: 14px;
  }

  /* Equal-weight fix, same philosophy as the executive-board logos:
     square/near-square marks (Rifò, Calton, MyCia...) were using the
     tile's full 110px content height, while wide wordmark logos (Cyber
     Evolution, Lab-Go, Baqta, Fody...) are width-bound by the 299px
     content width well before reaching that height, landing at 75-100px
     tall — next to a square mark they read as noticeably smaller. Capping
     the height below what any square mark needs pulls every shape into
     the same tight band regardless of aspect ratio.

     Per direct follow-up request ("tutti tanto grandi... armonici con la
     struttura"), pulled back further from the first pass's 85px (77% of
     the 110px content box, leaving almost no breathing room) to 55px —
     exactly half the content height, so the mark sits inside the green
     with real clearance on every side instead of crowding the tile. */
  .batches__grid .ils-startup-tile img { max-height: 55px; }

  /* Per direct request with reference screenshots: these five logos
     (Rifò, Calton, myCia, Climate Standard, WOW/Why Only White) read as
     small next to the others on mobile — scaled up +40% (55px -> 77px).
     All five are height-bound at the shared cap (none come close to the
     ~299px content width even at this larger size), so raising the
     height cap alone grows each proportionally on both axes. Mobile only,
     per direct request; tablet/desktop keep the shared 90px cap. */
  .batches__grid .ils-startup-tile img[src*="rifo-lab"],
  .batches__grid .ils-startup-tile img[src*="calton"],
  .batches__grid .ils-startup-tile img[src*="mycia"],
  .batches__grid .ils-startup-tile img[src*="climate-standard"],
  .batches__grid .ils-startup-tile img[src*="why-only-white"] {
    max-height: 77px;
  }
}

/* Same equal-weight problem, confirmed at tablet/desktop's shared 280px
   tile: measured every logo's rendered height and found the same 4.5x
   spread as mobile had (41-184px) — square marks filling the full 184px
   content height while wide wordmarks land as low as 41px next to them.

   First pass copied mobile's exact 50% ratio (92px) to match, but at this
   much larger tile that read as too small/illegible per direct feedback
   ("molto piccoli, illeggibili") — halving works at mobile's cramped
   168px tile, but leaves a lot of dead green space at 280px. Raised to
   140px (~76% of the 184px content height).

   Per two direct follow-up requests ("diminuisci lo scale del -20%",
   repeated once more), scaled down again: 140 -> 112 -> 90px —
   desktop/tablet only, mobile's 55px is untouched. */
/* Tablet/desktop logo sizing — balanced by AREA, not by a height cap.

   Every earlier pass here capped height, and a height cap cannot balance
   marks of different proportion: at one shared cap a 3:1 wordmark also
   takes the full column width and ends up with three times the ink of a
   1:1 symbol pinned at the same height. Measured spread across the 24
   marks was 4.7x by rendered area, then 2.4x after per-shape caps — still
   visibly uneven, hence this rewrite.

   So each mark is now given the height that lands it on ONE target area:

       h = sqrt(target_area / native_ratio)

   with target_area = 16000px2, about 31% of the 283x184 content box at the
   capped container width. Solved once per logo below, then expressed in
   cqw — percent of the tile's own content width (the tile is the query
   container) rather than px, because that column is not one width: it
   measures 181px at 768px, 230px at 1025px, 315px at 1280px and 283px
   from 1440px up, where the container hits --container-max and the page
   padding grows. Absolute px would balance at exactly one viewport and
   drift everywhere else; scaling every height with the column keeps all 24
   in the same relation at every width.

   Three marks are deliberately left out, because no CSS can bring them to
   the target — see the note under the media query. */
@media (min-width: 768px) {
  .batches__grid .ils-startup-tile { container-type: inline-size; }

  .batches__grid .ils-startup-tile img { width: auto; }

  /* 1:1 and portrait — the shapes the old height cap squeezed hardest */
  .batches__grid .ils-startup-tile img[src*="rifo-lab"],
  .batches__grid .ils-startup-tile img[src*="mycia"] { height: 44.5cqw; }

  /* 0.67:1. Its file is only 84x126, so it also carries a px ceiling to
     keep the widest column from upscaling it into mush. */
  .batches__grid .ils-startup-tile img[src*="dotzer0"] { height: 44.5cqw; max-height: 126px; }

  .batches__grid .ils-startup-tile img[src*="why-only-white"] { height: 37.5cqw; }   /* 1.43:1 */
  .batches__grid .ils-startup-tile img[src*="proxima-robotics"] { height: 31.1cqw; } /* 2.05:1 */
  .batches__grid .ils-startup-tile img[src*="calton"] { height: 28.3cqw; }           /* 2.48:1 */
  .batches__grid .ils-startup-tile img[src*="climate-standard"] { height: 27.2cqw; } /* 2.68:1 */
  .batches__grid .ils-startup-tile img[src*="biova"] { height: 26.5cqw; }            /* 2.86:1 */
  .batches__grid .ils-startup-tile img[src*="agrobit"] { height: 25.8cqw; }          /* 2.99:1 */
  .batches__grid .ils-startup-tile img[src*="aloe"] { height: 25.4cqw; }             /* 3.10:1 */

  .batches__grid .ils-startup-tile img[src*="popularise"],
  .batches__grid .ils-startup-tile img[src*="baqta"],
  .batches__grid .ils-startup-tile img[src*="fody"] { height: 25.1cqw; }             /* 3.16-3.21:1 */

  .batches__grid .ils-startup-tile img[src*="elementag"] { height: 24.7cqw; }        /* 3.26:1 */

  .batches__grid .ils-startup-tile img[src*="knitronix"],
  .batches__grid .ils-startup-tile img[src*="alpha"] { height: 24.4cqw; }            /* 3.37-3.41:1 */

  .batches__grid .ils-startup-tile img[src*="lab-go"] { height: 23.7cqw; }           /* 3.57:1 */
  .batches__grid .ils-startup-tile img[src*="italia-rimborso"] { height: 22.6cqw; }  /* 3.95:1 */

  .batches__grid .ils-startup-tile img[src*="cyber-evolution"],
  .batches__grid .ils-startup-tile img[src*="biotitan"] { height: 22.3cqw; }         /* 4.00-4.06:1 */

  /* 4.73:1. Its file is 279x59, so the target height is all it has — the
     ceiling stops the widest column from upscaling it. */
  .batches__grid .ils-startup-tile img[src*="quiroom"] { height: 20.5cqw; max-height: 59px; }

  /* The three that cannot reach the target area, left to fill the column
     instead of being stretched past what they have:
       Blaster Foundry 7.02:1 and AlBicchiere 6.82:1 — the target would
         need 330-335px of width in a 283px column, so they are width-bound
         by geometry and land ~40px tall. Only a narrower tile or a redrawn
         mark changes that.
       Dresso — its file is 232x50, smaller than the column, so it renders
         at native size and needs a new asset, not a CSS rule.
     They keep the component's own max-width: 100%, which already scales
     them with the column. */
}