/* ============================================================================
   shared-editorial.css — GLOBAL shared editorial components
   ----------------------------------------------------------------------------
   Extracted 2026-06-24 from svc-components.css ("PHASE 2 — SHARED EDITORIAL
   COMPONENTS"). These three components are used across the WHOLE site, not just
   service pages:

     - <x-content-split>      → .content-split        (editorial text/image block)
     - <x-stats-band>         → .stats-band           (4-up tabular figures)
     - <x-testimonial-simple> → .testimonial-simple   (single-quote flat tile)

   WHY THIS FILE EXISTS:
   On 2026-06-10 (staging audit #6/#19) svc-components.css was made conditional
   (loaded only on service/contact/careers/integrations templates) to drop 328KB
   of dead CSS from the homepage. That audit grepped only for `svc-`/`ind-`
   PREFIXED classes and missed these three UNPREFIXED shared components, which
   live in svc-components.css. Result: the homepage stats-band (and the same
   components on about, case-studies, faqs, industries-hub, meet-your-team,
   peo-vs-aso, services-hub, testimonials) rendered as raw unstyled text.

   Fix: move the shared editorial components to this globally-loaded file so they
   are styled on every template, while svc-components.css stays conditional for
   genuinely service-scoped CSS. Loaded unconditionally from app.blade.php just
   after the conditional ind/svc block, before vshr-v4.css — same cascade slot
   the rules occupied inside svc-components.css.

   NOTE: the .reveal motion block intentionally stays in svc-components.css.
   ============================================================================ */

/* ── content-split ───────────────────────────────────────────────────────── */
/* Upgraded 2026-04-21 (Track 2 primitives-fidelity pass):
     - Image panel: 16px radius, layered shadow (Linear card elevation)
     - Optional gradient bleed from edge via .content-split--bleed-left/right
     - Text column: line-height 1.65, body 17px, max-width 48ch
     - H2 retains its token scale; if template wraps a key word in
       <span class="grad-word">, our canonical gradient applies.
   No template edits needed — hooks pre-exist. */

.content-split {
  background: var(--neutral-0);
  position: relative;
}

.content-split__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.content-split__eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand);
  margin-bottom: 12px;
}

.content-split__heading {
  font-size: var(--h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--neutral-900);
  margin: 0 0 16px 0;
}

.content-split__prose,
.content-split__prose p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--neutral-500);
  margin: 0 0 24px 0;
  max-width: 48ch;
}

.content-split__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.content-split__image {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--neutral-100);
  /* Layered shadow — soft depth, not heavy. Linear / Stripe product tile. */
  box-shadow:
    0 16px 48px rgba(10, 20, 40, 0.10),
    0 2px 8px rgba(10, 20, 40, 0.06);
}

.content-split__image > img,
.content-split__image > picture,
.content-split__image > picture > img,
.content-split__image > svg,
.content-split__image > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional gradient bleed — soft brand-navy tint fading in from the image
   edge. Opt-in via --bleed-left / --bleed-right variant classes so pages
   that don't want it stay clean. 8% at the edge → 0% at 40% inward. */
.content-split--bleed-right::before,
.content-split--bleed-left::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(
    to left,
    rgba(7, 25, 46, 0.08) 0%,
    rgba(7, 25, 46, 0.00) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.content-split--bleed-right::before { right: 0; }
.content-split--bleed-left::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(7, 25, 46, 0.08) 0%,
    rgba(7, 25, 46, 0.00) 100%
  );
}

@media (min-width: 1024px) {
  .content-split__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
  /* Default is text left, image right (DOM order). */
  .content-split--right .content-split__text  { order: 1; }
  .content-split--right .content-split__image { order: 2; }
  /* Flip for image-left variant — image column comes first visually. */
  .content-split--left  .content-split__text  { order: 2; }
  .content-split--left  .content-split__image { order: 1; }
}


/* ── stats-band ──────────────────────────────────────────────────────────── */
/* Upgraded 2026-04-21 (Track 2 primitives-fidelity pass):
     - Subtle center-top radial gradient backdrop (8% brand navy → transparent)
     - First stat (hero stat, largest number) gets .grad-word gradient treatment
     - Tabular figures preserved via .tab-nums utility (emitted by blade)
     - 1px divider between stat columns at 12% brand, desktop-only
   No template edits needed — hero-stat accent applies to :first-child,
   which is stable across current usages (all callers put the headline
   number first). If a page wants a different order, they can add a class. */

