/*
V7-HEADER
Title:     Viridians Trigger Solution Brief — Page Styles
Filename:  viridians-trigger-solution-brief.css
Path:      /assets/css/viridians/viridians-trigger-solution-brief.css
Version:   v1.0.3
Issued:    2026-05-23
Author:    Buktika Webdesk (Binka)
Purpose:   Image-first chamber styles for Viridians Page Four — Trigger
           Solution Brief. Dark restored field, five framed images, quiet
           bottom-left chamber title, quiet bottom-right trigger docket.
           Lightbox as the inspection layer. CTA only in the Route frame.
           BKT 56080:2026 §6.2–§6.6 v4.4.1.
Changelog:
  v1.0.3  2026-06-23  Centred the lightbox CTA button (was left-aligned inline-flex
                      → flex + margin auto). On mobile, pinned the lightbox prev/next
                      arrows to the viewport edges (position:fixed) so they sit in the
                      side gutters instead of over the image.
  v1.0.2  2026-06-23  Enlarged frame labels (.vtsb-frame-title) and the trigger
                      docket pill text (too small on desktop). On mobile the pill
                      stacked vertically but kept border-radius:999rem, ballooning
                      into a giant oval — switched to a 0.85rem rounded rectangle,
                      bumped the stacked text, and hid the now-meaningless dividers.
  v1.0.0  2026-05-23  New canonical Page Four stylesheet. Renamed from
                      viridians-commitment-center.css. All body class
                      selectors updated to page-viridians-trigger-solution-brief
                      and vcc- prefix renamed to vtsb- per redline.
Body class: page-viridians-trigger-solution-brief
License:   © Buktika, 2026. All rights reserved.
*/

/* 0) Header and dependency notes */

/*
  Depends on: /assets/css/global.css, /assets/css/themes.css.
  This file owns all base surface rules for .page-viridians-trigger-solution-brief.
*/

/* 1) Page variable binding */

.page-viridians-trigger-solution-brief {
  --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);
  --vtsb-pack-accent:   color-mix(in srgb, var(--page-accent) 18%, transparent);
  --vtsb-pack-border:   color-mix(in srgb, var(--page-accent) 55%, var(--border) 45%);
}

/* 2) Base page surfaces */

.page-viridians-trigger-solution-brief {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(3,9,13,0.22), rgba(3,9,13,0.88)),
    url("/assets/images/viridians/viridians-underwater.webp") center top / cover fixed no-repeat,
    #071418;
  color: rgba(255,248,232,0.92);
}

.page-viridians-trigger-solution-brief main {
  min-height: calc(100vh - 4rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 14%, rgba(218,194,130,0.16), transparent 24rem),
    linear-gradient(180deg, rgba(2,7,10,0.2), rgba(2,7,10,0.58) 42%, rgba(2,7,10,0.78));
}

.page-viridians-trigger-solution-brief .container {
  width: min(100%, 100vw);
  max-width: none;
  padding: clamp(1rem, 2.2vw, 1.8rem) clamp(1rem, 2.2vw, 2rem) 5rem;
}

/* 3) Hero */

/* none — image-first: no hero on Page 4 */

/* 4) Typography overrides */

/* none */

/* 5) Sections and alternation */

/* Trigger context docket — retained docket line, not a control bar */

.page-viridians-trigger-solution-brief .vtsb-trigger-context {
  grid-column: 2;
  align-self: end;
  justify-self: end;
  width: fit-content;
  max-width: min(52rem, calc(100vw - 4rem));
  padding: 0.48rem 0.78rem;
  border-radius: 999rem;
  background: rgba(4, 15, 18, 0.28);
  border: 1px solid rgba(232, 198, 112, 0.16);
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-block: 6rem 0;
  margin-inline: 0 clamp(1rem, 2vw, 2rem);
  text-align: start;
}

.page-viridians-trigger-solution-brief .vtsb-trigger-context-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.52rem;
  font-size: 0.82rem;
}

