/* =====================================================================
   GLOBAL MERIDIEN TRADING - responsive.css
   Loaded after style.css. Progressive breakdown from desktop to 360px.
   ===================================================================== */

/* ---------------------------------------------------------------------
   LARGE DESKTOP  (≥ 1600px)
   --------------------------------------------------------------------- */
@media (min-width: 1600px) {
    :root { --max-width: 1440px; }
}

/* ---------------------------------------------------------------------
   DESKTOP DOWN  (≤ 1200px)
   --------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .global-grid { grid-template-columns: 0.95fr 1.05fr; }
    .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
    .footer-contact { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   SMALL LAPTOP / LARGE TABLET  (≤ 1024px)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Editorial product grid → balanced 2-up */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(300px, auto);
    }
    .product-card:nth-child(1),
    .product-card:nth-child(2),
    .product-card:nth-child(3),
    .product-card:nth-child(4),
    .product-card:nth-child(5) {
        grid-column: auto;
        grid-row: auto;
    }
    .product-card:nth-child(1) { grid-column: 1 / -1; min-height: 380px; }

    /* Product copy always visible (no hover on touch) */
    .product-description {
        max-height: 8rem;
        opacity: 1;
        margin-top: 0.25rem;
    }

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

/* ---------------------------------------------------------------------
   TABLET  (≤ 900px)  - navigation collapses here
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Guard against sub-pixel / off-canvas horizontal overflow on small
       screens. Safe here: no sticky layout is active at <= 900px. */
    html { overflow-x: hidden; }

    .navbar-menu,
    .navbar-cta { display: none; }
    .hamburger { display: flex; }

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

    .global-grid { grid-template-columns: 1fr; gap: 3rem; }
    .global-map { max-width: 520px; }

    /* Trade process → vertical */
    .trade-steps { flex-direction: column; align-items: stretch; }
    .trade-step { padding-left: 0; }
    .step-connector {
        flex: 0 0 auto;
        width: 1px;
        height: clamp(1.75rem, 5vw, 2.75rem);
        margin: 0.25rem 0 0.25rem 0.5rem;
        background: linear-gradient(180deg, transparent, var(--color-gold), transparent);
    }

    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-contact { grid-column: auto; }

    .final-options { grid-template-columns: 1fr; }

    .dubai-section { min-height: 62vh; }
}

/* ---------------------------------------------------------------------
   SMALL TABLET / LARGE PHONE  (≤ 680px)
   --------------------------------------------------------------------- */
@media (max-width: 680px) {
    .products-grid { grid-template-columns: 1fr; }
    .product-card,
    .product-card:nth-child(1) { min-height: 340px; }

    .pillars-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }

    .hero-content { padding-block: 8rem 6rem; }
    .hero-scroll { display: none; }

    .btn { --btn-pad-x: 1.7rem; width: 100%; }
    .hero-ctas .btn { width: 100%; }
    .navbar-cta { width: auto; }
}

/* ---------------------------------------------------------------------
   PHONE  (≤ 480px)
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
    :root {
        --section-y: clamp(3.5rem, 14vw, 5rem);
        --gutter: 1.35rem;
    }

    .eyebrow { margin-bottom: 1.25rem; }
    .eyebrow::before { width: 18px; margin-right: 0.6rem; }

    .logo-text { font-size: 1.05rem; letter-spacing: 0.1em; }
    .navbar-logo-image { height: 34px; }

    .hero { min-height: 92vh; }
    .hero-title { margin-bottom: 1.5rem; }
    .hero-subtitle { margin-bottom: 2rem; }

    .modal-content { padding: 1.75rem 1.35rem; }
    .modal-title { font-size: 1.4rem; }

    .sourcing-flow { gap: 0.7rem 0; }
    .sourcing-flow li:not(:last-child)::after { margin-inline: 0.7rem; }
}

/* ---------------------------------------------------------------------
   SMALL PHONE  (≤ 390px / 360px)
   --------------------------------------------------------------------- */
@media (max-width: 390px) {
    :root { --gutter: 1.15rem; }

    .logo-text { font-size: 0.95rem; }
    .hero-title { font-size: clamp(2.2rem, 10vw, 2.8rem); }
    .section-heading { font-size: clamp(2rem, 9vw, 2.6rem); }
    .btn { font-size: 0.72rem; --btn-pad-y: 0.95rem; }
}

@media (max-width: 360px) {
    .navbar-logo { gap: 0.55rem; }
    .logo-text { font-size: 0.88rem; }
}

/* ---------------------------------------------------------------------
   SHORT LANDSCAPE
   --------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
    .hero { min-height: 100vh; }
    .hero-content { padding-block: 6rem 3rem; }
    .hero-scroll { display: none; }
}

/* ---------------------------------------------------------------------
   PRINT
   --------------------------------------------------------------------- */
@media print {
    .navbar, .mobile-menu, .hero-scroll, .btn,
    .modal, .success-message, .grain::after { display: none !important; }
    * { background: #fff !important; color: #000 !important; }
    .section { padding-block: 1.5rem; page-break-inside: avoid; }
}