/* ────────────────────────────────────────────────────────────
   responsive.css — sitewide responsive overlay.
   Loaded AFTER style.css and AFTER each page's inline <style>,
   so it can correct grids/typography/spacing that those rules
   set for desktop. Targets the legacy classes used in style.css
   PLUS the newer classes added by recent edits.
   ──────────────────────────────────────────────────────────── */

/* ── Universal safety: prevent horizontal overflow, scale media ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg, canvas { max-width: 100%; height: auto; }
img { display: block; }
table { max-width: 100%; }

/* ── Buttons: comfortable tap targets on touch devices ── */
@media (hover: none) and (pointer: coarse) {
  .btn-red, .btn-primary, .btn-hero-primary, .btn-hero-outline,
  .btn-outline, .btn-top, .pd-cta, .mfg-link, .pr-range-link,
  button { min-height: 44px; }
}

/* ── Bigger logo on tablet/mobile ── */
@media (max-width: 991px) {
  :root { --total-h: 64px; --nav-h: 64px; }
  .navbar { min-height: 64px; }
  .navbar-logo { gap: 8px !important; }
  .navbar-logo img { height: 48px !important; }
  .navbar-logo span { height: 38px !important; }
}
@media (max-width: 480px) {
  :root { --total-h: 60px; --nav-h: 60px; }
  .navbar { min-height: 60px; }
  .navbar-logo img { height: 44px !important; }
  .navbar-logo span { height: 34px !important; }
}
@media (max-width: 360px) {
  .navbar-logo img { height: 40px !important; }
}

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  /* Newer multi-column blocks → 2-col / stacked */
  .mfg-range-grid { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: none !important; grid-auto-flow: row !important; gap: 22px; }
  .pr-range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .composite-3d-row { grid-template-columns: 1fr !important; gap: 28px; }
  .composite-3d-stage { max-width: 520px; margin: 0 auto; }
  .pd-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .pd-img { aspect-ratio: 5/3; max-width: 720px; margin: 0 auto; }
  .pd-info-blocks { grid-template-columns: 1fr !important; gap: 32px; }
  .product-3d-row { grid-template-columns: 1fr !important; gap: 28px; }
  .project-featured { grid-template-columns: 1fr !important; }
  .project-featured-img img { min-height: 260px !important; }
  .project-featured-body { padding: 28px !important; }
  /* Heading scale */
  .mfg-range-section .mfg-head h2,
  .composite-3d-info h3 { font-size: 30px !important; }
}

/* ── Phone wide (≤ 768px) ── */
@media (max-width: 768px) {
  .container { padding-left: 18px; padding-right: 18px; }
  /* Stack everything down to single column */
  .mfg-range-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .pr-range-grid { grid-template-columns: 1fr; gap: 16px; }
  .mfg-range-section { padding: 64px 0 !important; }
  .mfg-range-section .mfg-head { margin-bottom: 40px !important; }
  .mfg-range-section .mfg-head h2 { font-size: 26px !important; }
  .mfg-range-section .mfg-head p { font-size: 14.5px !important; }
  .mfg-range-section .mfg-eyebrow { font-size: 11px !important; letter-spacing: 1.6px !important; }
  .mfg-range-section .mfg-eyebrow::before,
  .mfg-range-section .mfg-eyebrow::after { width: 22px !important; }
  .mfg-range-card { padding: 22px 20px !important; min-height: auto !important; }
  .mfg-range-card .mfg-num { width: 46px !important; height: 46px !important; font-size: 15px !important; margin-bottom: 16px !important; }
  .mfg-range-card h4 { font-size: 17px !important; }
  .mfg-range-card p { font-size: 13.5px !important; }
  /* Product detail */
  .pd-hero { padding: 48px 0 36px !important; }
  .pd-body h1 { font-size: 26px !important; line-height: 1.2 !important; }
  .pd-tagline { font-size: 15.5px !important; margin-bottom: 18px !important; }
  .pd-desc { font-size: 14.5px !important; }
  .pd-tags { gap: 8px; margin-bottom: 24px; }
  .pd-tag { font-size: 11.5px !important; padding: 6px 12px !important; }
  .pd-img { aspect-ratio: 4/3 !important; padding: 14px !important; max-width: 100%; }
  .pd-features { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 36px !important; padding-top: 28px !important; }
  .pd-feature { padding: 16px 18px !important; }
  .pd-info-blocks { padding: 28px 20px !important; margin-top: 40px !important; }
  .pd-block h3 { font-size: 20px !important; }
  .pd-block ul li { font-size: 14px !important; padding-left: 22px !important; }
  .pd-block ul { column-count: 1 !important; }
  /* Composite-roller tab on home */
  .composite-3d-stage { min-height: 280px !important; }
  .composite-3d-info h3 { font-size: 24px !important; }
  .composite-3d-info .info-lead { font-size: 14px !important; line-height: 1.65 !important; }
  .composite-3d-info ul li { font-size: 13.5px !important; padding-left: 24px !important; }
  /* Project cards */
  .project-card-img { height: 200px !important; }
  .project-card-body { padding: 20px !important; }
  .project-card-body h4 { font-size: 16px !important; }
  .project-featured-img img { min-height: 220px !important; }
  .project-featured-body h2 { font-size: 22px !important; }
  /* Recent projects (news-grid) */
  .news-side { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; }
  .news-card.featured .news-img,
  .news-card.featured .news-img img { height: 240px !important; }
  /* Topbar tweaks — hide email on phones to keep on one line */
  .topbar-left { gap: 12px !important; }
  .topbar-left a[href^="mailto"] { display: none !important; }
  /* Page hero */
  .page-hero-content h1 { font-size: 26px !important; }
  /* Hero on home — already handled by style.css but tighten more */
  .hero-content h1 { font-size: 30px !important; }
  /* Sub-product detail-page hero blocks (e.g. on RS Steel Roller page) */
  .pd-info-blocks .pd-block ul li::before { top: 18px !important; }
}

