/* ================================================================
   PROBLEM SECTION — "The 3D Stage Reveal"
   A scroll-driven experience:
     Phase 1: Monolith (headline) rises and sits dead-centre.
     Phase 2: Monolith leans backward into the screen on scroll.
     Phase 3: Glass evidence cards drop in over the receding stage.
   All 3D transforms use perspective set on .hs-problem__sticky
   so the vanishing point is perfectly centred.
================================================================ */

/* ── Scroll track ───────────────────────────────────────────── */
/* 260vh gives GSAP enough vertical space to choreograph all
   three phases without rushing. Lenis keeps this silky smooth. */
.hs-problem {
  position: relative;
  height: 260vh;
  background-color: transparent; /* sky shows through */
}

/* ── Sticky viewport ────────────────────────────────────────── */
/* Pins to the screen while the user scrolls through the track. */
.hs-problem__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 3D environment — the vanishing point lives here */
  perspective: 1000px;
  perspective-origin: 50% 45%;
}

/* ── Layer 1: The Monolith ──────────────────────────────────── */
/* The headline that commands the full viewport then tilts back. */
.hs-problem__monolith {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: var(--hs-space-12);
  text-align: center;
  transform-origin: center 70%; /* tilt pivots from below centre */
  z-index: 1;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.hs-problem__eyebrow {
  color: var(--hs-color-text-danger);
  margin-bottom: var(--hs-space-5);
  letter-spacing: var(--hs-tracking-wider);
}

.hs-problem__headline {
  font-family: var(--hs-font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--hs-font-extrabold);
  line-height: var(--hs-leading-tight);
  letter-spacing: var(--hs-tracking-tight);
  color: var(--hs-color-text-brand);
  max-width: 14ch;
  margin-bottom: var(--hs-space-6);
}

.hs-problem__intro {
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-xl);
  font-weight: var(--hs-font-normal);
  line-height: var(--hs-leading-relaxed);
  color: var(--hs-color-text-secondary);
  max-width: 46ch;
}

/* ── Layer 2: The Evidence ──────────────────────────────────── */
/* Absolutely stacked over the monolith — hidden until GSAP drops
   the cards in. Each card begins off-screen above the viewport.  */
.hs-problem__evidence {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: var(--hs-container-pad-x);
  z-index: 2;
  pointer-events: none; /* cards will enable pointer-events once visible */
}

.hs-problem__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hs-gap-md);
  width: 100%;
  max-width: 840px;
}

/* ── Problem card — glass panel ─────────────────────────────── */
.hs-problem__card {
  background: var(--hs-glass-bg);
  backdrop-filter: var(--hs-glass-blur);
  -webkit-backdrop-filter: var(--hs-glass-blur);
  border: var(--hs-border-1) solid var(--hs-glass-border);
  border-radius: var(--hs-radius-2xl);
  box-shadow: var(--hs-glass-shadow);
  padding: var(--hs-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;

  /* Cards start hidden above — GSAP drives the drop animation */
  opacity: 0;
  transform: translateY(-120px) rotateX(12deg);
  pointer-events: none;

  /* Edge-light via inset gradient on ::before */
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--hs-transition-base),
    background var(--hs-transition-base);
}

.hs-problem__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    140deg,
    var(--hs-glass-edge-top)  0%,
    var(--hs-glass-edge-left) 30%,
    transparent               65%
  );
  pointer-events: none;
}

.hs-problem__card:hover {
  background: var(--hs-glass-bg-hover);
  box-shadow: var(--hs-glass-shadow-hover);
}

/* Re-enable pointer events once GSAP has revealed the card */
.hs-problem__card.is-visible {
  pointer-events: auto;
}

.hs-problem__card-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--hs-space-12);
  height: var(--hs-space-12);
  background: var(--hs-color-bg-danger);
  border-radius: var(--hs-radius-lg);
  padding: var(--hs-space-3);
  flex-shrink: 0;
}

.hs-problem__card-title {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-2xl);
  font-weight: var(--hs-font-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-color-text-brand);
}

.hs-problem__card-body {
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-base);
  line-height: var(--hs-leading-relaxed);
  color: var(--hs-color-text-secondary);
}

/* ── Bridge ─────────────────────────────────────────────────── */
/* The transition text that appears after all cards have settled. */
.hs-problem__bridge {
  position: absolute;
  bottom: var(--hs-space-12);
  left: 0;
  right: 0;
  text-align: center;
  z-index: 3;
  opacity: 0;
}

.hs-problem__transition {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-xl);
  font-weight: var(--hs-font-medium);
  color: var(--hs-color-text-secondary);
  font-style: italic;
  max-width: 52ch;
  margin-inline: auto;
}

/* ── Tablet: 1024px → 426px ─────────────────────────────────── */
@media (max-width: 1024px) {
  .hs-problem__monolith {
    padding-inline: var(--hs-space-8);
  }

  .hs-problem__grid {
    max-width: 680px;
  }

  .hs-problem__card {
    padding: var(--hs-space-6);
  }

  .hs-problem__card-title {
    font-size: var(--hs-text-xl);
  }

  .hs-problem__transition {
    font-size: var(--hs-text-lg);
  }
}

