/* ==========================================================================
   SUB-NAV — persistent category tab strip baked into a page.
   Figma: Servizi detail pages 180:2519–2522 · Progetti archives 79:796–801.
   Distinct from .megabar: that's a hover/tap dropdown hanging off the header
   nav, this is a static bar in the page itself, always visible, marking which
   sibling you're on. Confirmed on both via get_design_context — the current
   label renders Medium/red while the rest stay Regular/tortora.

   Generalised from the original .servizi-subnav when the Progetti archives
   turned out to need a bar with identical type, colours and states and only a
   different row of labels. The two variants differ purely in how that row is
   laid out, so everything else lives on the base class.
   ========================================================================== */
.subnav {
  background: var(--aec-beige);
  height: 60px;
}
.subnav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
/* Figma types these labels in caps — get_design_context returns the literal
   "GENERAL CONTRACTOR" / "RESIDENZIALE", not a cased string with a transform.
   They were previously rendered mixed-case, which also made every label too
   narrow to land on its drawn x. */
.subnav__link {
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  text-transform: uppercase;
  color: var(--c-text-muted);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.subnav__link:hover,
.subnav__item.is-current .subnav__link {
  font-weight: 500;
  color: var(--c-accent);
}

/* Servizi: 3 labels, spaced 144px then 109px — Figma centres each on a fixed
   x rather than on an even gap. Reproduced with per-item margins now that the
   labels render at their real (uppercase) widths; a single averaged gap was
   only ever needed while they were rendering too narrow to place accurately. */
.subnav--servizi .subnav__list { gap: 0; }
.subnav--servizi .subnav__item:nth-child(1) { margin-right: 144px; }
.subnav--servizi .subnav__item:nth-child(2) { margin-right: 109px; }

/* Progetti: 5 labels, drawn at exactly the same x/width as the Progetti
   mega-bar (83/149, 256/263, 543/249, 816/233, 1071/294 — centre 720), so it
   reuses that component's geometry verbatim: a group capped at its own width
   and spaced out, which lands the labels on their Figma centres at >=1440 and
   simply tightens the gaps below it. See the mega-bar note in FIGMA-MAP §6. */
.subnav--progetti .subnav__list {
  justify-content: space-between;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-x);
  max-width: calc(1231px + var(--pad-x) * 2);
}

@media (max-width: 1024px) {
  .subnav__list {
    justify-content: flex-start;
    gap: 32px;
    padding-inline: var(--pad-x);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .subnav__list::-webkit-scrollbar { display: none; }
  /* Both variants collapse to the same scrolling row, so the desktop spacing
     has to come off or the labels spread apart. */
  .subnav--progetti .subnav__list { max-width: none; justify-content: flex-start; }
  .subnav--servizi .subnav__list { gap: 32px; }
  .subnav--servizi .subnav__item:nth-child(1),
  .subnav--servizi .subnav__item:nth-child(2) { margin-right: 0; }
}