/* ==========================================================================
   FEATURED PROJECT — Figma homepage 177:2448, y=1997–2914
   Full-bleed image band (797px, same treatment as the hero) with a
   semi-transparent panel pinned to the container's right edge: kicker,
   project name, three spec pairs, and a bottom-pinned "Scopri di più" link
   (same margin-top: auto pattern used for the servizi-card arrows).
   ========================================================================== */
.featured-project {
  position: relative;
  height: 797px;
  overflow: hidden;
  margin-bottom: var(--space-120);   /* gap to the next section: 2914-2794 = 120 exact */
  background: var(--aec-antracite);  /* shows while the photo loads */
}
.featured-project picture { display: contents; }
.featured-project__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-project__panel {
  position: absolute;
  top: 83px;                          /* measured: panel top (2080) − band top (1997) */
  right: 50%;
  transform: translateX(calc(var(--container) / 2));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 411px;
  height: 627px;
  padding: 40px 24px 30px;
  background: rgba(255, 255, 255, .9);
  border-radius: var(--radius-frame);
  overflow: hidden;
  transition: background var(--dur) var(--ease);
}
.featured-project__panel:hover { background: rgba(255, 255, 255, .97); }

/* Named token H2 SMALL doesn't cover this — measured off 177:2473: weight
   500, 21/25, tortora, not the usual titoletti 27/38 rosso. */
.featured-project__kicker {
  margin: 0 0 26px;
  font-weight: 500;
  font-size: 21px;
  line-height: 25px;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.featured-project__title { margin: 0 0 var(--space-40); }

.featured-project__specs {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.featured-project__spec p { margin: 0; }

.featured-project__link { margin-top: auto; }

@media (max-width: 1440px) {
  .featured-project__panel { right: var(--pad-x); transform: none; }
}

/* No tablet/mobile frame exists for this section — derived. Below 1024 the
   overlay doesn't have room, so the panel drops into normal flow under a
   shorter image band instead of floating on top of it. */
@media (max-width: 1024px) {
  .featured-project {
    height: auto;
    margin-bottom: var(--space-100);
    /* The antracite fallback only needs to show behind the image now — below
       this width the panel sits in normal flow past the image's bottom edge,
       and its rgba(255,255,255,.9) was picking up the dark fallback through
       the 10% transparency. */
    background: var(--c-surface);
  }
  .featured-project__media { position: static; height: 360px; background: var(--aec-antracite); }
  .featured-project__panel {
    position: static;
    width: 100%;
    height: auto;
    padding: var(--space-40) var(--pad-x);
    border-radius: 0;
  }
  /* margin-top: auto only pushes the link down when the flex column has
     spare space to consume — at auto height it has none, so the link
     needs an explicit gap here instead. */
  .featured-project__link { margin-top: var(--space-40); }
}