/* =====================================================================
   KOPLOW DEFENSE — HOW page styles
   Layered on top of style.css, about.css, pages.css.
   ===================================================================== */


/* ---------------------------------------------------------------------
   WHERE CASES TURN  —  LIGHT paper, 2x2 grid of pillars.
   Italic eyebrow header. Each pillar: gold label, lighter setup, bold close.
   --------------------------------------------------------------------- */
.how-turns {
  background: var(--color-paper);
  color: var(--color-near-black);
  padding: var(--space-12) var(--space-6) var(--space-16);
  display: flex;
  align-items: flex-start;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0px,
      transparent 14px,
      rgba(0, 0, 0, 0.008) 14px,
      rgba(0, 0, 0, 0.008) 15px);
}
.how-turns__inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.how-turns__eyebrow {
  text-align: center;
  font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: var(--color-near-black);
  margin-bottom: var(--space-12);
  letter-spacing: 0.02em;
  opacity: 0.8;
}

.how-turns__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12) var(--space-16);
  max-width: 980px;
  margin: 0 auto;
}

.how-pillar__label {
  color: var(--color-gold);
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-3);
}
.how-pillar__setup {
  color: var(--color-near-black);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  margin-bottom: var(--space-3);
  opacity: 0.85;
}
.how-pillar__conclude {
  color: var(--color-near-black);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.4;
}


/* ---------------------------------------------------------------------
   COAL TO DIAMOND  —  Dark + image. Text-left, image-right composition.
   The diamond emerges from coal under pressure: same staging principle
   as the About method section (sharp point on right) but the metaphor
   is transformation, not impact.
   --------------------------------------------------------------------- */
.how-diamond {
  background: var(--color-black);
  color: var(--color-white);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.how-diamond__image {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.how-diamond__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  /* Full opacity so the diamond reads as the visual payoff. */
  opacity: 1;
  filter: brightness(1.15) contrast(1.08);
}
.how-diamond__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to right,
    rgba(0,0,0,0.94) 0%,
    rgba(0,0,0,0.78) 35%,
    rgba(0,0,0,0.15) 70%,
    rgba(0,0,0,0) 100%);
}
.how-diamond__content {
  position: relative;
  z-index: 3;
  padding: var(--space-12) var(--space-6);
  padding-left: 8%;
  max-width: 720px;
  width: 100%;
}
.how-diamond__title {
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--color-white);
}
.how-diamond__title .line { display: block; }
.how-diamond__gold {
  color: var(--color-gold);
}
.how-diamond__gold-line {
  color: var(--color-gold);
}


/* ---------------------------------------------------------------------
   WHEN IT MATTERS  —  Dark, three "When X is Y" lines with gold halves.
   Different from the homepage's WIM (which has 5 lines, no gold).
   --------------------------------------------------------------------- */
.how-when {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-16) var(--space-6);
  display: flex;
  align-items: center;
}
.how-when__inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.how-when__title {
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: var(--tracking-wider);
  color: var(--color-white);
  margin-bottom: var(--space-10);
}
.how-when__ellipsis {
  letter-spacing: 0;
  opacity: 0.7;
}
.how-when__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.how-when__list li {
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  color: var(--color-white);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.how-when__gold {
  color: var(--color-gold);
}


/* ---------------------------------------------------------------------
   WHAT HAPPENS NEXT  —  LIGHT paper, the thesis moment.
   Title + rule + two-line statement. "when" and "how" in gold.
   The page's title concept paid off — this is what HOW means.
   --------------------------------------------------------------------- */
.how-next {
  background: var(--color-paper);
  color: var(--color-near-black);
  padding: var(--space-16) var(--space-6);
  display: flex;
  align-items: center;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0px,
      transparent 14px,
      rgba(0, 0, 0, 0.008) 14px,
      rgba(0, 0, 0, 0.008) 15px);
}
.how-next__inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.how-next__title {
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: var(--tracking-wider);
  color: var(--color-near-black);
  margin-bottom: var(--space-4);
}
.how-next__rule {
  display: block;
  width: clamp(180px, 30vw, 380px);
  height: 1px;
  background: rgba(10, 10, 10, 0.2);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-10);
  margin-top: 0;
}
.how-next__line {
  font-size: clamp(1.2rem, 2.2vw, 1.85rem);
  color: var(--color-near-black);
  line-height: 1.5;
  margin-bottom: var(--space-4);
  letter-spacing: 0.01em;
}
.how-next__gold {
  color: var(--color-gold);
  font-weight: 700;
}


