/* ==========================================================================
   Launch Labs — "Problem" (concise). A short, punchy diagnostic: a heading, a
   sub, four cards that arrive quickly one after another, then the completed
   group lifts to reveal the conclusion. One coherent, readable composition at
   rest. All namespaced .problem; modifies nothing else.

   Base styles are the readable static fallback (reduced motion / no JS).
   js/problem.js adds .is-motion for the pinned, animated version. To revert:
   delete this file, js/problem.js, the .problem markup and their <link>/<script>.
   ========================================================================== */

.problem {
  position: relative;
  background: #FFFFFF;
  color: #010202;
}

/* ---- Base / readable fallback: one centred composition ---- */
.problem__stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4.5vh, 3rem);
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.problem__head { max-width: 48rem; }

.problem__heading {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.problem__cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.problem__cards-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
  margin: 0 0 clamp(0.9rem, 2vw, 1.5rem);
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(0.72rem, 1.3vw, 0.9rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(1, 2, 2, 0.5);
}

/* Rounded red line flanking each side of the label. */
.problem__cards-label::before,
.problem__cards-label::after {
  content: "";
  width: clamp(26px, 5vw, 44px);
  height: 10px;
  border-radius: 999px;
  background: #D92632;
}

.problem__cards-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.85rem, 1.4vw, 1.25rem);
  max-width: 84rem;
}

/* ---- Card design (unchanged) ---- */
.problem__card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: min(19rem, 80vw);
  min-height: 9rem;
  padding: 28px 30px;
  /* Extremely subtle off-white so the card reads as a soft panel rather than
     a hard pure-white-on-white edge. */
  background: #FAFAFA;
  border: 1px solid rgba(1, 2, 2, 0.18);
  border-radius: 20px;
  text-align: left;
  /* Hover lift done with `top` (position: relative), not transform, so it
     never fights the GSAP reveal-stagger transform on this same element —
     identical 5px visual result. */
  position: relative;
  top: 0;
  transition: top 0.28s ease, border-color 0.28s ease;
}

@media (hover: hover) and (pointer: fine) {
  .problem__card:hover {
    top: -5px;
    border-color: rgba(1, 2, 2, 0.45);
  }
}

.problem__card-num {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700; font-size: clamp(0.7rem, 1vw, 0.82rem);
  letter-spacing: 0.14em; color: #D92632;
}
.problem__card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  letter-spacing: 0.04em; text-transform: uppercase; color: #010202;
}
.problem__card-note {
  /* A touch more air above the note, and a touch softer than the title. */
  margin-top: 0.4rem;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 500; font-size: clamp(0.82rem, 1.05vw, 1rem);
  line-height: 1.34; color: rgba(1, 2, 2, 0.58);
}

