/*
V7-HEADER
Title:     Viridians Triggers — Page Styles
Filename:  viridians-triggers.css
Path:      /assets/css/viridians/viridians-triggers.css
Version:   v1.9.1
Issued:    2026-04-07
Author:    Buktika Webdesk (Binka)
ChangeLog:
  v1.9.0 (2026-04-07): Correct token substitutions — restore exact user colours.
    v1.8.0 replaced user design colours with wrong existing-token approximations,
    breaking the visual design. v1.9.0 adds correct new tokens to global.css
    (v3.23.0) and references them here.
    CHANGED  Card background stop 1:
             color-mix(var(--hero-surface) 90%) → color-mix(var(--sdx-color-viridians-card-mid) 61%)
             Restores exact #4b4261 at 61% opacity. Token: --sdx-color-viridians-card-mid.
    CHANGED  Card background stop 2:
             color-mix(var(--sdx-color-viridians-dark-surface) 92%) → color-mix(var(--sdx-color-viridians-card-deep) 74%)
             Restores exact #1d1829 at 74% opacity. Token: --sdx-color-viridians-card-deep.
    CHANGED  Box-shadow: var(--hero-card-shadow) → color-mix(var(--sdx-color-black) 85%)
             Token --sdx-color-black: #000000 added to global.css v3.23.0.
    CHANGED  Eco bar: var(--sdx-color-green-deep) → var(--sdx-color-eco-muted)
             Restores exact #495b4e. Token: --sdx-color-eco-muted.
    CHANGED  Eco badge background:
             color-mix(var(--sdx-color-green-deep) 22%) → color-mix(var(--sdx-color-eco-mint) 32%)
             Restores exact #97d8a8 mint. Token: --sdx-color-eco-mint.
    CHANGED  Eco badge text:
             color-mix(var(--sdx-color-stem-olive) 70%, white) → var(--sdx-color-eco-sage)
             Restores exact #cfddb0 sage. Token: --sdx-color-eco-sage.
    CHANGED  Eco badge border:
             color-mix(var(--sdx-color-green-deep) 42%) → color-mix(var(--sdx-color-eco-border) 55%, var(--sdx-color-eco-khaki))
             Restores exact #accbb4/#d8d8bb mix. Tokens: --sdx-color-eco-border, --sdx-color-eco-khaki.
    CHANGED  Glow stop 1: color-mix(var(--page-depth) 45%) → color-mix(var(--sdx-color-restoration-glow) 45%)
             Restores exact #83af37 golden-green. Token: --sdx-color-restoration-glow.
    CHANGED  Glow stop 2: color-mix(var(--page-depth) 60%, white) → color-mix(var(--sdx-color-restoration-lime) 20%)
             Restores exact #bef264 lime. Token: --sdx-color-restoration-lime.
  v1.8.0 (2026-04-07): Architecture fix — vm-card-* → vtr-card-*. Token violations fixed.
    ROOT CAUSE  Page 3 hero card used vm-card-* classes owned by
                viridians-jurisdictions-grid.css (Page 2). Any change to Page 2's
                grid CSS silently broke Page 3's hero. Cross-page CSS dependency
                is a www-A §3.1 / www-C Rule 9 violation.
    REMOVED     All 7 vm-card-* scoped override blocks (vm-card-bar--eco/mdx/dual,
                vm-card-jurisdiction, vm-card-scope-label, vm-card-badge--eco/mdx).
                Page 3 no longer depends on viridians-jurisdictions-grid.css.
    ADDED       vtr-card-* rules — Page 3-owned equivalents with vtr- prefix:
                vtr-card-bar, vtr-card-bar--eco/mdx/dual, vtr-card-badges,
                vtr-card-badge, vtr-card-badge--eco/mdx, vtr-card-jurisdiction,
                vtr-card-flag, vtr-card-scope-label. Scoped to .page-viridians-triggers.
    ADDED       Missing Section 1 tokens: --page-bg, --page-depth, --page-dark-base,
                --page-dark-surface. Page 3 now self-sufficient if viridians-subpages.css
                is ever removed (pending www-A §3.1 amendment session).
    FIXED       12 hardcoded colour violations (DOC-01 token rule, ai.md hard rule):
                - Card background: color-mix(#4b42619c/90%,transparent) →
                  color-mix(var(--hero-surface) 90%, transparent) [restored original]
                - Card background: color-mix(#1d1829bd/92%,transparent) →
                  color-mix(var(--sdx-color-viridians-dark-surface) 92%, transparent)
                - --hero-card-shadow: rgba(0,0,0,0.42) →
                  color-mix(in srgb, var(--sdx-color-black) 42%, transparent)
                - Box-shadow rgba(0,0,0,0.85) → var(--hero-card-shadow)
                  [token updated to 85% to preserve visual intent]
                - Hover rgba(0,0,0,0.75) →
                  color-mix(in srgb, var(--sdx-color-black) 75%, transparent)
                - Eco bar #495b4e → var(--sdx-color-green-deep)
                - Eco badge bg #97d8a8 → color-mix(var(--sdx-color-green-deep) 22%)
                - Eco badge text #cfddb0 →
                  color-mix(in srgb, var(--sdx-color-stem-olive) 70%, white)
                - Eco badge border #accbb4/#d8d8bba3 →
                  color-mix(in srgb, var(--sdx-color-green-deep) 42%, transparent)
                - Glow #83af37 → var(--page-depth) [stem-olive]
                - Glow #bef264 → color-mix(in srgb, var(--page-depth) 60%, white)
    FIXED       Duplicate .vtr-hero-copy { position: relative } removed.
    FIXED       Dead first-occurrence .vtr-hero-card-inner { padding: 2.5rem... }
                and .vtr-hero-card-meta { margin-bottom: 1.5rem } removed.
                Second (effective) occurrences retained.
    FIXED       Stray closing brace in @media block caused .vtr-identity-meta to
                apply at all viewports rather than only at max-width: 62rem.
                Brace removed; .vtr-identity-meta now correctly inside @media.
    FIXED       margin: 3.0rem 0rem 3.0rem → 3rem 0 3rem (unit on zero removed).
    NOTE        File is 420 lines — exceeds www-C Rule 5 ceiling of 350 lines.
                Structural split into viridians/partials/viridians-triggers-hero.css
                required in a dedicated compression session (www-C Rule 7: spec +
                build are separate). www-A §3.1 amendment also required to declare
                viridians-subpages.css in the directory tree.
  v1.7.0 (2026-04-06): Hero card open-bottom invitation glow.
  v1.6.0 (2026-04-06): Bar containment fix. DL removed from hero card. Pill subordinated.
  v1.5.0 (2026-04-06): Identity reveal styles. Hero card spacing corrected.
*/

