/* =============================================================
   HZL Microsite — Section 11: Strategic Priorities
   Option B — Sticky Glass Grid
   ─────────────────────────────────────────────────────────────
   Scroll choreography (p 0→1 across 220vh travel):
     0.00–0.10  eyebrow fades up
     0.05–0.15  headline lines slide up (staggered)
     0.12–0.28  Card 1 fades + rises
     0.22–0.38  Card 2
     0.32–0.48  Card 3
     0.42–0.58  Card 4
     0.52–0.68  Card 5
     0.72–0.85  CTA appears
   ============================================================= */

/* ── Section: tall scroll track ──────────────────────────────── */
/* 380vh = 100vh sticky pin + 280vh scroll travel.
   First 150vh = hero image; next 230vh = content reveals. */
.sp {
  position: relative;
  height: 380vh;
  background: #040214;
  color: #fff;
  z-index: 0;
}

/* ── Sticky viewport ─────────────────────────────────────────── */
.sp__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #040214;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /* Bottom padding reserves space for the fixed arc-nav so the "Explore Our
     Strategic Priorities" CTA never overlaps its centred "STRATEGIC
     PRIORITIES" active label (collision on shorter/zoomed desktop windows). */
  padding:
    calc(var(--utility-h, 0px) + var(--bar-h, 88px) + 8px)
    clamp(40px, 5vw, 80px)
    calc(var(--arc-nav-h, 88px) + 1rem);
}

/* ── Background glow layers (CSS only, no perf cost) ─────────── */
.sp__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 90% 15%, rgba(79,224,207,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 10% 85%, rgba(127,185,66,0.07)  0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,96,163,0.05)   0%, transparent 70%);
}

/* Subtle dot-grid overlay */
.sp__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Hero image (phase 1 — fades out as cards appear) ───────── */
.sp__hero-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;          /* above bg glow (z:0), below header+grid (z:3) */
  will-change: opacity;
  pointer-events: none; /* never block clicks on cards/CTA below */
}

.sp__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Bottom scrim: blends image into the dark bg so the fade is smooth */
.sp__hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(4,2,20,0.18)  0%,
      rgba(4,2,20,0.08) 40%,
      rgba(4,2,20,0.55) 80%,
      rgba(4,2,20,0.90) 100%
    );
}

/* ── Section header ──────────────────────────────────────────── */
.sp__header {
  flex-shrink: 0;
  text-align: center;
  position: relative;   /* needed for z-index to apply in flex context */
  z-index: 3;           /* above hero-wrap (z:1) and bg (z:0) */
}

.sp__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7fb942;
  margin-bottom: 14px;
  will-change: opacity, transform;
}

.sp__headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 54px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.1;
  color: rgba(238, 242, 246, 0.95);
  margin: 0;
}

.sp__headline-line {
  display: block;
  will-change: opacity, transform;
}

/* ── 5-card grid (6-col base) ────────────────────────────────── */
.sp__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 1160px;
  position: relative;   /* needed for z-index to apply */
  z-index: 3;           /* above hero-wrap (z:1) */
}

/* Track is invisible to grid layout on desktop — cards become direct children */
.sp__cards-track {
  display: contents;
}

/* Row 1: 3 equal cards (span 2 each) */
.sp__card:nth-child(1),
.sp__card:nth-child(2),
.sp__card:nth-child(3) { grid-column: span 2; }

/* Row 2: 2 wider cards (span 3 each) */
.sp__card:nth-child(4),
.sp__card:nth-child(5) { grid-column: span 3; }

/* ── Glass card ──────────────────────────────────────────────── */
.sp__card {
  position: relative;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: clamp(18px, 2.2vh, 26px) clamp(18px, 1.8vw, 26px);
  overflow: hidden;
  will-change: opacity, transform;
  transition: background 0.28s ease, border-color 0.28s ease;
  cursor: default;
  display: flex;
  flex-direction: column;
}

/* Accent top-border gradient per card */
.sp__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--cc, #4fe0cf) 0%,
    rgba(255,255,255,0.10) 60%,
    transparent 100%
  );
  border-radius: 18px 18px 0 0;
}

/* Cursor-following spotlight (wander effect) */
.sp__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--cc-alpha, 79,224,207), 0.18) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.sp__card:hover {
  background:
    linear-gradient(
      135deg,
      rgba(0, 96, 163, 0.22)   0%,
      rgba(0, 96, 163, 0.08)  40%,
      rgba(127, 185, 66, 0.08) 60%,
      rgba(127, 185, 66, 0.20) 100%
    );
  border-color: rgba(127, 185, 66, 0.40);
}

/* Reveal spotlight on hover */
.sp__card:hover::after {
  opacity: 1;
}

