/* ============================================================
   KRANTINATURAL — RESPONSIVE
   Consolidated media queries for the whole site.
   Breakpoints follow the grid's: 991 / 767 / 575.
   ============================================================ */

/* ── HEADER ── */
@media (max-width: 991px) {

    #sc-navbar .sc-nav,
    #sc-navbar .sc-right {
        display: none !important;
    }

    #sc-ham {
        display: flex !important;
    }
}

@media (max-width: 575px) {
    #sc-navbar .sc-logo-ring {
        width: 44px;
        height: 44px;
    }
    #sc-navbar .sc-brand-name {
        font-size: 16px;
    }
    /* Footer mark follows the navbar ring so both stay the same size. */
    .footer-logo-img {
        width: 44px;
        height: 44px;
    }
    .footer-brand-name {
        font-size: 16px;
    }
}

/* ── FOOTER ── */
@media (max-width: 991px) {
    /* Copy and button no longer fit side by side with the wider strip type. */
    .nl-strip-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
}

@media (max-width: 767px) {
    .nl-cta {
        width: 100%;
        justify-content: center;
        padding: 13px 24px;
    }

    .footer-body {
        padding: 40px 0 28px;
    }
}

/* Taller rows so the footer link lists are comfortable to tap — applies to
   phones and tablets, where the footer is a touch target rather than a
   desktop column. */
@media (max-width: 991px) {
    .f-nav-link {
        padding: 10px 0;
    }
}

