/* ============================================================================
   sub-page.css — shared lateral-scroll pattern for the five detail pages
   ----------------------------------------------------------------------------
   These pages reuse scrollcraft.css's tokens/typography and styles.css's
   colour-role overrides + nav/footer chrome, but they do NOT get the home
   page's device kit (no scrub video, no pinned acts, no Pannello di
   Controllo). Instead every content block is wrapped in a ".lp-panel" whose
   inner ".lp-track" pans left or right, continuously, tied to how far the
   panel has travelled through the viewport as the visitor scrolls — driven
   by sub-page.js writing a --lp-shift custom property, transform only.
   Lighter than the home page's rail (nothing is hidden off-stage; this is a
   restrained lateral drift on top of ordinary document flow), but a real,
   working scroll interaction rather than a static page with new colours.
   ========================================================================== */

/* --------------------------------------------------------------- shell --- */
/* Client correction: the language switcher was fine where it always sat
   (inline in .site-bar__actions, next to Contattaci) -- it's "Torna alla
   Home"/its EN/PT siblings that needed to move. Sub-pages have no Pannello
   della Conoscenza (that widget only exists on the home page), so the
   top-right corner is otherwise empty here -- fixed the back-link there
   instead of leaving it in normal flow under the logo, which is what was
   colliding with the logo mark (both the mark's own growth over several
   rounds, and a later unrelated desktop-only push -- see
   .site-bar__mark's position:relative;top:3.1479rem in styles.css, added
   to three-way-align the mark with Contattaci/the Knowledge Panel on the
   HOME page specifically, but not scoped there, so it lowers the mark on
   sub-pages too, which have neither alignment target). Moving the back-
   link out of that flow entirely sidesteps needing to keep retuning a
   margin against a moving target. */
.lp-back {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 3.9rem);
  right: var(--sc-gutter);
  z-index: var(--sc-z-chrome);
  display: inline-flex;
  align-items: center;
  gap: var(--sc-2);
  font-family: var(--sc-font-text);
  font-weight: 600;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
  text-decoration: none;
  pointer-events: auto;
}
@media (max-width: 860px) {
  /* Sits BELOW Contattaci/the lang switch here rather than beside them --
     measured Contattaci's own mobile box (top 43px, bottom 88px at
     390x844); 5.6rem/90px clears it with a few px to spare. First tried
     7rem, which cleared Contattaci fine but landed at the same height as
     the hero H1 below (measured y=240 for both) -- not a real overlap
     (the H1's own glyphs don't reach that far right at this width) but
     visually cluttered. Pulled back up so it reads as part of the header
     row instead of floating next to the page title. */
  .lp-back { top: calc(env(safe-area-inset-top, 0px) + 6.2rem); }
}
.lp-back:hover { color: var(--sc-ink); }
.lp-back svg { width: 16px; height: 16px; }

.lp-hero { padding-block: var(--sc-7) var(--sc-9); }
/* .lp-back moving to fixed positioning (above) took it out of document
   flow, collapsing the space it used to hold open above this hero block --
   re-measured, without this the hero icon/title crept up under the logo
   mark. Restoring clearance here instead of on .lp-back's own old margin
   (now irrelevant, fixed elements don't push flow) -- desktop value clears
   the 120px mark (bottom ~182px) with the same margin the old .lp-back
   position used to leave; mobile clears the smaller 80px mark. */
@media (min-width: 861px) {
  .lp-hero { padding-top: calc(var(--sc-10) + 3.1479rem + 1.5rem + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 860px) {
  .lp-hero { padding-top: calc(var(--sc-10) + 1rem + env(safe-area-inset-top, 0px)); }
}
.lp-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  margin-bottom: var(--sc-5);
}
.lp-hero__icon svg { width: 2rem; height: 2rem; }
.lp-hero h1 { max-width: 20ch; margin-bottom: var(--sc-4); }
.lp-hero .sc-lede { max-width: 56ch; }

/* ------------------------------------------------------ lateral-pan core -- */
.lp-panel {
  overflow: clip;
  padding-block: var(--sc-8);
  border-top: 1px solid var(--sc-hairline);
}
.lp-track {
  transform: translate3d(calc(var(--lp-shift, 0) * 1px), 0, 0);
  will-change: transform;
}

/* -------------------------------------------------------------- benefits -- */
.lp-benefits {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sc-5);
}
.lp-benefit {
  display: flex; flex-direction: column; gap: var(--sc-3);
  padding: var(--sc-5);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-lg);
  background: color-mix(in oklab, var(--sc-surface) 70%, transparent);
}
.lp-benefit__icon {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
}
.lp-benefit__icon svg { width: 1.3rem; height: 1.3rem; }
.lp-benefit h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); margin: 0; }
.lp-benefit p { font-size: var(--sc-t-sm); }

/* ------------------------------------------------------------ stat table -- */
.lp-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sc-6) var(--sc-8);
}
/* Client review: a 5-item distribution list (risparmio-tempo) wrapped its
   5th stat onto a lonely second row at desktop widths under the default
   auto-fit/11rem minimum. Force one row above the width where 5 columns
   can actually breathe; below that, fall back to the same auto-fit
   reflow every other .lp-stats list already relies on for mobile. */