.page-viridians-trigger-solution-brief .vtsb-context-label {
  color: rgba(232, 198, 112, 0.66);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.page-viridians-trigger-solution-brief .vtsb-context-title {
  font-weight: 700;
  color: rgba(255,248,232,0.82);
}

.page-viridians-trigger-solution-brief .vtsb-context-divider {
  color: rgba(232, 198, 112, 0.26);
  user-select: none;
}

.page-viridians-trigger-solution-brief .vtsb-context-corridor {
  color: rgba(229,238,232,0.62);
}

/* Five-frame Trigger Solution Brief */

.page-viridians-trigger-solution-brief .vtsb-frame-brief {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: clamp(1rem, 2vw, 2rem);
  width: min(calc(100vw - 2rem), 108rem);
  max-width: none;
  margin: 0 auto 2.4rem;
  padding: clamp(0.7rem, 1.4vw, 1.2rem) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.page-viridians-trigger-solution-brief .vtsb-frame-brief::before {
  content: none;
}

.page-viridians-trigger-solution-brief .vtsb-frame-brief-header,
.page-viridians-trigger-solution-brief .vtsb-frame-grid {
  position: relative;
  z-index: 1;
}

.page-viridians-trigger-solution-brief .vtsb-frame-grid {
  grid-column: 1 / -1;
}

.page-viridians-trigger-solution-brief .vtsb-chamber-title {
  grid-column: 1;
  align-self: end;
  justify-self: start;
  margin-block: 6rem 0;
  margin-inline: clamp(1rem, 2vw, 2rem) 0;
  font-family: var(--headline-font);
  font-size: clamp(0.88rem, 1.05vw, 1.08rem);
  font-weight: 740;
  line-height: 1.15;
  color: rgba(255,248,232,0.82);
  text-shadow: 0 8px 28px rgba(0,0,0,0.46);
}

.page-viridians-trigger-solution-brief .vtsb-frame-grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: center;
  min-height: clamp(19rem, 31vw, 30rem);
  gap: 0;
}

.page-viridians-trigger-solution-brief .vtsb-frame-plate {
  min-width: 0;
}

.page-viridians-trigger-solution-brief .vtsb-frame-plate:nth-child(1) {
  grid-column: 1 / span 5;
  transform: translate(0.3rem, 0.95rem) scale(0.96);
  z-index: 5;
}

.page-viridians-trigger-solution-brief .vtsb-frame-plate:nth-child(2) {
  grid-column: 6 / span 4;
  transform: translate(0.15rem, -1.55rem) scale(0.86);
  z-index: 3;
}

.page-viridians-trigger-solution-brief .vtsb-frame-plate:nth-child(3) {
  grid-column: 10 / span 5;
  transform: translate(0.1rem, 0.05rem) scale(0.9);
  z-index: 4;
}

.page-viridians-trigger-solution-brief .vtsb-frame-plate:nth-child(4) {
  grid-column: 15 / span 4;
  transform: translate(-0.2rem, -1.7rem) scale(0.88);
  z-index: 3;
}

.page-viridians-trigger-solution-brief .vtsb-frame-plate:nth-child(5) {
  grid-column: 19 / span 5;
  transform: translate(-0.1rem, 0.9rem) scale(0.94);
  z-index: 5;
}

.page-viridians-trigger-solution-brief .vtsb-frame-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(224, 188, 105, 0.32);
  border-radius: 0.45rem;
  background: rgba(255,255,255,0.035);
  box-shadow:
    0 16px 32px rgba(0,0,0,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.page-viridians-trigger-solution-brief .vtsb-frame-button:hover,
.page-viridians-trigger-solution-brief .vtsb-frame-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(232, 198, 112, 0.56);
  filter: brightness(1.035);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.3),
    0 0 0 2px rgba(232, 198, 112, 0.12),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

.page-viridians-trigger-solution-brief .vtsb-frame-button:focus-visible {
  outline: 2px solid rgba(232, 198, 112, 0.7);
  outline-offset: 3px;
}

.page-viridians-trigger-solution-brief .vtsb-frame-image {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.page-viridians-trigger-solution-brief .vtsb-frame-copy {
  position: absolute;
  left: 0.55rem;
  bottom: 0.55rem;
  display: block;
  padding: 0.23rem 0.44rem;
  color: #fff8e8;
  text-align: left;
  background: rgba(12, 9, 7, 0.48);
  border: 1px solid rgba(232, 198, 112, 0.13);
  border-radius: 0.35rem;
  opacity: 0.62;
  transition:
    opacity 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.page-viridians-trigger-solution-brief .vtsb-frame-button:hover .vtsb-frame-copy,
.page-viridians-trigger-solution-brief .vtsb-frame-button:focus-visible .vtsb-frame-copy {
  opacity: 0.95;
  background: rgba(12, 9, 7, 0.72);
  border-color: rgba(232, 198, 112, 0.32);
}

.page-viridians-trigger-solution-brief .vtsb-frame-title {
  font-family: var(--text-font);
  font-size: clamp(0.72rem, 0.92vw, 0.92rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,248,232,0.76);
  text-shadow: 0 2px 10px rgba(0,0,0,0.62);
}

.page-viridians-trigger-solution-brief #media-lightbox.is-image .lightbox-media {
  position: relative;
}

.page-viridians-trigger-solution-brief #media-lightbox {
  background:
    linear-gradient(180deg, rgba(3,9,13,0.18), rgba(3,9,13,0.46)),
    url("/assets/images/viridians/viridians-underwater.webp") center top / cover fixed no-repeat;
}

.page-viridians-trigger-solution-brief #media-lightbox .lightbox-inner {
  margin: 0 6vw;
}

