/* ============================================================
   Ray Bridge — Responsive (desktop enhancements)
   Core styles are mobile-first; these widen the layout.
   Breakpoints: 640 / 768 / 1024 / 1280+
   ============================================================ */

/* Reserve space for the fixed mobile action bar (< 1024px) */
@media (max-width: 63.99em) {
  body { padding-bottom: 82px; }
}

/* ---------- Mobile phones ---------- */
@media (max-width: 47.99em) {
  .utility-bar { display: none; }
  .header__inner { min-height: 66px; gap: 0.4rem; }
  .brand { gap: 0.55rem; min-width: 0; }
  .brand img, .site-header.is-scrolled .brand img { height: 40px; }
  .brand__name { font-size: 1.08rem; }
  .brand__sub { font-size: 0.52rem; letter-spacing: 0.1em; }
  .header__actions button, .burger { width: 42px; height: 42px; }
  .hero { padding-block: var(--sp-7); }
  .hero__actions, .cta-banner__actions, .pd-ctas { align-items: stretch; }
  .hero__actions .btn, .cta-banner__actions .btn, .pd-ctas .btn { width: 100%; }
  .line-entry__media .plate { position: relative; inset: auto; border-radius: 0; }
  .product-card__actions { flex-direction: column; align-items: stretch; }
  .product-card__actions .btn { width: 100%; }
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.45rem; scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; }
  .spec-table { min-width: 660px; }
}

@media (max-width: 26.25em) {
  :root { --gutter: 1rem; }
  .brand__sub { display: none; }
  .brand__name { font-size: 1rem; }
  .brand img, .site-header.is-scrolled .brand img { height: 37px; }
  .header__inner { gap: 0.2rem; }
  .header__actions button, .burger { width: 40px; height: 40px; }
  .action-bar { padding-inline: 0.65rem; }
}

/* ---------- ≥ 560px: small tablets ---------- */
@media (min-width: 35em) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- ≥ 768px: tablet ---------- */
@media (min-width: 48em) {
  :root { --gutter: 1.6rem; }

  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
  .hero__title { max-width: none; }

  .lines-grid { grid-template-columns: 1fr; }
  .line-entry { grid-template-columns: 1.05fr 1fr; }
  .line-entry--flip { grid-template-columns: 1fr 1.05fr; }
  .line-entry--flip .line-entry__media { order: 2; }

  .steps { grid-template-columns: repeat(2, 1fr); }
  .proof-strip { grid-template-columns: repeat(3, 1fr); }
  .cat-hero__inner { grid-template-columns: 1.1fr 0.9fr; }
  .value-row { grid-template-columns: repeat(2, 1fr); }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .split--flip .split__media { order: 2; }

  .cta-banner { grid-template-columns: 1.25fr 0.75fr; }
  .cta-banner__actions { justify-content: flex-end; }

  .contact-layout { grid-template-columns: 0.9fr 1.1fr; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .article-layout > .prose-wrap { order: 1; }
  .article-layout > aside { order: 2; }

  .plate__grid { grid-template-columns: repeat(4, 1fr); }
  .plate__cell:nth-child(odd) { border-right: 1px solid var(--rb-line-soft); }
  .plate__cell:nth-child(2n) { border-right: 0; }
}

/* ---------- ≥ 1024px: desktop ---------- */
@media (min-width: 64em) {
  :root { --gutter: 2rem; }

  /* Nav reveals */
  .nav { display: block; }
  .header__actions { margin-left: 0; gap: 0.7rem; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
  .action-bar { display: none; }
  body.has-action-bar { padding-bottom: 0; }

  .steps { grid-template-columns: repeat(4, 1fr); }
  .proof-strip { grid-template-columns: repeat(6, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  /* Product detail top: gallery left, header right */
  .pd-top { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: var(--sp-8); }
  .pd-top .gallery { order: -1; }

  /* Page hero: text left, media right */
  .page-hero__inner--with-media {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--sp-8);
  }
  .page-hero__inner--with-media > *:not(.page-hero__media) { grid-column: 1; }
  .page-hero__media {
    grid-column: 2;
    grid-row: 1 / span 6;
  }
  .page-hero__inner--with-media h1 { max-width: 20ch; }

  /* Bottom inquiry: pitch left, form right */
  .pd-inquiry { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: var(--sp-8); }

  .footer__top { grid-template-columns: 1.35fr 0.85fr 0.85fr 1fr; }
  .footer__brand { grid-column: auto; }
}

/* Keep the compact header between tablet and full desktop widths. */
@media (min-width: 64em) and (max-width: 74.99em) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header__actions { margin-left: auto; }
}

/* The complete navigation has enough room from 1200px upward. */
@media (min-width: 75em) {
  .nav { display: block; }
  .burger { display: none; }
}

@media (min-width: 75em) and (max-width: 79.99em) {
  .header__inner { gap: var(--sp-4); }
  .nav__link { padding-inline: 0.58em; font-size: 0.82rem; }
  .header__actions { gap: 0.45rem; }
}

/* ---------- ≥ 1280px: wide desktop ---------- */
@media (min-width: 80em) {
  .lines-grid { gap: var(--sp-6); }
}

/* ---------- ≥ 1440px ---------- */
@media (min-width: 90em) {
  :root { --container: 1360px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .utility-bar, .site-footer, .action-bar,
  .pd-anchor-nav, .side-inquiry, .cta-banner, .drawer, .drawer-scrim { display: none !important; }
  body { color: #000; }
  .spec-table thead th { background: #eee; color: #000; }
}