/* ======================================================================================================
   V7-HEADER
   File:    viridians.css
   Path:    /assets/css/viridians/viridians.css
   Version: v7.7.0
   Issued:  2026-03-30
   Author:  Buktika Webdesk (Binka)
   Purpose: Viridians pillar page stylesheet — viridians.html ONLY.
            Sub-pages own their own CSS files. This file must not be loaded
            by any page other than viridians.html.
   Spec refs: PIL-01, DOC-02, DOC-03, www-A §2.1, www-C Rule 5

   Changelog:
   v7.7.0 (2026-03-30): SLOGAN BAND CORRECTED.
     - Slogan band outside hero-wrap. Full viewport width. Text right-aligned
       to viewport edge via justify-content: flex-end, no max-width on inner.
       Colour restored to page-primary mix. No text-shadow needed off photography.
   v7.6.0 (2026-03-30): SLOGAN REPOSITIONED INSIDE HERO.
     - CHANGED .vir-hero-slogan-band: position absolute, bottom 1.75rem,
       left/right 0. Sits over hero image, bottom-right aligned.
       hero-wrap already has position:relative.
     - CHANGED .vir-hero-slogan colour to rgba(255,255,255,0.82) with
       text-shadow — readable over photography.
     - UPDATED mobile breakpoints for new absolute positioning.
   v7.5.0 (2026-03-30): COMPLIANCE FIX.
     - REMOVED .headline line-height override from ≤480px block.
       DOC-02 §7.2.1 HARD RULE: page CSS MUST NOT override .headline line-height.
       Fix moved to global.css v3.22.0 where it belongs.
   v7.4.0 (2026-03-30): MOBILE WHITESPACE FIXES.
     - ADDED .headline line-height: 1.15 at ≤480px. Global 0.98 crushes
       3-line wrapped headline on mobile. Relief at small viewport only.
     - ADDED .sdx-cta-band-inner h2 margin-bottom: 2.5rem. Global 1rem too
       tight when no paragraph sits between heading and button.
   v7.3.0 (2026-03-30): TRUST BRIDGE LAYOUT FIX.
     - ADDED .viridians-trust-bridge .section-title margin-bottom: 1.75rem.
       Global p { margin-top: 0 } meant first paragraph sat 0.75rem below
       heading border with no breathing room. margin is not in DOC-02 §4.1.4
       prohibited override list — this fix is permitted.
     - ADDED text-align: left to Trust Bridge paragraphs. Explicit declaration
       prevents any ancestor center-alignment bleed.
   v7.2.0 (2026-03-30): LAYOUT CORRECTIONS.
     - CHANGED slogan band: right-aligned float. max-width container, padding-right 2rem.
     - CHANGED Trust Bridge paragraphs: font-size 1.125rem (was var(--body)), color var(--fg)
       (was var(--muted)), line-height 1.5 (was 1.7), margin-bottom 1.25rem added.
       Short punchy lines (p4, p5, p6) target: font-weight 600 via .vtr-punch class.
   v7.1.0 (2026-03-30): SCOPE CORRECTED. Stripped to viridians.html rules only.
   v7.0.0 (2026-03-30): Full rebuild from @import shim. Orphaned hero rules stripped.
     vir-auth-copy rules removed (owned by global.css). vir-breath added.
     border-radius px violation fixed on vir-product-badge.
   v6.9.0 (2026-03-30): Proof Buyers hero redesign. (see viridians-1.css for history)
   ====================================================================================================== */

/* 0) Dependencies
   global.css  — canonical tokens, components, .sdx-card-section, .cards, .card,
                  .container, hero-actions auth split, vir-auth-copy auth split
   themes.css  — [data-theme] alias layer
   footer.css  — footer partial
*/

/* 1) Page variable binding — Colour Map v2.9.0 Section 4.1 (LOCKED) */

.page-viridians {
  --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-image:         url('/assets/images/viridians/viridians-hero.webp');
  --hero-vignette-from: color-mix(in srgb, var(--page-primary) 20%, transparent);
  --hero-vignette-to:   color-mix(in srgb, var(--page-primary) 0%, transparent);
}

/* 2) Base page surfaces */

.page-viridians {
  background: var(--page-bg);
  color: var(--fg);
}

/* NOTE: .container is owned entirely by global.css. No page override. www-A §2.1. */

/* 3) Hero
   Bottom vignette only. Max opacity 0.25. Fade at 32%. PIL-01 §3 / DOC-02 §3. */

.page-viridians .hero-wrap {
  position: relative;  /* Required: pseudo-element uses position:absolute. DOC-02 §3.1. */
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center 35%;
  min-height: var(--hero-min);
}

.page-viridians .hero {
  min-height: var(--hero-min);  /* DOC-02 §3.2 HARD RULE: must match hero-wrap */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem 14rem;  /* Heavy bottom: pushes content into upper skyline zone. DOC-02 §3.2 owner override. */
}

.page-viridians .hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--hero-vignette-from) 0%,
    var(--hero-vignette-to)   32%
  );
}

/* DOC-02 §3.3.1 — pillar headline size */
.page-viridians .headline {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.98;
}

.page-viridians .hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 74rem;
  margin: 0 auto;
  text-align: center;
}

