/*
 * density.css — mobile-density pattern library (Phase 1 pilot).
 * Plan: audit/mobile-density-redesign-plan-2026-06-11.md
 *
 * AEO-safe by construction: every rule changes visual presentation only.
 * No text is removed from the DOM; clamped copy stays rendered (line-clamp,
 * never display:none). Clamp rules are gated behind (scripting: enabled) so
 * crawlers with JS off and no-JS users always see fully expanded text —
 * CSS-first (applies at first paint, zero CLS), with density.js only wiring
 * the toggle buttons.
 *
 * Everything except the dormant table-rescue scaffold is scoped to
 * (max-width: 720px). Desktop rendering is untouched.
 */

/* ---- P2 toggle affordance (hidden everywhere by default; CSS reveals it
       only on mobile when scripting is available, so no-JS users never see
       a dead button) ---- */
.density-toggle {
  display: none;
}

/* ---- P5 hero product thumb (mobile-only visual relief; reuses the page's
       already-preloaded product render — no new assets fabricated) ---- */
.density-hero-thumb {
  display: none;
}

@media (max-width: 720px) {

  /* ---- P1 Answer Capsule hero ----
     First screen = kicker → H1 → product render strip → one answer-first
     paragraph → proof-chip row → CTA pair. The duplicate spec subline and
     the reference-price line keep their DOM position but render below the
     capsule (flex order — visual only). */
  .hero.density-hero {
    padding-top: 24px;
  }
  .hero.density-hero .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
  }
  .hero.density-hero .hero-tag        { order: 1; margin-bottom: 14px; }
  .hero.density-hero .hero-copy > h1  { order: 2; }
  .hero.density-hero .density-hero-thumb { order: 3; }
  .hero.density-hero .hero-desc       { order: 4; }
  .hero.density-hero .hero-desc + .density-toggle { order: 5; }
  .hero.density-hero .hero-points     { order: 6; }
  .hero.density-hero .hero-actions    { order: 7; }
  .hero.density-hero .product-contact-strip { order: 8; }
  .hero.density-hero .hero-sub        { order: 9; }
  .hero.density-hero .price-asof      { order: 10; }

  .hero.density-hero .hero-copy > h1 {
    max-width: none;
    font-size: clamp(30px, 8.6vw, 38px);
    line-height: 1.1;
    margin-bottom: 14px;
  }
  .hero.density-hero .hero-desc {
    font-size: 15.5px;
    line-height: 1.62;
  }

  /* Demoted hero subline: still on the page, calm and small, below the CTAs. */
  .hero.density-hero .hero-sub {
    margin: 20px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #8d8d8d;
  }
  .hero.density-hero .price-asof {
    margin-top: 10px !important;       /* beats the inline margin:.5rem 0 0 */
    font-size: 0.8rem !important;      /* beats the inline font-size:.9rem */
    color: #b9b9b9 !important;
  }

  /* Proof chips: responsive-fixes.css (2026-05-26) deliberately forces
     wrapping chips on mobile PDPs (no horizontal scrollers) — respect that;
     just keep the block tight. */
  .hero.density-hero .hero-points {
    margin: 16px 0 0;
    gap: 6px;
  }

  /* CTA pair: stacked, thumb-sized, primary first. */
  .hero.density-hero .hero-actions {
    margin-top: 18px;
    gap: 10px;
  }
  .hero.density-hero .hero-actions .btn-primary,
  .hero.density-hero .hero-actions .btn-secondary {
    flex: 1 1 100%;
    min-height: 50px;
  }
  .hero.density-hero .product-contact-strip {
    margin-top: 12px;
  }

  /* P5: compact product render strip on screen 1. Fixed height reserves
     space at first paint — no layout shift. */
  .hero.density-hero .density-hero-thumb {
    display: block;
    height: 92px;
    margin: 0 0 16px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
  }
  .hero.density-hero .density-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
  }
  /* Per-asset crop tune: keep the compound name, not the label header, in frame. */
  .hero.density-hero .density-hero-thumb--low img {
    object-position: center 66%;
  }
}

/* ---- P2 read-more clamps ----
   Only when scripting is enabled (so the toggle injected below is live).
   Browsers without `scripting` support, and no-JS users, render expanded. */
@media (max-width: 720px) and (scripting: enabled) {
  .d-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .d-clamp--2 { -webkit-line-clamp: 2; }
  .d-clamp--3 { -webkit-line-clamp: 3; }
  .d-clamp--5 { -webkit-line-clamp: 5; }
  .d-clamp.is-open {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .density-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--pink, #db266c);
    font-family: var(--mono, 'DM Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .density-toggle::after {
    content: '↓';
    font-size: 10px;
    transition: transform 0.2s ease;
  }
  .density-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }
}

/* ---- P4 table rescue (dormant scaffold on the pilot PDPs — they have no
   <table>; opt-in via .d-table-rescue on an existing .table-wrap) ---- */
.table-wrap.d-table-rescue {
  position: relative;
}
.table-wrap.d-table-rescue::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(8, 8, 8, 0.65));
}
@media (max-width: 720px) {
  .table-wrap.d-table-rescue th:first-child,
  .table-wrap.d-table-rescue td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #080808;
  }
}

@media (prefers-reduced-motion: reduce) {
  .density-toggle::after {
    transition: none;
  }
}