/* ==========================================================================
   SBHS — Responsive overrides for custom components (mobile-first).
   Tailwind utilities handle most breakpoints inline in the markup.
   Breakpoints match Tailwind: sm 640 · md 768 · lg 1024 · xl 1280
   ========================================================================== */

/* Very small phones (≤ 359px) */
@media (max-width: 359.98px) {
  .container { padding-inline: 1rem; }
  .brand .logo-tile { width: 2.75rem; height: 2.75rem; }
  .header-actions { gap: 0.35rem; }
  .header-book { padding-inline: 0.85rem !important; }
  .icon-btn { width: 2.625rem; height: 2.625rem; }
  .hero-badge--b { display: none; }
}

@media (max-width: 479.98px) {
  .brand-text { display: none; }
  .hero-badge { max-width: 14rem; padding: 0.7rem 0.9rem; }
  .hero-badge--a { left: 0.5rem; bottom: 0.75rem; }

  .hero-ring { display: none; }
  .credential-card { position: static; margin-top: 1rem; max-width: none; }
  .choices--stack-xs { grid-template-columns: 1fr; }
}

@media (max-width: 639.98px) {
  .hero-badge--b { display: none; }
}

@media (min-width: 480px) and (max-width: 639.98px) {
  .brand-sub { font-size: 0.625rem; }
}

@media (min-width: 640px) {
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item + .trust-item { border-top: 0; }
  .trust-item:nth-child(n + 3) { border-top: 1px solid var(--c-border); }
  .trust-item:nth-child(even) { border-left: 1px solid var(--c-border); }
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .span-2 { grid-column: 1 / -1; }
  .header-book-short { display: none; }
  .header-book-long { display: inline; }
  .cred-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cred-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Horizontal timeline from md up */
@media (min-width: 768px) {
  .timeline--horizontal { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
  .timeline--horizontal .timeline-step { grid-template-columns: 1fr; gap: 1rem; padding-bottom: 0; }
  .timeline--horizontal .timeline-step::before {
    left: 3.5rem; right: -1.25rem; top: 1.75rem; bottom: auto; width: auto; height: 2px;
    translate: 0 -1px;
    background: linear-gradient(90deg, var(--sbhs-gold-light), rgb(var(--sbhs-gold-light-rgb) / 0.2));
  }
}

@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .menu-toggle { display: none !important; }
  .trust-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-item:nth-child(n + 3) { border-top: 0; }
  .trust-item + .trust-item { border-left: 1px solid var(--c-border); }
  .hero-badge--a { left: -2rem; }
  .aside-sticky { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  /* Condensed nav between 1024 and 1279 */
  .nav-xl { display: none; }
  .nav-lg { display: list-item; }
}

@media (min-width: 1280px) {
  .nav-xl { display: list-item; }
  .nav-lg { display: none; }
  .nav-link { padding-inline: 0.8rem; }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
  .brand-sub { display: none; }
}

/* Short, wide screens (landscape phones): keep hero compact */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-image { aspect-ratio: 16 / 10; }
  .drawer-link { min-height: 2.75rem; }
}

@media print {
  .site-header, .drawer, .site-footer, .skip-link, .no-print { display: none !important; }
  :root body { background: #fff; color: #000; }
}