/* =====================================================================
   Responsive Fixes Overlay
   ---------------------------------------------------------------------
   Loaded AFTER all other stylesheets so these rules win the cascade
   without needing !important. Targets the concrete responsive
   anti-patterns identified during the May-2026 audit:

     1. Fixed-pixel widths that broke layout below 1024 / 600 / 480 px.
     2. Oversized hero / section-heading typography on phones.
     3. Dashboard sidebar cramping in the 600–880 px range.
     4. Cart line-item grid squeezing the body column on phones.
     5. OTP popup and hard-coded modal positioning on mobile.
     6. Tables, images, iframes and embeds without responsive defaults.
     7. Global overflow-x guard.

   The file is grouped by breakpoint, then by component. All selectors
   are scoped so the rules only affect the public frontend (body.jb-light
   or specific .jb-* component classes) and do not leak into the admin.
   ===================================================================== */


/* =====================================================================
   0. Global guards — apply at every viewport
   ===================================================================== */

/* Breadcrumb (.jb-product__crumb) — the canonical styling lives inside
   service-details.blade.php's @push('styles'), so on every OTHER page
   that reuses the crumb markup (blog-details, cart-checkout, service-
   buy-book, health-details, user-dashboard/blog-show, …) the <a> tags
   fall back to the browser-default blue. Hoist the styling here so the
   crumb always matches the dark/ink theme. */
body.jb-light .jb-product__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--jb-ink-3);
    margin: 14px 0 18px;
}
body.jb-light .jb-product__crumb {
    color: var(--jb-ink-3) !important;
    text-decoration: none !important;
    transition: color .2s ease;
}
body.jb-light .jb-product__crumb:hover { color: var(--jb-ink) !important; }
body.jb-light .jb-product__crumb.is-current { color: var(--jb-ink) !important; font-weight: 600; }
body.jb-light .jb-product__crumb-sep { color: var(--jb-ink-3); opacity: 0.5; }


html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* Tables that escape .table-responsive get a scroll fallback instead of
   blowing the layout out horizontally. */
table {
    max-width: 100%;
}

/* Generic iframe/embed responsiveness (YouTube, maps, etc.) */
iframe, embed, object {
    max-width: 100%;
}

/* Bootstrap container override — keep the design's horizontal padding
   but never let it cause overflow on the very narrowest devices. */
.container, .container-fluid, .jb-container {
    max-width: 100%;
    padding-left: clamp(12px, 3vw, 24px);
    padding-right: clamp(12px, 3vw, 24px);
    box-sizing: border-box;
}

/* Anything explicitly wider than the viewport will scroll inside its
   parent rather than push the page sideways. */
.table-responsive,
.jb-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =====================================================================
   Search-in-mobile-menu — applied via JS when the form is moved
   into #jbMobileMenu at ≤980 px. The form keeps its `jb-search`
   base styling and we add an in-menu layout on top so it sits as
   a full-width pill at the top of the slide-down panel, separated
   from the link list by a thin divider.
   ===================================================================== */
