/* ==========================================================================
   PAGE HERO + BREADCRUMB + KICKER — shared inner-page opener.
   Figma Chi Siamo 2001:2758 (686h photo) + 2001:2826 (breadcrumb); Servizi
   hub 77:578 (686h photo) + 77:579 (wash) + 104:188 (caption title).
   `--h-hero-inner` (686px) was reserved in tokens.css back when only the
   homepage existed, anticipating exactly this reuse across every inner page
   (Servizi, Progetti, ESG, Lavora con noi, Contatti…) — built once here
   instead of per page. Only the photo band + breadcrumb + kicker type are
   common; each page's own heading/copy content is still page-specific CSS.

   Two hero variants confirmed so far: Chi Siamo's is a plain photo, Servizi
   hub's adds a dark wash + white H1 caption pinned near the bottom — so the
   wash/caption/title rules below are opt-in (add the elements only if a
   given page's Figma frame has them), not baked into the base `.page-hero`.
   ========================================================================== */
.page-hero {
  position: relative;
  height: var(--h-hero-inner);
  overflow: hidden;
  background: var(--aec-antracite);   /* shows while the photo loads */
}
.page-hero picture { display: contents; }
.page-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Caption variant (Servizi hub 77:579/104:188) --------------------------
   Flat dark wash over the whole photo (not the homepage hero's boxed rosso
   band) with the H1 bottom-anchored on top — get_design_context on 77:579
   returned a plain rgba(36,36,36,.2) fill, no separate caption box. */
.page-hero__wash {
  position: absolute;
  inset: 0;
  background: rgba(36, 36, 36, .2);
  pointer-events: none;
}
.page-hero__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: 108px;   /* measured: title bottom (701) → hero bottom (809) */
  pointer-events: none;
}
.page-hero__title {
  max-width: 575px;
  margin: 0;
  color: var(--c-text-invert);
}

/* --- Short variant (General Contractor 180:2530, and presumably the other
   two Servizi detail pages) — a plain photo like Chi Siamo's, just shorter
   because it sits below the persistent sub-nav tab bar (.subnav)
   instead of directly under the header. Falls back to the same 360/240
   tablet/mobile heights as the base .page-hero — 371 is already close
   enough to 360 that a dedicated short-variant step wasn't worth adding. */
.page-hero--short { height: 371px; }

/* --- Breadcrumb -----------------------------------------------------------
   The gap above it (hero bottom → crumb top) is part of each page's own
   title-block rhythm, so that margin stays with the caller; the 64px gap
   *after* it to the page kicker below measured identically on both Chi
   Siamo and Servizi, so that half is baked in here instead. Figma spaces
   the words wider than the source text's own whitespace collapses to
   (get_design_context returns literal "HOME   >   CHI SIAMO"); reproduced
   with a margined separator instead of relying on multiple spaces. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 64px;
  font-weight: var(--fw-breadcrumb);
  font-size: var(--fs-breadcrumb);
  line-height: var(--lh-breadcrumb);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb__sep { opacity: .6; }

/* --- Page kicker ------------------------------------------------------------
   "TITOLETTI SEZIONI" bold-700 override, uppercase, red — identical on both
   Chi Siamo ("chi siamo", 2001:2825) and Servizi ("I NOSTRI SERVIZI",
   104:177), so promoted here instead of staying a per-page rule. Margin
   below it isn't shared (24px on Chi Siamo, 16px on Servizi), so that stays
   with the caller same as the breadcrumb's top gap. */
.page-kicker {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-titoletti);
  line-height: var(--lh-titoletti);
  text-transform: uppercase;
  color: var(--c-accent);
}

@media (max-width: 1024px) {
  /* No tablet/mobile frame for this band — derived, same 360/240 stepping
     used elsewhere for full-bleed photo bands without a mobile reference. */
  .page-hero { height: 360px; }
  .page-hero__caption { padding-bottom: 40px; }
}
@media (max-width: 768px) {
  .page-hero { height: 240px; }
}
@media (max-width: 768px) {
  .page-kicker { font-size: 24px; line-height: 1.407; }
}