/*
 * Live Lab case coherence
 *
 * This layer is intentionally loaded last on the non-DOMORA case pages.
 * It owns the shared visual contract only: hero framing, title legibility,
 * number hierarchy and the case-specific accent mapping. Hero geometry stays
 * in case-hero-standard-20260726.css.
 */

body.case-page.case-baitfever { --case-accent: #ff7a00; --case-hero-line: #ff7a00; }
body.case-page.case-stratviso { --case-accent: #efbd64; --case-hero-line: #efbd64; }
body.case-page.case-ai-animation { --case-accent: #7de8ff; --case-hero-line: #7de8ff; }
body.case-page.case-job-system { --case-accent: #087f7c; --case-hero-line: #087f7c; }
body.case-page.flagship-case--nexus { --case-accent: #44def8; --case-hero-line: #44def8; }
body.case-page.flagship-case--aurelia { --case-accent: #c8a66b; --case-hero-line: #c8a66b; }
body.case-page.flagship-case--meridien { --case-accent: #f2b84b; --case-hero-line: #f2b84b; }
body.case-page.flagship-case--aelin { --case-accent: #e86958; --case-hero-line: #e86958; }
body.case-page.flagship-case--spectra { --case-accent: #7df8d6; --case-hero-line: #7df8d6; }
body.case-page.solo-concept-case--avenlo { --case-accent: #55e1ba; --case-hero-line: #55e1ba; }
body.case-page.solo-concept-case--revyr { --case-accent: #c9ff4a; --case-hero-line: #c9ff4a; }

/* One recognisable frame for every case: same clipped corners, line weight
   and depth; only the case signal changes. */
body.case-page .case-hero-image,
:root body.case-page.case-page .case-hero-image,
body.case-page .case-hero-content,
:root body.case-page.case-page .case-hero-content {
  border: 1px solid color-mix(in srgb, var(--case-hero-line) 70%, rgba(255,255,255,.32)) !important;
  border-radius: 0 !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)) !important;
  position: relative;
}

body.case-page .case-hero-image::after,
body.case-page .case-hero-content::before {
  background: var(--case-hero-line) !important;
  opacity: .78 !important;
}

body.case-page .case-hero-content h1 {
  color: var(--case-hero-title, #fff9ef) !important;
  -webkit-text-stroke: .012em var(--case-hero-stroke, rgba(255,249,239,.78));
  paint-order: stroke fill;
  text-shadow: 2px 3px 0 rgba(0,0,0,.48), 0 14px 28px rgba(0,0,0,.22) !important;
}

/* AELIN is intentionally light, but its title still needs the same crisp
   portfolio treatment instead of a vague black glow. */
body.case-page.flagship-case--aelin {
  --case-hero-title: #173f39;
  --case-hero-stroke: #fffdf8;
}

body.case-page.flagship-case--aelin .case-hero-content h1 {
  text-shadow: 2px 3px 0 rgba(255,253,248,.82), 0 12px 22px rgba(23,63,57,.18) !important;
  -webkit-text-stroke: .02em #fffdf8;
}

body.case-page.flagship-case--aelin .site-header .nav-links a {
  background: rgba(255,253,248,.9) !important;
  border-color: rgba(23,63,57,.24) !important;
  color: #173f39 !important;
  box-shadow: 0 8px 18px rgba(23,63,57,.08) !important;
}

body.case-page.flagship-case--aelin .site-header .nav-links a:hover,
body.case-page.flagship-case--aelin .site-header .nav-links a:focus-visible {
  background: #173f39 !important;
  border-color: #e86958 !important;
  color: #fffdf8 !important;
}

/* The explicit step label remains top-left; the large atmospheric counter is
   deliberately mirrored to the opposite corner. */
body.case-page .case-insight-map article::after {
  bottom: .55rem !important;
  opacity: .72;
  right: .65rem !important;
  top: auto !important;
}

/* Keep the overview cards in one dark smoked-glass family while preserving
   each case's own signal. */
.concept-card {
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.concept-card__index { text-shadow: 0 1px 10px rgba(0,0,0,.72); }
.concept-card__type {
  border-color: color-mix(in srgb, var(--card-accent) 52%, rgba(255,255,255,.28));
  color: #f3f7f5;
}

@media (prefers-reduced-motion: reduce) {
  body.case-page .case-hero-image > img { scale: 1 !important; }
}