/* ---------------------------------------------------------------------------
   Hero mosaic.

   One DOM, three arrangements — re-measured directly on the live site's
   rendered DOM (getBoundingClientRect + computed styles), not from the
   design mocks the first pass was built against:

   mobile  (< 768)    green panel · sector photo · red callout · venue photo,
                       all full width, stacked
   tablet  (768–1024) panel and sector photo still stacked full width,
                       then a two-column row: callout | venue photo
   desktop (1025+)    2fr 1fr 1fr mosaic; the third column splits
                       callout (content height) over venue photo (fills rest)

   The 768/1025 breakpoints (not the previous 600/960) and the panel's real
   vh-based sizing were confirmed by testing several widths WITHIN each tier,
   not just at the tier edges — see the comments below for the specific
   evidence at each rule.
   --------------------------------------------------------------------------- */

.hero { padding-block: var(--space-5) 0; }

/* Container padding is NOT one fluid percentage — confirmed by testing
   multiple widths inside each tier, not just 375/768/1280 as before: a
   fixed 16px inset holds all the way from 375 to 767px, a fixed 64px inset
   holds from 768 to 1024px, and only from 1025px up is it a true 10% (which
   does match identically at 1280 and 1920px). The earlier 4.3%/8.3% figures
   only happened to equal 16px/64px at the specific widths tested back then. */
.hero .ils-container {
  max-width: none;
  padding-inline: 16px;
}

@media (min-width: 768px) {
  .hero .ils-container { padding-inline: 64px; }
}

@media (min-width: 1025px) {
  .hero .ils-container { padding-inline: 10%; }
}

.hero__grid {
  display: grid;
  gap: var(--hero-gap);
}

/* --- Green panel -------------------------------------------------------- */

.hero__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  /* Live-measured as a real min-height: 33vh below 1025px — the panel's
     height tracks the BROWSER WINDOW's height, not an aspect-ratio of its
     own width (confirmed: same vh ratio held at 375/600/768/1024px widths
     when tested at a fixed window height, and scaled linearly when the
     window height itself changed at a fixed width). The old aspect-ratio
     figures came from the design mock and were never checked against the
     live DOM. */
  min-height: 33vh;
  padding: var(--space-7) var(--space-6);
  /* Per direct follow-up request, this panel's title/CTA are back to
     centered on tablet/mobile (briefly left-aligned along with the rest
     of the site's titles, but reverted specifically for this block).
     Desktop already sets its own left alignment below at 1025px. */
  text-align: center;
}

.hero__panel-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Corrected per direct live measurement: the video container carries
   Elementor's own "elementor-hidden-mobile" class, which is a flat <768px
   cutoff (confirmed hidden at both 375px and 767px, visible at 828px) —
   not 600px as previously assumed. Below 768px the live site shows a
   static image the whole way, not a mix. */
.hero__panel-media--video { display: none; }

@media (min-width: 768px) {
  .hero__panel-media--mobile { display: none; }
  .hero__panel-media--video { display: block; }
}

.hero__title,
.hero__cta { position: relative; }

/* Size measured on the live site: a flat 50px below 600px, then a clean
   4vw with no floor from 600px up (confirmed exact at 768/960/1024/1280/
   1920px) — not one continuous max(50px, 4vw), which would have wrongly
   floored the tablet sizes back up to 50px too. */
.hero__title {
  font-family: var(--type-hero-family);
  /* Documented deviation: the mocks are far lighter than --type-hero-weight
     (Bold). The override lives in tokens.css, see NOTE-SEZIONE-1.md. */
  font-weight: var(--hero-title-weight);
  font-size: 50px;
  line-height: var(--lh-snug);
  letter-spacing: var(--type-hero-tracking);
  color: var(--text-primary);
}

