/* =====================================================================
   MURDER & MANSLAUGHTER (practice/) — DESKTOP (v236)
   Destination of the Criminal Defense "Murder and Manslaughter" hotspot.
   The page currently ships an "under construction" placeholder. Per brief,
   DESKTOP (>=1025) becomes the approved 5-asset flow; tablet (641-1024)
   and mobile (<=640) keep the placeholder untouched.

   The approved compositions are shown directly as CONTENT PANELS (same
   model proven on Home / About / How / Criminal Defense / Ethics, v234+):
   no sticky pin, no 100vh floor, no overflow clip — the asset's own height
   sets the section height. Each section carries visually-hidden live text
   for SEO / screen readers.

   Flow (5 sections): Hero -> The Assumption -> Pressure Point -> Result
   -> CTA. Less motion than CD: Transition #1 (Hero->Assumption) and #2
   (Assumption->Pressure Point) use the existing reveal-card fade-up;
   Transition #3 (Pressure Point->Result) is a subtle one-time fade-up
   (opacity 0->1, translateY 24px->0, 800ms ease-out, no replay/scale/
   zoom/blur/sticky/image-move). The CTA inherits normal pacing.
   ===================================================================== */

/* the entire desktop asset flow is hidden by default (mobile + tablet keep
   the placeholder); revealed only at desktop. */
.page-practice .mm-desktop { display: none; }
.page-practice .mm-asset__img { display: none; }
.page-practice .mm-asset-hotspot { display: none; }

@media (min-width: 1025px) {
  .page-practice .mm-desktop { display: block; }

  /* placeholder + minimal footer: kept in the DOM (clipped) for SEO, but
     not shown on desktop — the asset flow replaces them. */
  .page-practice .practice-placeholder,
  .page-practice .cta-footer--minimal {
    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;
  }

  /* the approved asset is the revealed content */
  .page-practice .mm-asset__img { display: block; width: 100%; height: auto; margin: 0 auto; }

  /* clip the per-section live text (kept for SEO / a11y) */
  .page-practice .mm-asset-host > :not(.mm-asset__img):not(.mm-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. */
  .page-practice .mm-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 any veil/scrim pseudo-elements on hosts (box-shadow seam, a
     property, survives) */
  .page-practice .mm-asset-host::before,
  .page-practice .mm-asset-host::after { display: none !important; }

  /* HERO (asset 1): not a reveal-card — show immediately. */
  .page-practice #mm-hero .mm-asset__img { opacity: 1 !important; transform: none !important; }

  /* TRANSITION #3 (Pressure Point -> Result, asset 4): subtle one-time
     fade-up. Asset carries NO data-reveal; .is-visible is added once by the
     page-hero.js observer then unobserved (no replay). No sticky, no scale,
     no zoom, no blur, no image movement — only translateY + opacity. */
  .page-practice #mm-result .mm-asset__img {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
    will-change: opacity, transform;
  }
  .page-practice #mm-result.is-visible .mm-asset__img {
    opacity: 1;
    transform: none;
  }

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