/* ============================================================================
   Informed Software Solutions — Shared Product Page Layout
   ----------------------------------------------------------------------------
   FROZEN once Phase 2 begins. Driven ENTIRELY by --product-accent, set by a
   body theme class (.theme-ims / .theme-investigations / .theme-defence).
   Page agents add page-specific rules in their OWN css/product-<name>.css —
   never here. Consumes tokens.css + base.css + components.css.
   ----------------------------------------------------------------------------
   Class contract (do not rename):
     body.theme-ims / .theme-investigations / .theme-defence
     .product-page  .product-hero  .product-hero__text  .product-hero__visual
     .product-hero__ridge  .product-breadcrumb  .back-link
     .feature-grid  .feature-card
     .feature-rows  .feature-row  .feature-row__media  .feature-row__text
     .product-cta  .product-cta__actions
   ========================================================================== */

/* ---------------------------------------------------------------------------
   PER-PRODUCT ACCENT — the ONLY hook a product page needs to set.
   Every accent reference below uses var(--product-accent); the spark/secondary
   is optional and falls back to the primary accent if unset.

   OPERATIONS-GRADE DARK retune: the whole site is now layered navy, so the
   accent FILL stays the brand colour, but --product-accent-text (used for small
   mono labels / kickers) must clear AA (>=4.5:1) on the DARK grounds, not paper.
   The paper-tuned *-text values (#8C5A12 / #3E6794 / #4B5E86) all FAIL on navy,
   so each theme is retuned here to its bright dark-ground variant (verified vs
   navy-900 #0E1F30 AND navy-800 card #16314B):
     IMS  beacon-400 #E0A23D  -> ~6.5:1 / ~5.2:1   (amber, already luminous)
     IV   teal-spark #2BB3C0  -> ~6.7:1 / ~5.4:1   (the IV identity glint)
     DF   navy-300   #8FA8C2  -> ~6.1:1 / ~4.8:1   (calm slate-light; the raw
                                                     slate-indigo is far too dark)
--------------------------------------------------------------------------- */
body.theme-ims {
  --product-accent: var(--accent-ims);
  --product-accent-2: var(--accent-ims);
  --product-accent-text: var(--beacon-400); /* AA on dark (~6.5:1 navy-900) */
}

body.theme-investigations {
  --product-accent: var(--accent-iv);
  --product-accent-2: var(--accent-iv-spark);
  --product-accent-text: var(--accent-iv-spark); /* teal glint, AA on dark */
}

body.theme-defence {
  --product-accent: var(--accent-df);
  --product-accent-2: var(--accent-df);
  --product-accent-text: var(--navy-300); /* slate-light, AA on dark */
}

/* Safe default if a page forgets to set a theme class */
.product-page {
  --product-accent: var(--beacon-500);
  --product-accent-2: var(--beacon-400);
  --product-accent-text: var(--beacon-400); /* AA-safe small-text on dark */
}

/* ===========================================================================
   PAGE SHELL — layered-navy "Operations-grade dark" (no paper anywhere).
   Default ground is navy-900 (cool off-white ink); the hero deepens to the
   navy-950 void and the CTA band deepens again, mirroring index's depth rhythm.
   =========================================================================== */
.product-page {
  background-color: var(--navy-900);
  color: var(--ink-body);
}

/* ===========================================================================
   BREADCRUMB / BACK LINK
   =========================================================================== */
.product-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--ink-soft);
  /* The header is a FIXED 72px bar (z-index 300) pinned to top:0, and it lives
     OUTSIDE #smooth-wrapper. The breadcrumb is the FIRST thing inside <main>
     (inside #smooth-content), so without clearance it renders at top:0 — buried
     UNDER the fixed header, which then intercepts every click on the crumb
     links (verified: document.elementFromPoint at the link centres returned the
     HEADER, not the anchors). Push the WHOLE breadcrumb clear of the header at
     EVERY width so the links are genuinely reachable. The hero below no longer
     needs to re-clear the header (its top padding is reduced to a content gap),
     since the breadcrumb now provides the header clearance for the page top. */
  padding-top: calc(var(--header-h, 72px) + var(--space-5));
  padding-bottom: var(--space-2);
}

