/* =====================================================================
   MURDER & MANSLAUGHTER (practice/) — v287
   Full baked-asset rebuild (desktop + mobile), replacing the v236
   5-asset desktop-only flow. Mirrors the Drug Cases (v281) / Aggravated
   Assault (v286) architecture exactly: shared .mm-asset-host sections,
   each with a desktop image (.mm-asset__img, shown >=1025) and a mobile
   image (.mm-asset__img--m, shown <=1024), separate desktop / mobile
   (--m) hotspot sets, and clipped live text for SEO / a11y.

   Flow (6 sections): Hero -> Homicide Assumptions -> Every Case Has A
   Pressure Point -> What You Don't Challenge Becomes Your Result ->
   Already Have A Lawyer? (Second Opinion) -> Critical Decisions Deserve
   A Sharp Defense (+ related practice links + footer, all baked into the
   closing asset).

   Distinct mobile crops were supplied for Hero, Pressure Point, and
   Result. Assumptions, Second Opinion, and the CTA reuse their desktop
   composition on mobile (the supplied mobile art for those is identical),
   so their .mm-asset__img--m points at the same file.

   Transitions: Hero shows immediately. Assumptions / Pressure / Result /
   Second-Opinion use the generic reveal-card data-reveal fade-up
   (style.css). The closing CTA uses a restrained one-time fade-up
   (opacity 0->1, translateY 24px->0, 800ms ease-out; no replay/scale/
   zoom/blur/sticky/image-move).
   ===================================================================== */

.page-practice .mm-desktop { display: none; }
.page-practice .mm-asset__img { display: none; }
.page-practice .mm-asset-hotspot { display: none; }
.page-practice .mm-asset__img--m { display: none; }
.page-practice .mm-asset-hotspot--m { display: none; }

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

  .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;
  }

  .page-practice .mm-asset__img { display: block; width: 100%; height: auto; margin: 0 auto; }

  .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;
  }

  .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;
  }
  .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; }

  /* CLOSING CTA (asset 6): restrained one-time fade-up. */
  .page-practice #mm-cta .mm-asset__img {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
    will-change: opacity, transform;
  }
  .page-practice #mm-cta.is-visible .mm-asset__img {
    opacity: 1;
    transform: none;
  }

  .page-practice .mm-asset-hotspot { display: block; position: absolute; z-index: 3; }
}


/* =====================================================================
   MOBILE + TABLET (<=1024px) — v287
   Portrait mobile flow across the full sub-desktop range. Assets capped
   at 640px centered (same convention as Drug Cases / Aggravated Assault).
   Sections that reuse their desktop asset on mobile simply show that asset
   at the same cap. position:absolute hotspots so they don't collapse.
   ===================================================================== */
@media (max-width: 1024px) {
  .page-practice .mm-desktop { display: block; }
  .page-practice .practice-placeholder,
  .page-practice .cta-footer--minimal { display: none; }

  .page-practice .mm-asset__img { display: none; }
  .page-practice .mm-asset__img--m {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .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;
    max-width: 640px;
    margin: 0 auto;
    box-shadow: none;
  }
  .page-practice .mm-asset-host::before,
  .page-practice .mm-asset-host::after { display: none !important; }

  .page-practice .mm-asset-hotspot { display: none; }
  .page-practice .mm-asset-hotspot--m {
    display: block;
    position: absolute;
    z-index: 3;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .page-practice .mm-asset-hotspot--m:focus-visible {
    outline: 2px solid #8b6e3b;
    outline-offset: 2px;
  }

  .page-practice .mm-asset-host > :not(.mm-asset__img):not(.mm-asset__img--m):not(.mm-asset-hotspot):not(.mm-asset-hotspot--m) {
    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;
  }
}