body.jb-light .jb-search.jb-search--in-mobile-menu {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    padding: 10px 10px 10px 16px;
    background: rgba(12,13,17,0.04);
    border: 1px solid rgba(12,13,17,0.05);
    border-radius: 14px;
    position: relative;
    box-sizing: border-box;
}
body.jb-light .jb-search.jb-search--in-mobile-menu input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    color: var(--jb-ink);
    outline: none;
}
body.jb-light .jb-search.jb-search--in-mobile-menu input::placeholder {
    color: var(--jb-ink-3);
}
body.jb-light .jb-search.jb-search--in-mobile-menu button[type="submit"] {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: var(--jb-ink);
    color: var(--jb-paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
body.jb-light .jb-search.jb-search--in-mobile-menu button[type="submit"] svg,
body.jb-light .jb-search.jb-search--in-mobile-menu button[type="submit"] i {
    width: 16px;
    height: 16px;
}
/* Suggestions panel — still anchored to the form, but the form is
   now full-width inside the menu, so the panel inherits that width
   automatically. Keep it visually attached. */
body.jb-light .jb-search.jb-search--in-mobile-menu .jb-search__suggest {
    left: 0;
    right: 0;
    top: calc(100% + 6px);
}

/* Tiny gap below the search before the first nav link so the two
   don't feel glued together. */
body.jb-light .jb-mobile-menu > .jb-search--in-mobile-menu + .jb-mobile-menu__link,
body.jb-light .jb-mobile-menu > .jb-search--in-mobile-menu + .jb-mobile-menu__group {
    margin-top: 2px;
}


/* =====================================================================
   1. Tablet landscape  ≤ 1200 px
   ===================================================================== */
@media (max-width: 1200px) {

    /* Legacy hero headline (style.css line 181: 74px hard-coded) */
    .section-heading {
        font-size: clamp(40px, 6vw, 64px);
        line-height: 1.1;
    }

    /* About-area fixed-width boxes scale down before the next breakpoint
       lets them collapse fully. */
    .about-area .about-image-box {
        width: 100%;
        max-width: 370px;
    }
    .about-area .about-me-box .img-box {
        width: 100%;
        max-width: 224px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}


/* =====================================================================
   2. Tablet portrait  ≤ 992 px
   ===================================================================== */
@media (max-width: 992px) {

    .section-heading {
        font-size: clamp(32px, 5.5vw, 48px);
        letter-spacing: -0.5px;
    }

    /* About-details inner padding was 115px top — too much on tablet. */
    .about-area .about-details .about-details-inner {
        padding: 60px 24px 24px 24px;
    }

    /* Generic Bootstrap row gap normalisation so cards don't touch. */
    .row > [class*="col-"] {
        margin-bottom: 16px;
    }
}


/* =====================================================================
   3. Mobile / small tablet  ≤ 768 px
   ===================================================================== */
@media (max-width: 768px) {

    /* ─── Typography ───────────────────────────────────────────── */
    .section-heading {
        font-size: clamp(28px, 8vw, 40px);
        gap: 2px;
        text-align: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    h1 { font-size: clamp(24px, 7vw, 36px); line-height: 1.2; }
    h2 { font-size: clamp(20px, 6vw, 30px); line-height: 1.25; }
    h3 { font-size: clamp(18px, 5vw, 24px); line-height: 1.3; }

    /* ─── About-area fixed boxes collapse to single column. ────── */
    .about-area .about-credentials-wrap > .gx-row > * {
        flex: 1 1 100%;
        width: 100%;
    }
    .about-area .about-image-box,
    .about-area .about-me-box .img-box {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }
    .project-details-wrap .project-about-2 .left-details {
        width: 100%;
        max-width: 100%;
    }

    /* ─── Dashboard sidebar — collapse earlier than 880 px so the
       260 px sidebar doesn't crush the form column in the 600–880 px
       range. ────────────────────────────────────────────────────── */
    body.jb-light .jb-account-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    /* Account-tab pills wrap instead of overflowing horizontally. */
    body.jb-light .jb-account-tabs {
        flex-wrap: wrap;
        width: 100%;
    }
    body.jb-light .jb-account-tab {
        white-space: normal;
        text-align: center;
    }

    /* ─── Mega-menu safety — even though it's hidden ≤ 980 px,
       guarantee it never overflows if it ever shows. ───────────── */
    .jb-topnav__menu {
        max-width: 92vw;
        min-width: 0;
    }

    /* ─── Footer grid already collapses, but enforce padding fix. ─ */
    .jb-footer__cta {
        text-align: center;
    }

    /* ─── Forms — side-by-side fields stack. ──────────────────── */
    .row .col-md-6,
    .row .col-md-4,
    .row .col-md-3 {
        margin-bottom: 14px;
    }
    .jb-field-row {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================================================
   4. Large phone  ≤ 600 px
   ===================================================================== */
@media (max-width: 600px) {

    /* ─── OTP popup (style.css line 2832: width 300px hard-coded) ─ */
    .otp-popup {
        width: min(92vw, 360px) !important;
        max-width: 92vw;
        box-sizing: border-box;
    }
    #otpInput {
        width: 56px !important;
        height: 60px !important;
        font-size: 22px;
    }

    /* ─── Legacy hard-coded modal positioning (style.css 3054-3066)
       Let Bootstrap centre the modals instead of the absolute
       percentage offsets that were sized for 1440 px screens. ──── */
    #signInModal,
    div#forgotPasswordScreen,
    #createAccountModal {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    /* ─── Cart line-items collapse to a stacked card on phones.
       The default 110 / 1fr / auto grid leaves only ~90 px for the
       body column on a 360 px viewport. ────────────────────────── */
    body.jb-light .jb-cart__item {
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
        padding: 12px;
    }
    body.jb-light .jb-cart__item-thumb {
        width: 80px;
        height: 80px;
    }
    body.jb-light .jb-cart__item-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        width: 100%;
    }

    /* ─── Cart summary card stops floating with a large min-width. */
    body.jb-light .jb-cart__summary {
        position: static;
        max-width: 100%;
    }

    /* ─── Generic CTA / button row wrapping ────────────────────── */
    .jb-cta,
    .btn,
    .btn-lg {
        max-width: 100%;
    }

    /* ─── Topbar on phones ─────────────────────────────────────
       The search is JS-relocated into the mobile menu (see the
       <script> block in layouts.blade.php), so the topbar now
       only holds the brand + action icons. `margin-left: auto`
       on the hamburger pushes the icon cluster to the right
       edge, matching the standard mobile-header pattern. */
    body.jb-light .jb-topbar {
        gap: 6px;
        padding: 8px 10px 8px 14px;
    }
    body.jb-light .jb-topbar > .jb-mobile-toggle {
        margin-left: auto;
    }

    /* ─── Hero social row — designed as a horizontal scroll strip
       on desktop, but on phones the half-clipped trailing icon
       reads as "broken layout". Switch to wrap so every brand is
       visible without needing to scroll. ────────────────────────── */
    body.jb-light .jb-socials {
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: 10px;
    }
    body.jb-light .jb-socials > span {
        flex: 1 1 100%;          /* "Follow us on:" gets its own line */
        margin-right: 0;
        margin-bottom: 2px;
    }
}


/* =====================================================================
   5. Small phone  ≤ 480 px  (iPhone SE, older Androids)
   ===================================================================== */
@media (max-width: 480px) {

    /* Brand logo must not eat the search field. */
    .jb-brand__logo {
        max-width: 92px;
    }

    /* Force a single-column card grid (Bootstrap col-* fallback). */
    [class*="col-xs-"],
    [class*="col-sm-"],
    [class*="col-md-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Section paddings tighten — the design uses 60-115 px in places
       which dominates the viewport on a 360 px screen. */
    section,
    .jb-section,
    .about-area,
    .project-details-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }
    .about-area .about-details .about-details-inner {
        padding: 32px 16px 24px 16px;
    }

    /* Marquee — keep contained even at the smallest size. */
    .marquee {
        overflow-x: hidden;
    }

    /* Avoid horizontal scroll inside flex containers that wrap inline
       pill rows (categories chips, hero CTA cluster). */
    .jb-pill-row,
    .jb-cta-row,
    .jb-hero__ctas {
        flex-wrap: wrap;
    }
}


/* =====================================================================
   6. Tiny phone  ≤ 360 px  (Galaxy Fold cover, oldest devices)
   ===================================================================== */
@media (max-width: 360px) {

    .section-heading { font-size: clamp(24px, 9vw, 32px); }

    /* Search input becomes the full width of the topbar's second row. */
    .jb-search--compact input {
        min-width: 0;
        width: 100%;
    }

    /* Cart stepper shrinks slightly. */
    body.jb-light .jb-cart .jb-stepper {
        height: 34px;
    }
    body.jb-light .jb-cart .jb-stepper__btn { width: 30px; }
    body.jb-light .jb-cart .jb-stepper__input { width: 36px; font-size: 12.5px; }
}


/* =====================================================================
   7. Print — keep the existing layout printable
   ===================================================================== */
@media print {
    .jb-topbar,
    .jb-mobile-menu,
    .jb-footer__cta,
    .jb-mobile-toggle { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
}