.product-breadcrumb a {
  color: var(--ink-soft);
  /* Reserve room for the hover/focus underline so it never shifts layout. */
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* Interactive affordance — the client reported the crumbs didn't even read as
   links. Match the site's standard link treatment: ink-soft → accent-text
   colour shift plus an underline drawn on hover AND keyboard focus. */
.product-breadcrumb a:hover,
.product-breadcrumb a:focus-visible {
  color: var(--accent-text);
  border-bottom-color: currentColor;
}

/* Keyboard focus ring (visible outline) — required for keyboard users; the
   underline alone isn't a sufficient focus indicator. */
.product-breadcrumb a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* current page (last crumb) reads a touch brighter than the links and stays
   visually distinct as NON-interactive (no link affordance, default cursor). */
.product-breadcrumb [aria-current="page"] {
  color: var(--text);
  cursor: default;
}

.product-breadcrumb__sep { color: var(--line-strong); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
}

.back-link__icon {
  transition: transform var(--dur-fast) var(--ease-out);
}

.back-link:hover {
  color: var(--accent-text);
}

.back-link:hover .back-link__icon {
  transform: translateX(-3px);
}

/* ===========================================================================
   PRODUCT HERO — split layout: text left, UI visual right.
   Contained ridge SVG background slot sits behind the visual.
   Mobile-first: single column; splits at ≥ 900px.
   =========================================================================== */
.product-hero {
  position: relative;
  /* TOP: the breadcrumb above now owns the fixed-header clearance, so the hero
     only needs a normal content gap below it (was calc(--header-h + --space-9),
     which double-counted the header offset and pushed the hero far down the
     page once the breadcrumb was lifted clear). BOTTOM: unchanged section pad. */
  padding-block: var(--space-8) var(--section-py);
  overflow: hidden;
  isolation: isolate;
  /* deepest navy void — the hero floor of the layered-navy page, matching the
     index hero treatment (.theme-operations → navy-950). */
  background-color: var(--navy-950);
}

/* Atmosphere pool — a cool navy-glow weighted to the right (behind the ridge +
   UI panel) plus a faint accent-tinted core glint and a bottom vignette that
   deepens the corners for cinematic falloff. Sits behind everything (z 0). */
.product-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 62% at 74% 40%,
      rgba(44, 80, 120, 0.28) 0%,          /* navy-600 cool glow pool */
      rgba(44, 80, 120, 0.09) 40%,
      transparent 72%),
    radial-gradient(40% 44% at 76% 40%,
      color-mix(in srgb, var(--product-accent) 16%, transparent) 0%,
      transparent 60%),                     /* product-accent core glint */
    radial-gradient(120% 90% at 50% 120%,
      rgba(10, 20, 31, 0.0) 40%,
      rgba(5, 10, 18, 0.55) 100%);          /* bottom vignette */
}

/* Faint fingerprint-ridge texture field washing across the void (mirrors the
   index hero's ::after). Masked so it concentrates behind the visual column. */
.product-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 76% 40%,
      transparent 0 15px,
      rgba(86, 129, 171, 0.045) 15px 16px);
  -webkit-mask-image: radial-gradient(58% 58% at 76% 40%, #000 0%, transparent 78%);
          mask-image: radial-gradient(58% 58% at 76% 40%, #000 0%, transparent 78%);
}

.product-hero__inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}

.product-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 36rem;
}

/* Evidence tag (MS-01 / IV-02 / DF-03) in the product accent. Small mono text
   on a faint accent wash over paper — use the AA-safe accent text token so the
   label clears 4.5:1 (the IMS amber would be ~2.7:1 otherwise). The border +
   wash stay on the full accent for the coloured outline. */
.product-hero__tag {
  align-self: flex-start;
  color: var(--product-accent-text, var(--product-accent));
  border-color: color-mix(in srgb, var(--product-accent) 30%, transparent);
  background-color: color-mix(in srgb, var(--product-accent) 9%, transparent);
}

.product-hero__title {
  font-size: var(--fs-display);
  font-variation-settings: 'opsz' 120, 'wght' var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink); /* brightest cool off-white on the navy-950 void */
}

.product-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-soft);
  max-width: var(--measure);
}

.product-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------------------------
   "Visit site ↗ coming soon" affordance — UNIFIED across all three product
   heroes so it is pixel-identical regardless of theme. Markup is the same
   non-anchor pattern used on index.html:
     <span class="link-arrow coming-soon" role="link" aria-disabled="true">…</span>
   It is non-navigating (no href, so no scroll-to-top bug) and reads as the
   muted inline link-arrow with a "Coming soon" pill (components.css supplies
   the ::after badge). We pin colour + non-interaction here so per-page CSS
   doesn't drift the three apart.
