/* ==========================================================================
   HDM EXIM — Responsive layers
   Loaded after style.css. Desktop-first: each block narrows the layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1440px and below — tighten the outer rhythm
   -------------------------------------------------------------------------- */

@media (max-width: 1440px) {
    :root {
        --container: 1200px;
        --gutter: 2.25rem;
    }
}

/* --------------------------------------------------------------------------
   1200px — compress type scale, drop the 6-up feature row to 3-up
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    :root {
        --fs-h1: 2.875rem;
        --fs-h2: 2.0625rem;
        --section-y: 4.5rem;
    }

    .nav-list {
        gap: 1.15rem;
    }

    .nav-link {
        font-size: .7rem;
        letter-spacing: .07em;
    }

    .why-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem 0;
    }

    .market-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .about-grid {
        grid-template-columns: .9fr 1.2fr;
        gap: 2.5rem;
    }

    .about-list {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0;
    }

    .inquiry-panel-inner {
        padding-left: 2rem;
    }

    .contact-info-col {
        padding-left: 1.75rem;
    }
}

/* --------------------------------------------------------------------------
   1024px — hamburger navigation, hero stacks
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    :root {
        --fs-h1: 2.5rem;
        --header-h: 76px;
    }

    /* --- Mobile navigation ------------------------------------------------ */

    .nav-toggle {
        display: inline-flex;
        order: 3;
    }

    .nav {
        position: fixed;
        top: var(--header-h);
        right: 0;
        bottom: 0;
        width: min(360px, 86vw);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1.5rem 1.5rem 2.5rem;
        background: #fff;
        border-left: 1px solid var(--line);
        box-shadow: -18px 0 44px -28px rgba(31, 41, 51, .5);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .34s var(--ease);
        z-index: 90;
        visibility: hidden;
    }

    .nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .nav-backdrop {
        display: block;
        pointer-events: none;
    }

    .nav-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .nav-item {
        border-bottom: 1px solid var(--line-soft);
    }

    .nav-link {
        justify-content: space-between;
        width: 100%;
        padding: 1rem 0;
        font-size: .8125rem;
    }

    .nav-link::after {
        display: none;
    }

    .nav-item.is-active > .nav-link {
        color: var(--gold);
    }

    /* Dropdown becomes an inline accordion */
    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        box-shadow: none;
        padding: 0 0 .75rem .85rem;
        min-width: 0;
        display: none;
    }

    .nav-item.has-dropdown[data-open="true"] .dropdown {
        display: block;
        animation: fadeUp .3s var(--ease) both;
    }

    .nav-item.has-dropdown:hover .dropdown:not([data-open]) {
        display: none;
    }

    .nav .btn {
        margin-top: 1.25rem;
        width: 100%;
    }

    body.nav-open {
        overflow: hidden;
    }

    /* --- Hero ------------------------------------------------------------- */

    .hero-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .hero-content {
        max-width: none;
        padding: 3.25rem 0 2.75rem;
        order: 2;
    }

    .hero-content-wrap {
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .hero-media {
        order: 1;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .hero-media img {
        position: static;
    }

    .hero-media::after {
        background: linear-gradient(180deg, rgba(252, 251, 247, 0) 70%, rgba(252, 251, 247, .85) 100%);
    }

    .hero-text {
        max-width: 60ch;
    }

    /* --- Certifications + inquiry band ------------------------------------ */

    .contact-band {
        grid-template-columns: 1fr;
    }

    .cert-panel {
        padding: 3rem 0;
    }

    .cert-panel-wrap {
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .inquiry-panel {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        padding: 3rem var(--gutter);
        max-width: var(--container);
        margin-inline: auto;
        width: 100%;
    }

    .inquiry-panel-inner {
        padding-left: 0;
    }

    .contact-info-col {
        padding-right: 0;
    }

    /* --- Footer ----------------------------------------------------------- */

    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 2.25rem;
    }

    .footer-newsletter {
        grid-column: 1 / -1;
    }

    .footer-newsletter p {
        max-width: 46ch;
    }
}

/* --------------------------------------------------------------------------
   900px — product showcase and markets stack
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    :root {
        --section-y: 3.75rem;
        --fs-h2: 1.875rem;
    }

    .product-showcase {
        grid-template-columns: 1fr 1fr;
    }

    .showcase-intro {
        grid-column: 1 / -1;
    }

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

    .markets-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .markets-intro .section-title,
    .markets-intro p {
        max-width: none;
    }

    .cert-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   768px — tablet: stats 2x2, horizontal scroll rails
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    :root {
        --gutter: 1.5rem;
        --fs-h1: 2.125rem;
        --fs-h2: 1.6875rem;
        --section-y: 3.25rem;
        --section-y-sm: 2.5rem;
    }

    .page-hero h1 {
        font-size: 1.9rem;
    }

    /* Country strip becomes a scroll rail with a stacked label */
    .country-strip-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .country-strip-label {
        border-right: 0;
        padding-right: 0;
    }

    .country-list {
        width: 100%;
        gap: 1.25rem;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: .5rem;
        -webkit-overflow-scrolling: touch;
    }

    .country-item {
        flex: none;
        scroll-snap-align: start;
        padding-inline: 0;
    }

    /* About */
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-media {
        aspect-ratio: 16 / 10;
    }

    .about-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.15rem;
    }

    /* Products */
    .product-showcase {
        grid-template-columns: 1fr;
    }

    .showcase-intro {
        grid-column: auto;
    }

    /* Statistics 2x2 */
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 0;
    }

    .stat {
        justify-content: flex-start;
        padding-inline: 1rem;
    }

    /* Why choose us */
    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 0;
    }

    .why-card {
        padding-inline: .9rem;
    }

    /* Markets rail scrolls horizontally */
    .market-rail {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 46%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: .5rem;
        -webkit-overflow-scrolling: touch;
    }

    .market-card {
        scroll-snap-align: start;
    }

    /* Inquiry band stacks */
    .inquiry-panel {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    .contact-info-col {
        border-left: 0;
        border-top: 1px solid var(--line-dark);
        padding-left: 0;
        padding-top: 2rem;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: .5rem;
    }

    /* Generic */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .cols-2,
    .cols-3,
    .cols-4 {
        grid-template-columns: 1fr;
    }

    .card-grid {
        gap: 1.25rem;
    }

    .modal-dialog {
        padding: 1.35rem;
    }
}

