/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SETTLEMENT QA — Task #1031231
   Mobile QA audit fixes: settlement listing, detail, and categories pages.
   Tested at 375px (iPhone SE), 390px (iPhone 14), 428px (iPhone 14 Plus).
   DO NOT add to design-system.css — ext module pattern per project conventions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Global: images must not overflow their containers ─────────────────
   design-system.css sets display:block on img but omits max-width:100%.
   This caused images in settlement content sections to overflow on narrow
   screens. Fix globally — browsers clip to container width. */
img,
picture img {
  max-width: 100%;
  height: auto;
}

/* ── 2. Settlement listing: sort buttons are visible in toolbar on mobile ──
   The .dir-sort-group (4 sort buttons + "Sort:" label) appears in the main
   filter toolbar. On 375px this causes the toolbar to wrap to 3–4 rows,
   consuming ~130px of screen. Sort is already available in the mobile drawer
   (see #dir-drawer Sort By section). Hide from toolbar, keep in drawer. */
@media (max-width: 768px) {
  .dir-sort-group {
    display: none !important;
  }
}

/* ── 3. Sticky urgency bar: `top:0` causes bar to slide under fixed header ─
   The #stickyUrgencyBar has inline style="top:0". When user scrolls, the
   sticky bar tries to stick at the very top of the viewport (top:0) but the
   fixed nav header occupies that space. The bar goes behind the header and
   becomes invisible — a conversion-killing UX bug on mobile.
   !important overrides inline styles per CSS cascade spec. */

/* Desktop (≥901px): header = 64px */
#stickyUrgencyBar {
  top: 64px !important;
}
/* Desktop with announce bar: header + announce bar = ~100px */
html.has-announce-bar #stickyUrgencyBar {
  top: 100px !important;
}

/* Tablet (≤900px): header = 56px */
@media (max-width: 900px) {
  #stickyUrgencyBar {
    top: 56px !important;
  }
  html.has-announce-bar #stickyUrgencyBar {
    top: 92px !important;
  }
}

/* Mobile (≤600px): header = 48px */
@media (max-width: 600px) {
  #stickyUrgencyBar {
    top: 48px !important;
  }
  html.has-announce-bar #stickyUrgencyBar {
    top: 80px !important;
  }
}

/* ── 4. Filter bar sticky position: doesn't adjust for mobile header ───────
   .dir-filter-bar uses top:calc(var(--header-height,64px) + 50px).
   --header-height is never set via JS, so always falls back to 64px.
   At mobile the header is 48–56px, so the filter bar sticks at the wrong
   position (114px instead of 98–106px), leaving a visible gap. */
@media (max-width: 900px) {
  .dir-filter-bar {
    top: 106px !important; /* 56px header + 50px cat-nav */
  }
  html.has-announce-bar .dir-filter-bar {
    top: 142px !important; /* 92px header+announce + 50px cat-nav */
  }
}
@media (max-width: 600px) {
  .dir-filter-bar {
    top: 98px !important; /* 48px header + 50px cat-nav */
  }
  html.has-announce-bar .dir-filter-bar {
    top: 130px !important; /* 80px header+announce + 50px cat-nav */
  }
}

/* ── 5. Settlement detail: content-with-sidebar container basics ───────────
   These classes have no CSS definition in any stylesheet. Adding safe basics:
   max-width, horizontal padding with clamp for responsive margins. */
.content-with-sidebar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(0.75rem, 4vw, 1.5rem);
}

.detail-body {
  padding-bottom: 2rem;
}

/* ── 6. Settlement detail: images in content sections ──────────────────────
   Scraped settlement content may include <img> tags without width constraints.
   Ensure they don't overflow the content column on 375px. */
.detail-content img,
.detail-content picture img,
.detail-content figure img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px;
  display: block;
}

/* ── 7. Filter toolbar: tighter padding on 375px ───────────────────────────
   At 375px the toolbar padding: 0.65rem 1.5rem eats too much horizontal space.
   Reduce to 0.5rem 0.75rem on smallest phones. */
@media (max-width: 390px) {
  .dir-filter-toolbar {
    padding: 0.5rem 0.75rem !important;
    gap: 0.4rem !important;
  }
  /* Compact No Proof Quick filter button */
  .dir-noproof-quick {
    font-size: 0.76rem !important;
    padding: 0.3rem 0.6rem !important;
  }
  /* Result count: shorter label to save space */
  .dir-result-count {
    font-size: 0.8rem !important;
  }
}