.stats-band {
  background: var(--neutral-0);
  position: relative;
  overflow: hidden;
}

/* Center-top radial atmospheric backdrop — very soft, reads as depth not
   color. 8% brand-navy fades to transparent at ~50% radius. */
.stats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 50% at 50% 0%,
    rgba(7, 25, 46, 0.08) 0%,
    rgba(7, 25, 46, 0.00) 70%
  );
  pointer-events: none;
  z-index: 0;
}

.stats-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  z-index: 1;
}

.stats-band__eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand);
  margin-bottom: 12px;
}

.stats-band__heading {
  font-size: var(--h2);
  font-weight: 700;
  /* Tighter line-height — 1.15 left too much air between the two visual lines
     of the headline. 1.05 is firm without clipping descenders for non-descender
     copy like this. Combined with reduced top margin, the headline reads as
     one tight unit instead of a stretched-out title. */
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--neutral-900);
  margin: 0 0 10px 0;
}
/* Stats-band heading override: re-apply the premium type bump (font-size
   44px) that we just opted out of via the :not([class*="stats-band"])
   exclusions, while keeping the tighter 1.05 line-height that drove the
   exclusion in the first place. End result: same visual scale as before,
   but vertically tightened so the two-line headline reads as one unit. */
body.premium section.stats-band h2.stats-band__heading {
  font-size: clamp(30px, 3vw + 0.5rem, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.018em !important;
  font-weight: 800 !important;
}

.stats-band__subtitle {
  font-size: var(--body);
  line-height: var(--line-body);
  color: var(--neutral-500);
  margin: 0 0 40px 0;
  max-width: 640px;
}

.stats-band__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 32px;
}

.stats-band__stat {
  /* No cards, no borders, no icons — just type + an optional divider. */
  position: relative;
  padding-left: 20px;
}
.stats-band__stat:first-child {
  padding-left: 0;
}

.stats-band__value {
  font-size: var(--stat);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--neutral-900);
  font-variant-numeric: tabular-nums;
  text-wrap: nowrap;
}
/* Small inline qualifier (e.g. "Up to") so a word-prefixed stat stays on ONE
   line and the big figure keeps the same scale + baseline as its neighbours.
   A two-line value used to tower over the row and drop its label out of line. */
.stats-band__value-pre {
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--neutral-500);
  margin-right: 0.16em;
  vertical-align: baseline;
  white-space: nowrap;
}

/* Hero stat — the first (typically largest, most-quoted) number gets the
   canonical 5-stop brand gradient. This treatment matches .grad-word /
   .svc-accent elsewhere, so the entire site reads as one system. */
.stats-band__grid .stats-band__stat:first-child .stats-band__value {
  background-image: linear-gradient(135deg, #F7D44C 0%, #F07128 28%, #E8125C 62%, #7B21A2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Fallback for engines that fail background-clip: text */
  background-color: var(--brand, #07192E);
}

.stats-band__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-500);
  margin-top: 8px;
}

.stats-band__context {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neutral-500);
  margin-top: 6px;
}

/* Desktop — restore 4-up grid + add subtle column dividers. */
@media (min-width: 1024px) {
  .stats-band__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }
  .stats-band__stat {
    padding-left: 40px;
  }
  .stats-band__stat:first-child {
    padding-left: 0;
  }
  /* 1px column divider at 12% brand-navy — hairline, not a rule. */
  .stats-band__stat:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(7, 25, 46, 0.12);
    pointer-events: none;
  }
}


/* ── testimonial-simple ──────────────────────────────────────────────────── */
/* Upgraded 2026-04-21 (Track 2 primitives-fidelity pass):
     - Kill flat gray. Card now has backdrop-filter blur + soft hairline
       border + soft brand-tinted shadow (Linear customer testimonials +
       Vercel case-study card composition).
     - 3px left accent bar (navy → orange gradient, fades top→bottom)
     - Portrait photo: 56px desktop / 48px mobile, subtle hairline ring
     - Monogram fallback via .testimonial-simple__photo--fallback class
       that pages can apply when no headshot exists (rendered gradient tile)
     - Company logo slot at bottom-right — styled for an optional <img> that
       templates may add later via the attribution['logo'] path. DOM hook
       selector `.testimonial-simple__logo` is reserved; CSS-only for now. */

