/* ==========================================================================
   Spacing, single source of truth for section + card padding
   This file is loaded AFTER inner.css and overrides stacking conflicts.

   Rules:
   1. Inner hero: short, consistent hero block on every inner page.
   2. Body sections inside <main>: one padding scale, no stacking.
   3. Consecutive body sections collapse (second gets padding-top:0) so
      we never get "double gap" between sibling content blocks.
   4. Cards get one padding scale.
   ========================================================================== */

:root {
  /* Vertical padding for a body section on any inner page */
  --section-pad-y:    clamp(48px, 6vw, 88px);
  --section-pad-y-sm: clamp(32px, 4vw, 56px);

  /* Card padding scales */
  --card-pad:    clamp(20px, 2.4vw, 32px);
  --card-pad-lg: clamp(24px, 2.8vw, 40px);
}

/* --------------------------------------------------------------------------
   Inner hero, overrides inner.css to give a single tight hero height
   -------------------------------------------------------------------------- */
.inner-hero,
.product-hero,
.uc-hero {
  padding-block: clamp(40px, 5vw, 72px) clamp(28px, 3vw, 48px);
}

/* --------------------------------------------------------------------------
   Body sections on INNER pages (about, pricing, clients, contact-us, etc.)
   Only targets .inner-body explicitly so we don't fight home-page sections
   (.hero, .engine-section, .verticals-section, .section-sm, etc.) which
   each define their own padding.
   -------------------------------------------------------------------------- */
section.inner-body {
  padding-block: var(--section-pad-y);
}

/* Two inner-body sections back-to-back collapse to one gap, not two. */
section.inner-body + section.inner-body {
  padding-top: 0;
}

/* If a page author explicitly sets style="padding-top:0" or
   style="padding-bottom:0" inline, respect it over our base rule. */

/* --------------------------------------------------------------------------
   Cards, consistent breathing room
   -------------------------------------------------------------------------- */
.feature-card,
.team-card,
.uc-card,
.sol-card,
.partner-card,
.quote-card,
.price-card,
.news-card,
.contact-card,
.value-card,
.stat-card,
.job-card {
  padding: var(--card-pad-lg);
}

/* News list spacing */
.news-grid { gap: clamp(20px, 2.4vw, 32px); }
.news-card-body { padding: var(--card-pad); }

/* Paragraph rhythm in body content */
section.inner-body p + p,
.two-col p + p,
.split-copy p + p,
.stage-copy p + p,
.prose p + p,
.prose-wide p + p {
  margin-top: 1.1em;
}

/* Article (news detail) spacing */
.article-hero { padding-block: clamp(32px, 4vw, 64px); }
.article-body { padding-block: clamp(32px, 4vw, 56px); }
.article-body p + p { margin-top: 1.1em; }
.article-body h2 { margin-top: 2em; margin-bottom: 0.6em; }
.article-body h3 { margin-top: 1.6em; margin-bottom: 0.5em; }
.article-body ul, .article-body ol { margin-block: 1em; padding-inline-start: 1.4em; }
.article-body li + li { margin-top: 0.4em; }

/* Product stage spacing (on /products/*.html) */
.product-stage { padding-block: clamp(48px, 5vw, 80px); }

/* CTA band, the dark navy block at the bottom of most pages */
.cta-band {
  padding-block: clamp(48px, 5vw, 80px);
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
}

/* Inner CTA (/about, /pricing) */
.inner-cta {
  padding-block: clamp(40px, 5vw, 72px);
}

/* --------------------------------------------------------------------------
   Section heads, tighten space between eyebrow/title/lede/grid
   -------------------------------------------------------------------------- */
.section-head,
.section-head-compact {
  margin-bottom: clamp(24px, 3vw, 40px);
}
.section-head + .price-grid,
.section-head + .feature-grid,
.section-head + .uc-rich-grid,
.section-head + .uc-rich-grid-3,
.section-head + .uc-rich-grid-4,
.section-head + .outcomes-grid,
.section-head + .trust-pillars,
.section-head + .trust-pillars-4 {
  margin-top: 0;
}

/* Prevent "ghost whitespace" above footers on short pages */
main + footer,
main + .cta-band {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Scroll-to-top button
   -------------------------------------------------------------------------- */
#scroll-top,
.scroll-top {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-ink-2);
  color: var(--color-bg);
  border: 1px solid var(--color-divider);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 45;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  cursor: pointer;
}
[data-theme='dark'] #scroll-top,
[data-theme='dark'] .scroll-top {
  background: var(--color-primary);
  color: #fff;
}
#scroll-top.is-visible,
.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#scroll-top:hover,
.scroll-top:hover {
  background: var(--color-primary);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Breadcrumbs, consistent across all inner pages
   -------------------------------------------------------------------------- */
.breadcrumbs {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
}
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs .sep,
.breadcrumbs [aria-hidden="true"] { opacity: 0.55; }
.breadcrumbs .current { color: var(--color-ink-2); }
[data-theme='dark'] .breadcrumbs .current { color: var(--color-text); }