.page-viridians-trigger-solution-brief #media-lightbox.is-image .lightbox-image {
  padding: 0;
  background: transparent;
  border-radius: 0.55rem;
  border: 1px solid rgba(232, 198, 112, 0.25);
  box-shadow: 0 24px 70px rgba(0,0,0,0.46);
  max-width: min(72vw, 980px);
  max-height: calc(100vh - 6.5rem);
  opacity: 1;
  filter: brightness(1);
  transform: scale(1);
  /* Fade-in speed: governs reveal after vtsb-frame-transitioning is removed. */
  transition:
    filter 1400ms ease,
    transform 1500ms ease;
}

.page-viridians-trigger-solution-brief #media-lightbox.vtsb-frame-transitioning .lightbox-image {
  /* Use brightness instead of opacity so the image stays fully opaque —
     opacity would let the background show through during the dim phase. */
  opacity: 1;
  filter: brightness(0.18);
  transform: scale(0.985);
  /* Dim-out speed: must complete before the 520ms frame-swap timer fires. */
  transition:
    filter 480ms ease,
    transform 500ms ease;
}

/* Caption is hidden with NO transition by default. The transition is only
   enabled via vtsb-caption-animating, added in JS just before the reveal.
   This prevents the browser from firing a 1050ms opacity:1→0 fade the moment
   the lightbox becomes visible (display:none→block transition quirk). */
.page-viridians-trigger-solution-brief #media-lightbox.is-image .lightbox-caption {
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.4rem);
  right: clamp(0.75rem, 2vw, 1.4rem);
  bottom: clamp(0.75rem, 2vw, 1.4rem);
  white-space: pre-line;
  max-width: none;
  margin: 0;
  border-radius: 0.55rem;
  text-align: left;
  padding: clamp(0.8rem, 1.4vw, 1.15rem);
  color: rgba(255,248,232,0.94);
  background: rgba(12, 9, 7, 0.74);
  border-color: rgba(232, 198, 112, 0.26);
  box-shadow: 0 12px 34px rgba(0,0,0,0.34);
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: none;
}

/* Transition enabled only when JS is about to reveal the caption. */
.page-viridians-trigger-solution-brief #media-lightbox.vtsb-caption-animating .lightbox-caption {
  transition:
    opacity 1050ms ease,
    transform 1050ms ease;
}

.page-viridians-trigger-solution-brief #media-lightbox.vtsb-caption-visible .lightbox-caption {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.page-viridians-trigger-solution-brief #media-lightbox .lightbox-prev,
.page-viridians-trigger-solution-brief #media-lightbox .lightbox-next {
  width: 3rem;
  height: 3rem;
  color: rgba(255,248,232,0.92);
  background: rgba(4, 15, 18, 0.42);
  border-color: rgba(232, 198, 112, 0.28);
}

.page-viridians-trigger-solution-brief #media-lightbox .lightbox-prev svg,
.page-viridians-trigger-solution-brief #media-lightbox .lightbox-next svg {
  width: 1.55rem;
  height: 1.55rem;
  display: block;
}