/* 1) Page variable binding */

.page-viridians-triggers {
  --page-bg:            var(--sdx-color-viridians-bg);
  --page-primary:       var(--sdx-color-purple-deep);
  --page-secondary:     var(--sdx-color-teal-deep);
  --page-accent:        var(--sdx-color-mama-amber);
  --page-depth:         var(--sdx-color-stem-olive);
  --page-dark-base:     var(--sdx-color-viridians-dark-base);
  --page-dark-surface:  var(--sdx-color-viridians-dark-surface);
  --hero-surface:       var(--sdx-color-viridians-dark-base);
  --hero-card-border:   color-mix(in srgb, var(--sdx-color-livingtower-warm-sand) 38%, transparent);
  --hero-card-shadow: rgba(0, 0, 0, 0.42);
  --hero-card-text:     var(--sdx-color-white);
  --hero-map-frame-border: color-mix(in srgb, var(--page-primary) 95%, black);
  --hero-image:         url('/assets/images/viridians/viridian-map-galaxy.webp');
  --hero-vignette-from: color-mix(in srgb, var(--page-primary) 28%, transparent);
  --hero-vignette-to:   color-mix(in srgb, var(--page-secondary) 10%, transparent);
  --vtr-hero-glass-wash: color-mix(in srgb, var(--sdx-color-white) 0.7%, transparent);
  --vtr-hero-glass-edge: color-mix(in srgb, var(--page-primary) 1.8%, transparent);
  --sdx-jd-eco-color:   var(--sdx-color-green-deep);
  --sdx-jd-human-color: var(--sdx-color-mama-violet);
  --sdx-jd-fill-eco-color:    color-mix(in srgb, var(--sdx-color-green-deep) 72%, white);
  --sdx-jd-fill-human-color:  color-mix(in srgb, var(--sdx-color-mama-violet) 78%, white);
  --sdx-jd-border-eco-color:  color-mix(in srgb, var(--sdx-color-green-deep) 82%, white);
  --sdx-jd-border-human-color: color-mix(in srgb, var(--sdx-color-mama-violet) 86%, white);
  --sdx-jd-keyline-color: color-mix(in srgb, var(--sdx-color-white) 86%, var(--page-primary) 14%);
  --sdx-jd-fill-opacity: 0.26;
  --sdx-jd-border-width: 2px;
  --sdx-jd-keyline-width: 1.1px;
}

