/* ============================================================
   Rivercity Environmental — Responsive Adjustments
   --------------------------------------------------------------
   Most responsive logic is colocated in style.css for context.
   This file holds breakpoint-specific overrides that don't sit
   neatly inside a component scope.
   ============================================================ */

/* Larger desktops */
@media (min-width: 1600px) {
    :root { --container: 1320px; }
}

/* Desktop — footer horizontal logo (midway between base and 2×; base stays in style.css for tablet/mobile) */
@media (min-width: 1024px) {
    .brand--logo-footer .brand__logo {
        height: 60px;
        max-width: 281px;
    }
}

/* Mid-laptop — tighten nav padding so the phone number fits without wrapping */
@media (max-width: 1280px) {
    .header-phone { padding: 9px 10px; }
    .nav__link { padding: 10px 10px; font-size: 0.9rem; }
}

/* Narrow laptops — drop the phone label to keep the nav comfortable */
@media (max-width: 1180px) {
    .header-phone span { display: none; }
}

/* Tablet / small laptop — switch to hamburger */
@media (max-width: 1100px) {
    .nav { display: none; }
    .menu-toggle { display: inline-flex; }
    .header-phone { display: inline-flex; }
    .sticky-side-cta { display: none; }
    .hero { min-height: 78vh; }
    .gallery { grid-auto-rows: 180px; }
}

/* Tablet portrait */
@media (max-width: 880px) {
    .section { padding-block: clamp(56px, 8vw, 80px); }
    .hero__content { padding-block: clamp(72px, 12vw, 110px); }
    .hero h1 { max-width: none; }
    .cta-band { padding: clamp(36px, 7vw, 56px) clamp(24px, 5vw, 40px); }
}

/* Mobile (≤640) */
@media (max-width: 640px) {
    body { font-size: 16px; }
    .header-phone { display: none; }
    .header-cta .btn { display: none; }
    .mobile-cta-bar { display: grid; }
    body { padding-bottom: 72px; }
    .hero { min-height: auto; padding-bottom: 56px; }
    .hero__content { padding-block: 90px 24px; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { justify-content: center; width: 100%; }
    .hero__scroll { display: none; }
    .page-hero { padding: 90px 0 56px; }
    .breadcrumb { font-size: .72rem; }
    .service-card { aspect-ratio: 5 / 6; padding: 22px; }
    .gallery { grid-auto-rows: 150px; }
    .form__row { gap: 14px; }

    /* Header logo — tighter on phones */
    .site-header__inner { min-height: 64px; padding-block: 10px; }
    .brand--logo .brand__logo { height: 30px; max-width: 160px; }
}

/* Small mobile (≤390) */
@media (max-width: 390px) {
    .brand__text small { display: none; }
    .menu-toggle { width: 42px; height: 42px; }
    .brand--logo .brand__logo { height: 28px; max-width: 150px; }
}

/* Print */
@media print {
    .site-header,
    .site-footer,
    .mobile-cta-bar,
    .sticky-side-cta,
    .hero__media,
    .page-hero__media { display: none !important; }
    .hero, .page-hero { color: #000 !important; background: #fff !important; }
    .hero h1, .page-hero h1 { color: #000 !important; }
    body { color: #000; background: #fff; }
}