/* ---------------------------------------------------------------------------
   Reusable components.

   These mirror the design-system components (Button, MediaFrame, Section,
   LogoLockup) in plain CSS, so the sections still to come reuse them instead of
   redeclaring anything.
   --------------------------------------------------------------------------- */

/* === Button ================================================================
   Equivalent of components/core/Button.jsx.
   Variants: --primary (red, the default action) · --eco (green) ·
   --contrast (cream on a solid panel) · --secondary (outline).
   =========================================================================== */

/* Measured directly on the live site's "Candidati ora" buttons (header,
   hero, and the big bottom-of-page CTA all inspected): Syne Bold at 16px
   with 1.6px tracking and a 4px radius, not the shared --type-cta-* tokens'
   Space Grotesk Semibold at 14px — those tokens are also used by the
   unrelated skip-link, so they're overridden here rather than changed at
   the source. Height is a flat 40px, not the design system's 48px "md". */
.ils-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding-inline: var(--control-pad-x);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  font-family: "Syne", sans-serif;
  font-weight: var(--fw-bold);
  font-size: 16px;
  letter-spacing: 1.6px;
  text-transform: var(--type-cta-transform);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-control);
}

.ils-btn:hover { background: var(--action-primary-bg-hover); }
.ils-btn:active { background: var(--action-primary-bg-active); transform: scale(var(--press-scale)); }

/* The big bottom-of-page CTA is the one button that's genuinely larger —
   measured on the live site at 56px tall (already the shared --lg height)
   with a much bigger 32px font, no letter-spacing, and a tighter 3px
   radius. */
.ils-btn--lg {
  height: var(--control-height-lg);
  padding-inline: var(--space-5);
  font-size: 32px;
  letter-spacing: normal;
  border-radius: 3px;
}

/* Hover/active on the live site's buttons — all four "Candidati ora"
   instances checked — swap the background to the same bright accent green
   as the nav's current-section indicator (#61CE70, --e-global-color-accent
   in Elementor's terms), not the darker --action-*-bg-hover tokens. Text
   color is left as-is: the live site's own hover rule re-declares the same
   value it already had. */
.ils-btn--eco { background: var(--action-eco-bg); color: var(--action-primary-fg); }
.ils-btn--eco:hover,
.ils-btn--eco:active { background: #61ce70; }

.ils-btn--contrast { background: var(--action-contrast-bg); color: var(--action-contrast-fg); }
.ils-btn--contrast:hover,
.ils-btn--contrast:active { background: #61ce70; }

.ils-btn--secondary {
  background: transparent;
  color: var(--action-secondary-fg);
  box-shadow: inset 0 0 0 var(--border-width-default) var(--action-secondary-border);
}

.ils-btn--secondary:hover {
  background: var(--action-secondary-bg-hover);
  color: var(--action-secondary-fg-hover);
}

/* Documented deviation: the mocks set the header CTA in sentence case, while
   --type-cta-transform forces uppercase. See NOTE-SEZIONE-1.md. Case only —
   the live site's sentence-case buttons keep the same 1.6px tracking as the
   uppercase ones, confirmed on the header CTA, so this no longer zeroes it. */
.ils-btn--sentence { text-transform: none; }

/* === Panel =================================================================
   Solid tile of the hero mosaic (green / red) at --radius-panel. Applying the
   design-system scope classes (.ilp-on-eco / .ilp-on-accent) recolours the text
   and buttons inside from tokens, with no local values.
   =========================================================================== */

.ils-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-panel);
  padding: var(--space-6);
  background: var(--surface-page);
  color: var(--text-primary);
}

.ils-panel--eco { background: var(--surface-eco); }
.ils-panel--accent { background: var(--surface-accent); }

/* === Media =================================================================
   Equivalent of components/cards/MediaFrame.jsx: a frame with the shared radius
   and, optionally, one of the brand washes.
   =========================================================================== */

.ils-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--surface-media-placeholder);
}