/* 2) Base page surfaces */

/* none — owned by viridians-subpages.css */

/* 3) Hero */

.page-viridians-triggers .hero-wrap {
  overflow: visible;
  position: relative;
  background-color: var(--hero-surface);
  background-image:
    linear-gradient(135deg,
      color-mix(in srgb, var(--page-primary) 32%, transparent) 0%,
      color-mix(in srgb, var(--page-secondary) 28%, transparent) 100%),
    var(--hero-image);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 50%, 50% 50%;
  background-size: cover, cover;
  min-height: var(--hero-min);
}

.page-viridians-triggers .hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 42%, color-mix(in srgb, var(--page-primary) 24%, transparent) 0%, transparent 34%),
    linear-gradient(to top, var(--hero-vignette-from) 0%, var(--hero-vignette-to) 36%);
}

.page-viridians-triggers .hero {
  min-height: var(--hero-min);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem 8rem;
  overflow: visible;
}

.page-viridians-triggers .vtr-hero-grid {
  display: grid;
  overflow: visible;
  width: 100%;
  max-width: 90rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(23rem, 0.78fr);
  gap: 4.5rem;
  align-items: center;
}

.page-viridians-triggers .hero-content {
  max-width: 31rem;
}

.page-viridians-triggers .vtr-hero-copy {
  position: relative;
}

/* Hero card — open bottom edge + downward glow invitation.
   overflow: hidden required to clip the channel bar at the top radius corners.
   border-bottom: none = Gestalt continuation — open card invites the eye downward.
   The ::after pseudo-element on .vtr-hero-copy provides the coloured glow trail. */
.page-viridians-triggers .vtr-hero-card {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sdx-color-viridians-card-mid) 61%, transparent) 0%,
    color-mix(in srgb, var(--sdx-color-viridians-card-deep) 74%, transparent) 100%
  );
  border: 1px solid var(--hero-card-border);
  border-bottom: none;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2rem 4rem color-mix(in srgb, var(--sdx-color-black) 85%, transparent);
  position: relative;
  z-index: 10;
  transition: box-shadow 0.4s ease-in-out;
}

/* Downward invitation glow — restoration golden-green taper below the open card bottom. */
.page-viridians-triggers .vtr-hero-copy::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-3rem);
  width: 90%;
  height: 30rem;
  pointer-events: none;
  z-index: 1;
  filter: blur(2.1875rem);
  background: radial-gradient(
    ellipse at top center,
    color-mix(in srgb, var(--sdx-color-restoration-glow) 45%, transparent) 0%,
    color-mix(in srgb, var(--sdx-color-restoration-lime) 20%, transparent) 40%,
    transparent 85%
  );
}

.page-viridians-triggers .vtr-hero-card:hover {
  box-shadow:
    0 2rem 4rem color-mix(in srgb, var(--sdx-color-black) 75%, transparent),
    0 5rem 15rem color-mix(in srgb, var(--page-primary) 60%, transparent);
}

/* 4) Typography */

.page-viridians-triggers .eyebrow {
  color: color-mix(in srgb, var(--hero-card-text) 82%, transparent);
  text-shadow: 0 0.1875rem 0.75rem color-mix(in srgb, var(--sdx-color-black) 38%, transparent);
  margin: 0 0 0.65rem;
}

.page-viridians-triggers .headline,
.page-viridians-triggers .tagline,
.page-viridians-triggers .intro {
  color: color-mix(in srgb, var(--hero-card-text) 96%, transparent);
  text-align: left;
  text-shadow: none;
}

.page-viridians-triggers .headline {
  font-size: clamp(2.15rem, 3.6vw, 3rem);
  letter-spacing: -0.03em;
  margin: 3rem 0 3rem;
  line-height: 1.6;
}

.page-viridians-triggers .tagline {
  color: color-mix(in srgb, var(--page-accent) 74%, white);
  font-size: clamp(1.2rem, 1.7vw, 1.7rem);
  font-weight: 700;
  margin: 0 0 1rem;
}

.page-viridians-triggers .intro {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.56;
}

/* 5) Hero card channel bar — Page 3-owned component.
   vtr- prefix. Independent of viridians-jurisdictions-grid.css (Page 2).
   Previously used vm-card-bar classes — cross-page dependency now removed. */

