/* =====================================================================
   ETHICS DEFENSE — DESKTOP (v235)
   The approved compositions displayed directly, as CONTENT PANELS, using
   the same model proven on Home / About / How / Criminal Defense (v234):
   no sticky pin, no 100vh floor, no overflow clip — the asset's own height
   sets the section height. Live text stays in the DOM (clipped) for
   SEO / screen readers.

   Desktop flow (5 sections): Hero -> Reputation -> Kelly Flood -> Stakes
   Bridge -> CTA. The six legacy desktop content sections (reframe, method,
   process, pivot, issues, advisory) collapse on desktop, their text kept
   (clipped) for SEO. Tablet (641-1024) and mobile (<=640) are UNTOUCHED.

   Transition #1 (Hero -> Reputation) and #2 (Reputation -> Kelly Flood):
   the existing reveal-card fade-up motion. Transition #3 (Kelly Flood ->
   Stakes Bridge): custom stronger fade-up (opacity 0->1, translateY
   24px->0, 800ms ease-out, one-time, no replay/scale/zoom/blur/move).
   ===================================================================== */

.page-ethics .eth-asset__img { display: none; }
.page-ethics .eth-asset-hotspot { display: none; }

/* Guard: the new desktop asset imgs sit inside .ethics-mobile-panel /
   .bio-section, whose mobile rules (.ethics-mobile-panel img{display:block})
   out-specify the hide above. Force them hidden below desktop so mobile /
   tablet keep showing ONLY their existing baked panels — unchanged. */
@media (max-width: 640px) {
  .page-ethics .eth-asset__img { display: none !important; }
}

/* #reputation and #conclusion are mobile-panels (not reveal-cards). They
   are given the reveal-card class purely as a hook so the page-hero.js
   IntersectionObserver fires its one-time .is-visible (Transitions #1/#3).
   Neutralize the reveal-card 100vh floor + sticky at ALL breakpoints so
   mobile/tablet rendering stays byte-identical (mobile panel: auto height,
   normal flow; tablet: display:none). */
.page-ethics #reputation.reveal-card,
.page-ethics #conclusion.reveal-card { min-height: 0; position: relative; }

@media (min-width: 641px) {
  /* the approved asset is the revealed content */
  .page-ethics .eth-asset__img { display: block; width: 100%; height: auto; margin: 0 auto; }

  /* clip every other child of an asset host: collapses the live layout and
     legacy photos while keeping live text in the DOM for SEO / a11y */
  .page-ethics .eth-asset-host > :not(.eth-asset__img):not(.eth-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;
  }

  /* CONTENT PANELS, not viewport-height slides: the asset's height sets the
     section height; nothing pins over it; nothing is cropped. The fade-up
     reveals + box-shadow seams are unaffected (content/shadow properties). */
  .page-ethics .eth-asset-host {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block;
  }

  /* remove the dark top-fade veil (::before) AND legibility scrim (::after)
     so neither darkens the asset. The box-shadow seam survives. */
  .page-ethics .eth-asset-host::before,
  .page-ethics .eth-asset-host::after { display: none !important; }

  /* the two baked panels are display:none by default (tablet/desktop) —
     reveal them on DESKTOP only so assets 2 and 4 render in the flow. */
  .page-ethics #reputation.eth-asset-host,
  .page-ethics #conclusion.eth-asset-host { display: block; }

  /* the six legacy content sections collapse on desktop (no asset). Their
     inner is clipped (SEO kept); kill the dark seam so no stray line shows. */
  .page-ethics #reframe,
  .page-ethics #method,
  .page-ethics #process,
  .page-ethics #pivot,
  .page-ethics #issues,
  .page-ethics #advisory { box-shadow: none !important; }

  /* ----- HERO (asset 1): show directly; neutralize parallax scale; drop
     the 100vh sticky frame to the asset's natural height. ----- */
  .page-ethics #hero,
  .page-ethics #hero .page-hero__sticky {
    min-height: 0; height: auto; padding: 0; position: static;
  }
  .page-ethics #hero .eth-asset__img { opacity: 1 !important; transform: none !important; }

  /* ----- TRANSITION #3 (Kelly Flood -> Stakes Bridge, asset 4 in
     #conclusion): stronger one-time fade-up. Asset carries NO data-reveal;
     .is-visible is added once by the observer then unobserved (no replay).
     Only translateY + opacity — no scale, zoom, blur, or image movement. */
  .page-ethics #conclusion .eth-asset__img {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
    will-change: opacity, transform;
  }
  .page-ethics #conclusion.is-visible .eth-asset__img {
    opacity: 1;
    transform: none;
  }

  /* transparent hotspots over the CTA (asset 5). Coords inline per <a>. */
  .page-ethics .eth-asset-hotspot { display: block; position: absolute; z-index: 3; }
}