/* ── Phone narrow (≤ 480px) ── */
@media (max-width: 480px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .section { padding: 44px 0; }
  .section-header { margin-bottom: 28px; }
  .section-header h2 { font-size: 22px !important; }
  .section-header p { font-size: 13.5px !important; }
  /* Buttons full-width on very narrow screens, easier to tap */
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn-hero-primary,
  .hero-actions .btn-hero-outline { width: 100%; justify-content: center; }
  /* Topbar even tighter */
  .topbar-left a { font-size: 11px !important; }
  .topbar-right .btn-top { padding: 5px 12px !important; font-size: 10.5px !important; }
  /* Heading scale */
  .mfg-range-section .mfg-head h2 { font-size: 22px !important; letter-spacing: -0.3px !important; }
  .composite-3d-info h3 { font-size: 22px !important; }
  .pd-body h1 { font-size: 22px !important; }
  .pd-tagline { font-size: 14.5px !important; }
  /* Page hero */
  .page-hero { min-height: 180px !important; }
  .page-hero-content h1 { font-size: 22px !important; }
  .page-hero-content p { font-size: 12.5px !important; }
  /* Breadcrumb wrap */
  .breadcrumb { flex-wrap: wrap; }
  /* Product gallery thumbnails on detail pages */
  .product-gallery { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .product-gallery img { height: 140px !important; }
  /* CTA banner */
  .cta-banner { padding: 40px 0 !important; }
  .cta-banner h2 { font-size: 20px !important; }
  .cta-banner p { font-size: 13px !important; }
  /* Footer logo */
  .footer-logo-text { font-size: 26px !important; }
  /* News-card featured image */
  .news-card.featured .news-img,
  .news-card.featured .news-img img { height: 200px !important; }
}

/* ── Tiny screens (≤ 360px) ── */
@media (max-width: 360px) {
  .hero-content h1 { font-size: 26px !important; }
  .pd-body h1 { font-size: 20px !important; }
  .section-header h2 { font-size: 20px !important; }
  .mfg-range-section .mfg-head h2 { font-size: 20px !important; }
}

/* ── Landscape phone — let hero shrink ── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 600px !important; }
}

/* ── Lightbox: make controls a bit smaller on narrow phones ── */
@media (max-width: 480px) {
  .lb-controls { bottom: 18px; padding: 6px; gap: 4px; }
  .lb-controls button { width: 38px; height: 38px; }
  .lb-controls .lb-zoom-pct { min-width: 48px; height: 38px; padding: 0 10px; font-size: 11.5px; }
  .lb-close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 24px; }
  .lb-hint { top: 14px; font-size: 10.5px; padding: 5px 10px; }
  .lb-stage img { padding: 14px; }
}