.page-viridians-triggers .vtr-card-bar {
  display: block;
  width: 100%;
  height: 1.5rem;
  flex-shrink: 0;
}

.page-viridians-triggers .vtr-card-bar--eco {
  background: var(--sdx-color-eco-muted);
}

.page-viridians-triggers .vtr-card-bar--mdx {
  background: var(--sdx-color-mama-violet);
}

.page-viridians-triggers .vtr-card-bar--dual {
  background: linear-gradient(90deg,
    var(--sdx-color-green-deep)   0%,
    var(--sdx-color-green-deep)  50%,
    var(--sdx-color-mama-violet) 50%,
    var(--sdx-color-mama-violet) 100%);
}

/* Hero card badge row */

.page-viridians-triggers .vtr-card-badges {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.page-viridians-triggers .vtr-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999rem;
  font-size: var(--small);
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}

.page-viridians-triggers .vtr-card-badge--eco {
  background: color-mix(in srgb, var(--sdx-color-eco-mint) 32%, transparent);
  color: var(--sdx-color-eco-sage);
  border-color: color-mix(in srgb, var(--sdx-color-eco-border) 55%, var(--sdx-color-eco-khaki));
}

.page-viridians-triggers .vtr-card-badge--mdx {
  background: color-mix(in srgb, var(--sdx-color-mama-violet) 22%, transparent);
  color: var(--sdx-color-mama-violet-light);
  border-color: color-mix(in srgb, var(--sdx-color-mama-violet) 42%, transparent);
}

/* Hero card jurisdiction pill */

.page-viridians-triggers .vtr-card-jurisdiction {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999rem;
  background: color-mix(in srgb, var(--hero-card-text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero-card-text) 12%, transparent);
  opacity: 0.72;
}

.page-viridians-triggers .vtr-card-flag {
  width: 1.25rem;
  height: 0.9375rem;
  object-fit: cover;
  border-radius: 0.125rem;
}

.page-viridians-triggers .vtr-card-scope-label {
  color: var(--hero-card-text);
  font-size: var(--small);
  font-weight: 600;
}

/* Hero card inner layout */

.page-viridians-triggers .vtr-hero-card-inner {
  padding: 1.2rem 1.45rem 1.5rem;
}

.page-viridians-triggers .vtr-hero-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 0.9rem;
}

/* 6) Hero map frame */

.page-viridians-triggers .vtr-hero-map-shell {
  display: grid;
  place-items: center;
  min-height: 40rem;
  align-self: center;
  width: 100%;
}

.page-viridians-triggers .vtr-hero-map-frame {
  width: min(100%, 62rem);
  height: clamp(28rem, 48vw, 40rem);
  min-width: 20rem;
  min-height: 28rem;
  position: relative;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--sdx-color-white) 12%, transparent);
  border-radius: 1.875rem;
  overflow: hidden;
  box-shadow:
    0 1.5rem 3.25rem color-mix(in srgb, var(--sdx-color-black) 32%, transparent),
    0 0 0 1px color-mix(in srgb, var(--page-accent) 8%, transparent);
  background:
    linear-gradient(180deg,
      var(--vtr-hero-glass-wash) 0%,
      color-mix(in srgb, var(--sdx-color-white) 0.4%, transparent) 100%),
    radial-gradient(circle at 50% 50%,
      var(--vtr-hero-glass-edge) 0%,
      transparent 68%);
}

.page-viridians-triggers .vtr-hero-map-badge {
  position: absolute;
  inset: auto auto 1.25rem 1.25rem;
  z-index: 4;
  display: grid;
  gap: 0.75rem;
  min-width: 14rem;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: 1rem;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--hero-surface) 92%, transparent) 0%,
      color-mix(in srgb, var(--sdx-color-viridians-dark-surface) 94%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--hero-card-text) 18%, transparent);
  color: var(--hero-card-text);
  box-shadow: 0 1rem 2.25rem color-mix(in srgb, var(--sdx-color-black) 28%, transparent);
  backdrop-filter: blur(0.25rem);
}

.page-viridians-triggers .vtr-hero-map-badge-top {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.2rem;
}