/* Corrected per direct live measurement (getComputedStyle on the real wash
   ::before, at 375/767px): the multiply blend above was never what the live
   site does — it's a flat rgba(15,106,56,0.74) overlay at normal blending,
   same mechanism as tablet/desktop, just a lower opacity (0.74 vs the
   shared --overlay-eco token's 0.86) than what this was hiding the wash in
   favour of. Multiply reacted per-pixel to the photo's own tones, which is
   what produced the patchy, uneven dark-green look instead of this flat,
   even tint. */
@media (max-width: 767px) {
  .hero__panel .ils-media__wash--eco { background: rgba(15, 106, 56, 0.74); }
}

/* --- Photographs -------------------------------------------------------- */

/* .ils-media takes the <img> out of flow (see components.css), so these
   frames need their own height — never an aspect-ratio here, confirmed by
   the live site's height staying flat while the width changed a lot within
   a tier. Sector photo: a fixed 180px banner below 768px, 116px from
   768–1024px, then it simply stretches to match the mosaic row from
   1025px. Venue photo: a fixed 225px below 768px, then it stretches with
   its row (768–1024px: the callout row; 1025px+: see .hero__aside below). */
.hero__photo--sector { position: relative; overflow: hidden; height: 180px; }
.hero__photo--venue { height: 225px; }

/* Crossfade slideshow (js/hero-slideshow.js toggles .is-active). */
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.hero__slide.is-active { opacity: 1; }

/* --- Callout column ----------------------------------------------------- */

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap);
}

.hero__callout {
  display: flex;
  align-items: center;
  padding: var(--space-6);
}

/* Measured directly on the real hero <h1> (background rgb(226,71,37)), not
   the unrelated duplicate paragraph the very first pass on this text
   accidentally matched: Space Grotesk, Regular, and line-height exactly
   equal to font-size (ratio 1.0, no extra leading) at every width checked.
   Size is fixed 24px on mobile, then two distinct vw tiers (not one
   continuous formula, matching this site's usual per-breakpoint pattern):
   2.5vw at 600–1024px, 1.2vw from 1025px up. Alignment is tiered too, left
   → center → left rather than a simple two-state switch. */
.hero__callout p {
  font-family: var(--type-hero-family);
  font-weight: var(--fw-regular);
  font-size: 24px;
  line-height: 1;
  color: var(--text-primary);
  text-align: left;
}

/* Mobile only (<768px). Measured directly on the live site's real DOM
   (not the shared --lh-snug/--type-hero-tracking tokens, which don't match
   here): the panel's own horizontal padding is a flat 5% of its own width
   (confirmed identical at 375px and 414px: 17.14px/343px and 19.09px/382px,
   both 5.0%) — narrower than the shared --space-6 (32px) this inherited by
   default, which is why "in a smart / city" was wrapping as "in a / smart
   city" instead. The title itself has no extra leading and no tracking
   (line-height ratio exactly 1.0, letter-spacing normal) at every mobile
   width checked. */
@media (max-width: 767px) {
  .hero__panel { padding-inline: 5%; }

  .hero__title {
    line-height: 1;
    letter-spacing: normal;
  }
}

/* ===========================================================================
   Tablet — 600px (title sizing only; the layout itself doesn't change here)
   =========================================================================== */

@media (min-width: 600px) {
  .hero { padding-block: var(--space-6) 0; }

  .hero__title { font-size: 4vw; }

  /* On tablet the mock breaks only after "startups": two lines. */
  .hero__break-except-tablet { display: none; }

  .hero__callout p {
    font-size: 2.5vw;
    /* Per direct request: left-aligned on tablet/mobile, not centered.
       Desktop already sets this explicitly at 1025px below. */
    text-align: left;
  }
}

