/* ============================================================
   page-servizi.css — servizi.html-specific styles (Phase 13)

   Cross-phase reuse:
   - .serv-toc adapts the .toc sticky pattern from page-legal.css
     (renamed to decouple; Servizi uses top: 4rem always, unlike legals
     which uses sticky-at-zero on desktop — see 13-RESEARCH.md Pitfall 3).
   - .serv-bullets em-dash list-style mirrors page-legal.css line 64.
   - .svc-foot + .svc-grid--slim used on slimmed homepage #services
     (rule for .svc-grid--slim lives in page-home.css per plan 13-02).

   Loaded AFTER /css/base.css.
   ============================================================ */

/* Cozy density override for document-style multi-section page */
:root { --pad-section: 6rem; }

/* SERV-04: Deep-link scroll offset (4rem topbar + 1.5rem gap) */
#ai, #consulting, #backup, #security, #infotime {
  scroll-margin-top: 5.5rem;
}

/* SERV-06: Sticky TOC — Servizi variant.
   CRITICAL (Pitfall 3): top: 4rem on BOTH desktop AND mobile-static fallback,
   because Servizi hero is short and the TOC must explicitly clear the 4rem topbar. */
.serv-toc {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 4rem;
  z-index: 40;                  /* Pitfall 2: must be < topbar z-index 50 */
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
}
.serv-toc .frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap: 2rem;
}
.serv-toc-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  white-space: nowrap;
}
.serv-toc-links {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.serv-toc-links a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.65rem 0.85rem;     /* ≥44px touch target per ABOUT-07 precedent */
  border-radius: 0.4rem;
  border: 1px solid transparent;
  color: var(--fg-dim);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.serv-toc-links a:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.05);
}
.serv-toc-links a.cur {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Hero — left-rail intro for the multi-section document.
   Mirrors page-clients.css/page-about.css cadence (padding-top clears
   topbar + breathing room; h1 fluid clamp; lead-paragraph max-width). */
.hero {
  padding: 5rem 0 3.5rem;
  border-bottom: 1px solid var(--line);
}
.hero .sec-label {
  text-align: left;
  margin-bottom: 1.25rem;
}
.hero h1 {
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .96;
  font-size: clamp(2.75rem, 7vw, 5.75rem);
  max-width: 18ch;
}
.hero h1 em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--accent);
}
.hero p.lead {
  margin-top: 1.5rem;
  max-width: 38rem;
}
.hero-cta {
  margin-top: 2rem;
}

/* Anchored service sections */
.serv-block {
  padding: var(--pad-section) 0;
  border-top: 1px solid var(--line);
}
.serv-block--lean {
  padding: calc(var(--pad-section) * 0.75) 0;
}
.serv-block .frame {
  max-width: 48rem;             /* narrower reading column for ≤700-word sections */
}

/* Left-rail block layout — overrides base.css §sec-label/.sec-h centering
   so each serv-block reads as a coherent left-aligned column. */
.serv-block .svc-icon {
  margin-bottom: 1.25rem;
}
.serv-block .sec-label {
  text-align: left;
  margin-bottom: .75rem;
}
.serv-block .sec-h {
  text-align: left;
  margin: 0;
  max-width: none;
}
.serv-block .btn {
  margin-top: 1.75rem;
}

/* Value-prop lead paragraph */
.serv-lead {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-dim);
  margin-top: 1rem;
  max-width: 52ch;
}

/* Em-dash bullets — pattern from page-legal.css line 64 */
.serv-bullets {
  list-style-type: "\2014  ";
  padding-left: 1.25rem;        /* 20px = multiple of 4 (Pitfall not 1.2rem) */
  margin-top: 1rem;
}
.serv-bullets li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--fg-dim);
  margin-bottom: 0.35rem;
  padding-left: 0.35rem;
}

/* "Per chi:" line — italic-serif accent for the label */
.who-for {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-dim);
  margin-top: .75rem;
}
.who-for em {
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--accent);
}

/* Tech-stack line */
.serv-stack {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-mute);
  margin-top: .5rem;
}

/* Mobile breakpoint — TOC becomes static, full-width vertical list.
   Long labels (e.g. "Sicurezza & infrastruttura") don't fit 2-col at a
   touch-target font size, and a horizontal-scroll strip clips chips
   without an obvious affordance. Stacking gives every section equal
   weight, ≥44px touch targets, and no hidden content. */
@media (max-width: 900px) {
  .nav { display: none; }
  .serv-toc { position: static; }
  .serv-toc .frame {
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    padding: .85rem 1.25rem;
  }
  .serv-toc-label {
    display: block;
    text-align: left;
    margin-bottom: .15rem;
  }
  .serv-toc-links {
    flex-direction: column;
    width: 100%;
    gap: .25rem;
  }
  .serv-toc-links a {
    display: block;
    padding: .7rem .85rem;
    font-size: 0.75rem;
    text-align: left;
    border: 1px solid var(--line);
  }
  .serv-toc-links a.cur {
    border-color: var(--accent);
  }
}