/* ── Mid-tablet: 1-column at 540px ──────────────────────────── */
@media (max-width: 540px) {
  .hs-problem__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .hs-problem__headline {
    font-size: clamp(2rem, 7vw, 2.5rem);
  }
}

/* ── Mobile: ≤425px — static redesign ───────────────────────── */
@media (max-width: 425px) {

  /* Convert 260vh scroll track to a normal section */
  .hs-problem {
    height: auto;
    padding-block: var(--hs-section-pad-y);
  }

  /* Remove sticky pin and 3D perspective */
  .hs-problem__sticky {
    position: relative;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    perspective: none;
    padding-inline: var(--hs-container-pad-x);
    gap: var(--hs-space-8);
  }

  /* Section header — centred, in normal flow */
  .hs-problem__monolith {
    position: relative;
    inset: auto;
    padding-inline: 0;
    text-align: center;
    transform: none;
    opacity: 1;
  }

  .hs-problem__headline {
    font-size: clamp(1.75rem, 7.5vw, 2.25rem);
    max-width: 22ch;
    margin-inline: auto;
    margin-bottom: var(--hs-space-4);
  }

  .hs-problem__intro {
    font-size: var(--hs-text-base);
    max-width: 36ch;
    margin-inline: auto;
  }

  /* Evidence layer — natural flow */
  .hs-problem__evidence {
    position: relative;
    inset: auto;
    padding-inline: 0;
    pointer-events: auto;
  }

  .hs-problem__grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: var(--hs-gap-sm);
  }

  /* Horizontal card: icon left, title + body right */
  .hs-problem__card {
    display: grid;
    grid-template-columns: var(--hs-space-10) 1fr;
    grid-template-areas:
      "icon title"
      "icon body";
    gap: var(--hs-space-1-5) var(--hs-space-4);
    padding: var(--hs-space-5);
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .hs-problem__card-icon {
    grid-area: icon;
    align-self: start;
    width: var(--hs-space-10);
    height: var(--hs-space-10);
    padding: var(--hs-space-2-5);
  }

  .hs-problem__card-title {
    grid-area: title;
    font-size: var(--hs-text-md);
    align-self: end;
  }

  .hs-problem__card-body {
    grid-area: body;
    font-size: var(--hs-text-sm);
    line-height: var(--hs-leading-normal);
  }

  /* Bridge — static, fully visible */
  .hs-problem__bridge {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    opacity: 1;
    text-align: center;
  }

  .hs-problem__transition {
    font-size: var(--hs-text-base);
    max-width: 34ch;
    margin-inline: auto;
  }
}

/* ── Reduced motion: instant reveals, no transforms ─────────── */
@media (prefers-reduced-motion: reduce) {
  .hs-problem__monolith,
  .hs-problem__card,
  .hs-problem__bridge {
    transition: none;
    will-change: auto;
  }
}


/* ================================================================
   HEIGHT RESPONSIVE
   Prevents the card grid from overlapping the bridge text on short
   viewports. Primary fix: padding-bottom on .hs-problem__evidence
   shifts the flex-centering point upward without touching the GSAP
   animation. Cards are compressed secondarily to reduce grid height.
   Scoped to min-width: 426px — the ≤425px mobile layout is static
   and already handles its own sizing independently.
   1920 × 1080 baseline unaffected (1080px > 820px).
================================================================ */

/* ── Threshold 1: 820px — Nudge up, mild card compression ─────── */
@media (max-height: 820px) and (min-width: 426px) {

  /* padding-bottom shifts the flex centering point upward,
     creating breathing room above the bridge text             */
  .hs-problem__evidence {
    padding-bottom: var(--hs-space-16);
  }

  .hs-problem__card {
    padding: var(--hs-space-6);
    gap: var(--hs-space-3);
  }

  .hs-problem__card-icon {
    width: var(--hs-space-10);
    height: var(--hs-space-10);
  }

  .hs-problem__card-title {
    font-size: var(--hs-text-xl);
  }
}

/* ── Threshold 2: 700px — Stronger shift + deeper compression ─── */
@media (max-height: 700px) and (min-width: 426px) {

  .hs-problem__evidence {
    padding-bottom: var(--hs-space-24);
  }

  /* Pull bridge up a notch so it doesn't eat into card space    */
  .hs-problem__bridge {
    bottom: var(--hs-space-8);
  }

  .hs-problem__card {
    padding: var(--hs-space-5);
    gap: var(--hs-space-2);
  }

  .hs-problem__card-icon {
    width: var(--hs-space-8);
    height: var(--hs-space-8);
    padding: var(--hs-space-2);
  }

  .hs-problem__card-title {
    font-size: var(--hs-text-lg);
  }

  .hs-problem__card-body {
    font-size: var(--hs-text-sm);
  }
}