.page-viridians .hero .intro {
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0.1875rem 0.75rem color-mix(in srgb, var(--sdx-color-black) 60%, transparent);
}

/* 4) Typography overrides */

/* none */

/* 5) Sections and alternation */

/* none */

/* 6) Cards
   Override global .card border-left from amber to purple-deep.
   Owner instruction. www-C Rule 8. */

.page-viridians .card {
  border-left-color: var(--page-primary);
}

/* 7) Buttons
   PIL-01 §5.1: gradient 145deg, page-primary → page-secondary. Text #ffffff. */

.page-viridians .sdx-btn-primary {
  background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-secondary) 100%);
  color: #ffffff;  /* DOC-03 §8.3.1: dark stops — #ffffff mandatory */
  box-shadow: 0 4px 14px color-mix(in srgb, var(--page-primary) 28%, transparent);
}

.page-viridians .sdx-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--page-primary) 36%, transparent),
              0 4px 16px color-mix(in srgb, var(--page-secondary) 22%, transparent);
}

/* Button inside card: no lift. DOC-03 §8.3.3 HARD RULE. */
.page-viridians .card .sdx-btn-primary:hover {
  transform: none;
  filter: brightness(1.08);
}

/* CTA band — increase gap between heading and button.
   Global h2 margin-bottom: 1rem is too tight when no paragraph is present.
   Whitespace is structural on this page. */
.page-viridians .sdx-cta-band-inner h2 {
  margin-bottom: 2.5rem;
}

/* 8) Page modules */

/* ── Slogan band — outside hero-wrap, full viewport width, text right-aligned.
   Sits between hero image and main content. Not inside .container. ── */

.page-viridians .vir-hero-slogan-band {
  width: 100%;
  background: transparent;
  margin-bottom: 5rem;
}

.page-viridians .vir-hero-slogan-inner {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 2rem 0;
}

.page-viridians .vir-hero-slogan {
  margin: 0;
  padding: 0;
  max-width: 28rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-style: italic;
  color: color-mix(in srgb, var(--page-primary) 58%, var(--fg) 42%);
  text-align: right;
}

/* ── Trust Bridge — BKT-DOC-www-E v2.6.0 §6.1
   No section-intro. §6.1-HR2. Six staccato paragraphs only.
   Executive register: var(--fg) not muted. 1.125rem not body.
   Tight line-height: staccato blows, not flowing prose. ── */

.page-viridians .viridians-trust-bridge {
  position: relative;
}

/* Add breathing room between heading border-bottom and first paragraph.
   DOC-02 §4.1.4 prohibits overriding text-align/font/colour/border-bottom.
   margin-bottom is not in that list — this override is permitted. */
.page-viridians .viridians-trust-bridge .section-title {
  margin-bottom: 1.75rem;
}

.page-viridians .viridians-trust-bridge p {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
  color: var(--fg);
  line-height: 1.5;
  text-align: left;
}

.page-viridians .viridians-trust-bridge p:last-child {
  margin-bottom: 0;
}

/* Short punchy lines land harder at heavier weight.
   Applied via .vtr-punch class on p4, p5, p6 in HTML. */
.page-viridians .viridians-trust-bridge .vtr-punch {
  font-weight: 600;
}

/* ── Breath moment — www-A Amendment v2.3.0
   Full-bleed. Outside .container. One paragraph only.
   HARD RULE: no heading, no button, no link inside .vir-breath. ── */

.page-viridians .vir-breath {
  padding: 3rem 2rem;
  text-align: center;
  background: transparent;
}

.page-viridians .vir-breath p {
  max-width: 44rem;
  margin: 0 auto;
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--muted);
}

/* 9) Media queries */

@media (max-width: 900px) {
  .page-viridians .hero {
    padding: 3rem 1.25rem 8rem;
  }
}

@media (max-width: 768px) {
  /* DOC-02 §3.3.6: hero-wrap and hero min-height must match at every breakpoint */
  .page-viridians .hero-wrap,
  .page-viridians .hero { min-height: 480px; }
  .page-viridians .hero-wrap { background-position: center 30%; }

  .page-viridians .hero-content { padding: 1.5rem; }
  .page-viridians .vir-hero-slogan-inner { padding: 0.75rem 1.5rem 0; }
  .page-viridians .vir-breath { padding: 2rem 1.5rem; }
}

@media (max-width: 640px) {
  .page-viridians .hero-content { max-width: 100%; }
  .page-viridians .hero .intro { font-size: 1rem; }
}

@media (max-width: 480px) {
  .page-viridians .hero-wrap,
  .page-viridians .hero { min-height: 480px; }
  .page-viridians .hero { padding: 3rem 1.25rem; }
  .page-viridians .hero-content { padding: 1.25rem; }
  .page-viridians .vir-hero-slogan-inner { padding: 0.75rem 1.25rem 0; }
  .page-viridians .vir-breath { padding: 1.5rem 1.25rem; }
}

/* 10) Dark mode
   [data-theme="dark"] only. @media prefers-color-scheme MUST NOT appear. DOC-01 §3.2. */

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

[data-theme="dark"] .page-viridians .card {
  border-left-color: color-mix(in srgb, var(--page-primary) 70%, transparent);
}

[data-theme="dark"] .page-viridians .vir-breath p {
  color: color-mix(in srgb, var(--fg) 70%, transparent);
}