/*
 * Task #1581944: Mobile UX fixes — 5 issues
 *
 * MINOR #24: Trust bar wraps to 3 rows at 375px
 * MINOR #25: Mobile sticky bottom bar covers page CTAs
 * MINOR #27: Blog article lazy-loading image placeholders
 * MINOR #28: Long text lines on desktop — readability
 * MEDIUM: /state-index + /settlement-categories-index 404s — already handled in routes
 */

/* ─────────────────────────────────────────────────────────
   MINOR #24: Mobile trust bar — hide 2 badges at 375px
   Show only 3 core badges on mobile to prevent 3-row cramming.
   Badges to hide: "Cancel anytime" (index 4), "Veteran-Owned" (index 5)
   ───────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  .trust-badges-full > span:nth-child(7),
  .trust-badges-full > span:nth-child(9) {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────
   MINOR #25: Mobile sticky bottom bar clearance
   The .hn-sticky-bottom (~60px) covers the "Find My Settlements →"
   CTA immediately above it when it slides into view (300px scroll threshold).
   Add bottom padding to the CTA container so the CTA is never hidden.
   Apply to: homepage hero CTAs + find-my-settlements page.
   ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Homepage: primary CTA in hero section needs clearance above sticky bar */
  .page-home .hp-hero__ctas {
    padding-bottom: calc(60px + 60px + 16px); /* sticky bar ~60px + Crisp 60px + buffer 16px */
  }

  /* Find-my-settlements page CTA container */
  .fms2-page {
    padding-bottom: calc(60px + 60px + 16px);
  }
}

/* ─────────────────────────────────────────────────────────
   MINOR #27: Blog lazy-loading image placeholders — skeleton animation
   Previously: blank white/gradient box at initial load.
   Now: subtle pulse animation that clearly indicates loading state,
   not a missing image. The "SR" text remains but is secondary to
   the animation.
   ───────────────────────────────────────────────────────── */
@keyframes ch-img-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.ch-card-img-placeholder,
.ch-featured-card-img-placeholder {
  animation: ch-img-skeleton-pulse 1.8s ease-in-out infinite;
  color: rgba(0, 135, 90, 0.4); /* faded "SR" text — second fiddle to animation */
}

/* ─────────────────────────────────────────────────────────
   MINOR #28: Body text max-width — readability on desktop
   Content pages at 1280px can have body text exceeding 70ch.
   Apply max-width: 70ch to paragraph text in article/blog content areas.
   NOT applied to: hero areas, full-width sections, CTAs, card excerpts.
   ───────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Blog post article body text */
  .post-content p,
  .ch-prose p {
    max-width: 70ch;
  }

  /* Digital guide article body */
  .dg-article-body p {
    max-width: 70ch;
  }

  /* Generic article body */
  .article-body p {
    max-width: 70ch;
  }
}