/* Tablet only, per direct request with a screenshot: the hero title and
   CTA button should read the same as the closing "Candidati oggi e passa
   all'azione" card's title/button. Title: same exact 72px/400 (was the
   fluid 4vw, ~31px at 768px) — just the size, kept in the hero's own
   cream-on-photo color already set above. Button: same size as the CTA
   card's .ils-btn--lg (56px tall, 32px text, no tracking, 3px radius) —
   reusing --lg's own values here rather than adding the class in the
   markup, since --lg isn't wanted at mobile/desktop, only this tablet
   range. Colors stay --contrast (cream bg/green text): the CTA card's
   button is solid green because it sits on the page's cream background,
   but the hero sits on a green photo, where a same-green button would
   have almost no contrast — per direct confirmation, only the size
   should match, not the color. */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero__title { font-size: 72px; }

  .hero__cta {
    height: var(--control-height-lg);
    padding-inline: var(--space-5);
    font-size: 32px;
    letter-spacing: normal;
    border-radius: 3px;
  }
}

/* ===========================================================================
   768px — the callout row: red box and venue photo go side by side, while
   the panel and sector photo are each still their own full-width row above.
   Confirmed on the live site: still one stacked column at 767px, already a
   2-up callout row at 768px exactly (Elementor's own breakpoint here, not
   the previous 600px guess).
   =========================================================================== */

@media (min-width: 768px) {
  .hero__photo--sector { height: 116px; }

  .hero__aside {
    flex-direction: row;
    align-items: stretch;
  }

  /* flex: 1 1 0 (unitless zero basis) split these unevenly in testing even
     with empty content and min-width:0 — a real basis of 50% sidesteps
     whatever's forcing that and gives the clean 50/50 split the live site
     shows here. */
  .hero__aside > * { flex: 1 1 50%; min-width: 0; }

  .hero__photo--venue { height: auto; }
}

/* ===========================================================================
   1025px — the real mosaic: 2fr / 1fr / 1fr row. Confirmed still the
   stacked tablet layout at 1024px and already the row mosaic at 1025px —
   not 960px as previously assumed. Also where the panel and callout text
   switch from centered to left, matching the same 1025px threshold already
   found elsewhere on this site (footer, panel text-align).
   =========================================================================== */

@media (min-width: 1025px) {
  .hero { padding-block: var(--space-7) 0; }

  .hero__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  /* The panel is the tallest cell, so with align-items: stretch its height is
     the whole mosaic's height. Per direct request the first screen is the
     mosaic AND the endorsement logo band together — the mosaic takes all the
     height that is left once the band's logos are guaranteed a place above
     the fold, instead of the live site's flat 59vh.

     Everything subtracted here is real furniture above or below it: the
     sticky header, this section's own top padding, then the band's top
     padding and the 135px its content measures (135px at 1440px and 1920px,
     124px at 1025px — the larger is reserved so the logos clear the fold at
     every desktop width; re-measured after the band's logos were scaled and
     put on one line, which brought this down from 143px). The band's
     *bottom* padding is deliberately left out: it is empty space, so letting
     it fall past the fold buys the mosaic 96px of real height and still
     lands the logos themselves on screen.

     The last --space-5 is breathing room under the logos: without it they
     land exactly on the fold (measured: bottom edge at 900px in a 900px
     window), which reads as clipped and is one rounding away from actually
     being cut.

     No floor of its own: the panel already grows to fit its title and CTA
     (~440px at 1440px wide), which is the only true lower bound. */
  .hero__panel {
    min-height: calc(
      100vh - var(--header-height) - var(--space-7)
            - var(--space-9) - 135px - var(--space-5)
    );
    align-items: flex-start;
    justify-content: center;
    padding: var(--hero-panel-pad);
    text-align: left;
  }

  .hero__break-except-tablet { display: inline; }

  .hero__photo--sector { height: auto; }

  .hero__aside {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__aside > * { flex: initial; }

  /* The callout keeps its content height; the venue photo below it absorbs
     whatever's left once the panel's 59vh floor is taller than that
     content — matching the live site's own slack distribution, with a
     17vh floor of its own confirmed on the real DOM. */
  .hero__callout { align-items: flex-start; flex: 0 1 auto; }
  .hero__photo--venue { flex: 1 1 auto; height: auto; min-height: 17vh; }

  .hero__callout p {
    font-size: 1.2vw;
    text-align: left;
  }
}