/*
V7-HEADER
Title:     Viridians Trigger Detail — Hero Section Styles
Filename:  viridians-trigger-detail-hero.css
Path:      /assets/css/viridians/partials/viridians-trigger-detail-hero.css
Version:   v1.0.0
Issued:    2026-04-07
Author:    Buktika Webdesk (Binka)
Purpose:   All styles for the two-column Amber Peak hero partial:
           hero-wrap background and vignette, two-column grid, map shell and
           frame, MapLibre canvas scoping, map-badge overlay, trigger card
           chrome, open-bottom glow invitation, channel bar variants, badge
           row, jurisdiction pill, hero card inner layout, and responsive
           collapse. Page variables consumed from viridians-trigger-detail.css
           — no variable redeclaration in this file.
Body class: page-viridians-trigger-detail
License:   © Buktika, 2026. All rights reserved.
*/

/* 0) Header and dependency notes */

/*
  Depends on: /assets/css/global.css, /assets/css/themes.css,
              /assets/css/viridians/viridians-trigger-detail.css (page vars).
  Load order: viridians-trigger-detail.css must precede this file so all
  --page-* and --hero-* custom properties resolve at parse time.
*/

/* 1) Page variable binding */

/* none — all custom properties declared in viridians-trigger-detail.css */

/* 2) Base page surfaces */

/* none */

/* 3) Hero */

.page-viridians-trigger-detail .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-trigger-detail .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-trigger-detail .hero {
  min-height: var(--hero-min);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem 8rem;
  overflow: visible;
}

.page-viridians-trigger-detail .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-trigger-detail .hero-content {
  max-width: 31rem;
}

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

/* 4) Typography overrides */

.page-viridians-trigger-detail .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-trigger-detail .headline,
.page-viridians-trigger-detail .tagline,
.page-viridians-trigger-detail .intro {
  color: color-mix(in srgb, var(--hero-card-text) 96%, transparent);
  text-align: left;
  text-shadow: none;
}

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

.page-viridians-trigger-detail .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-trigger-detail .intro {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.56;
}

/* 5) Sections and alternation */

/* none */

/* 6) Cards and tiles */

/* Hero card — open bottom edge + downward glow invitation */

.page-viridians-trigger-detail .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-trigger-detail .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-trigger-detail .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);
}


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

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

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

.page-viridians-trigger-detail .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%
  );
}

/* Badge row */

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

.page-viridians-trigger-detail .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-trigger-detail .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-trigger-detail .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);
}

/* Jurisdiction pill */

.page-viridians-trigger-detail .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-trigger-detail .vtr-card-flag {
  width: 1.25rem;
  height: 0.9375rem;
  object-fit: cover;
  border-radius: 0.125rem;
}

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

/* Hero card inner layout */

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

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

/* Hero map shell */

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

/* Hero map frame */

.page-viridians-trigger-detail .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%
    );
}

/* Map badge overlay */

.page-viridians-trigger-detail .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-trigger-detail .vtr-hero-map-badge-top {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.2rem;
}

.page-viridians-trigger-detail .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-trigger-detail .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-trigger-detail .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;
}

/* MapLibre canvas scoping */

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

.page-viridians-trigger-detail .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-trigger-detail .vtr-hero-map.maplibregl-map,
.page-viridians-trigger-detail .vtr-hero-map .maplibregl-canvas,
.page-viridians-trigger-detail .vtr-hero-map .maplibregl-canvas-container,
.page-viridians-trigger-detail .vtr-hero-map .maplibregl-map {
  background: transparent !important;
}

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

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

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

/* 7) Buttons and CTAs */

/* none */

/* 8) Page modules */

/* none */

/* 9) Media queries */

@media (max-width: 62rem) {
  .page-viridians-trigger-detail .vtr-hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

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

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

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

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

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

/* 10) Dark mode */

/* none — hero is always dark-surfaced via --hero-surface token */