/* ============================================================
   Crown Packers & Movers - Mobile Responsive Layer
   ------------------------------------------------------------
   Loaded LAST, after style.css. Everything here is wrapped in a
   max-width media query, so desktop rendering is untouched.

   Tiers:  <= 991px  tablet
           <= 767px  phone  (main tier)
           <= 480px  small phone
   ============================================================ */


/* ============================================================
   1. TABLET  (<= 991px)
   ============================================================ */
@media (max-width: 991px) {

    /* Never let a stray wide child create a horizontal scrollbar. Clipped on
       `html` only: `overflow-x` on `body` turns it into a scroll container,
       which silently kills `position: sticky` on the header inside it. */
    html { overflow-x: hidden; }
    html, body { max-width: 100%; }

    /* Trim the very generous desktop section padding. */
    .sec-padd-150,
    .why-choose-us-section,
    .crown-network-section,
    .crown-trust-section,
    .service-section,
    .testimonial-section,
    .blog-section { padding-top: 70px !important; padding-bottom: 50px !important; }

    .main-footer .footer-top { padding-top: 70px !important; }

    /* Section headings run 40-46px here, which is still desktop-weight on a
       tablet column. Trim them; the hero keeps the template's own scale. */
    .content-colmun .section-title h3.title,
    .section-title.centred h3.title,
    .testimonial-main-heading {
        font-size: clamp(26px, 4.6vw, 34px) !important;
        line-height: 1.24 !important;
    }
}


/* ============================================================
   2. PHONE  (<= 767px)  - the main tier
   ============================================================ */
