/* =====================================================================
   ARIZONA AGGRAVATED ASSAULT (practice/) — v286
   Full baked-asset rebuild (desktop + mobile), replacing the v240
   3-asset desktop-only flow. Mirrors the Drug Cases (v281) architecture
   exactly: shared .aa-asset-host sections each carrying a desktop image
   (.aa-asset__img, shown >=1025) and a mobile image (.aa-asset__img--m,
   shown <=1024), with separate desktop / mobile (--m) hotspot sets and
   clipped live text for SEO / a11y.

   Flow (5 sections): Hero -> Assumptions -> The Allegation Changes /
   The Analysis Doesn't -> Already Have A Lawyer? (Second Opinion) ->
   Don't Let The Assumption Become The Result (+ related practice links
   + footer brand/contact, all baked into the closing asset).

   Transitions: Hero shows immediately. Assumptions / Allegation /
   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).

   Assets are CONTENT PANELS (no sticky pin, no 100vh floor, no overflow
   clip — the asset's own height sets the section height).
   ===================================================================== */

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

@media (min-width: 1025px) {
  .page-practice .aa-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 .aa-asset__img { display: block; width: 100%; height: auto; margin: 0 auto; }

  /* clip the per-section live text (kept for SEO / a11y) */
  .page-practice .aa-asset-host > :not(.aa-asset__img):not(.aa-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 .aa-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 .aa-asset-host::before,
  .page-practice .aa-asset-host::after { display: none !important; }

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

  /* CLOSING CTA (asset 5): restrained one-time fade-up. No data-reveal;
     .is-visible is added once by the page-hero.js observer then unobserved
     (no replay). Only translateY + opacity. */
  .page-practice #aa-cta .aa-asset__img {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
    will-change: opacity, transform;
  }
  .page-practice #aa-cta.is-visible .aa-asset__img {
    opacity: 1;
    transform: none;
  }

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


/* =====================================================================
   MOBILE + TABLET (<=1024px) — v286
   Dedicated portrait mobile asset flow across the full sub-desktop range
   (retires the "under construction" placeholder). Desktop (>=1025px) is
   untouched. Assets are centered + capped (max-width:640px) so portrait
   art is not blown full-bleed on tablets — identical convention to the
   Drug Cases mobile flow. position:absolute hotspots (required so they
   don't collapse to 0x0). Sticky/gradient neutralized like desktop.
   ===================================================================== */
@media (max-width: 1024px) {
  .page-practice .aa-desktop { display: block; }
  .page-practice .practice-placeholder,
  .page-practice .cta-footer--minimal { display: none; }

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

  /* content panels: kill sticky/100vh/overflow + the dark top-fade
     gradient; cap + center so portrait assets stay balanced on tablet. */
  .page-practice .aa-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 .aa-asset-host::before,
  .page-practice .aa-asset-host::after { display: none !important; }

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

  /* keep per-section live text clipped (SEO / a11y) on mobile too */
  .page-practice .aa-asset-host > :not(.aa-asset__img):not(.aa-asset__img--m):not(.aa-asset-hotspot):not(.aa-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;
  }
}