/*
V7-HEADER
Title:     Viridians Sub-pages — Shared Atoms
Filename:  viridians-subpages.css
Path:      /assets/css/viridians/partials/viridians-subpages.css
Version:   v1.0.0
Issued:    2026-04-03
Author:    Buktika Webdesk (Binka)
Purpose:   Shared Viridians sub-page styling for Pages 3–5.
           Extracted from pillar-only viridians.css so sub-pages no longer
           depend on a stylesheet that is contractually limited to viridians.html.
*/

.page-viridians-triggers,
.page-viridians-commitment,
.page-viridians-mobilisation {
  --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);
  background: var(--page-bg);
  color: var(--fg);
}

.page-viridians-triggers .hero-wrap,
.page-viridians-commitment .hero-wrap,
.page-viridians-mobilisation .hero-wrap {
  position: relative;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center 35%;
  min-height: var(--hero-min);
}

.page-viridians-triggers .hero-wrap::before,
.page-viridians-commitment .hero-wrap::before,
.page-viridians-mobilisation .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%
  );
}

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

.page-viridians-triggers .hero-content,
.page-viridians-commitment .hero-content,
.page-viridians-mobilisation .hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  margin: 0 auto;
}

.page-viridians-triggers .headline,
.page-viridians-commitment .headline,
.page-viridians-mobilisation .headline {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
}

.page-viridians-triggers .sdx-btn-primary,
.page-viridians-commitment .sdx-btn-primary,
.page-viridians-mobilisation .sdx-btn-primary {
  background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-secondary) 100%);
  color: var(--sdx-color-white);
  box-shadow:
    0 0.25rem 0.875rem color-mix(in srgb, var(--page-primary) 28%, transparent);
}

.page-viridians-triggers .sdx-btn-primary:hover,
.page-viridians-commitment .sdx-btn-primary:hover,
.page-viridians-mobilisation .sdx-btn-primary:hover {
  transform: translateY(-0.1875rem);
  box-shadow:
    0 0.5rem 1.75rem color-mix(in srgb, var(--page-primary) 36%, transparent),
    0 0.25rem 1rem color-mix(in srgb, var(--page-secondary) 22%, transparent);
}

.page-viridians-triggers .card .sdx-btn-primary:hover,
.page-viridians-commitment .card .sdx-btn-primary:hover,
.page-viridians-mobilisation .card .sdx-btn-primary:hover {
  transform: none;
  filter: brightness(1.08);
}

.page-viridians-triggers .sdx-cta-band-inner h2,
.page-viridians-commitment .sdx-cta-band-inner h2,
.page-viridians-mobilisation .sdx-cta-band-inner h2 {
  margin-bottom: 2.5rem;
}

@media (max-width: 64rem) {
  .page-viridians-triggers .hero,
  .page-viridians-commitment .hero,
  .page-viridians-mobilisation .hero {
    padding: 3rem 1.5rem 5rem;
  }

  .page-viridians-triggers .hero-wrap,
  .page-viridians-triggers .hero,
  .page-viridians-commitment .hero-wrap,
  .page-viridians-commitment .hero,
  .page-viridians-mobilisation .hero-wrap,
  .page-viridians-mobilisation .hero {
    min-height: 30rem;
  }
}

@media (max-width: 48rem) {
  .page-viridians-triggers .hero-content,
  .page-viridians-commitment .hero-content,
  .page-viridians-mobilisation .hero-content {
    max-width: 100%;
  }
}