/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .how-turns__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    max-width: 540px;
  }

  .how-diamond__content {
    padding-left: 5%;
    max-width: 80%;
  }
  .how-diamond__overlay {
    background: linear-gradient(to right,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.7) 60%,
      rgba(0,0,0,0.3) 100%);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .how-turns,
  .how-when,
  .how-next {
    padding: var(--space-10) var(--space-3);
  }

  .how-turns__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* ================================================================
     HOW DIAMOND — Mobile (v99)
     Image is a finalized art-directed portrait composition with
     typography and chevron baked in. Live HTML title stays in the
     DOM for SEO/accessibility but is visually hidden. No overlay,
     no filter, no object-fit:cover scaling — image displays at its
     natural portrait aspect ratio (1290:2100 ≈ 0.614).
     ================================================================ */
  .how-diamond {
    /* Switch from flex-center to a block so the image governs the
       section's height naturally. */
    display: block;
    position: relative;
    padding: 0;
    background: var(--color-black);
  }
  /* Image takes its natural place in flow, fills width, height
     follows aspect. No absolute positioning, no cover-scaling. */
  .how-diamond__image {
    position: relative;
    inset: auto;
  }
  .how-diamond__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    /* Override the desktop brightness/contrast filter — the
       finalized mobile asset is graded as intended; any filter
       would alter the art direction. */
    filter: none;
    display: block;
  }
  /* No gradient overlay — composition is baked into image. */
  .how-diamond__overlay {
    display: none;
  }
  /* Live title: visually hidden but accessible to screen readers
     and SEO. The baked-in image typography is what users see. */
  .how-diamond__content {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    max-width: none;
  }

  .how-when__list li {
    font-size: 1.05rem;
  }
  .how-next__line {
    font-size: 1.15rem;
  }
}


/* =====================================================================
   MOBILE HOW FLOW (v205) — five-part baked narrative.
   On mobile the How page reads as one continuous argument built from
   art-directed baked compositions:
       #hero (1) -> #bridge (2) -> #diamond (3) -> #pressure-point (4) -> CTA
   The three live middle sections (turns / when / next) are removed from
   the mobile flow only; the desktop/tablet flow is untouched. Everything
   here is scoped to .page-how because how.css is shared across pages.
   ===================================================================== */

/* New mobile-only baked panels are hidden on desktop/tablet so the
   desktop flow is unchanged. */
.page-how .how-mobile-panel { display: none; }

@media (max-width: 640px) {
  /* Remove the three live middle sections from the mobile flow. */
  .page-how #turns,
  .page-how #when,
  .page-how #next { display: none !important; }

  /* Show the mobile-only baked panels full-width at their natural aspect
     ratio (no cover-scaling) so the baked typography stays crisp. */
  .page-how .how-mobile-panel {
    display: block;
    line-height: 0;
    background: var(--color-paper);
  }
  .page-how .how-mobile-panel img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* The pressure-point panel is fully tappable -> Results. */
  .page-how .how-mobile-link {
    display: block;
    line-height: 0;
  }
}


/* =====================================================================
   MOBILE HOW CTA (v206) — parity with the home v204 closing panel
   (reference 5.jpg): a full-viewport, vertically-centered composition —
   spur / "WHEN IT HAS TO BE SHARP" / "Start Your Defense" / a two-link
   CRIMINAL DEFENSE | ETHICS DEFENSE practice nav / hairline rule / a
   quieter wordmark + contact close. MOBILE ONLY: the How desktop/tablet
   footer (Book Consult, four-link About · CD · Ethics · Insights nav,
   cta -> brand -> nav order) is untouched. Scoped to .page-how.

   The helpers below are hidden on desktop and revealed only on mobile,
   so adding them to the markup leaves the desktop footer unchanged. */
.page-how .btn-label-mobile { display: none; }
.page-how .cta-footer__nav-pipe { display: none; }
.page-how .cta-footer__rule { display: none; }