@media (max-width: 767px) {

    /* ---- 2.1 Base rhythm -------------------------------------------------- */

    /* 12px gutters are too tight on a 360-390px screen. */
    .container,
    .container-fluid { padding-left: 20px !important; padding-right: 20px !important; }

    .sec-padd-150,
    .why-choose-us-section,
    .crown-network-section,
    .crown-trust-section,
    .service-section,
    .testimonial-section,
    .blog-section,
    .about-section,
    .portfolio-section { padding-top: 55px !important; padding-bottom: 40px !important; }

    .main-footer .footer-top { padding-top: 55px !important; }


    /* ---- 2.2 Type scale --------------------------------------------------- */
    /* The desktop scale (42-56px) costs 4-6 lines on a phone. These clamp()
       values keep the hierarchy but fit the viewport. */

    /* Home hero */
    .banner-section .content-box h1,
    .banner-section .content-box .title,
    .content-box.centred h1.title {
        font-size: clamp(20px, 6.1vw, 25px) !important;
        line-height: 1.24 !important;
        letter-spacing: -0.3px !important;
    }

    /* Inner-page banner ("Contact Us", "Delhi", article titles) - was 56px */
    .page-banner-section h1,
    .page-banner-section .page-banner-title,
    h1.page-banner-title,
    .about-hero-banner .page-banner-title,
    .contact-hero-banner .page-banner-title {
        font-size: clamp(20px, 6.1vw, 25px) !important;
        line-height: 1.24 !important;
    }

    /* The hero eyebrow is set to a flat 20px site-wide, which reads as a second
       headline once the headline itself is down at 24px. */
    .banner-section .content-box .sub-title,
    .page-banner-section .sub-title,
    .about-hero-banner .sub-title,
    .contact-hero-banner .sub-title {
        font-size: 12px !important;
        line-height: 22px !important;
        letter-spacing: 1px !important;
    }

    /* Section headings - were 46 / 40 / 38 / 35 / 32px */
    .section-title h3.title,
    .section-title h2.title,
    .content-colmun .section-title h3.title,
    .section-title.centred h3.title,
    .section-title.centred h2.title,
    .testimonial-main-heading,
    .moving-process-heading,
    .crown-moving-process-new__heading h2,
    .info-widget h1,
    .blog-details-content h2 {
        font-size: clamp(21px, 6.2vw, 26px) !important;
        line-height: 1.28 !important;
    }

    /* city.php shipped line-height:34px under a 38px font - lines collided. */
    .section-title.centred h2.title { line-height: 1.28 !important; }

    /* Sub-headings inside cards stay readable but never dominate. */
    .section-title h4,
    .cta-section .title-box h4,
    .cta-text-right .text-area h4,
    .blog-grid-section .text-center h4,
    .blog-section .text-center h4 {
        font-size: clamp(18px, 5.4vw, 22px) !important;
        line-height: 1.3 !important;
    }

    /* Long unbroken strings (URLs, emails, phone numbers) must not push
       the layout wider than the screen. */
    h1, h2, h3, h4, h5, p, li, td, a { overflow-wrap: break-word; word-wrap: break-word; }


    /* ---- 2.3 CTA bands ---------------------------------------------------- */
    /* Both CTA strips were still flex-row at 375px: the heading was squeezed
       into ~140px while the "Call ..." button ran off the right edge. */

    .cta-001 .cta-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 22px !important;
        padding: 45px 0 !important;
    }

    .cta-001 .cta-inner .title-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .cta-001 .cta-inner .title-box i {
        margin-right: 0 !important;
        font-size: 44px !important;
    }

    .cta-001 .cta-inner h3 {
        width: 100% !important;
        font-size: 20px !important;
        line-height: 1.32 !important;
        text-align: center !important;
    }

    .cta-section .cta-inner-box { flex-direction: column !important; }

    .cta-section .cta-right-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 40px 20px !important;
        text-align: center !important;
        gap: 20px !important;
    }

    .cta-section .cta-right-content .title-box { width: 100% !important; margin: 0 !important; }
    .cta-section .cta-right-content .title-box h4 { width: 100% !important; }
    .cta-section .cta-left-image { min-height: 210px !important; }


    /* ---- 2.4 Buttons ------------------------------------------------------ */
    /* Fixed-width dark call buttons were the one true overflow on the page. */

    .cta-001 .link-button,
    .cta-section .link-button {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    .cta-001 .link-button .button-style-four,
    .cta-section .link-button .button-style-four {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 52px !important;
        padding: 14px 20px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /* Any button in the flow should stay inside the viewport. 45px of
       side padding on a 375px screen leaves very little for the label. */
    .theme-btn,
    .button-style-one,
    .button-style-two,
    .button-style-three,
    .button-style-four {
        max-width: 100% !important;
        white-space: normal !important;
        padding-left: 26px !important;
        padding-right: 26px !important;
    }


    /* ---- 2.4b Pull-quote panel ------------------------------------------- */
    /* 55px side padding + 24px italic + a 128px quote glyph left the copy
       running ~14 characters per line. */

    .text-inner { padding: 34px 24px !important; }
    .text-inner .text { font-size: 16px !important; line-height: 1.55 !important; }
    .text-inner .qoute { font-size: 70px !important; line-height: 0.6 !important; }


    /* ---- 2.5 Touch targets ------------------------------------------------ */
    /* Footer / quick-link anchors rendered 19-26px tall. 44px is the
       accessible minimum for a finger. */

    .main-footer .footer-widget .widget-content li a,
    .main-footer .links-widget li a,
    .main-footer ul li a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 4px 0 !important;
        line-height: 1.4 !important;
    }

    .main-footer .footer-bottom .bottom-inner { text-align: center !important; }

    /* "Read More" style inline links on cards were only 19px tall. */
    .link-btn a,
    .content-text .link-btn a,
    .read-more,
    .blog-reference-card .blog-content a,
    .copyright-text a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 44px !important;
    }

    /* Logo anchors wrap an inline image, so the tappable box collapsed
       to the line box. Make them block-level. */
    .logo-box .logo a,
    .logo-box a,
    .footer-logo a,
    figure.logo a,
    .blog-reference-card .image-holder a,
    a.lightbox-image { display: inline-block !important; line-height: 0 !important; }

    /* Phone and email links are the primary conversion on a movers' site.
       Vertical padding grows the hit area without changing the line box,
       so inline occurrences do not shift the surrounding text. */
    a[href^="tel:"],
    a[href^="mailto:"] { padding-top: 12px !important; padding-bottom: 12px !important; }

    /* Bootstrap .btn lands at 38px here - just under the comfortable minimum. */
    .btn { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

    /* Breadcrumbs, tag lists, pagination */
    .page-banner-section .bread-crumb li a,
    .breadcrumb li a,
    .pagination li a,
    .tags-list li a { min-height: 40px !important; display: inline-flex !important; align-items: center !important; }

    /* Native controls must be >=16px or iOS Safari zooms the page on focus. */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 14px !important;
        min-height: 48px !important;
    }
    textarea { min-height: 120px !important; }

    button[type="submit"],
    input[type="submit"] { min-height: 50px !important; width: 100% !important; }


    /* ---- 2.6 Media -------------------------------------------------------- */

    img,
    video,
    iframe,
    svg { max-width: 100% !important; height: auto !important; }

    /* Embedded maps / videos keep a sane aspect instead of a 1px sliver. */
    iframe[src*="google.com/maps"],
    iframe[src*="youtube"] { width: 100% !important; min-height: 260px !important; }

    /* Decorative parallax shapes overflow by design; hide the ones that
       would otherwise widen the document. */
    .shape-five,
    .shape-six,
    .pattern-layer,
    .cta-001 .shape-five,
    .cta-001 .shape-six { display: none !important; }


    /* ---- 2.7 Tables ------------------------------------------------------- */
    /* Any table wide enough to overflow scrolls in its own box rather than
       breaking the page. */
    table { width: 100% !important; }

    .table-wrapper,
    .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }


    /* ---- 2.8 Misc --------------------------------------------------------- */

    .network-badge { font-size: 11px !important; }

    /* The quote dialog carries its own responsive rules in
       includes/quote_popup.php, in the #crown-quote-popup-styles block -
       including the 44px close control. It is opened from the header buttons;
       the hero no longer carries a trigger of its own. */

    /* Keep the floating WhatsApp button clear of bottom content and of
       the iOS home indicator. */
    .whatsapp-float {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
    }

    /* Give the last section room so the float never covers a CTA. */
    .main-footer .footer-bottom { padding-bottom: 80px !important; }
}


/* ============================================================
   3. SMALL PHONE  (<= 480px)
   ============================================================ */
@media (max-width: 480px) {

    .container,
    .container-fluid { padding-left: 20px !important; padding-right: 20px !important; }

    .sec-padd-150,
    .why-choose-us-section,
    .crown-network-section,
    .crown-trust-section,
    .service-section,
    .testimonial-section,
    .blog-section { padding-top: 45px !important; padding-bottom: 34px !important; }

    .cta-001 .cta-inner h3 { font-size: 18px !important; }

    /* Two-up grids that are still too cramped at 360px go single column. */
    .trust-highlights-grid > [class*="col-"],
    .why-choose-grid > [class*="col-"] { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
}