/* ==========================================================================
   Launch Labs — Section 3: "Approach"
   Static, no JS. A setup/turn statement, then three pillars
   (Design / Messaging / Conversion) as compact boxes: number, title, an action
   line and a one-line summary. The richer explanation is revealed on hover /
   focus as a panel that floats over the box, so the default grid never reflows.

   Near-black to read as a deliberate editorial block after the white hub above;
   white type, Launch red (#D92632) for emphasis and the index numbers only.
   Fonts: Plus Jakarta Sans (statement, pillar names, numbers, action lines) +
   Hanken Grotesk (summaries + detail copy). Namespaced .approach.
   ========================================================================== */

.approach {
  --ink:       #FFFFFF;
  --ink-muted: rgba(255, 255, 255, 0.66);
  --ink-soft:  rgba(255, 255, 255, 0.52);
  --hairline:  rgba(255, 255, 255, 0.13);
  --surface:   rgba(255, 255, 255, 0.024);
  --contrast:  #D92632;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);

  /* Blue/black atmosphere to match the hero: midnight-navy base + large, soft
     radial pools (no visible seams). */
  background-color: #05070f;
  background-image:
    radial-gradient(95% 90% at 12% 8%,  rgba(20, 30, 84, 0.50), transparent 60%),
    radial-gradient(90% 95% at 90% 96%, rgba(12, 20, 58, 0.50), transparent 62%),
    radial-gradient(70% 62% at 55% 45%, rgba(26, 36, 98, 0.15), transparent 72%);
  background-repeat: no-repeat;
  color: var(--ink);
  padding: clamp(3rem, 8vh, 6rem) clamp(1.5rem, 5vw, 4rem);

  /* The statement sequence + boxes settle as one centred composition. In the
     animated experience js/approach.js pins this and choreographs the reveal;
     as a static / reduced-motion fallback it's simply a centred, readable block
     (everything visible, no motion). position + z-index give it its own
     stacking context and overflow-x guards against a wide scaled line briefly
     forcing a scrollbar (which would reveal the next section). */
  position: relative;
  z-index: 1;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(2.25rem, 6vh, 4rem);
}

/* ---- Setup / turn statement (both white — the contrast is the positioning;
        it's carried by sequence + movement, never colour) --------------------- */
/* Final composition: Magda on the left, the statement on the right. The
   sequence (js/approach.js) opens with line 1 big + centred, then shrinks it
   into this right-hand slot (so it visibly moves right) while the portrait
   reveals on the left. Static / reduced-motion fallback: this layout, fully
   visible, portrait uncovered. */
.approach__stage {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4.5rem);
}

.approach__portrait {
  position: relative;
  flex: 0 0 auto;
  width: clamp(12rem, 26vw, 20rem);
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

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

/* The reveal curtain. Default (no-JS / reduced motion) = already slid off the
   top, so the image shows. js/approach.js drops it over the image, then slides
   it up to reveal. */
.approach__portrait-cover {
  position: absolute;
  inset: 0;
  background: #010202;
  transform: translateY(-100%);
}

.approach__intro {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 38rem;
  text-align: left;
}

/* Eyebrow + line 1 travel together: in frame 1 this group is scaled up and
   centred; it then settles to become the small "setup" above the big line 2.
   Narrower than the intro so line 1 wraps to ~2 lines. */
.approach__setup {
  max-width: 24rem;
  transform-origin: 50% 50%;
}

/* Red eyebrow above the first statement. Visible by default (static / reduced
   motion); js/approach.js reveals it as line 1 settles in the animated view. */
.approach__eyebrow {
  margin: 0 0 clamp(0.85rem, 1.5vw, 1.15rem);
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--contrast);
}

.approach__lead {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* HIERARCHY: line 1 (the setup — what most designers do) is SMALL and slightly
   dimmer; line 2 (the difference — what Launch Labs does) is substantially
   LARGER, brighter and heavier, so it clearly dominates. */
.approach__lead--1 {
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  color: rgba(255, 255, 255, 0.78);
}

.approach__lead--2 {
  font-weight: 800;
  font-size: clamp(1.8rem, 3.25vw, 2.65rem);
  line-height: 1.08;
  margin-top: 0.5em;
  color: var(--ink);
}

@media (max-width: 48rem) {
  .approach__stage {
    flex-direction: column;
    text-align: center;
  }
  .approach__intro { text-align: center; }
  .approach__portrait { width: clamp(11rem, 60vw, 18rem); }
}

/* Bridge = the CENTRED TITLE that introduces the three pillars below. It sits
   between the stage and the grid (a flex child of .approach, so the section's
   column gap spaces it evenly). Reveals large then shrinks in the animated
   experience (js/approach.js, origin centre); visible at rest by default
   (static / reduced-motion). max-width gives it tidy, balanced wrapping like the
   lines above rather than one over-long line. */
.approach__bridge {
  margin: 0 auto;
  max-width: 30rem;
  text-align: center;
  text-wrap: balance;
  transform-origin: 50% 50%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---- Pillars ------------------------------------------------------------- */
.approach__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 78rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch; /* uniform, dominant boxes */
}

.approach__card {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}

.approach__card:hover,
.approach__card:focus-within {
  border-color: rgba(255, 255, 255, 0.28);
}

.approach__card:focus-visible {
  outline: 2px solid var(--contrast);
  outline-offset: 3px;
}

/* "+" affordance so the hover reveal is discoverable; becomes a rotated accent
   while open. */
.approach__hint {
  position: absolute;
  top: clamp(1.25rem, 2vw, 1.75rem);
  right: clamp(1.25rem, 2vw, 1.75rem);
  z-index: 3;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease-out), transform 0.35s var(--ease-out);
}

.approach__card:hover .approach__hint,
.approach__card:focus-within .approach__hint {
  color: var(--contrast);
  transform: rotate(45deg);
}

/* Shared header bits (used in both the face and the revealed detail). */
.approach__num {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: var(--contrast);
}

.approach__title {
  display: block;
  margin: 0.55rem 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---- Compact face (default state) ---------------------------------------- */
.approach__face {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.6vw, 2.6rem);
}

.approach__punch {
  margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.approach__sub {
  margin: 0.4rem 0 0;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: clamp(0.9rem, 1vw, 0.98rem);
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ---- Revealed detail (hover / focus) ------------------------------------- */
.approach__detail {
  position: absolute;
  inset: 0 0 auto 0;      /* pin top/left/right; height grows with content */
  min-height: 100%;       /* at least cover the box, then extend downward */
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.6vw, 2.6rem);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: #0c0b0e;    /* solid, so it hides the face beneath and floats */
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.32s var(--ease-out),
              transform 0.32s var(--ease-out),
              visibility 0.32s var(--ease-out);
}

.approach__card:hover .approach__detail,
.approach__card:focus-within .approach__detail,
.approach__card:focus-visible .approach__detail {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Lift the whole card above its neighbours while its detail floats open. */
.approach__card:hover,
.approach__card:focus-within {
  z-index: 5;
}

.approach__rich {
  margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.72em;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.56;
  color: var(--ink-muted);
}

.approach__rich p { margin: 0; }
.approach__rich p:last-child { color: var(--ink); }

/* ---- Messaging bullet list ----------------------------------------------- */
.approach__list {
  list-style: none;
  margin: 0.1em 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.42em;
}

.approach__list li {
  position: relative;
  padding-left: 1.15em;
  color: var(--ink);
}

.approach__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--contrast);
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 62rem) {
  .approach__grid {
    grid-template-columns: 1fr;
    max-width: 40rem;
    gap: clamp(1rem, 3vw, 1.5rem);
  }
}