/* ============================================================
   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; }
  .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;
  }
}

/* ===== 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;
  }
}