/* The image is taken out of flow so the frame never contributes intrinsic
   height. That lets aspect-ratio — or the grid stretching it — decide the size,
   instead of the photograph dragging the layout around. */
.ils-media > img,
.ils-media > picture {
  position: absolute;
  inset: 0;
}

.ils-media > img,
.ils-media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ils-media--card { border-radius: var(--radius-card); }

/* Solid washes: the photograph survives only as a silhouette. */
.ils-media__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ils-media__wash--eco { background: var(--overlay-eco); }
.ils-media__wash--accent { background: var(--overlay-accent); }
.ils-media__wash--photo { background: var(--overlay-photo); }

/* === Logo group ============================================================
   "Un programma di" / "Con il supporto di": a Space Grotesk Medium label over a
   row of marks in object-fit: contain — never cropped, never recoloured.
   =========================================================================== */

.ils-logo-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Measured on the live site: Light/32px, not the shared label-lead
   Medium/24px. */
.ils-logo-group__label {
  font-family: var(--type-label-lead-family);
  font-weight: var(--fw-light);
  font-size: 32px;
  line-height: var(--type-label-lead-lh);
  color: var(--text-primary);
}

.ils-logo-group__list {
  display: grid;
  grid-template-columns: repeat(var(--logo-cols, 2), minmax(0, 1fr));
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ils-logo-group__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--space-7);
  border-radius: var(--radius-sm);
}

/* Measured on the live site: scaled by WIDTH (fills its column), height
   following its own aspect ratio — not clamped to a shared height, same
   pattern as .ils-logo-wall__link img (Corporate Partners). */
.ils-logo-group__link img {
  width: 100%;
  height: auto;
  transition: var(--transition-media);
}

.ils-logo-group__link:hover img { transform: scale(1.02); }

/* === Section ================================================================
   Equivalent of components/layout/Section.jsx: page-band wrapper carrying
   container width and section rhythm, with an optional textured background.
   Every band from here on is one of these instead of a bespoke <section>.
   =========================================================================== */

.ils-section {
  padding-block: var(--space-8);
  background: var(--surface-page);
  color: var(--text-primary);
}

.ils-section--alt { background: var(--surface-page-alt); }
/* Named "sunken" for the position/overflow it gives a textured band, but the
   live site's own version of this band uses the same plain page cream as
   everywhere else — measured on the live DOM (body background, not a darker
   "sunken" tone) — so background matches --surface-page here, not
   --surface-sunken. */
.ils-section--sunken { position: relative; overflow: hidden; background: var(--surface-page); }

.ils-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.ils-section__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* The live site applies no blur and no blend-mode to this image at all
   (confirmed via getComputedStyle on .elementor-background-slideshow: filter:
   none, mix-blend-mode: normal) — the asset's own pixels genuinely are light
   neutral grey (~243,243,243), sampled directly off the live-rendered image.
   What tints it cream is a separate flat overlay layered on top
   (.elementor-background-overlay: background-color rgb(233,217,187), opacity
   0.63, blend-mode normal) — not a filter on the texture itself. Reproduced
   here as ::after rather than a blend/filter on .ils-section__texture, so the
   contour lines stay exactly as crisp as the live site's. */
.ils-section__texture::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(233, 217, 187);
  opacity: 0.63;
}

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

/* === Section heading ========================================================
   Equivalent of components/core/SectionHeading.jsx: the fixed eyebrow → rule →
   title rhythm that opens every band. --size-label is the small variant used
   when the eyebrow IS the heading (no separate big title below it); --size-lg
   renders the eyebrow itself at section-title scale for bands with their own
   H2 (Corporate Partners, Criteri di selezione).
   =========================================================================== */

.ils-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* .ils-heading is a flex item of .ils-section__inner's column flex, so its
     cross-axis (width) is sized by align-items. .ils-heading--center sets
     align-items: center, which sizes the item to its children's fit-content
     width instead of stretching to the container — and fit-content ignores
     descendants' percentage max-width (it can't resolve a percentage before
     its own size is known), falling back to .ils-divider's raw pixel width.
     That let the divider's 483px force this box past the viewport on
     mobile; capping it here against the flex container's own (already
     definite) width is what actually clamps it.
  */
  max-width: 100%;
}