@media (min-width: 62rem) {
  .lp-stats--5 { grid-template-columns: repeat(5, 1fr); }
}
.lp-stats li { padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.lp-stats b {
  display: block;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-2xl);
  color: var(--sc-accent);
  letter-spacing: var(--sc-track-tight);
  font-variant-numeric: tabular-nums;
}
.lp-stats em { font-style: normal; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }

/* comparison table: two states (before/after) as a plain semantic table,
   not a rendered chart — same real numbers as the source pages, lighter
   markup */
.lp-table-wrap { overflow-x: auto; }
table.lp-table { width: 100%; border-collapse: collapse; font-size: var(--sc-t-sm); }
.lp-table caption { text-align: left; margin-bottom: var(--sc-3); }
.lp-table th, .lp-table td { text-align: left; padding: 0.6em 1em 0.6em 0; border-bottom: 1px solid var(--sc-hairline); white-space: nowrap; }
.lp-table th { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
.lp-table td:not(:first-child), .lp-table th:not(:first-child) { font-variant-numeric: tabular-nums; color: var(--sc-ink); }
.lp-table tbody th { color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-sm); text-transform: none; letter-spacing: normal; }

/* --------------------------------------------------------------- detail --- */
.lp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-8); }
.lp-detail h2 { margin-bottom: var(--sc-5); }
.lp-detail-item { padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.lp-detail-item:first-of-type { border-top: none; padding-top: 0; }
.lp-detail-item + .lp-detail-item { margin-top: var(--sc-4); }
.lp-detail-item h4 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); margin: 0 0 var(--sc-2); }
.lp-detail-item p { font-size: var(--sc-t-sm); }

/* ------------------------------------------------------------------- cta -- */
.lp-cta {
  text-align: center;
  padding: var(--sc-9) var(--sc-gutter);
  border-radius: var(--sc-r-lg);
  background: color-mix(in oklab, var(--sc-accent) 12%, var(--sc-surface));
  border: 1px solid var(--sc-hairline-strong);
}
.lp-cta h2 { margin-bottom: var(--sc-4); }
.lp-cta p { max-width: 46ch; margin-inline: auto; margin-bottom: var(--sc-6); }
.lp-cta .cta { margin: 0 auto; }

/* ------------------------------------------------------------------ legal -- */
.lp-legal { max-width: 62rem; }
.lp-legal h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); margin: var(--sc-8) 0 var(--sc-3); }
.lp-legal h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); margin: var(--sc-6) 0 var(--sc-2); }
.lp-legal p, .lp-legal li { font-size: var(--sc-t-base); color: var(--sc-ink-soft); line-height: var(--sc-leading-body); }
.lp-legal p { margin: 0 0 var(--sc-3); }
.lp-legal ul { padding-left: 1.4em; margin: 0 0 var(--sc-3); }
.lp-legal li { margin-bottom: var(--sc-2); }
.lp-legal .lp-updated { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.lp-legal a { color: var(--sc-accent); }

/* -------------------------------------------------------------- footer --- */
.lp-foot { margin-top: var(--sc-9); }

/* Clearance for the fixed ElevenLabs launcher, which floats in the bottom-right
   corner of every page. Hit-tested with elementFromPoint at the page bottom on
   all five detail pages at 390x844, four of the five footer links — "Come
   Operiamo", "Referenze", "Chi Siamo", "Contattaci" — resolved to
   ELEVENLABS-CONVAI rather than to the anchor, so tapping them opened the chat
   consent dialog instead of returning to the home page section. Identical
   defect and identical remedy to the one on index.html's terminal act (see the
   long note on .act--contact in styles.css): the launcher plus its speech
   bubble is ~95px tall sitting ~38px off the bottom edge, so reserve 10rem of
   ground beneath the footer and the links land above the band. Desktop was
   already clear at every width tested (1440 down to 900); the reserve is
   harmless there — it is empty page ground at the very end of the document. */
.lp-foot { padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0px)); }

/* The CTA panel immediately before the footer on each detail page closes
   off the lateral-pan section stack with its own hairline (M4: was an
   inline style on the .lp-panel wrapping the CTA). */
.lp-panel:last-of-type { border-bottom: 1px solid var(--sc-hairline); }

/* -------------------------------------------------------------- mobile --- */
@media (max-width: 860px) {
  .lp-benefits { grid-template-columns: 1fr 1fr; }
  .lp-detail-grid { grid-template-columns: 1fr; }
  /* .lp-back's old margin-top lived here (it used to be a normal-flow
     element positioned by margin against the logo mark). Now that it's
     position:fixed (see the shell section above), its vertical position is
     set entirely via `top` there -- a leftover margin-top here was still
     applying on top of that `top` value (margin still offsets fixed
     elements), silently pushing it var(--sc-10)/128px further down than
     intended and undoing the repositioning. Removed; if this link ever
     needs mobile retuning again, do it on the `top` value in the shell
     section, not here. */
}
@media (max-width: 560px) {
  .lp-benefits { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .lp-track { transform: none !important; }
}