.page-viridians-trigger-solution-brief .vtsb-lightbox-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0.8rem auto 0;
  padding: 0.72rem 1rem;
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--page-primary) 88%, #2a1734 12%);
  color: #fff8e8;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.page-viridians-trigger-solution-brief .vtsb-lightbox-title,
.page-viridians-trigger-solution-brief .vtsb-lightbox-body,
.page-viridians-trigger-solution-brief .vtsb-lightbox-scope {
  display: block;
}

.page-viridians-trigger-solution-brief .vtsb-lightbox-title {
  margin-bottom: 0.38rem;
  font-family: var(--headline-font);
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  font-weight: 760;
  line-height: 1.12;
  color: rgba(255,248,232,0.98);
}

.page-viridians-trigger-solution-brief .vtsb-lightbox-body {
  font-size: clamp(0.92rem, 1.15vw, 1.08rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,248,232,0.88);
}

.page-viridians-trigger-solution-brief .vtsb-lightbox-scope {
  margin-top: 1.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232,198,112,0.72);
}

/* DOC-03 §5.3: hover = translateY(-3px) + stronger shadow. No new colours on
   hover (background and #fff8e8 text are held). Standalone CTA, not inside .card,
   so the lift is permitted (§5.3-HR1 applies only inside .card). */
.page-viridians-trigger-solution-brief .vtsb-lightbox-cta:hover,
.page-viridians-trigger-solution-brief .vtsb-lightbox-cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
}

/* 9) Media queries */

/* Mobile */

@media (max-width: 48rem) {
  .page-viridians-trigger-solution-brief .vtsb-trigger-context {
    grid-column: 1;
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin-block-start: 2rem;
    margin-inline: 0;
    /* Stacked content + a 999rem radius ballooned into a giant oval. Use a normal
       rounded rectangle when the items wrap to their own lines on mobile. */
    border-radius: 0.85rem;
  }

  .page-viridians-trigger-solution-brief .vtsb-trigger-context-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.9rem;
  }

  /* The "|" dividers are meaningless once the items stack vertically. */
  .page-viridians-trigger-solution-brief .vtsb-context-divider {
    display: none;
  }

  .page-viridians-trigger-solution-brief .vtsb-frame-brief {
    grid-template-columns: 1fr;
    margin-top: 0.75rem;
    padding: 0.85rem;
  }

  .page-viridians-trigger-solution-brief .vtsb-frame-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: auto;
    gap: 0.85rem;
  }

  .page-viridians-trigger-solution-brief .vtsb-frame-plate:nth-child(n) {
    grid-column: auto;
    transform: none;
  }

  .page-viridians-trigger-solution-brief .vtsb-frame-plate:last-child {
    grid-column: 1 / -1;
    max-width: min(16rem, 70vw);
    justify-self: center;
  }

  .page-viridians-trigger-solution-brief .vtsb-chamber-title {
    grid-column: 1;
    margin-block-start: 2rem;
    margin-inline: 0;
  }

  .page-viridians-trigger-solution-brief .vtsb-frame-copy {
    padding: 2.4rem 0.7rem 0.7rem;
  }

  .page-viridians-trigger-solution-brief .vtsb-frame-title {
    font-size: 0.82rem;
  }

  /* The image card is centred and narrower than the viewport, leaving gutters on
     both sides. The shared lightbox pulled the arrows INSIDE (left/right: 0.5rem of
     the fit-content inner = over the image). Pin them to the viewport edges instead
     so they sit in the side space, clear of the image. */
  .page-viridians-trigger-solution-brief #media-lightbox .lightbox-prev,
  .page-viridians-trigger-solution-brief #media-lightbox .lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  .page-viridians-trigger-solution-brief #media-lightbox .lightbox-prev {
    left: 0.5rem;
    right: auto;
  }

  .page-viridians-trigger-solution-brief #media-lightbox .lightbox-next {
    right: 0.5rem;
    left: auto;
  }
}

/* 10) Dark mode */

[data-theme="dark"] .page-viridians-trigger-solution-brief .vtsb-trigger-context {
  background: color-mix(in srgb, var(--page-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--page-primary) 28%, transparent);
}

[data-theme="dark"] .page-viridians-trigger-solution-brief .vtsb-frame-brief {
  border-color: rgba(232, 198, 112, 0.24);
}