/* No extra cap here beyond the base rule's 100% — a 62ch reading-measure
   cap used to live on this wrapper, but "ch" resolves against whatever
   font-size the wrapper itself inherits (the page's small base size, not
   the 65-72px heading inside it), so it was capping section titles like
   "Corporate Partners" to a needlessly narrow box and wrapping them onto
   two lines on tablet even though the actual container had room. The
   reading-measure cap now lives on .ils-heading__intro below instead,
   where "ch" correctly resolves against that paragraph's own font-size. */
.ils-heading--center { align-items: center; text-align: center; max-width: 100%; margin-inline: auto; }

/* Per direct request: on tablet/mobile, section titles/intro text that use
   this --center variant read left-aligned, not centered — the block itself
   stays put (align-items: center above is untouched), only how multi-line
   text wraps changes. Desktop (>=1025px) keeps the approved centered text. */
@media (max-width: 1024px) {
  .ils-heading--center { text-align: left; }
}

/* Mobile only. Direct measurement on the live site: "Descrizione del
   programma", "Criteri di selezione" and "I Benefit del programma" — the
   three .ils-heading instances that aren't the --center variant — still
   center their own title + divider on mobile even though the section
   itself stays left overall. Their intro paragraph (where they have one)
   stays left, confirmed on live: the text below keeps its full-width, left-
   aligned box while the title above it centers. That's why this targets
   .ils-eyebrow/.ils-divider directly instead of the wrapper's align-items —
   centering the wrapper would center the paragraph's box too. Scoped to
   headings that don't already carry --center, so the already-centered
   sections (which DO also center their intro) are untouched, and to
   <768px so tablet/desktop's approved left alignment is untouched. */
@media (max-width: 767px) {
  /* Per direct follow-up request, this eyebrow now reads left-aligned on
     mobile too (tablet/desktop were already left). */
  .ils-heading:not(.ils-heading--center) .ils-eyebrow { text-align: left; }
  .ils-heading:not(.ils-heading--center) .ils-divider { margin-inline: auto; }
}

.ils-eyebrow {
  font-family: var(--type-eyebrow-family);
  font-weight: var(--type-eyebrow-weight);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-transform);
  color: var(--text-primary);
}

/* Weight and tracking re-checked directly on the live site while chasing
   the "Corporate Partners" wrapping bug: Regular (400) at normal tracking,
   not the shared --type-section-title-weight/-tracking tokens' Light
   (300) at -0.02em tight tracking (found stale from an earlier revert
   that went back to the token default without re-checking it). */
.ils-heading--lg .ils-eyebrow {
  font-family: var(--type-section-title-family);
  font-weight: var(--fw-regular);
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-lh);
  letter-spacing: normal;
  text-transform: none;
}

/* Measured on the live site at both tablet (880px) and desktop (1440px)
   widths — identical at both, so this isn't a responsive step, just the
   size from 768px up. It also isn't uniform: most section titles are
   65px, but four of them ("Corporate Partners", "Criteri di selezione",
   "I Benefit del programma", "Executive Board") are 72px on the live site
   — no shared class distinguishes the two groups, so those four are
   targeted by id below. Below 768px keeps the shared
   --type-section-title-size (48px); the live site's own mobile sizes are
   scattered per-heading (40-54px) without a clean pattern, out of scope
   here — except #description-title below, pulled out by direct request. */

/* Rule: "Descrizione del programma" must wrap to 2 lines on mobile, not 3,
   whenever the viewport allows it. Direct measurement confirms the live
   site achieves this with a smaller flat 40px here (not the shared 48px),
   which happens to be exactly enough for "Descrizione del" / "programma"
   to fit two lines at 335px content width. Keep this at 40px even if the
   shared mobile section-title size changes later. Scoped to <768px —
   tablet/desktop already use the approved 65px (this id isn't in the
   72px list above). */