.page-viridians-triggers .vtr-hero-map-badge-label {
  color: color-mix(in srgb, var(--hero-card-text) 68%, transparent);
  font-size: var(--small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-viridians-triggers .vtr-hero-map-flag {
  width: 1.8rem;
  height: 1.35rem;
  object-fit: cover;
  border-radius: 0.1875rem;
  background: var(--sdx-color-white);
  border: 1px solid color-mix(in srgb, var(--sdx-color-black) 10%, transparent);
  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--sdx-color-black) 20%, transparent);
}

.page-viridians-triggers .vtr-hero-map-country {
  display: block;
  font-family: var(--headline-font);
  font-size: clamp(1.45rem, 2.35vw, 1.85rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-top: 0.1rem;
}

.page-viridians-triggers .vtr-hero-map {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent;
}

.page-viridians-triggers .vtr-hero-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 56%,
      color-mix(in srgb, var(--page-primary) 2.1%, transparent) 0%,
      color-mix(in srgb, var(--page-primary) 1.1%, transparent) 22%,
      color-mix(in srgb, var(--page-secondary) 0.9%, transparent) 48%,
      transparent 90%),
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--sdx-color-white) 0.45%, transparent) 0%,
      transparent 74%);
}

.page-viridians-triggers .vtr-hero-map.maplibregl-map,
.page-viridians-triggers .vtr-hero-map .maplibregl-canvas,
.page-viridians-triggers .vtr-hero-map .maplibregl-canvas-container,
.page-viridians-triggers .vtr-hero-map .maplibregl-map {
  background: transparent !important;
}

.page-viridians-triggers .vtr-hero-map .maplibregl-canvas-container,
.page-viridians-triggers .vtr-hero-map .maplibregl-canvas {
  position: relative;
  z-index: 1;
}

.page-viridians-triggers .vtr-hero-map .sdx-jd-fill-overlay {
  z-index: 2;
}

.page-viridians-triggers .vtr-hero-map .maplibregl-control-container,
.page-viridians-triggers .vtr-hero-map .maplibregl-ctrl-bottom-right,
.page-viridians-triggers .vtr-hero-map .maplibregl-ctrl-bottom-left,
.page-viridians-triggers .vtr-hero-map .maplibregl-ctrl-top-right,
.page-viridians-triggers .vtr-hero-map .maplibregl-ctrl-top-left {
  display: none !important;
}

/* 7) Page section grids */

.page-viridians-triggers .vtr-identity-grid,
.page-viridians-triggers .vtr-card-grid,
.page-viridians-triggers .vtr-road-grid,
.page-viridians-triggers .vtr-cta-row {
  display: grid;
  gap: 1.25rem;
}

.page-viridians-triggers .vtr-identity-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 8) Identity section cards */

.page-viridians-triggers .vtr-identity-card,
.page-viridians-triggers .vtr-video-stage,
.page-viridians-triggers .vtr-transcript-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.page-viridians-triggers .vtr-identity-card {
  --vtr-channel-frame: var(--page-primary);
  position: relative;
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
}

.page-viridians-triggers .vtr-identity-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.35rem;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--vtr-channel-frame);
}

.page-viridians-triggers .vtr-identity-card.is-eco   { --vtr-channel-frame: var(--sdx-color-green-deep); }
.page-viridians-triggers .vtr-identity-card.is-human { --vtr-channel-frame: var(--sdx-color-mama-violet); }

.page-viridians-triggers .vtr-identity-card.is-mix {
  --vtr-channel-frame:
    linear-gradient(90deg,
      var(--sdx-color-green-deep) 0%,
      var(--sdx-color-green-deep) 50%,
      var(--sdx-color-mama-violet) 50%,
      var(--sdx-color-mama-violet) 100%);
}

.page-viridians-triggers .vtr-identity-top {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.page-viridians-triggers .vtr-corridor-flag {
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  border-radius: 999rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: var(--sdx-color-white);
  object-fit: contain;
  padding: 0.45rem;
}

.page-viridians-triggers .vtr-identity-top h3,
.page-viridians-triggers #vtr-law-title {
  margin: 0;
}

.page-viridians-triggers .vtr-identity-copy { margin: 0; }

.page-viridians-triggers .vtr-identity-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.page-viridians-triggers .vtr-identity-meta div { display: grid; gap: 0.35rem; }