/* ── 8. Settlement listing: hero CTAs stack on smallest screens ────────────
   .dir-hero-actions has flex-wrap:wrap but buttons don't stretch.
   On 375px they should stack full-width for easier tapping. */
@media (max-width: 390px) {
  .dir-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dir-cta-primary,
  .dir-cta-secondary {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ── 9. Settlement cards: badge overflow on very narrow screens ────────────
   Badges use white-space:nowrap which can push card width on 375px.
   Let them wrap rather than overflow. */
@media (max-width: 400px) {
  .dir-card-badges,
  .scp-card-badges,
  .sl-card-badges {
    flex-wrap: wrap !important;
  }
  /* Slightly smaller badge text on 375px */
  .dir-badge-noproof,
  .dir-badge-urgent,
  .dir-badge-warning,
  .dir-badge-expired,
  .scp-badge-noproof,
  .scp-badge-urgent,
  .scp-badge-warning {
    font-size: 0.62rem !important;
    padding: 0.12rem 0.4rem !important;
  }
}

/* ── 10. Card hero banner: shorter on 375px to show more card content ──────
   110px is generous; trim to 88px on the smallest phones. */
@media (max-width: 390px) {
  .dir-card-hero {
    height: 88px !important;
  }
}

/* ── 11. Settlement categories hub: CTA strip on 375px ─────────────────────
   .sci-cta-strip has flex-wrap:wrap but buttons still go side-by-side
   at 375px. Force column + full-width on smallest screens. */
@media (max-width: 480px) {
  .sci-cta-strip {
    flex-direction: column !important;
  }
  .sci-btn-primary,
  .sci-btn-secondary {
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
}

/* ── 12. Category nav label: hide on 375px for more pill space ─────────────
   "Category:" label takes ~60px on 375px screens, reducing pill visibility.
   Hide the label — pills are self-explanatory. */
@media (max-width: 390px) {
  .dir-cat-label,
  .scp-cat-label {
    display: none !important;
  }
}

/* ── 13. Settlement status badges: prevent text cut-off ────────────────────
   Deadline badges and SSP strip values use white-space:nowrap which can
   cause them to be cut off or overflow at 375px. Allow wrapping. */
@media (max-width: 400px) {
  .card-deadline,
  .ssp-value,
  .ssp-strip {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ── 14. Share buttons: ensure wrapping on mobile ───────────────────────────
   Share button rows use flex but may not wrap on 375px. */
@media (max-width: 480px) {
  .share-btns-wrap,
  .share-icons-row,
  .share-row {
    flex-wrap: wrap !important;
  }
}

/* ── 15. Pagination: compact on 375px ──────────────────────────────────────
   Pagination buttons are 38px min-width; on 375px with many pages they
   overflow. Reduce to 34px minimum at small screens. */
@media (max-width: 400px) {
  .dir-page-btn {
    min-width: 34px !important;
    height: 36px !important;
    font-size: 0.78rem !important;
    padding: 0 0.4rem !important;
  }
}

/* ── 16. Table view: touch-friendly horizontal scroll ──────────────────────
   The table view is accessible on mobile via horizontal scroll.
   Ensure smooth scroll on iOS. */
.dir-table-wrap {
  -webkit-overflow-scrolling: touch;
}

/* ── 17. Settlement card: upvote/save button positioning on 375px ──────────
   Absolute-positioned buttons at bottom:10px left:10px / right:10px.
   At 375px card width these can overlap if both appear — no change needed
   as they're already separated (left and right). Confirmed OK. */

/* ── 18. Sticky mobile CTA bar safe area: already uses env() ───────────────
   Both #mobileStickyFileCta and #srMobileFileCta already use
   env(safe-area-inset-bottom). Confirmed OK — no change needed. */

/* ── 19. Hero search + filter: search bar full-width on mobile ─────────────
   At ≤768px, after hiding sort buttons, the search input should expand
   to fill available space. */
@media (max-width: 768px) {
  .dir-search {
    flex: 1 !important;
    min-width: 100px !important;
    max-width: none !important;
  }
}

/* ── 20. Above-fold trust micro: wrap to 2 columns on 375px ────────────────
   The trust badges are 4 items in a flex row. At 375px they may overflow.
   Force 2x2 grid layout. */
@media (max-width: 400px) {
  .above-fold-trust-micro {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.25rem !important;
  }
  .above-fold-trust-micro span {
    font-size: 0.7rem !important;
  }
}