/* ============================================================
   BYINSURED — RESPONSIVE / MOBILE-FIRST BREAKPOINTS
   Breakpoints: 360 | 480 | 768 | 1024 | 1280
   ============================================================ */

/* ===== Tiny phones: ≤ 360px ===== */
@media (max-width: 360px) {
  .bi-h1  { font-size: 28px; }
  .bi-h2  { font-size: 24px; }
  .bi-lede { font-size: 15px; }
  /* Stack stats vertically on very narrow screens */
  .hero-stats { flex-direction: column !important; gap: 12px !important; }
  .stagger-children { flex-direction: column !important; gap: 12px !important; }
  .newsletter-form { gap: 6px; }
  .hero-cta .bi-btn { width: 100%; justify-content: center; }
}

/* ===== Base: ≤ 480px (small phones) ===== */
@media (max-width: 480px) {
  .bi-h1  { font-size: 32px; }
  .bi-h2  { font-size: 26px; }
  .bi-h3  { font-size: 20px; }
  .bi-lede { font-size: 16px; }

  .bi-container { padding: 0 16px; }

  /* Hero: stack columns, show decoder below copy */
  .hero-grid { grid-template-columns: 1fr !important; }
  /* Show decoder on mobile — stacked below headline (don't hide key value prop) */
  .hero-decoder {
    display: block !important;
    margin-top: 28px;
    position: static !important;
  }
  /* Fix floating badge positioning on mobile */
  .hero-decoder > div { position: relative; }
  .hero-decoder [style*="position:absolute"] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-top: 12px;
    display: inline-block;
  }
  .hero-stats { gap: 16px !important; flex-wrap: wrap; }
  .hero-cta { flex-direction: column; align-items: flex-start; }

  /* Topic pillars */
  .pillars-grid { grid-template-columns: 1fr !important; }

  /* Articles */
  .articles-layout { grid-template-columns: 1fr !important; }
  .aside-sidebar { display: none; }
  .hero-article-inner { grid-template-columns: 1fr !important; }
  .hero-article-img { min-height: 180px !important; }
  .small-articles-grid { grid-template-columns: 1fr !important; }

  /* Trust */
  .trust-layout  { grid-template-columns: 1fr !important; }
  .trust-pillars { grid-template-columns: 1fr !important; }

  /* Newsletter */
  .newsletter-form { flex-direction: column; }
  .newsletter-form input { width: 100%; }

  /* Footer */
  .bi-footer-grid { grid-template-columns: 1fr !important; gap: 28px; }
  .bi-footer-bottom { flex-direction: column; gap: 6px; }

  /* Nav */
  .bi-nav-links { display: none; }
  .bi-nav-actions .bi-btn:not(.bi-btn--primary) { display: none; }
  .bi-nav-toggle { display: flex; }

  /* The header row was wider than the screen on small phones — the full site
     name (which refused to shrink) plus the 32px nav gaps plus the
     "Get the newsletter" button added up past 360px, and that one row is what
     made the whole page scroll sideways. Tighten the gaps, let the site name
     ellipsis instead of pushing, and shrink the CTA. */
  .bi-nav { gap: 12px; }
  .bi-logo {
    flex-shrink: 1;
    min-width: 0;
    font-size: 16px;
    overflow: hidden;
  }
  .bi-logo > span:not(.bi-logo-mark) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bi-nav-actions { margin-left: auto; min-width: 0; }
  .bi-nav-cta { padding: 9px 13px; font-size: 13px; }

  .bi-nav-links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-line);
    padding: 16px 20px;
    gap: 8px;
    z-index: 29;
  }
  .bi-nav-links.is-open a {
    padding: 10px 0;
    font-size: 16px;
    border-bottom: none;
  }
}

/* ===== Tiny phones, continued: ≤ 360px =====
   These sit *after* the ≤480 block on purpose. Both queries match at 360px and
   the selectors have equal specificity, so source order decides the winner —
   the earlier ≤360 block cannot override anything the ≤480 block also sets. */
@media (max-width: 360px) {
  /* Last squeeze on the header row before it can overflow the screen. */
  .bi-nav { gap: 8px; }
  .bi-nav-cta { padding: 8px 11px; font-size: 12px; }
}

/* ===== Small tablets: 481–768px ===== */
/* Using 481px min to close the 1px gap with the 480px max above */
@media (min-width: 481px) and (max-width: 768px) {
  .bi-h1  { font-size: 38px; }
  .bi-h2  { font-size: 30px; }
  .bi-h3  { font-size: 22px; }

  .bi-container { padding: 0 20px; }

  /* Hero: stack but show decoder below */
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-decoder {
    display: block !important;
    margin-top: 28px;
    position: static !important;
  }
  .hero-decoder [style*="position:absolute"] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-top: 12px;
    display: inline-block;
  }

  /* Topic pillars */
  .pillars-grid { grid-template-columns: 1fr 1fr !important; }

  /* Articles */
  .articles-layout { grid-template-columns: 1fr !important; }
  .aside-sidebar { display: none; }
  .hero-article-inner { grid-template-columns: 1fr !important; }
  .small-articles-grid { grid-template-columns: 1fr 1fr !important; }

  /* Trust */
  .trust-layout  { grid-template-columns: 1fr !important; }
  .trust-pillars { grid-template-columns: 1fr 1fr !important; }

  /* Footer */
  .bi-footer-grid { grid-template-columns: 1fr 1fr !important; }

  /* Nav */
  .bi-nav-links { display: none; }
  .bi-nav-actions .bi-btn:not(.bi-btn--primary) { display: none; }
  .bi-nav-toggle { display: flex; }
  .bi-nav-links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-line);
    padding: 16px 24px;
    gap: 8px;
    z-index: 29;
  }
}

/* ===== Tablets: 769–1024px ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .bi-h1  { font-size: 44px; }
  .bi-h2  { font-size: 32px; }

  /* Hero */
  .hero-grid { gap: 32px !important; }

  /* Topic pillars */
  .pillars-grid { grid-template-columns: 1fr 1fr !important; }

  /* Articles */
  .articles-layout { grid-template-columns: 1fr !important; }
  .aside-sidebar { display: none; }
  .small-articles-grid { grid-template-columns: 1fr 1fr !important; }

  /* Trust */
  .trust-layout { gap: 32px !important; }
  .trust-pillars { grid-template-columns: 1fr 1fr !important; }

  /* Footer */
  .bi-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px; }
}

/* ===== Desktop: 1025–1280px ===== */
@media (min-width: 1025px) and (max-width: 1280px) {
  :root { --max-width: 1080px; }
}

/* ===== Wide: > 1280px ===== */
@media (min-width: 1281px) {
  :root { --max-width: 1200px; }
}

/* ===== Touch: disable hover lifts ===== */
@media (hover: none) {
  .bi-card:hover { transform: none; box-shadow: none; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger-children > *,
  .bi-card,
  .bi-btn,
  .pillar-icon {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}