@media (max-width: 767px) {
  #description-title { font-size: 40px; }
}

@media (min-width: 768px) {
  .ils-heading--lg .ils-eyebrow { font-size: 65px; }

  #partners-title,
  #criteria-title,
  #benefits-title,
  #board-title {
    font-size: 72px;
  }
}

.ils-divider {
  width: var(--divider-width);
  max-width: 100%;
  aspect-ratio: 483 / 8;
  height: auto;
  background-image: var(--divider-image), var(--divider-tricolore);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-inset-hairline);
}

.ils-heading--center .ils-divider { margin-inline: auto; }

.ils-heading__title {
  font-family: var(--type-h2-family);
  font-weight: var(--type-h2-weight);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  color: var(--text-primary);
}

/* Re-measured on the live site (Descrizione del programma paragraph,
   confirmed against a dev-tools inspection at 24px/#1C1C1C): not a fluid
   ramp — a flat 18px below 768px, a flat 24px from 768px up with no
   further growth even at 1920px. The previous clamp() undershot every
   width in between (~21px at 880px instead of 24px) by assuming a
   continuous fluid scale up to a 1280px cap that doesn't exist. */
.ils-heading__intro {
  font-family: var(--type-body-family);
  font-weight: var(--fw-light);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .ils-heading__intro { font-size: 24px; }
}

/* The 62ch reading-measure cap moved here from .ils-heading--center: "ch"
   needs to resolve against this paragraph's own font-size to mean
   anything sensible, not the heading wrapper's. */
.ils-heading--center .ils-heading__intro { max-width: min(62ch, 100%); margin-inline: auto; }

/* === Statement ===============================================================
   Equivalent of components/core/Statement.jsx. Measured against the live
   site: it actually sets this line in Syne (not the design system's default
   Space Grotesk for this role), Light at rest with individual words in Bold
   via <strong> — confirmed against the live DOM, so it wins over the
   generic token. Size is fluid between the two breakpoints measured live
   (20px @375 → 32px @1280).
   =========================================================================== */

.ils-statement {
  /* Measured on the live site: this block spans the section's full width,
     centred by text-align alone (no independent reading-width cap) — the
     two lines are already short because of the manual <br>, not because
     the container constrains them. margin-inline: auto is a belt-and-
     suspenders center, in case a future edit reintroduces a max-width. */
  margin-block: 0;
  margin-inline: auto;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: clamp(1.25rem, 0.94rem + 1.33vw, 2rem);
  line-height: var(--type-statement-lh);
  color: var(--text-primary);
  text-align: center;
}

/* Per direct request: left-aligned on tablet/mobile (its two manual-<br>
   lines start flush left instead of each centering independently);
   desktop keeps the approved centered statement. */
@media (max-width: 1024px) {
  .ils-statement { text-align: left; }
}

.ils-statement strong { font-weight: var(--fw-bold); }

/* === Stat card ===============================================================
   Equivalent of components/cards/StatCard.jsx, tone="eco" — the only variant
   used on the live site (the program's key-figure row). Radius, padding,
   gap and the cream text colour are measured against the live cards
   (radius 30px, padding 20px, value/label gap 24px, cream on green — the
   design system's on-eco text scope, which the build had omitted).
   =========================================================================== */

/* Padding measured at 25px on the live site, not the shared 20px card
   padding. */
.ils-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  min-height: var(--stat-card-min-height);
  padding: 25px;
  border-radius: 30px;
  background: var(--surface-eco);
  color: var(--ilp-cream-100);
  text-align: center;
}

.ils-stat-card__value {
  font-family: var(--type-stat-family);
  font-weight: var(--fw-regular);
  font-size: 72px;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: inherit;
}

/* Light, not the inherited body Regular — measured on the live site. */
.ils-stat-card__label {
  max-width: 26ch;
  font-family: var(--type-body-family);
  font-weight: var(--fw-light);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: inherit;
}