.page-viridians-triggers .vtr-identity-meta dt {
  color: var(--muted);
  font-size: var(--small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.page-viridians-triggers .vtr-identity-meta dd { margin: 0; font-weight: 700; }

.page-viridians-triggers .vtr-chip-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: var(--small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* 9) Video section */

.page-viridians-triggers .vtr-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.page-viridians-triggers .vtr-video-stage,
.page-viridians-triggers .vtr-transcript-card { padding: 1.5rem; }

.page-viridians-triggers .vtr-video-stage-top {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.page-viridians-triggers .vtr-video-placeholder {
  min-height: 20rem;
  position: relative;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1.5px dashed color-mix(in srgb, var(--page-primary) 38%, var(--border) 62%);
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--page-primary) 9%, transparent) 0%,
      color-mix(in srgb, var(--page-secondary) 10%, transparent) 100%);
}

.page-viridians-triggers .vtr-video-thumb {
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: transparent;
}

.page-viridians-triggers .vtr-video-thumb-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.page-viridians-triggers .vtr-video-thumb-overlay {
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sdx-color-black) 72%, transparent);
  color: var(--sdx-color-white);
}

.page-viridians-triggers .vtr-video-thumb-label {
  font-size: var(--small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-viridians-triggers .vtr-video-thumb-play {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999rem;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--page-primary) 72%, var(--sdx-color-black) 28%);
  font-size: 1.2rem;
}

.page-viridians-triggers .vtr-video-placeholder-inner {
  max-width: 26rem;
  text-align: center;
  display: grid;
  gap: 0.9rem;
}

.page-viridians-triggers .vtr-video-placeholder-badge {
  justify-self: center;
  padding: 0.35rem 0.8rem;
  border-radius: 999rem;
  background: color-mix(in srgb, var(--page-primary) 12%, transparent);
  color: var(--page-primary);
  font-size: var(--small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-viridians-triggers .vtr-video-note { margin-top: 1rem; }

/* 10) Section grids */

.page-viridians-triggers .vtr-card-grid,
.page-viridians-triggers .vtr-road-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-viridians-triggers .vtr-reference-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.65rem;
}

.page-viridians-triggers .vtr-road-card {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.page-viridians-triggers .vtr-cta-row {
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: center;
}

/* ==========================================================================
   IDENTITY REVEAL — BKT 56080:2026 §7.5 ceremonial prose block.
   No card chrome. Centred prose. "Viridians" in pillar purple.
   ========================================================================== */

.page-viridians-triggers .vtr-identity-reveal {
  border-top: 1px solid var(--border);
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  padding: 4rem 2rem;
}

.page-viridians-triggers .vtr-reveal-inner {
  max-width: 38rem;
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}

.page-viridians-triggers .vtr-reveal-inner p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--fg);
}

.page-viridians-triggers .vtr-reveal-inner strong {
  color: var(--page-primary);
  font-weight: 700;
}

[data-theme="dark"] .page-viridians-triggers .vtr-reveal-inner strong {
  color: var(--page-accent);
}

[data-theme="dark"] .page-viridians-triggers {
  background: var(--page-dark-base);
  color: var(--fg);
}

[data-theme="dark"] .page-viridians-triggers .vtr-video-placeholder-badge,
[data-theme="dark"] .page-viridians-triggers .vtr-road-card .sdx-btn-secondary,
[data-theme="dark"] .page-viridians-triggers .vtr-cta-row .sdx-btn-secondary {
  color: var(--sdx-color-mama-violet-light);
  border-color: rgba(237, 233, 254, 0.55);
}

/* 11) Responsive */

@media (max-width: 62rem) {
  .page-viridians-triggers .vtr-hero-grid,
  .page-viridians-triggers .vtr-identity-grid,
  .page-viridians-triggers .vtr-card-grid,
  .page-viridians-triggers .vtr-road-grid,
  .page-viridians-triggers .vtr-cta-row,
  .page-viridians-triggers .vtr-video-grid {
    grid-template-columns: 1fr;
  }

  .page-viridians-triggers .hero {
    padding-bottom: 3rem;
    align-items: flex-start;
  }

  .page-viridians-triggers .vtr-hero-grid { gap: 1.5rem; }

  .page-viridians-triggers .vtr-hero-map-shell { min-height: 0; }

  .page-viridians-triggers .vtr-hero-card-inner {
    padding: 1rem 1.15rem 1.2rem;
  }

  .page-viridians-triggers .vtr-hero-card-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-viridians-triggers .vtr-hero-map-frame {
    width: min(100%, calc(100vw - 2rem));
    height: clamp(24rem, 88vw, 36rem);
    min-width: 0;
    min-height: 0;
  }

  .page-viridians-triggers .vtr-identity-meta {
    grid-template-columns: 1fr;
  }
}