--------------------------------------------------------------------------- */
.product-hero__actions .coming-soon {
  align-self: center;
  color: var(--ink-soft);
  pointer-events: none; /* non-navigating placeholder */
}

.product-hero__actions .coming-soon:hover {
  color: var(--ink-soft);
}

/* The inner arrow glyph must not drift on hover — it goes nowhere. */
.product-hero__actions .coming-soon:hover .link-arrow__icon {
  transform: none;
}

/* Visual side — UI mock sits on a raised card over the ridge slot */
.product-hero__visual {
  position: relative;
  border-radius: var(--radius-lg);
  isolation: isolate;
}

/* Contained ridge SVG background slot (DrawSVG target lives here).
   On the navy void the ridge is a LUMINOUS object — currentColor must be bright
   enough that the drawn stroke END-STATE (animateRidgeDraw leaves stroke-only
   ridges visible) reads clearly on navy. We mix the product accent UP toward a
   luminous tone rather than fading it toward transparent. Per-page CSS may
   brighten further; this is the legible floor. */
.product-hero__ridge {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: color-mix(in srgb, var(--product-accent) 78%, var(--navy-300));
  overflow: visible;
}

.product-hero__ridge svg { width: 100%; height: 100%; }

/* UI mock framed as glowing glass lifted off the void — mirrors the index
   product-panel visual: navy-800 fill, cool hairline, deep cool shadow + a
   faint cool rim glow so the "screen" reads as luminous on the dark ground. */
.product-hero__ui {
  position: relative;
  z-index: var(--z-raised);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--navy-800);
  border: 1px solid var(--line-strong);
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(86, 129, 171, 0.12),
    0 0 60px -12px color-mix(in srgb, var(--product-accent) 30%, transparent);
}

.product-hero__ui img,
.product-hero__ui svg {
  width: 100%;
  display: block;
}

/* ===========================================================================
   FEATURE GRID — uniform cards (capabilities at a glance)
   =========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  /* navy-800 surface on the navy-900 ground, cool hairline, deep cool shadow —
     matches index .card / .security__card depth. */
  background-color: var(--navy-800);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-standard),
    background-color var(--dur-med) var(--ease-standard);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--product-accent) 45%, transparent);
  background-color: var(--navy-700);
}

/* Accent index / glyph holder. On the dark card the raw IV/DF navies are too
   low-contrast as a glyph, so the icon stroke uses the bright accent-text tone;
   the plate wash keeps the brand accent so the colour identity still reads. */
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--product-accent-text, var(--product-accent));
  background-color: color-mix(in srgb, var(--product-accent) 18%, transparent);
}

.feature-card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: var(--ls-tag);
  /* Small mono numeral on the light card — use the AA-safe accent text token
     (falls back to --product-accent if a theme hasn't set the text variant). */
  color: var(--product-accent-text, var(--product-accent));
}

.feature-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  font-variation-settings: 'opsz' 32, 'wght' var(--fw-display);
  color: var(--heading); /* cool off-white on the navy-800 card */
  line-height: 1.15;
}

.feature-card__body {
  font-size: var(--fs-body);
  color: var(--text); /* body-tier copy: brighter ink for high contrast on card */
  line-height: var(--lh-body);
}

/* ===========================================================================
   FEATURE ROWS — alternating media / text editorial blocks
   =========================================================================== */
.feature-rows {
  display: flex;
  flex-direction: column;
  gap: var(--section-py-sm);
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

.feature-row__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* framed dark "screen" lifted off the void — navy-800 fill, cool hairline,
     deep cool shadow + faint cool rim, consistent with the hero UI panel. */
  background-color: var(--navy-800);
  border: 1px solid var(--line-strong);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(86, 129, 171, 0.10);
}

.feature-row__media img,
.feature-row__media svg {
  width: 100%;
  display: block;
}

.feature-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure);
}

.feature-row__kicker {
  /* Small mono kicker on light — AA-safe accent text (>=4.5:1 on paper).
     Falls back to --product-accent where a theme hasn't set the text variant. */
  color: var(--product-accent-text, var(--product-accent));
}

.feature-row__title {
  font-size: var(--fs-h2);
  color: var(--heading);
}

.feature-row__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text); /* body-tier copy: brighter ink for high contrast */
}

