/* ==========================================================================
   PROGETTO DETAIL — a single project.
   Figma Quinto Cassina De' Pecchi 81:1001, y=183–4915. Written as the template
   for every project detail page (only this one is drawn — see "Known design
   gap"), so nothing here is Quinto-specific.

   Sits under the same persistent .subnav--progetti as the archive, then the
   full 686px hero (not the archive's short one) carrying a translucent red
   name plate, the usual breadcrumb/kicker/intro opener, an "INTERVENTO"
   two-column block, a two-column photo gallery, and a prev/next pair.
   No CTA band: the footer starts at 4915 and ends at 5455, leaving 596px of
   empty frame below it — same trailing space as the Progetti hub.
   ========================================================================== */

/* --- Hero name plate (174:3659 + 174:3660) --------------------------------
   Translucent red plate bleeding off the left edge, exactly the homepage hero
   title's trick: a shrink-to-fit box pulled left of the container and padded
   back so its text lands on the container edge. Figma draws the plate at
   x=-22 against a container starting at 80, hence the 102 either way. */
.progetto-hero__plate {
  display: inline-block;
  margin-left: -102px;
  padding: 25px 41px 20px 102px;
  background: rgba(175, 30, 45, .7);
  border-radius: var(--radius-frame);
  color: var(--c-text-invert);
}
/* Two lines at one leading but two sizes — the company name sits smaller than
   the place. Not a token pairing; measured off 174:3660. */
.progetto-hero__client,
.progetto-hero__place {
  margin: 0;
  font-weight: 500;
  line-height: 51px;
}
.progetto-hero__client { font-size: 35px; }
.progetto-hero__place  { font-size: 43px; }

/* The plate is bottom-anchored 92px off the hero floor rather than the
   caption default's 108. */
.progetto-hero .page-hero__caption { padding-bottom: 92px; }

/* --- Opener --------------------------------------------------------------- */
.progetto-detail {
  padding-top: 64px;      /* measured: hero bottom (869) → crumb top (933) */
  padding-bottom: 152px;  /* measured: prev/next bottom (4763) → footer top (4915) */
}
.progetto-detail__kicker { margin: 0 0 17px; }   /* kicker bottom (1069) → intro top (1086) */

/* Same paragraph, same measure and same five-line wrap as the archive page's
   intro — Figma reuses the copy verbatim. See the intro note in FIGMA-MAP §6
   for why the cap is 860 rather than the 848 box Figma reports. */
.progetto-detail__intro {
  max-width: 860px;
  margin: 0 0 81px;   /* measured: intro bottom (1231) → INTERVENTO top (1312) */
  color: var(--c-text);
}

/* --- INTERVENTO block ------------------------------------------------------
   Section heading over a .grid-2 split: a large lead sentence left, a list of
   labelled facts right. */
.progetto-detail .section-heading { margin-bottom: 24px; }   /* heading box bottom (1356) → description top (1380) */

/* Figma's node box reads 521 wide but the text renders 382 — four lines. 420
   is where Chrome reproduces that wrap; the full 628px column would pull it
   onto three. */
.progetto-detail__lead {
  max-width: 420px;
  margin: 0;
}

/* Fact pairs: value over label, 88px apart. The label's own box overlaps the
   value's 50px line box by 8px in Figma (42px between their tops, not 50), so
   it is pulled up rather than left to sit under a full line box.

   The list as a whole also starts 12px above the lead sentence beside it
   (1368 vs 1380): the two columns are optically aligned on their glyphs, not
   on a shared box top, because their line boxes are 50px and 42px. */
.spec-list { margin: -12px 0 0; }
.spec-list__item + .spec-list__item { margin-top: 24px; }
.spec-list__value {
  margin: 0;
  font-weight: 400;
  font-size: 21px;
  line-height: 50px;
}
.spec-list__label {
  margin: -8px 0 0;
  font-weight: 200;
  font-size: 16px;
  line-height: 22px;
  color: var(--c-text);
}

/* --- Gallery ---------------------------------------------------------------
   Two independent stacks rather than a flowed masonry: Figma hand-orders the
   photos and the two columns end at different heights (left 4411, right 4664),
   which no single flow algorithm reproduces. Each column is its own element on
   the shared .grid-2 track, so this stays one predictable WP gallery block.
   Every image keeps its drawn aspect ratio, so no column needs a fixed height. */
.progetto-gallery {
  align-items: start;   /* columns keep their own height; they end 253px apart */
  margin-top: 124px;    /* measured: fact list bottom (1696) → gallery top (1820) */
}
.progetto-gallery__col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.progetto-gallery__col img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-frame);
}

/* --- Prev / next ----------------------------------------------------------
   "TORNA AI PROGETTI" pinned left with its arrow flipped to point back, and
   "PROSSIMO PROGETTO" pinned right. Both are .aec-btn at the 18/600/34 size,
   which needs `height` too — the base pins its box to --lh-micro (22px). */
.progetto-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 65px;   /* measured: gallery bottom (4664) → link top (4729) */
}
.progetto-nav .aec-btn { font-size: 18px; line-height: 34px; height: 34px; }
.progetto-nav__prev { flex-direction: row-reverse; }
.progetto-nav__prev .icon-arrow { transform: scaleX(-1); }
.progetto-nav__prev:hover .icon-arrow { transform: scaleX(-1) translateX(4px); }

@media (max-width: 1024px) {
  .progetto-hero__plate { margin-left: calc(var(--pad-x) * -1); padding-left: var(--pad-x); }
  .progetto-hero__client { font-size: 26px; }
  .progetto-hero__place  { font-size: 32px; }
  .progetto-hero__client,
  .progetto-hero__place  { line-height: 1.2; }
  .progetto-detail { padding-bottom: 91px; }
  .progetto-detail__intro { margin-bottom: 49px; }
  .progetto-gallery { margin-top: 53px; }
  .progetto-detail__lead { max-width: none; }
}
@media (max-width: 768px) {
  .progetto-detail { padding-top: 40px; padding-bottom: 68px; }
  .progetto-detail__intro { margin-bottom: 36px; }
  .progetto-gallery { margin-top: 40px; }
  /* .aec-btn is nowrap, so the two links can't share a row this narrow —
     side by side they need ~440px and push the document into overflow. */
  .progetto-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}