/* === Benefit card =============================================================
   Equivalent of components/cards/BenefitCard.jsx, tone="accent" (the default
   used on the live site): solid red tile, no shadow. Text colour comes from
   the .ilp-on-accent scope class on the <li> (see index.html) recolouring
   --text-primary to cream, the same pattern already used for the hero
   callout — not a local color value here.

   Padding (46px) and radius (15px) measured on the live site at desktop —
   the design system's --card-pad-lg (32px) and --radius-card (12px) are
   both a bit tighter than what this band actually ships. At tablet
   (768-1024px) the live site uses a much tighter 20px padding instead —
   46px there was squeezing titles like "Formazione - consulenze 1 to 1"
   against the card edges.
   =========================================================================== */

.ils-benefit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 46px;
  border-radius: 15px;
  background: var(--surface-accent);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ils-benefit-card { padding: 20px; }
}

/* Measured on the live site: this title is Syne Bold (the body family,
   not --type-benefit-title-family's Space Grotesk Semibold) — same
   mismatch as .ils-photo-card__title below. */
.ils-benefit-card__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: clamp(1.25rem, 5.5vw, var(--type-benefit-title-size));
  line-height: var(--type-benefit-title-lh);
  color: var(--text-primary);
  overflow-wrap: normal;
}

/* Found in a responsive pass: these titles contain unbreakable single words
   wider than the card at 32px, and overflow-wrap is deliberately normal here
   (matching the live site), so the word paints outside the card instead of
   breaking. Measured worst cases:
     "d'eccellenza"  222px against a 187px box — I Benefit at 768px, 3 columns
     "Consulenze"    212px against a 108px box — Come funziona at 600px, where
                     one card spans 2 of 6 tracks and is only 168px wide
   The second paints ~74px outside its card, and a first fix scoped to 768px
   and up missed it entirely. Hence sizing off the CARD rather than the
   viewport: one rule covers every card width in both bands.

   14cqw is that ratio solved from the widest word (222px at 32px = 6.94px of
   width per px of type) plus a few px of slack, so the longest word always
   fits its own card. The cap keeps the approved 32px wherever the card is
   wide enough for it — every card from 900px up, and the full-width cards at
   600-767px. Below 600px the base clamp above still applies; mobile was
   already clear. */
@media (min-width: 600px) {
  .ils-benefit-card { container-type: inline-size; }
  .ils-benefit-card__title { font-size: min(var(--type-benefit-title-size), 14cqw); }
}

/* Measured on the live site: Light, not the shared body Regular. */
.ils-benefit-card__body {
  margin: 0;
  font-family: var(--type-body-family);
  font-weight: var(--fw-light);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--text-primary);
}

/* Direct measurement, bisecting real widths on both I Benefit del
   programma and Come funziona cards: 15px through 1024px (mobile AND
   tablet, confirmed identical at both), 16px (the shared --type-body-size
   default above) only from 1025px up — this site's usual desktop
   threshold. Below 1025px this was inconsistently 15px on one section's
   cards and 16px on the other's; this makes every .ils-benefit-card body
   read at the same size everywhere it appears. */
@media (max-width: 1024px) {
  .ils-benefit-card__body { font-size: 15px; }
}

/* === Icon tile ================================================================
   Equivalent of components/cards/IconLabelCard.jsx, variant="tile": the eight
   enabling-technology icons. The PNGs carry their own sage-green background —
   never recoloured, never cropped, never placed on another background.
   =========================================================================== */

/* No padding here: it was shrinking the icon well below live's — 24px on
   all sides took it from filling ~180px grid cells at tablet down to
   114px. The icon is meant to fill its cell (see below); the label just
   needs the gap already set. */
.ils-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  /* Query container for the label below, which sizes itself off this cell. */
  container-type: inline-size;
}