/* --------------------------------------------------------------------------
   576px — phone
   -------------------------------------------------------------------------- */

@media (max-width: 576px) {
    :root {
        --gutter: 1.25rem;
        --fs-h1: 1.875rem;
        --fs-h2: 1.5rem;
        --fs-h3: 1.1875rem;
    }

    .hero-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-features li {
        padding-inline: .5rem;
    }

    .hero-actions .btn {
        flex: 1 1 100%;
    }

    .about-list {
        grid-template-columns: 1fr;
    }

    .cert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-rail {
        grid-auto-columns: 62%;
    }

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

    .step-item {
        grid-template-columns: 40px 1fr;
        gap: .9rem;
    }

    .spec-table th,
    .spec-table td {
        padding: .7rem .85rem;
        font-size: .8125rem;
    }

    .to-top {
        right: 1rem;
        bottom: 1rem;
    }

    .whatsapp-float {
        right: 1rem;
        bottom: 4.5rem;
    }

    .toast-stack {
        right: .75rem;
        left: .75rem;
        bottom: .75rem;
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   480px and 375px — small phones
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
    :root {
        --fs-h1: 1.75rem;
        --section-y: 2.75rem;
    }

    .brand-mark {
        width: 34px;
        height: 34px;
    }

    .brand-name {
        font-size: 1.2rem;
    }

    .brand-tagline {
        font-size: .45rem;
        letter-spacing: .12em;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1.35rem;
    }

    .stat {
        padding-inline: .75rem;
    }

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

    .market-rail {
        grid-auto-columns: 74%;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .btn {
        padding: .85rem 1.35rem;
        font-size: .75rem;
    }
}

@media (max-width: 375px) {
    :root {
        --gutter: 1rem;
        --fs-h1: 1.625rem;
    }

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

    .hero-features li {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: .75rem;
        padding-inline: .9rem;
    }

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