/* Studier case study page styles.
   Dependencies: global.css, ux-case-study.css
   [MODIFIED M1 2026-07-13] Rebuilt onto the VTH v2 token pattern (E19) for
   the unified UX case build. See docs/specs/M1_ASH_STD_Migration_Spec.md.
   Palette approved by Cafe 2026-07-12 (dark-hero option A): primary #315CF6
   (blue), secondary #7A3CEC (purple). Legacy tokens (--ux-soft, --ux-pale,
   --std-indigo, --std-cyan, --std-ink, --std-gradient) retired. */

.ux-case-page--studier {
  --ux-primary: #315CF6;
  --ux-secondary: #7A3CEC;
  --ux-theme: var(--ux-primary);
  --ux-dark: #172554;
  --ux-primary-soft: #7392F9;
  --ux-primary-pale: #EEF2FE;
  /* [MODIFIED F6 2026-07-14] --ux-primary-dark added — the deep-primary
     base the dark-mode --ux-emphasis mixes into (Master Spec 2.4). */
  --ux-primary-dark: color-mix(in srgb, var(--ux-primary) 55%, black);
  --ux-tone-s: linear-gradient(150deg, #D9E3FE, #E3EAFE 58%, #EDF2FE);
  --ux-tone-p: linear-gradient(145deg, #F3F6FF, #CFDCFC 82%);
  --ux-emphasis: linear-gradient(135deg, #1E38A8, #2848C7 60%, #2039AE);
  --ux-alert-ink: #A97CFF;
  --ux-accent-ink: var(--ux-secondary);
  --ux-strong-ink: var(--ux-primary);
  --section-pad: 144px;
}

@media (max-width: 900px) {
  .ux-case-page--studier {
    --section-pad: 80px;
  }
}

/* [MODIFIED F6 2026-07-14] Two defects fixed in this block:
   (1) --ux-primary-pale had no dark override, so dark tier-l (Design,
   Recipe) rendered the near-white light value — added below.
   (2) --ux-emphasis mixed soft into the raw mid-tone --ux-primary, which
   only reads correctly for a near-black primary like VTH's; STD's blue is
   mid-tone, so dark tier-d (Outcome, Process, Delivery) came out too
   bright. Repointed to mix into --ux-primary-dark instead. */
[data-theme=dark] .ux-case-page--studier {
  --ux-accent-ink: color-mix(in srgb, var(--ux-secondary) 55%, white);
  --ux-strong-ink: color-mix(in srgb, var(--ux-primary) 62%, white);
  --ux-dark: var(--theme-text);
  --ux-primary-pale: color-mix(in srgb, var(--ux-primary-soft) 46%, var(--theme-bg));
  --ux-tone-s: linear-gradient(150deg, color-mix(in srgb, var(--ux-primary-soft) 28%, var(--theme-bg)), color-mix(in srgb, var(--ux-primary-soft) 16%, var(--theme-bg)) 72%);
  --ux-tone-p: linear-gradient(145deg, var(--theme-bg), color-mix(in srgb, var(--ux-primary-soft) 30%, var(--theme-bg)) 82%);
  --ux-emphasis: linear-gradient(135deg,
    color-mix(in srgb, var(--ux-primary-soft) 22%, var(--ux-primary-dark)),
    color-mix(in srgb, var(--ux-primary-soft) 34%, var(--ux-primary-dark)) 60%,
    color-mix(in srgb, var(--ux-primary-soft) 20%, var(--ux-primary-dark)));
}

.ux-case-page--studier figcaption {
  color: color-mix(in srgb, var(--ux-theme) 70%, var(--theme-text-soft));
}

[data-theme=dark] .ux-case-page--studier figcaption {
  color: color-mix(in srgb, var(--ux-primary-soft) 70%, var(--theme-text-soft));
}

/* Kickers and ink-token routing (Master Spec 6.1/10.4) */
.ux-case-page--studier .ux-kicker,
.ux-case-page--studier .ux-intro p,
.ux-case-page--studier .ux-chapter-head .ux-kicker,
.ux-case-page--studier .ux-section-head .ux-kicker {
  color: var(--ux-accent-ink);
}

.ux-case-page--studier .ux-related .ux-kicker {
  color: var(--theme-muted);
}

.ux-case-page--studier .ux-meta span,
.ux-case-page--studier .ux-skills > span {
  color: var(--ux-accent-ink);
}

.ux-case-page--studier .ux-skills em {
  border-color: var(--ux-strong-ink);
  color: var(--ux-strong-ink);
}

.ux-case-page--studier .ux-lens span {
  color: var(--ux-accent-ink);
}

.ux-case-page--studier .ux-lens a {
  color: var(--ux-strong-ink);
}

.ux-case-page--studier .ux-recipe-primary span {
  color: var(--ux-accent-ink);
}

.ux-case-page--studier .ux-tier-d .ux-kicker {
  color: var(--ux-alert-ink) !important;
}

.ux-case-page--studier .ux-tier-d .ux-influence strong {
  color: var(--ux-alert-ink);
}

/* Dark-mode card lift across S/L/P tiers */
[data-theme=dark] .ux-case-page--studier .ux-tier-s .ux-card,
[data-theme=dark] .ux-case-page--studier .ux-tier-l .ux-card,
[data-theme=dark] .ux-case-page--studier .ux-tier-p .ux-card,
[data-theme=dark] .ux-case-page--studier .ux-tier-s .ux-influence,
[data-theme=dark] .ux-case-page--studier .ux-tier-l .ux-influence,
[data-theme=dark] .ux-case-page--studier .ux-tier-p .ux-influence {
  background: color-mix(in srgb, var(--ux-primary-soft) 26%, var(--theme-surface));
  --card-border: color-mix(in srgb, var(--ux-primary-soft) 24%, var(--theme-border));
  --card-border-hover: var(--ux-strong-ink);
}

[data-theme=dark] .ux-case-page--studier .ux-tier-s .ux-influence,
[data-theme=dark] .ux-case-page--studier .ux-tier-l .ux-influence,
[data-theme=dark] .ux-case-page--studier .ux-tier-p .ux-influence {
  --card-border-hover: var(--ux-alert-ink);
}

.ux-case-page--studier .ux-influence {
  margin-top: 56px;
}

.ux-case-page--studier .ux-influence strong {
  color: var(--ux-strong-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   Hero — frosted dual-bloom (Master Spec 7.1), dark-hero option A
   (stronger blooms, approved by Cafe 2026-07-12)
   ═══════════════════════════════════════════════════════════════════════ */

.studier-hero {
  background-image: none;
  background: linear-gradient(140deg, #EAF0FD, #F5F8FF);
}

.studier-hero::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 54% at 14% 16%, rgba(49, 92, 246, 0.42), transparent 74%),
    radial-gradient(ellipse 52% 46% at 90% 18%, rgba(122, 60, 236, 0.30), transparent 74%);
  filter: blur(34px);
}

[data-theme=dark] .studier-hero {
  background: #02040A;
}

[data-theme=dark] .studier-hero::before {
  background:
    radial-gradient(ellipse 62% 58% at 15% 16%, rgba(115, 146, 249, 0.74), transparent 70%),
    radial-gradient(ellipse 56% 50% at 88% 20%, rgba(169, 124, 255, 0.52), transparent 70%);
  filter: blur(36px);
}

[data-theme=dark] .studier-hero .ux-hero__copy h1 {
  color: #fff;
}

[data-theme=dark] .studier-hero .ux-hero__copy p {
  color: rgba(255, 255, 255, .82);
}

.studier-hero__copy {
  max-width: min(960px, 76vw);
}

/* ═══════════════════════════════════════════════════════════════════════
   Page-specific layout components (kept from the legacy build)
   ═══════════════════════════════════════════════════════════════════════ */

.studier-problem__grid {
  grid-template-columns: minmax(0, .56fr) minmax(360px, .44fr);
}

.studier-problem-note {
  max-width: 760px;
  margin-top: 28px;
  color: var(--theme-text-soft);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.6;
}

.studier-product-frame {
  margin: 0;
}

/* [MODIFIED F23 2026-07-14] Cascade-tie fix (E2/E21/F1/F22 bug class,
   sixth occurrence). .studier-product-frame's margin:0 (this file, loads
   after ux-case-study.css) was beating .ux-content-gap's margin-top:56px
   (ux-case-study.css) on the Outcome showcase figure — same specificity,
   later file wins, so the spacing utility was silently defeated. Scoped
   override here, in the later-loading file, restores the intended gap. */
.studier-product-frame.ux-content-gap {
  margin-top: 56px;
}

.studier-product-frame button {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.studier-product-frame img {
  width: 100%;
  display: block;
  border: 1px solid color-mix(in srgb, var(--ux-theme) 16%, var(--theme-border-soft));
  border-radius: 20px;
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-card);
}

.studier-product-frame--large img {
  min-height: 360px;
  object-fit: contain;
}

.studier-role-grid,
.studier-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.studier-impact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.studier-solution-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.studier-solution__grid {
  display: grid;
  grid-template-columns: minmax(280px, .34fr) minmax(0, .66fr);
  gap: clamp(34px, 6vw, 74px);
  align-items: start;
}

.studier-feature-stack {
  display: grid;
  gap: 64px;
}

.studier-feature-row {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  gap: 48px;
  align-items: center;
  padding-top: 54px;
}

.studier-feature-row--reverse {
  grid-template-columns: minmax(0, .66fr) minmax(0, .34fr);
}

.studier-feature-row--reverse .ux-copy {
  order: 2;
}

/* [MODIFIED F27 2026-07-14] Develop's 6 cards, unified format, 3+3 grid.
   Replaces the retired .studier-timeline (was 4-col, numbered-only). */
.studier-develop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.studier-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.studier-metrics span {
  display: block;
  margin-bottom: 12px;
  color: var(--ux-accent-ink);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.studier-metrics strong {
  display: block;
  color: var(--theme-text);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.studier-research-note {
  margin-top: 28px;
}

.studier-platform-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 46px;
  padding-top: 30px;
}

.studier-platform-cta p {
  margin: 0;
  color: color-mix(in srgb, var(--ux-theme) 62%, var(--theme-text-soft));
  font-size: .92rem;
  line-height: 1.5;
}

/* [MODIFIED F18 2026-07-14] Outcome's platform CTA note needs white-soft
   text on tier-d (assigns colour only, no border-color — E19 contract). */
.ux-section.ux-tier-d .studier-platform-cta p {
  color: rgba(255, 255, 255, .78);
}

/* [MODIFIED F19 2026-07-14] Glyph icon dark-mode tint, VTH's E-series
   pattern: bare --ux-primary reads too dark against a lifted dark card. */
[data-theme=dark] .ux-case-page--studier .ux-glyph {
  color: color-mix(in srgb, var(--ux-primary) 40%, #DDE7FF);
}

.ux-tier-d .studier-solution-cards article {
  min-height: 220px;
  padding: 24px;
}

@media (max-width: 1180px) {
  .studier-problem__grid,
  .studier-solution__grid,
  .studier-feature-row,
  .studier-feature-row--reverse {
    grid-template-columns: 1fr;
  }
  .studier-feature-row--reverse .ux-copy {
    order: 0;
  }
  .studier-role-grid,
  .studier-develop-grid,
  .studier-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studier-solution-cards,
  .studier-impact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .studier-role-grid,
  .studier-develop-grid,
  .studier-metrics {
    grid-template-columns: 1fr;
  }
  .studier-product-frame img {
    border-radius: 14px;
  }
  .studier-product-frame--large img {
    min-height: auto;
  }
}