/* ---- Conclusion ---- */
.problem__fix {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: clamp(1.9rem, 4.8vw, 3.8rem);
  line-height: 1.06; letter-spacing: -0.02em;
}
.problem__red { color: #D92632; }

/* ==========================================================================
   Animated (pinned) layout — applied only when js/problem.js runs with GSAP.
   The three groups are absolutely placed; GSAP owns opacity + translateY.
   ========================================================================== */
.problem.is-motion .problem__stage {
  height: 100vh; min-height: 0; display: block; overflow: hidden; padding: 0;
}
.problem.is-motion .problem__head,
.problem.is-motion .problem__cards,
.problem.is-motion .problem__conclusion {
  position: absolute; left: 50%;
}
.problem.is-motion .problem__head { top: 18%; width: min(92vw, 52rem); }
.problem.is-motion .problem__cards { top: 47%; width: min(94vw, 84rem); max-width: min(94vw, 84rem); }
.problem.is-motion .problem__conclusion { top: 73%; width: min(92vw, 52rem); text-align: center; }

/* ==========================================================================
   Mobile — a 2x2 card grid so the whole composition still fits one screen.
   ========================================================================== */
@media (max-width: 40rem) {
  .problem__heading { font-size: clamp(1.7rem, 7.6vw, 2.4rem); }
  .problem__fix { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .problem__card { width: 42vw; min-height: 7.5rem; padding: 1rem 1.05rem; border-radius: 16px; }
  .problem__card-note { font-size: clamp(0.72rem, 3vw, 0.85rem); }
  .problem.is-motion .problem__cards { top: 47%; }
}

/* ==========================================================================
   DARK VARIANT — .problem--dark
   Experimental treatment: near-black base, enormous cropped red "dot" forms as
   background geometry, frosted-glass cards, crisp white type. Three depth
   layers: BACKGROUND red forms -> MIDDLE glass cards -> FOREGROUND type. All
   overrides are scoped to .problem--dark, so removing that one class on the
   section restores the original white version untouched. Copy, structure and
   the reveal timeline are unchanged.
   ========================================================================== */
.problem--dark {
  background: #010202;
  color: #FFFFFF;
}

/* Positioning context for the absolute background layer, so the forms anchor to
   the stage box (100vh, and pinned in motion mode) rather than the tall pinned
   section — keeps them behind the content for the whole pinned range. */
.problem--dark .problem__stage { position: relative; }

/* ---- BACKGROUND layer: huge cropped red geometry -------------------------
   Lives inside .problem__stage (which is what gets pinned), so the forms stay
   put behind the content for the whole pinned range. Clipped to the stage box
   by its own overflow, so we only ever see arcs of these vast circles.
   Flat rgba fill + blur = soft graphic geometry, deliberately NOT a
   radial-gradient neon glow. */
.problem__bg {
  display: none; /* shown only under .problem--dark */
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.problem--dark .problem__bg { display: block; }

.problem__orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* No CSS transform here — GSAP owns transform for the parallax drift. */
  will-change: transform;
}

/* 1. The more defined form: upper-left, mostly off the top-left corner. Only a
   light blur, so its edge reads as intentional geometry, not a glow. */
.problem__orb--1 {
  width: 78vmax; height: 78vmax;
  top: -34vmax; left: -22vmax;
  background: rgba(217, 38, 50, 0.42);
  filter: blur(30px);
}

/* 2. The vast, diffused form: bottom-right, the largest, softest and lowest
   contrast. Sets the atmospheric depth. */
.problem__orb--2 {
  width: 112vmax; height: 112vmax;
  bottom: -58vmax; right: -42vmax;
  background: rgba(217, 38, 50, 0.30);
  filter: blur(92px);
}

/* 3. A mid-size arc entering from the right, tying the two together. */
.problem__orb--3 {
  width: 54vmax; height: 54vmax;
  top: 26vmax; right: -26vmax;
  background: rgba(217, 38, 50, 0.24);
  filter: blur(58px);
}

/* Keep the content above the background geometry. In motion mode the .is-motion
   rules re-assert position:absolute (higher specificity); z-index still applies. */
.problem--dark .problem__head,
.problem--dark .problem__cards,
.problem--dark .problem__conclusion {
  position: relative;
  z-index: 1;
}

/* ---- FOREGROUND type: recolour for the dark base ---- */
.problem--dark .problem__heading { color: #FFFFFF; }
.problem--dark .problem__cards-label { color: rgba(255, 255, 255, 0.6); }
.problem--dark .problem__fix { color: #FFFFFF; }
/* Launch red on near-black stays strong for this large, bold text. */
.problem--dark .problem__red { color: #D92632; }

/* ---- MIDDLE layer: frosted-glass cards --------------------------------
   Translucent enough that the red geometry is subtly perceptible through and
   behind each panel: that show-through is the whole point of the glass. No
   shadows, highlights, reflections or internal gradients. */
.problem--dark .problem__card {
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.problem--dark .problem__card-title { color: #FFFFFF; }
.problem--dark .problem__card-note { color: rgba(255, 255, 255, 0.62); }
/* Numbers stay Launch red. */
.problem--dark .problem__card-num { color: #D92632; }

@media (hover: hover) and (pointer: fine) {
  .problem--dark .problem__card:hover {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Reduced motion is the readable base layout above (dark colours + static
   forms; no parallax). */

/* ==========================================================================
   EDITORIAL VARIANT — .problem--editorial
   Clean white base + ONE enormous, perfectly crisp Launch-red circle. Bold
   Swiss/poster geometry, not background decoration: no blur, glow, gradient or
   shadow. The circle is far larger than the viewport, so we only ever see a
   cropped arc; it drifts slowly behind the card band while the type stays black
   on white with generous negative space. Scoped to .problem--editorial; swap
   the section's variant class to compare with white (none) or .problem--dark.
   ========================================================================== */
.problem--editorial { background: #FFFFFF; color: #010202; }

/* Positioning context so the circle anchors to the stage box (100vh / pinned)
   rather than the tall pinned section. */
.problem--editorial .problem__stage { position: relative; }

/* Clipping frame for the circle: only arcs of it ever show. */
.problem__disc {
  display: none; /* shown only under .problem--editorial */
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.problem--editorial .problem__disc { display: block; }

/* The one circle. Sized in vw and far wider than any viewport, so its left/
   right edges are always cropped (never a floating dot). `top` places the box's
   top edge = the circle's apex, so the red reads as a huge dome sweeping up into
   the lower/middle band, leaving the heading and upper corners white. GSAP owns
   transform for the slow drift; centring is done with margin (layout), so the
   two never fight. Completely crisp: no blur/glow/gradient/shadow. */
.problem__disc-circle {
  position: absolute;
  width: 150vw;
  height: 150vw;
  left: 50%;
  margin-left: -75vw;   /* centre the box horizontally */
  top: 52vh;            /* apex sits at the card band; red fills below */
  border-radius: 50%;
  background: #D92632;
  will-change: transform;
}

/* Keep content above the circle. .is-motion re-asserts position:absolute at
   higher specificity; z-index still applies. */
.problem--editorial .problem__head,
.problem--editorial .problem__cards,
.problem--editorial .problem__conclusion {
  position: relative;
  z-index: 1;
}

/* Type stays black on white (base colours already do this); only the cards
   change — restrained glass so the red geometry subtly tints what shows through
   where the circle passes behind, while still looking clean over plain white. */
.problem--editorial .problem__card {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
@media (hover: hover) and (pointer: fine) {
  .problem--editorial .problem__card:hover {
    border-color: rgba(0, 0, 0, 0.28);
    background: rgba(255, 255, 255, 0.9);
  }
}
/* red numbering, black headings, grey notes: inherited from the base card. */

/* The conclusion is revealed over the red circle, so flip it for legibility:
   the sentence white, "all four." near-black (instead of the red used on white). */
.problem--editorial .problem__fix { color: #FFFFFF; }
.problem--editorial .problem__red { color: #010202; }

/* On short/landscape viewports lift the apex a touch so the dome doesn't crowd
   the cards; on tall screens the vw-sized circle is naturally shorter. */
@media (max-width: 40rem) {
  .problem__disc-circle { top: 56vh; }
}