/* Checklist inside a feature row */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.feature-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-body);
  color: var(--text); /* body-tier ink on the navy ground */
  line-height: var(--lh-snug);
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  /* bright accent-text tone so IV/DF bullets glint on the dark ground */
  background-color: var(--product-accent-text, var(--product-accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--product-accent-text, var(--product-accent)) 18%, transparent);
}

/* ===========================================================================
   PRODUCT CTA BAND — "Request a demo" + "Visit site ↗" (coming-soon)
   Operations theme: earned dark moment at the foot of the page.
   =========================================================================== */
.product-cta {
  position: relative;
  /* deepened band — drops to the navy-950 void so the CTA reads as the earned
     dark moment at the foot of the page, a step below the navy-900 ground. */
  background-color: var(--navy-950);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-8), 6vw, var(--space-11));
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-lg);
}

/* Accent ridge glow seeded from the product colour + a cool navy pool, so the
   band glows from within rather than reading as a flat slab. */
.product-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 120% at 85% 8%,
      color-mix(in srgb, var(--product-accent) 32%, transparent) 0%,
      transparent 55%),
    radial-gradient(70% 90% at 12% 100%,
      rgba(44, 80, 120, 0.18) 0%,
      transparent 60%);
  opacity: 0.95;
}

/* Faint amber-seam top rule echoing the index contact form-wrap finish */
.product-cta::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--product-accent) 70%, transparent) 35%,
    var(--product-accent) 50%,
    color-mix(in srgb, var(--product-accent) 70%, transparent) 65%,
    transparent 100%);
  pointer-events: none;
}

.product-cta__inner {
  position: relative;
  z-index: var(--z-raised); /* above the ::after top-rule + ::before glow */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 44rem;
}

.product-cta__kicker {
  color: var(--beacon-400);
}

.product-cta__title {
  font-size: var(--fs-h1);
  color: var(--ink);
  line-height: var(--lh-tight);
}

.product-cta__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text); /* body-tier copy: brighter ink for high contrast */
}

.product-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

/* The CTA band primary button uses the product accent on dark */
.product-cta .btn-primary {
  background-color: var(--product-accent);
  border-color: var(--product-accent);
  color: var(--navy-900);
}

.product-cta .btn-primary:hover {
  background-color: color-mix(in srgb, var(--product-accent) 80%, white);
  border-color: color-mix(in srgb, var(--product-accent) 80%, white);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--product-accent) 45%, transparent);
}

/* ===========================================================================
   ATMOSPHERE + EDITORIAL NUMERALS — match the index depth rhythm.
   The product content sections (capabilities / in-depth / demo) carry the same
   oversized translucent section numeral and a cool navy-glow pool as index, so
   the page reads with the same cinematic layered-navy richness. The numeral is
   the shared base.css .section-numeral (absolute, top-right); its host section
   must clip the overflow and provide the positioning context.
   =========================================================================== */

/* Numbered content sections clip the oversized numeral + lift their container
   above the glow pool (the .section base already sets position:relative). */
.product-page .section--numbered {
  overflow: clip;
}
.product-page .section--numbered > .container {
  position: relative;
  z-index: var(--z-raised);
}

/* Cool navy-glow pool weighted top-left behind each section head — a quiet
   atmosphere wash that echoes the index sections (.products / .security). */
.product-page .section--glow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 16% 8%,
      rgba(44, 80, 120, 0.16) 0%,
      transparent 70%);
}

/* The in-depth (feature-rows) section glows from the opposite side so the two
   stacked content sections alternate their light source, like index's bands. */
.product-page .section--glow.section--glow-right::before {
  background:
    radial-gradient(44% 42% at 84% 6%,
      rgba(44, 80, 120, 0.16) 0%,
      transparent 70%);
}

/* A "lifted" content band (navy-880) — used to alternate depth between the two
   content sections so the page steps up/down like index's alternating grounds. */
.product-page .band-lift {
  background-color: var(--navy-880);
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (min-width: 600px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  /* Hero splits: text left, visual right */
  .product-hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-10);
  }

  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Alternating rows: media/text two-up; even rows reverse */
  .feature-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }

  .feature-row--reverse .feature-row__media { order: 2; }
  .feature-row--reverse .feature-row__text  { order: 1; }
}

@media (min-width: 1200px) {
  .feature-row {
    gap: var(--space-11);
  }
}