/* ── HOME: hero slider, review cards ── */
@media (max-width: 991px) {
    .slide-content {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .slide-item {
        min-height: 70vh;
    }

    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next {
        display: none;
    }

    footer .col-lg-2,
    footer .col-lg-4 {
        margin-bottom: 30px;
    }
}

/* The review arrows hang 20px outside the slider (left/right: -20px), which
   pushes them off the edge of the narrowest phone screens. Pull them back in. */
@media (max-width: 575px) {
    .reviewSlider .carousel-control-prev {
        left: 0;
    }

    .reviewSlider .carousel-control-next {
        right: 0;
    }
}

/* ── ABOUT ── */
@media (max-width: 767px) {
    .story-img-main img {
        height: 300px;
    }

    .story-img-badge {
        right: 0;
    }

    /* check-list points: 2-column grid → single column on small screens */
    .check-list {
        grid-template-columns: 1fr;
    }
}

/* ── PRODUCT DETAILS ── */

/* Below the lg breakpoint the columns stack and the image column becomes the full
   page width, so cap the gallery and centre it — a square product shot stretched
   edge to edge would push the product name and specs far down the screen. At lg
   and up the columns sit side by side and the gallery fills its column
   (css/pro-details.css), keeping a normal gutter between the shot and the text. */
@media (max-width: 991px) {
    .product-gallery {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    /* At-a-Glance highlights: 2x2 grid → single column on small screens */
    .glance-grid {
        grid-template-columns: 1fr;
    }
}

/* ── CONTACT ── */
@media (max-width: 767px) {
    .contact-form-wrap {
        padding: 28px 20px;
    }

    .contact-side {
        padding: 28px 22px;
    }
}

/* ── SMALL LABELS ──
   These uppercase badges/labels are 10px by design, which reads fine on a
   desktop but is too small on a phone, so they step up below the 768px grid
   breakpoint. The step-up used to start at 575px, which left a phone held in
   landscape (576–767px) on the 10px size. */
@media (max-width: 767px) {
    .cat-badge,
    .gallery-badge,
    .svc-num,
    .f-contact-label,
    .glance-label {
        font-size: 11px;
    }
}

/* ── TOUCH TARGETS ──
   On phones and tablets everything interactive is aimed at with a thumb, so
   each control is given at least the 44px minimum recommended target. Desktop
   keeps the compact sizing it was designed with — these rules only start below
   the 991px grid breakpoint. */
@media (max-width: 991px) {

    /* Review slider arrows. Sizing lives here rather than in the 575 block so
       tablets get the same target; the hero arrows are hidden below 768. */
    .reviewSlider .carousel-control-prev,
    .reviewSlider .carousel-control-next {
        width: 44px;
        height: 44px;
    }

    /* Stacked contact links — the phone numbers and the email address. These
       are block-level lists, so vertical padding grows the hit box without
       disturbing the layout; max-width lets a long address still break. */
    .f-contact-value a,
    .side-value a {
        display: inline-block;
        max-width: 100%;
        padding: 12px 0;
    }

    /* Breadcrumb "Home" link. */
    .breadcrumb {
        align-items: center;
    }

    .breadcrumb-item a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* "Experts of Deals" credit logo in the footer bottom bar. */
    .fb-brand {
        min-height: 44px;
    }
}

/* ── HORIZONTAL OVERFLOW GUARDS ──
   Two things used to open a horizontal overflow band on phones/tablets
   (nothing on desktop, where the container is centred with side margins):
     1. A `g-5` row inherits a 3rem gutter, i.e. -1.5rem side margins, which is
        wider than the container's 0.75rem padding — so the row pokes 12px past
        the viewport once the container goes full width (< 576px).
     2. AOS starts every `fade-left` / `fade-right` block 100px off-axis. Off
        screen that is harmless, but on a narrow screen it lands beyond the right
        edge and widens the document before the block animates in. */
@media (max-width: 575px) {
    /* Cap the horizontal gutter only; --bs-gutter-y (vertical rhythm) is left
       as authored, so section spacing is unchanged. */
    .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
}

@media (max-width: 991px) {
    /* The off-axis animations are re-pointed downwards rather than removed, so
       the motion still reads on a phone but nothing is ever translated past the
       left/right viewport edge (a 100px sideways offset on a full-width column
       is what opened the overflow band in the first place).
       Vertical travel is safe: it grows the page, never its width. The distance
       is halved from the 100px aos.css uses because the smaller screen makes
       the same travel feel longer. */
    [data-aos="fade-left"],
    [data-aos="fade-right"],
    [data-aos="fade-up-left"],
    [data-aos="fade-up-right"],
    [data-aos="fade-down-left"],
    [data-aos="fade-down-right"] {
        transform: translate3d(0, 60px, 0) !important;
    }

    /* aos.css settles an animated block with `transform: translateZ(0)`, but
       the !important above outranks it — without this reset the block would
       stay parked 60px low forever instead of landing in place. */
    [data-aos="fade-left"].aos-animate,
    [data-aos="fade-right"].aos-animate,
    [data-aos="fade-up-left"].aos-animate,
    [data-aos="fade-up-right"].aos-animate,
    [data-aos="fade-down-left"].aos-animate,
    [data-aos="fade-down-right"].aos-animate {
        transform: translate3d(0, 0, 0) !important;
    }
}

/* ───────────────────────── Touch targets ─────────────────────────
   WCAG 2.2 AA only asks for 24x24 CSS px, but the practical finger-friendly
   minimum is 44x44 — these were 36–40px. Applied on touch devices AND on small
   viewports, because a narrow screen is a phone in practice even when the
   browser reports a fine pointer (e.g. a desktop window resized narrow).
   Desktop keeps its compact density.
   min-height needs a flex/grid context, which every one of these already has. */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
    #sc-mob .mob-link,
    #sc-mob .mob-acc-btn,
    #sc-mob .mob-sub a,
    #sc-mob .mob-btns a {
        min-height: 44px;
    }

    #sc-ham,
    #sc-navbar .sc-wa,
    #sc-navbar .sc-enq {
        min-width: 44px;
        min-height: 44px;
    }

    .cat-btn,
    .cat-btn-ghost,
    .cat-btn-solid {
        min-height: 44px;
    }

    .f-nav-link,
    .fb-brand {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Social icon buttons are square — both axes need the minimum. */
    .f-social,
    .social-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Skip link is a real target too — give it the same 44px minimum. */
    .skip-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}