/* Fixed 96px was much smaller than the live site's icons, which fill their
   grid cell (259px at 4-up desktop, 148px at 2-up mobile) — sized by width
   with aspect-ratio instead, since the icons are square. */
.ils-icon-tile__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-media);
  overflow: hidden;
}

.ils-icon-tile__media img { width: 100%; height: 100%; object-fit: cover; }

/* Measured on the live site: Space Grotesk (the display family, not the
   body one) at 24px/500 — not the 16px body-text size this had before. */
/* The label is capped at the live site's measured 24px but never allowed to
   outgrow its own cell, because these are unbreakable single words: at 24px
   "Sustainability" is 160px wide, against cells of 124px at 320px, 152px at
   375px and just 120px at 600px, where the grid goes to 4 columns. Measured
   overflow before this: 36px at 320px, 8px at 375px, 40px at 600px, spilling
   symmetrically into the 24px gutters.

   14.5cqw is that same ratio solved from the widest label (160px at 24px =
   6.67px of width per px of type, plus a few px of slack), so the longest
   word always fits its column. Deliberate deviation: the live site has the
   same overflow — its labels are auto-width and simply run into the next
   column — but it reads as a mistake at these widths. From 480px up, and on
   the whole desktop grid, the cap wins and nothing changes. */
.ils-icon-tile__label {
  font-family: var(--type-eyebrow-family);
  font-weight: var(--fw-regular);
  font-size: min(var(--size-500), 14.5cqw);
  line-height: var(--lh-heading);
  color: var(--text-primary);
}

/* === Startup tile ==============================================================
   Equivalent of components/cards/StartupCard.jsx, variant="tile": a solid
   eco-green square with just the logo, at its own colours — the real Batch
   grid treatment on the live site (no visible name/description in this
   variant; both still live in the markup for accessibility).
   =========================================================================== */

/* Measured on the live site: a fixed 280px height (not a square
   aspect-ratio — it stays 280 whether the tile itself is 313px wide at
   3-up desktop or 735px wide at 1-column mobile). */
/* Radius measured at 30px on the live site — noticeably rounder than the
   shared --radius-card (12px), same 30px value already used for the stat
   cards and venue photos elsewhere on the page. */
/* padding-inline is deliberately tighter than padding-block: with even
   padding on all sides the content box was 133px wide but 184px tall —
   wide-format logos (e.g. a 3:1 wordmark) hit that narrower width limit
   first and rendered barely a third as tall as the square-ish marks next
   to them, the same equal-weight problem fixed on the board logos.
   Narrowing the horizontal padding gives every shape more of that spare
   height to actually use. */
.ils-startup-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  padding-block: var(--space-7);
  padding-inline: var(--space-5);
  border-radius: 30px;
  background: var(--surface-eco);
  text-decoration: none;
  overflow: hidden;
  transition: var(--transition-card);
}

@media (hover: hover) {
  .ils-startup-tile:hover { box-shadow: var(--shadow-card-hover); }
}
/* The live site measured this at ~55% of the tile; scaled up per explicit
   request each time since: 63.8% -> 74% -> 86% -> 100% (fills the tile's
   own padding box — the 48px padding above still keeps it off the rounded
   edge). */
.ils-startup-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ils-startup-tile .ils-visually-hidden + img { margin: 0; }

/* --- Startup tile hover reveal -------------------------------------------
   Per direct request: hovering a batch tile slides a red panel up from
   the bottom with the startup's name, a one-line description and a
   "Website" pseudo-button. It's a second full-cover layer inside the same
   <a> (not a nested link — the tile itself already goes to the startup's
   site, so "Website" is decorative, not a separate target) that starts
   translated fully below the tile and animates to translateY(0) on
   hover/focus. aria-hidden since the tile's own aria-label already reads
   out the name + description; this is a purely visual reveal for sighted
   mouse/keyboard users, not new information for assistive tech.

   Timing matches the live site exactly: it turns out to use Elementor's
   Flip Box widget (a slide variant, not a 3D flip — its "back" layer is a
   plain translateY, confirmed via computed transform), at 0.6s ease-in-out
   — slower than this started at (var(--dur-slow), 320ms, --ease-out). */