@media (max-width: 640px) {
  /* Full-viewport closing panel — re-assert the reveal-card 100vh that the
     site-wide v57 mobile rule disables with !important, for this footer only. */
  .page-how #footer.cta-footer {
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding: var(--space-8) var(--space-4);
  }
  .page-how #footer.reveal-card--dark::before { display: none; }

  /* Reorder the flex children to: CTA -> practice nav -> rule -> brand. */
  .page-how #footer .cta-footer__cta   { order: 1; gap: var(--space-8); margin-bottom: var(--space-12); }
  .page-how #footer .cta-footer__nav   { order: 2; }
  .page-how #footer .cta-footer__rule  { order: 3; }
  .page-how #footer .cta-footer__brand { order: 4; margin-bottom: 0; }

  .page-how .cta-footer__mark { width: 58px; margin-bottom: var(--space-1); }

  /* Headline — dominant; tighter tracking lets it grow big on one line. */
  .page-how .cta-footer__thesis {
    font-size: 5.8vw;
    line-height: 1.05;
    letter-spacing: var(--tracking-display);
  }
  .page-how .cta-footer__thesis .line { white-space: nowrap; }

  /* Button — a major visual element; mobile label reads "Start Your Defense". */
  .page-how .cta-footer__button {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1.2rem 2.6rem;
    letter-spacing: 0.06em;
    border-color: rgba(245, 243, 238, 0.7);
  }
  .page-how .cta-footer__button svg { width: 18px; height: 18px; }
  .page-how .btn-label-default { display: none; }
  .page-how .btn-label-mobile { display: inline; }

  /* Practice nav: collapse the four-link footer nav to the two practice
     areas divided by a real pipe. About, Insights and the dot separators
     are hidden; the pipe (between the two areas) is shown. */
  .page-how .cta-footer__nav { margin-bottom: var(--space-6); flex-wrap: nowrap; gap: 1rem; font-size: 0.78rem; }
  .page-how .cta-footer__nav a { white-space: nowrap; }
  .page-how .cta-footer__nav-about,
  .page-how .cta-footer__nav-insights,
  .page-how .cta-footer__nav .cta-footer__sep { display: none; }
  .page-how .cta-footer__nav-pipe { display: inline; color: rgba(235, 235, 235, 0.4); font-weight: 300; }

  /* Hairline rule, then a quieter wordmark + contact (secondary close). */
  .page-how .cta-footer__rule {
    display: block;
    width: 100%;
    max-width: 20rem;
    border: 0;
    border-top: 1px solid rgba(235, 235, 235, 0.18);
    margin: 0 auto var(--space-7);
  }
  .page-how .cta-footer__wordmark { font-size: 1.1rem; gap: 0.5rem; margin-bottom: var(--space-3); }
  .page-how .cta-footer__wordmark img { width: 30px; }
  .page-how .cta-footer__phone { margin-bottom: 0.45rem; }
  .page-how .cta-footer__address-sep { display: none; }
  .page-how .cta-footer__address-l1,
  .page-how .cta-footer__address-l2 { display: block; }
}

/* =====================================================================
   HOW — DESKTOP (v231): the approved compositions are the desktop layer.
   Restraint by default; exactly TWO emphasized transitions:
     #1  framework (#turns) -> meaning (#diamond)  = reveal-card slide-over
     #2  the proof payoff (#next)                  = stronger one-time reveal
   Live text stays in the DOM (clipped) for SEO / a11y. Tablet (641-1024)
   and mobile (<=640) are untouched (asset layer is desktop-only).
   ===================================================================== */
.page-how .how-asset__img { display: none; }
.page-how .how-asset-hotspot { display: none; }

@media (min-width: 1025px) {
  /* Restore sticky for the single Transition #1 pair. Global
     body{overflow-x:hidden} neutralizes sticky; clip restores it without
     creating a scroll container. Desktop HOW only. */
  body.page-how { overflow-x: clip; }

  /* approved asset = visible layer; clip the live layout (keep text for SEO) */
  .page-how .how-asset__img { display: block; width: 100%; height: auto; margin: 0 auto; }
  .page-how .how-asset-host > :not(.how-asset__img):not(.how-asset-hotspot) {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
    white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important;
  }
  /* drop any veil/scrim over the asset; box-shadow seams are preserved */
  .page-how .how-asset-host::before, .page-how .how-asset-host::after { display: none !important; }
  .page-how .how-asset-hotspot { display: block; position: absolute; z-index: 3; }

  /* HERO — show the asset directly, static (no pin, no parallax scale) */
  .page-how #hero, .page-how #hero .page-hero__sticky {
    min-height: 0; height: auto; padding: 0; position: static;
  }
  .page-how #hero .how-asset__img { opacity: 1 !important; transform: none !important; }

  /* #when is not part of the approved 5-asset desktop flow */
  .page-how #when { display: none; }

  /* ---- TRANSITION #1 : #turns (framework) pins, #diamond (meaning) covers ----
     scoped to the pair so the pin releases right after the cover. */
  .page-how .how-reveal-pair { position: relative; }
  .page-how #turns {
    position: sticky; top: 0; min-height: 100vh; z-index: 1;
    background: #ededed;                 /* asset 2 paper edge */
    display: flex; align-items: flex-start; justify-content: center; padding: 0;
  }
  .page-how #diamond {
    position: relative; z-index: 2; min-height: 100vh;
    background: #000;                    /* asset 3 black edge */
    display: flex; align-items: center; justify-content: center; padding: 0;
  }

  /* everything after the pair scrolls normally; relative (not static) so the
     absolute CTA / proof hotspots anchor to their own section */
  .page-how #next, .page-how #footer { position: relative; min-height: 0; padding: 0; }

  /* ---- TRANSITION #2 : the proof payoff (#next) — stronger one-time reveal
     (opacity 0->1, translateY 22px, ~820ms ease-out). No replay/scale/blur. */
  .page-how #next .how-asset__img { opacity: 0; transform: translateY(22px); }
  .page-how #next.reveal-card.is-visible .how-asset__img {
    opacity: 1; transform: none;
    transition: opacity 820ms ease-out, transform 820ms ease-out;
  }
}