/* ============================================================================
   RABTORA — Water Storage & FRP Equipment landing page: responsive layer
   Base rules in style.css are written desktop-first for the multi-column
   sections, so this file steps them DOWN by max-width, matching the pattern
   already used by outdoor/ and hoardings/.
   ============================================================================ */

/* --- Carousel arrows back inside the container --------------------------- */
/* Below this the .wrap is no longer narrower than the viewport, so arrows hung
   outside it would sit off-screen. */
@media (max-width: 1320px) {
    .pop-prev { left: 0; }
    .pop-next { right: 0; }
}

/* --- Laptop / small desktop ---------------------------------------------- */
@media (max-width: 1180px) {
    .nav-links { gap: 22px; }
    .nav-links a { font-size: 13.5px; }

    .hero-title { font-size: 44px; }
    .hero-features { gap: 20px; }

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

    .band > * { padding: 40px 28px; }
    .ind-grid { gap: 22px 12px; }

    .quote .wrap { grid-template-columns: 300px 1fr; gap: 34px; }
    .quote-usps { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }

    .footer-top { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

/* --- Tablet: collapse nav to the drawer, unstack the three-panel band ----- */
@media (max-width: 980px) {
    .nav-links { display: none; }
    .menu-btn { display: inline-flex; }
    .header-actions .btn--gold { display: none; }

    .sec { padding: 54px 0; }
    .sec-head h2 { font-size: 28px; }

    .hero-media { inset: 0; }
    .hero-media::after {
        background: linear-gradient(90deg, var(--navy) 0%, rgba(8, 20, 47, .9) 46%, rgba(8, 20, 47, .68) 100%);
    }
    .hero-inner { padding-top: 52px; }
    .hero-title { font-size: 38px; max-width: none; }
    .hero-features { grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 38px; }

    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-img { width: 34%; bottom: 50%; transform: translateY(50%); }

    /* Panels stack; the industries borders would then draw across the full
       width, so they become a single top rule instead. */
    .band { grid-template-columns: 1fr; }
    .industries { border-left: 0; border-right: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .ind-grid { grid-template-columns: repeat(4, 1fr); }

    .quote .wrap { grid-template-columns: 1fr; gap: 30px; }
    .quote-usps { grid-template-columns: repeat(4, 1fr); }

    .field-row,
    .field-row--2 { grid-template-columns: 1fr 1fr; }
    .field-row--2 .field:last-child { grid-column: 1 / -1; }

    .about-grid { grid-template-columns: 1fr; gap: 34px; }
    .about-copy h2 { font-size: 26px; }

    .crosslink { grid-template-columns: 1fr; gap: 20px; }

    .footer-top { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- Large phone ---------------------------------------------------------- */
@media (max-width: 700px) {
    .wrap { padding: 0 18px; }

    /* Opening hours are the least useful item on a phone-width topbar */
    .topbar { font-size: 11.5px; }
    .topbar-item.is-hours { display: none; }
    .topbar-group .topbar-item + .topbar-item { padding-left: 14px; }
    .topbar-group { gap: 14px; }

    .site-header .wrap { min-height: 66px; }
    .logo img { height: 38px; }

    .sec { padding: 44px 0; }
    .sec-head { margin-bottom: 28px; }
    .sec-head h2 { font-size: 25px; }
    .eyebrow { font-size: 11px; }
    .eyebrow::before, .eyebrow::after { width: 22px; }

    .hero-title { font-size: 31px; }
    .hero-sub { font-size: 14.5px; }
    .hero-cta .btn { flex: 1 1 100%; }
    .hero-features { grid-template-columns: 1fr; gap: 18px; padding-bottom: 30px; }

    .cat-grid { grid-template-columns: 1fr; }
    .cat { padding: 22px 20px; }
    .cat-img { width: 30%; opacity: .9; }
    .cat-img.is-photo { width: 44%; }

    .filters { gap: 8px; }
    .filter { padding: 8px 14px; font-size: 12px; }

    .prod-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
    .prod-media { height: 88px; }
    .prod-media img { max-height: 88px; }

    .band > * { padding: 36px 18px; }
    .ind-grid { grid-template-columns: repeat(3, 1fr); }

    .quote-aside h2 { font-size: 25px; }
    .quote-card { padding: 22px 18px; }
    .quote-card--cta { padding: 26px 18px; }

    .rfq-backdrop { padding: 12px; }
    .rfq-modal { padding: 26px 18px 22px; }
    .rfq-title { font-size: 20px; }
    .rfq-sub { margin-bottom: 16px; }
    .field-row,
    .field-row--2,
    .field-row--2up { grid-template-columns: 1fr; gap: 0; }

    .about-facts > div { grid-template-columns: 1fr; gap: 6px; padding: 15px 0; }

    .faq summary { padding: 17px 14px; font-size: 14.5px; }
    .faq details p { padding: 0 14px 18px; }

    .crosslink { padding: 24px 20px; }
    .crosslink h2 { font-size: 20px; }

    .final { padding: 56px 0; }
    .final .hero-cta .btn { flex: 1 1 100%; }

    .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 38px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* The two-up action bar replaces the floating bubble so they never stack */
    .wa-float { display: none; }
    .mobile-bar { display: flex; }
    body { padding-bottom: 50px; }
}

/* --- Small phone ---------------------------------------------------------- */
@media (max-width: 460px) {
    .topbar-group:first-child .topbar-item:first-child { display: none; }

    .hero-title { font-size: 27px; }
    .cat-img { display: none; }

    .prod-grid { grid-template-columns: repeat(2, 1fr); }
    .ind-grid { grid-template-columns: repeat(2, 1fr); }
    .quote-usps { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }

    .footer-top { grid-template-columns: 1fr; }
    .mobile-bar a { font-size: 12px; gap: 7px; }
}