/* =====================================================================
   FIREARMS & WEAPONS (practice/) — DESKTOP (v237)
   Destination of the Criminal Defense "Firearms and Weapons" hotspot.
   Same model as Murder & Manslaughter (v236): the page ships an "under
   construction" placeholder; DESKTOP (>=1025) becomes the approved 3-asset
   flow, tablet (641-1024) and mobile (<=640) keep the placeholder untouched.

   Assets are CONTENT PANELS (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 (3 sections): Hero -> The Assumption -> CTA.
   Transition #1 (Hero->Assumption): existing reveal-card fade-up.
   Transition #2 (Assumption->CTA): restrained one-time fade-up (opacity
   0->1, translateY 24px->0, 800ms ease-out, no replay/scale/zoom/blur/
   sticky/image-move).
   ===================================================================== */

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

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

  /* placeholder + minimal footer: kept in the DOM (clipped) for SEO, 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;
  }

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

  /* clip the per-section live text (kept for SEO / a11y) */
  .page-practice .gw-asset-host > :not(.gw-asset__img):not(.gw-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: the asset's height sets the section height; nothing
     pins over it; nothing is cropped. */
  .page-practice .gw-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 .gw-asset-host::before,
  .page-practice .gw-asset-host::after { display: none !important; }

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

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

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