.ils-startup-tile__reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: inherit;
  background: var(--surface-accent);
  color: var(--ilp-cream-100);
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.6s ease-in-out;
}

/* Per direct request: the reveal's startup name/description read
   left-aligned on tablet/mobile rather than centered; the panel's own
   layout (align-items above) is untouched, and desktop keeps center. */
@media (max-width: 1024px) {
  .ils-startup-tile__reveal { text-align: left; }
}

/* Hover is gated on a device that actually has a pointer. Touch browsers fake
   :hover on tap and then leave it stuck, which on a phone meant the panel
   flashed up as the tile was already navigating away. There, js/startup-tile-
   tap.js drives .is-revealed instead: first tap reveals, second tap follows
   the link — see that file. */
@media (hover: hover) {
  .ils-startup-tile:hover .ils-startup-tile__reveal {
    transform: translateY(0);
  }
}

.ils-startup-tile:focus-visible .ils-startup-tile__reveal,
.ils-startup-tile.is-revealed .ils-startup-tile__reveal {
  transform: translateY(0);
}

/* Per direct feedback ("i titoli sono piccoli") — twice now, with a
   reference screenshot the second time: scaled up further, from 30px to
   36px, deliberately well past the live site's own 22px, since both asks
   were to make it read larger here, not to re-match live's modest size. */
.ils-startup-tile__reveal-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 36px;
  line-height: 1.15;
  color: inherit;
}

.ils-startup-tile__reveal-body {
  margin: 0;
  font-family: var(--type-body-family);
  font-weight: var(--fw-light);
  font-size: 17px;
  line-height: 1.5;
  color: inherit;
}

/* Weight/border matched to the live site's own button (700/2px — this had
   defaulted to regular weight and a thin 1px border). Live's own hover
   rule for this button just resets background to transparent (it has no
   real custom hover treatment — that class is shared with every
   Elementor button, not specific to this one), so this fill/invert hover
   is our own design, not a live-site match. Background/border-color
   transition alone; the tile's own :hover already governs the panel's
   entrance, so this only needs to react to the cursor being over the
   button itself, which nested :hover naturally handles. */
.ils-startup-tile__reveal-cta {
  padding: var(--space-2) var(--space-5);
  border: 2px solid currentColor;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: inherit;
  background: transparent;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}

.ils-startup-tile__reveal-cta:hover {
  background: var(--ilp-cream-100);
  color: var(--surface-accent);
}

/* Mobile only. The tile is a fixed 168px tall here (vs. 280px at
   tablet/desktop), so this panel's type is sized against that ceiling, not
   chosen freely. At the desktop-sized 36px title every one of the 24
   startups overflowed and got silently clipped by overflow:hidden.

   The body is capped at 2 lines with an ellipsis rather than shrunk to fit
   the longest description: that fixes the panel's height regardless of how
   much text any given startup has, which is what makes a larger type scale
   safe here at all.

   Per direct request ("troppo piccoli"), scaled up from the first pass's
   18/12/11px. Measured every one of the 24 panels at 320px — the narrowest
   phone, where titles are closest to wrapping — at three candidate scales:

     22/14/13px -> tallest panel 141px, 27px of headroom
     24/15/14px -> tallest panel 150px, 18px of headroom   <- this one
     26/16/15px -> tallest panel 159px, 9px of headroom

   None overflowed and every title stayed on one line even at 26px, so the
   choice is about breathing room, not fit: 26px would leave the text within
   ~4px of the tile edge, with nothing left for a longer name later or for
   the metric differences when the Google font swaps in. 24/15/14 is the
   largest scale that still looks like a margin rather than a near-miss.

   Text is centered here, overriding the left alignment that <=1024px sets:
   also per direct request, and it reads better on a panel this short. */