/* Number */
.sp__card-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--cc, #4fe0cf);
  margin-bottom: clamp(8px, 1.2vh, 14px);
}

/* Title */
.sp__card-title {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(238, 242, 246, 0.92);
  line-height: 1.3;
  margin: 0 0 clamp(16px, 2.5vh, 28px);
}

/* Read More — deep-links to the standalone Strategic Priorities page.
   Sits at the bottom of each card, tinted with that card's accent (--cc). */
.sp__card-readmore {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 3;
  font-family: var(--font-display);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cc, #4fe0cf);
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--cc, #4fe0cf) 55%, transparent);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.sp__card-readmore:hover {
  background: color-mix(in srgb, var(--cc, #4fe0cf) 16%, transparent);
  border-color: var(--cc, #4fe0cf);
  transform: translateY(-2px);
}
.sp__card-readmore-arrow { transition: transform 0.25s ease; }
.sp__card-readmore:hover .sp__card-readmore-arrow { transform: translateX(4px); }

/* Body */
.sp__card-body {
  font-family: var(--font-display);
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(238, 242, 246, 0.75);
  margin: 0 0 clamp(10px, 1.4vh, 16px);
}

/* Stat tag pill */
.sp__card-tag {
  display: inline-block;
  padding: 4px 11px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  font-family: var(--font-display);
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc, #4fe0cf);
}

/* Card-level CTA — shimmer pill from base.css, layout overrides only */
.sp__card-cta {
  margin-top: auto;
  align-self: flex-start;
  position: relative;
  z-index: 3;
}

/* ── CTA ─────────────────────────────────────────────────────── */
.sp__cta-wrap {
  flex-shrink: 0;
  text-align: center;
  position: relative;   /* needed for z-index to apply */
  z-index: 3;           /* above hero-wrap (z:1) */
  will-change: opacity, transform;
}

.sp__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.78em 1.8em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#040214, #040214) padding-box,
    linear-gradient(135deg, #0060a3 0%, #4fe0cf 30%, #fff 50%, #7fb942 70%, #0060a3 100%) border-box;
  background-size: 100%, 300% 300%;
  animation: spCtaShimmer 3s ease-in-out infinite;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

@keyframes spCtaShimmer {
  0%   { background-position: 0 0, 0%   50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0%   50%; }
}

.sp__cta-arrow { transition: transform 0.25s; }
.sp__cta:hover .sp__cta-arrow { transform: translateX(5px); }

/* ── Short / zoomed desktop windows ──────────────────────────────
   Compress the content so it fits in the centred area above the
   reserved arc-nav space — otherwise the headline + 2 card rows + CTA
   overflow and the CTA dips into the arc-nav "Strategic Priorities"
   label. (Browser zoom shrinks the CSS viewport height, so this also
   covers zoomed-in screens.) */
@media (min-width: 961px) and (max-height: 820px) {
  .sp__sticky { gap: 12px; }
  .sp__headline { font-size: clamp(24px, 3.2vw, 38px); }
  .sp__grid { gap: 10px; }
  .sp__card { padding: clamp(12px, 1.5vh, 18px) clamp(16px, 1.8vw, 24px); }
  .sp__card-title { font-size: clamp(15px, 1.4vw, 18px); }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 960px) {
  .sp__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  /* Row 1: 2 cards */
  .sp__card:nth-child(1) { grid-column: 1 / 3; }
  .sp__card:nth-child(2) { grid-column: 3 / 5; }
  /* Row 2: 2 cards */
  .sp__card:nth-child(3) { grid-column: 1 / 3; }
  .sp__card:nth-child(4) { grid-column: 3 / 5; }
  /* Row 3: full width */
  .sp__card:nth-child(5) { grid-column: 1 / 5; }
}

@media (max-width: 640px) {
  .sp {
    height: auto;
    min-height: 100svh;
    background: #040214;
  }

  .sp__sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    padding: calc(var(--utility-h,0px) + var(--bar-h,56px) + 1.5rem) 20px 3rem;
    gap: 24px;
  }

  .sp__grid {
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
  }

  /* Restore block flow for mobile slider */
  .sp__cards-track {
    display: flex;
    width: 100%;
    transition: transform 0.35s ease;
  }

  .sp__card {
    flex: 0 0 100%;
    width: 100%;
  }

  .sp__card:nth-child(n) { grid-column: unset; }

  /* Reset all JS-driven animations on mobile */
  .sp__eyebrow,
  .sp__headline-line,
  .sp__card,
  .sp__cta-wrap {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sp__cta { animation: none; }
  .sp__card,
  .sp__eyebrow,
  .sp__headline-line,
  .sp__cta-wrap { will-change: auto; }
}