/* ==========================================================
   KAMAL TRADING — RESPONSIVE PATCH
   Load this LAST (just before </body>)
   ========================================================== */

/* ---------- 1. GLOBAL — stop sideways scrolling ---------- */
html {
    -webkit-text-size-adjust: 100%;
}

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

img, svg, video, iframe, table {
    max-width: 100%;
}

.hero-inner > *,
.about-grid > *,
.mfg-grid > *,
.quality-grid > *,
.contact-grid > *,
.head-row > *,
.footer-grid > *,
.kp-layout > *,
.kp-custom__grid > *,
.ki-row > *,
.ki-lists > *,
.km-caps__grid > *,
.km-flow__grid > *,
.km-mat > *,
.kc-cert > *,
.kn-layout > *,
.kn-send__grid > * {
    min-width: 0;
}

h1, h2, h3, h4, p, li, dd, dt, address,
.kn-card__value, .kc-badge__num {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- 2. HEADER — same behaviour on every page ---------- */
.site-header,
.site-header.floating-header,
.site-header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--line);
}

.mobile-nav {
    height: calc(100% - 78px);
    padding-bottom: 60px;
    -webkit-overflow-scrolling: touch;
}

section[id], article[id], div[id] {
    scroll-margin-top: 92px;
}

/* ---------- 3. AUTO-FILL GRIDS ---------- */
.kp-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.km-tiles {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
}

/* ---------- 4. TABLET (≤1024px) ---------- */
@media (max-width: 1024px) {
    .kp-facts, .ki-facts, .km-facts,
    .kc-facts, .kg-facts, .kn-facts {
        min-width: 0;
    }

    .ki-jump {
        top: 78px;
    }

    .kp-side,
    .km-caps__intro,
    .km-flow__media,
    .kc-cert__media {
        position: static;
    }
}

/* ---------- 5. LARGE PHONE (≤960px) ---------- */
@media (max-width: 960px) {
    .hero-visual {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .hero-visual-img {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    .hero-inner {
        gap: 40px;
    }

    .hero h1 {
        max-width: 100%;
    }

    .contact-map {
        min-height: 0;
    }

        .contact-map iframe {
            min-height: 320px !important;
            height: 320px !important;
        }
}

/* ---------- 6. PHONE (≤640px) ---------- */
@media (max-width: 640px) {
    .mobile-nav {
        height: calc(100% - 70px);
    }

    section[id], article[id], div[id] {
        scroll-margin-top: 84px;
    }

    .btn, .kp-btn, .ki-btn, .km-btn,
    .kc-btn, .kg-btn, .kn-btn {
        white-space: normal;
        text-align: center;
    }

    .hero-cta-row .btn,
    .oem-inner .btn,
    .about-copy .btn,
    .split-copy .btn,
    .kp-custom__cta .kp-btn,
    .km-caps__intro .km-btn,
    .km-quality__head .km-btn {
        width: 100%;
    }

    .hero-cta-row {
        gap: 12px;
    }

    .hero {
        padding-top: 96px;
    }

    .hero-visual {
        aspect-ratio: 4 / 3;
    }

        .hero-visual .spec-line {
            font-size: 10px;
        }

    .hero-meta {
        gap: 20px 28px;
        margin-top: 32px;
    }

        .hero-meta .num {
            font-size: 20px;
        }

    .page-hero h1,
    .kp-hero__title, .ki-hero__title, .km-hero__title,
    .kc-hero__title, .kg-hero__title, .kn-hero__title {
        max-width: 100%;
    }

    .gallery-grid {
        gap: 10px;
    }

    .mfg-visual, .about-frame {
        aspect-ratio: 4 / 3;
    }

    .contact-map iframe {
        min-height: 260px !important;
        height: 260px !important;
    }

    .contact-row {
        flex-direction: column;
        gap: 4px;
    }

        .contact-row .k {
            width: auto;
        }

    input, select, textarea,
    .kn-field input, .kn-field textarea,
    .kp-search input {
        font-size: 16px;
    }

    .tag-grid {
        gap: 8px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .kp-card__media img {
        padding: 18px;
    }

    .kc-viewer {
        width: 96vw;
    }

    .kg-viewer {
        width: 96vw;
    }

    .ki-shots {
        grid-template-columns: 1fr;
    }

    .ki-shot, .ki-shot:first-child {
        height: 220px;
    }
}

/* ---------- 7. SMALL PHONE (≤400px) ---------- */
@media (max-width: 400px) {
    .wrap, .kp-wrap, .ki-wrap, .km-wrap,
    .kc-wrap, .kg-wrap, .kn-wrap {
        padding: 0 16px;
    }

    .header-logo {
        width: 128px;
        max-height: 46px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .page-hero h1,
    .kp-hero__title, .ki-hero__title, .km-hero__title,
    .kc-hero__title, .kg-hero__title, .kn-hero__title {
        font-size: 32px;
    }

    h2.h-lg, .kp-h2, .ki-h2, .km-h2, .kc-h2, .kn-h2 {
        font-size: 26px;
    }

    .hero-strip .wrap {
        grid-template-columns: 1fr;
    }

    .hero-strip-item {
        padding: 16px 0;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .kp-facts, .ki-facts, .km-facts,
    .kc-facts, .kg-facts, .kn-facts {
        padding: 20px;
    }

    .kp-facts__item, .ki-facts__item, .km-facts__item,
    .kc-facts__item, .kg-facts__item, .kn-facts__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .kn-formcard, .kp-help,
    .kn-checklist, .kp-checklist {
        padding: 22px 18px;
    }

    .mobile-nav a {
        font-size: 22px;
        padding: 13px 0;
    }
}

/* ---------- 8. TOUCH SCREENS ---------- */
@media (hover: none) {
    .kg-item__cap,
    .kc-thumb__hint {
        opacity: 1;
        transform: none;
    }
}



/* ---------- MOBILE MENU — compact dropdown, no scroll needed ---------- */
.mobile-nav {
    top: 78px;
    right: 0;
    left: 0;
    bottom: auto;
    height: auto;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    padding: 8px 20px 20px;
    box-shadow: 0 12px 24px rgba(7, 31, 63, 0.25);
}

    .mobile-nav a {
        padding: 13px 0;
        font-family: var(--f-body);
        font-size: 16px;
        font-weight: 600;
        text-transform: none;
    }

    .mobile-nav .btn {
        margin-top: 16px;
    }

@media (max-width: 640px) {
    .mobile-nav {
        top: 70px;
        max-height: calc(100vh - 70px);
    }
}

.footer-brand__logo {
    height: 72px;
    width: auto;
    display: block;
    margin-bottom: 16px;
}



@media (max-width: 640px) {
    .about-copy p,
    .split-copy p,
    .hero-sub,
    .body-lg,
    .ki-desc,
    .km-cap__text,
    .kc-cert__summary,
    .kp-hero__lead,
    .ki-hero__lead,
    .km-hero__lead,
    .kc-hero__lead,
    .kg-hero__lead,
    .kn-hero__lead {
        text-align: justify;
        hyphens: auto;
    }
}
@media (max-width: 640px) {
    p {
        text-align: justify;
        hyphens: auto;
    }
}