/* ============================================================
   /showcase/ — Area Index
   This page IS the Molvern Labs brand (root classification level),
   so unlike every area/demo page it legitimately consumes the
   root's own styles/tokens.css + styles/global.css + styles/components.css.
   This file only adds the area-card grid layout those don't have yet.
   ============================================================ */

/* This page renders as a persistent dark canvas (see .page-showcase below),
   matching what the site's nav assumes it's floating over — it's transparent
   until scrolled and relies on --color-gray-300 nav-link text, which only
   reads correctly against a dark background. Without this, the page falls
   back to body's plain background-color (var(--color-white)), which is
   literal white in the default/dark theme — leaving the nav text nearly
   invisible. Same fix pattern as .page-legal in styles/pages.css. */
.page-showcase {
  background-color: var(--color-navy-deep);
  min-height: 100vh;
}

/* Full-viewport hero, matching the home page's .hero pattern (home.css) —
   the double min-height is deliberate: 100vh first as a fallback, then
   100svh (small viewport height) overriding it on browsers that support
   it, so mobile browser chrome (the address bar showing/hiding) doesn't
   make the hero taller than the actually-visible viewport. padding-top
   clears the fixed nav (.nav, position: fixed — see components.css),
   same 72px the home hero already uses for the same reason. */
.showcase-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 72px;
  padding-bottom: var(--space-4xl);
  text-align: center;
  overflow: clip;
  box-sizing: border-box;
}

/* IMAGE PLACEHOLDER — "Hero — Showcase Index" in
   Campaign/Demo-Platform-Strategy/08-image-generation-prompts.md.
   background-image is active (showcase-hero-bg.jpg is in place). The
   filter dims/flattens the source photo slightly so it reads as an
   atmospheric backdrop rather than competing with the text — swap or
   tune this if a future replacement image is already calmer. */
.showcase-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 20%, rgba(59, 130, 246, 0.14) 0%, transparent 65%),
    linear-gradient(180deg, var(--color-navy-deep) 0%, var(--color-navy) 55%, var(--color-navy-deep) 100%);
  background-image: url('/assets/images/showcase-hero-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(0.85);
}

/* Legibility scrim — this was missing, which is why the hero text and
   pills were unreadable against the busy circuit-board photo. Darkest
   at top/bottom where the heading and pills sit, lighter in the
   vertical middle so the image still reads as a real photo, not a
   near-black rectangle. */
.showcase-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--color-navy-deep) 0%, color-mix(in srgb, var(--color-navy-deep) 25%, transparent) 30%, color-mix(in srgb, var(--color-navy-deep) 35%, transparent) 70%, var(--color-navy-deep) 100%);
}

.showcase-hero__inner { position: relative; z-index: 1; }

.showcase-hero h1 {
  font-family: var(--font-headline);
  font-size: var(--text-display-lg);
  line-height: var(--text-display-lg-lh);
  letter-spacing: var(--text-display-lg-ls);
  color: var(--color-white);
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.showcase-hero p {
  font-size: var(--text-body-lg);
  color: var(--color-gray-300);
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.showcase-hero__pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.showcase-pill {
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  letter-spacing: var(--text-label-md-ls);
  text-transform: uppercase;
  color: var(--color-white);
  padding: 0.5em 1em;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(12, 20, 31, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Area grid ──────────────────────────────────────────────── */
.area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-4xl);
}

@media (max-width: 900px) {
  .area-grid { grid-template-columns: 1fr; }
}

/* ── Card shell ─────────────────────────────────────────────── */
.area-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 24rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-navy-light);
  box-shadow: var(--shadow-lg);
  transition:
    transform var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) ease,
    box-shadow var(--duration-normal) ease;
}

.area-card__index {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: var(--text-label-sm-ls);
  color: rgba(255, 255, 255, 0.4);
}

/* ── Media zone (top) ───────────────────────────────────────── */
.area-card__media {
  position: relative;
  height: 11rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.area-card__icon {
  position: relative;
  z-index: 1;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  transition: transform var(--duration-normal) var(--ease-spring);
}

.area-card:hover .area-card__icon {
  transform: translateY(-3px) scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .area-card:hover .area-card__icon { transform: none; }
}

/* ── Body zone ──────────────────────────────────────────────── */
.area-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.area-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  letter-spacing: var(--text-label-md-ls);
  text-transform: uppercase;
  color: var(--color-blue-light);
  margin-bottom: var(--space-sm);
}

.area-card__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-blue-light);
  box-shadow: 0 0 8px var(--color-blue-light);
}

.area-card h2 {
  font-family: var(--font-headline);
  font-size: var(--text-heading-lg);
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.area-card p {
  font-size: var(--text-body-md);
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.55;
  flex: 1;
  margin-bottom: var(--space-lg);
}

/* ── CTA ────────────────────────────────────────────────────── */
.area-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  align-self: flex-start;
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: 600;
  letter-spacing: var(--text-label-md-ls);
  text-transform: uppercase;
  color: var(--color-white);
  padding: 0.7em 1.1em;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.area-card__cta-arrow {
  transition: transform var(--duration-normal) var(--ease-spring);
}

.area-card:hover .area-card__cta {
  border-color: var(--color-blue-light);
  background: var(--color-blue-subtle);
}

.area-card:hover .area-card__cta-arrow {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .area-card:hover .area-card__cta-arrow { transform: none; }
}

/* ── Live variant (Fitness) ─────────────────────────────────── */
.area-card--live .area-card__media {
  background: linear-gradient(155deg, #14304f 0%, #1a1f36 45%, #ff5a1f 145%);
}

.area-card--live .area-card__icon {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.area-card--live:hover {
  transform: translateY(-8px);
  border-color: var(--color-blue);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}

/* ── Coming-soon variant ────────────────────────────────────── */
.area-card--soon {
  cursor: default;
  border-style: dashed;
  border-color: var(--color-border-dark);
}

.area-card--soon .area-card__media {
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 70%),
    var(--color-navy);
}

.area-card--soon .area-card__icon {
  background: transparent;
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  color: var(--color-text-muted);
}

.area-card--soon .area-card__eyebrow {
  color: var(--color-text-muted);
}
.area-card--soon .area-card__eyebrow-dot {
  background: var(--color-text-muted);
  box-shadow: none;
}

.area-card--soon h2 { color: var(--color-gray-300); }
.area-card--soon p { color: var(--color-text-muted); }

.area-card--soon .area-card__cta {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-muted);
}

.area-card--soon:hover {
  border-color: rgba(255, 255, 255, 0.28);
}