/* =====================================================================
   ETHICS DEFENSE — v292 clean rebuild.
   Ground-up replacement of the legacy Ethics page (page-hero rig +
   how-v232/about-v229 shared dependencies + ethics-v247 live layout).
   ethics-defense.html now loads only style.css, pages.css,
   header-attribution and this standalone file.

   Architecture: baked dual-breakpoint, mirroring HOW (v291) and the
   homepage (v289).
     • Desktop (>=1025): eight supplied desktop section assets stacked
       full-width (Hero, What Happens Next, Kelly Flood, Practice-Area
       Risks, Trust Account, Bar Complaints, Response, CTA+footer).
     • Mobile/Tablet (<=1024): eight supplied mobile section assets.
   Trust Account and Bar Complaints sections are whole-band links;
   the CTA carries Start Your Defense + four footer links + phone as
   transparent hotspots. Every word is mirrored as clipped semantic
   text (real <h1>) for SEO / accessibility.

   Desktop CTA note: the supplied desktop CTA is portrait (1290x1653)
   while sections 1-7 are 1920-wide landscape. It is capped at native
   1290px and centred on black so it is never upscaled.
   ===================================================================== */

.page-ethics .sr-only {
  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-ethics .eth { display: block; background: var(--color-near-black); }
.page-ethics .eth-dt { display: none; }
.page-ethics .eth-m  { display: none; }

/* ---------- MOBILE + TABLET (<=1024) ---------- */
@media (max-width: 1024px) {
  .page-ethics .eth-m { display: block; }
  .page-ethics .eth-m__sec,
  .page-ethics .eth-m__link {
    display: block;
    position: relative;
    line-height: 0;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  .page-ethics .eth-m__sec > img,
  .page-ethics .eth-m__link > img {
    display: block;
    width: 100%;
    height: auto;
  }
  .page-ethics .eth-m__hot {
    position: absolute;
    display: block;
    z-index: 3;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .page-ethics .eth-m__link:focus-visible,
  .page-ethics .eth-m__hot:focus-visible { outline: 2px solid #8b6e3b; outline-offset: 2px; }
}

/* ---------- DESKTOP (>=1025) ---------- */
@media (min-width: 1025px) {
  .page-ethics .eth-dt { display: block; }
  .page-ethics .eth-dt__sec,
  .page-ethics .eth-dt__link {
    display: block;
    position: relative;
    line-height: 0;
    width: 100%;
    margin: 0 auto;
  }
  .page-ethics .eth-dt__sec > img,
  .page-ethics .eth-dt__link > img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* CTA is a portrait asset — cap at native width, centre on black. */
  .page-ethics .eth-dt__sec--cta {
    max-width: 1290px;
    background: #000;
  }
  .page-ethics .eth-dt__hot {
    position: absolute;
    display: block;
    z-index: 3;
    border-radius: 4px;
  }
  .page-ethics .eth-dt__link:focus-visible,
  .page-ethics .eth-dt__hot:focus-visible { outline: 2px solid #8b6e3b; outline-offset: 2px; }
}