/* ============================================================================
   Informed Software Solutions — Informed Management System (IMS) page styles
   ----------------------------------------------------------------------------
   Page-specific styles for product-ims.html ONLY. Loaded AFTER the shared
   cascade (tokens.css → base.css → components.css → product.css → this file).
   The page sets body.theme-ims, so --product-accent is already resolved
   (accent-ims / beacon amber #C8862C) — consume var(--product-accent), never
   raw hex. Shared product.css is FROZEN — IMS-only rules live here.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   HERO — converging-ridges motif.
   The ridge SVG slot is absolutely positioned over the visual column. We let
   the arcs bleed outward, anchored to the right so they appear to converge
   into the protected core of the UI card sitting in front.
--------------------------------------------------------------------------- */
.theme-ims .product-hero__ridge {
  /* Push the motif up and to the right so the converging centre sits behind
     the top-right of the UI card, reinforcing the "protected core" read. */
  inset: -12% -8% auto auto;
  width: 88%;
  height: 88%;
}

.theme-ims .product-hero__ridge svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--product-accent) 22%, transparent));
}

/* The brass centre dot of the ridge motif gets a soft pulse halo */
.theme-ims .product-hero__ridge circle {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--product-accent) 60%, transparent));
}

/* The hero "Visit site ↗ coming soon" affordance is now unified in the shared
   product.css (.product-hero__actions .coming-soon) so all three product pages
   render it identically — no IMS-specific override needed here. */

/* ---------------------------------------------------------------------------
   FEATURE-CARD ICON — keep the index mono number tight under the glyph and
   give the brass glyph holder a touch more presence on hover.
--------------------------------------------------------------------------- */
.theme-ims .feature-card:hover .feature-card__icon {
  background-color: color-mix(in srgb, var(--product-accent) 18%, transparent);
}

.theme-ims .feature-card__index {
  margin-top: calc(var(--space-1) * -1);
}

/* ---------------------------------------------------------------------------
   FEATURE-ROW VIGNETTES — the inline UI illustrations.
   Constrain to a calm 16:10 frame and seat them on the product navy so they
   read as cropped product surfaces, consistent with the hero UI mock.
--------------------------------------------------------------------------- */
.theme-ims .ims-vignette {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
}

/* The media frame for IMS rows leans into the dark product surface */
.theme-ims .feature-row__media {
  background-color: var(--navy-900);
}

/* ---------------------------------------------------------------------------
   PRODUCT-CTA BAND — body is theme-ims (light), so the shared
   `.theme-operations .btn-ghost` dark treatment does NOT apply inside this
   navy band. Re-style the ghost button here for legibility on dark.
   (The primary button is already handled by product.css.)
--------------------------------------------------------------------------- */
.theme-ims .product-cta .btn-ghost {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 32%, transparent);
  background-color: transparent;
}

.theme-ims .product-cta .btn-ghost:hover {
  color: var(--product-accent);
  border-color: var(--product-accent);
  background-color: color-mix(in srgb, var(--product-accent) 10%, transparent);
}

/* ---------------------------------------------------------------------------
   REDUCED-MOTION / NO-MOTION — the ridge centre halo is decorative; drop the
   drop-shadow filters so nothing implies motion that won't play.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .theme-ims .product-hero__ridge svg,
  .theme-ims .product-hero__ridge circle {
    filter: none;
  }
}