@media (max-width: 767px) {
  .ils-startup-tile__reveal {
    gap: var(--space-2);
    padding: var(--space-3);
    text-align: center;
  }

  .ils-startup-tile__reveal-title { font-size: 24px; }

  .ils-startup-tile__reveal-body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.4;
  }

  .ils-startup-tile__reveal-cta {
    padding: 7px var(--space-4);
    font-size: 14px;
  }
}

/* === Board row ==================================================================
   Equivalent of components/cards/BoardCard.jsx: institutional entry with no
   card chrome — logo + long-form copy beside a 4:3 photo, a hairline rule
   below. Stacks on mobile.
   =========================================================================== */

.ils-board-row {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
  border-bottom: var(--border-width-default) solid var(--border-subtle);
}

.ils-board-row:last-child { border-bottom: none; padding-bottom: 0; }

.ils-board-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

/* Direct request: every board logo should carry equal visual weight. A
   fixed max-width with auto height did the opposite — each logo's own
   aspect ratio decided its rendered height, so the widest/shortest one
   (Intesa Sanpaolo, ~6.85:1) rendered barely a third as tall as the
   others. Fixed height + auto width (capped at the column) instead, so
   every logo is sized by the same dimension regardless of its own shape. */
.ils-board-row__logo { display: flex; align-items: center; height: 90px; max-width: 100%; }
.ils-board-row__logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }

/* Intesa Sanpaolo and Nana Bianca read as oversized at the full 90px next
   to the other two marks — direct request to bring them back down. */
.board__list > li:nth-child(1) .ils-board-row__logo,
.board__list > li:nth-child(3) .ils-board-row__logo {
  height: 65px;
}

/* Direct request: at desktop's much wider text column, even the
   proportioned sizes above read as too large. Scaled down keeping the
   same ratio between the two groups (90:65). */
@media (min-width: 1025px) {
  .ils-board-row__logo { height: 70px; }

  .board__list > li:nth-child(1) .ils-board-row__logo,
  .board__list > li:nth-child(3) .ils-board-row__logo {
    height: 51px;
  }

  /* Still reading as oversized after the above — its extreme ~6.85:1
     aspect ratio means even a matched height renders very wide, so it
     keeps dominating the row regardless. Cut further, on its own. */
  .board__list > li:nth-child(1) .ils-board-row__logo {
    height: 38px;
  }
}

.ils-board-row__body {
  margin: 0;
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--text-primary);
}

/* Measured on the live site: square (168x168 at tablet, 261x261 at
   desktop), not 4:3 — and a 23px radius, not the shared --radius-media
   (12px). */
.ils-board-row__photo { border-radius: 23px; overflow: hidden; aspect-ratio: 1 / 1; }
.ils-board-row__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Measured on the live site: the text/photo columns switch to side-by-side
   at 768px, not 960px, and the split is roughly 74/26 (2.85fr/1fr) rather
   than 2fr/1fr — confirmed consistent at both 768px (476px/168px) and
   1280px (743px/261px). */
@media (min-width: 768px) {
  .ils-board-row { grid-template-columns: minmax(0, 2.85fr) minmax(0, 1fr); align-items: start; }
}

/* === Logo grid (Corporate Partners) ==========================================
   Equivalent of components/layout/LogoGrid.jsx with grayscale={false}: full
   colour at rest, on the section's own cream background, no card chrome — the
   documented treatment for this specific band.
   =========================================================================== */

.ils-logo-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ils-logo-wall__link { display: flex; align-items: center; justify-content: center; width: 100%; }
/* Measured on the live site: each logo is scaled to a common WIDTH (fills
   its grid column) with height following its own aspect ratio, not
   clamped to a shared height — which is why Iren's taller wordmark reads
   bigger than Cisco's or Gucci's next to it, matching the live site. */
.ils-logo-wall__link img { width: 100%; height: auto; transition: var(--transition-media); }
.ils-logo-wall__link:hover img { transform: scale(1.04); }

@media (min-width: 600px) {
  .ils-logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}