.testimonial-simple {
  background: var(--neutral-0);
}

.testimonial-simple__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 44px 40px 48px;
  position: relative;
  /* Translucent canvas + backdrop blur — Linear / Notion customer tile. */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(7, 25, 46, 0.10);
  border-radius: 16px;
  box-shadow: 0 2px 24px rgba(10, 20, 40, 0.06);
  overflow: hidden;
}

/* Left accent bar — thin brand gradient, fades top→bottom. Distinct from
   the deprecated golden-card left rule (that ornament was a 4px solid accent
   on every card with a breathing glow). This is a single 3px bar on a
   hero-weight primitive with a premium SaaS pattern (Linear, Stripe case
   studies). */
.testimonial-simple__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    #07192E 0%,
    #F97316 70%,
    rgba(249, 115, 22, 0) 100%
  );
  pointer-events: none;
}

/* Mobile — lose the blur (perf on low-end Android) + tighten padding. */
@media (max-width: 767px) {
  .testimonial-simple__inner {
    padding: 32px 28px 32px 32px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.96);
  }
}

.testimonial-simple__quote {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--neutral-900);
  margin: 0;
  position: relative;
  /* No decorative giant quotes. */
  quotes: none;
}
.testimonial-simple__quote::before,
.testimonial-simple__quote::after {
  content: '';
}

.testimonial-simple__attribution {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  position: relative;
}

.testimonial-simple__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  /* Subtle hairline ring — keeps portraits from looking pasted-on. */
  box-shadow:
    0 0 0 1px rgba(7, 25, 46, 0.10),
    0 1px 3px rgba(10, 20, 40, 0.08);
  background: linear-gradient(135deg, #0D2B45 0%, #1479A3 100%);
}

/* Monogram fallback — pages without a headshot can replace <img> with
   <div class="testimonial-simple__photo testimonial-simple__photo--fallback">JS</div>
   for a branded gradient tile + initials. */
.testimonial-simple__photo--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, "Poppins", system-ui, sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #07192E 0%, #1479A3 60%, #F97316 140%);
}

.testimonial-simple__meta {
  min-width: 0;
  flex: 1 1 auto;
}

.testimonial-simple__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.3;
}

.testimonial-simple__title {
  font-size: 14px;
  font-weight: 400;
  color: var(--neutral-500);
  line-height: 1.4;
  margin-top: 2px;
}

/* Company-logo slot — right-aligned, 32px height, grayscale 60% opacity.
   Selector is reserved for a future attribution['logo'] path; applies
   today when markup pages already add <img class="testimonial-simple__logo">
   or a data-driven wrapper. Flex-shrink:0 keeps it from squeezing the meta. */
.testimonial-simple__logo {
  height: 32px;
  width: auto;
  margin-left: auto;
  filter: grayscale(1);
  opacity: 0.6;
  flex-shrink: 0;
  align-self: center;
  transition: opacity 200ms ease-out, filter 200ms ease-out;
}
.testimonial-simple__logo:hover {
  filter: grayscale(0);
  opacity: 0.9;
}

@media (min-width: 768px) {
  .testimonial-simple__quote {
    font-size: 22px;
    line-height: 1.55;
  }
  .testimonial-simple__photo {
    width: 56px;
    height: 56px;
  }
  .testimonial-simple__photo--fallback {
    font-size: 18px;
  }
}

/* Compact variant — tighter padding, smaller photo, no accent bar. */
.testimonial-simple--compact .testimonial-simple__inner {
  padding: 28px 32px;
}
.testimonial-simple--compact .testimonial-simple__inner::before {
  display: none;
}
.testimonial-simple--compact .testimonial-simple__quote {
  font-size: 17px;
}
.testimonial-simple--compact .testimonial-simple__photo {
  width: 40px;
  height: 40px;
}