/* ============================================================
   ePost Caribbean — Responsive (mobile-first breakpoints)
   ============================================================

   Breakpoints:
   xs  < 480px
   sm  480–767px
   md  768–1023px
   lg  1024–1279px
   xl  1280px+
   ============================================================ */

/* ── Large (1280px+) — already handled by base styles ── */

/* ── Desktop / Laptop (max 1199px) ── */
@media (max-width: 1199px) {
    :root {
        --container-max: 100%;
        --container-px: var(--space-8);
    }
}

/* ── Tablet landscape (max 1023px) ── */
@media (max-width: 1023px) {
    :root {
        --section-py: var(--space-16);
        --font-size-4xl: 2.5rem;
        --font-size-5xl: 3rem;
    }

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

    .alternating-row {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .alternating-row--reverse {
        direction: ltr;
    }

    .page-hero--split {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .page-hero__image-circle {
        margin: 0 auto;
    }

    .page-hero__subtitle {
        margin-inline: auto;
    }

    .stats-bar {
        gap: var(--space-8);
    }

    /* Service hero tablet */
    .svc-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .svc-hero__subtitle {
        margin-inline: auto;
    }

    .svc-hero__bullets {
        align-items: center;
    }

    .svc-hero__media {
        justify-content: center;
        order: -1;
    }

    .svc-hero__image-wrap {
        width: clamp(200px, 50vw, 320px);
        height: clamp(200px, 50vw, 320px);
    }

    /* Features layout tablet */
    .svc-features-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .svc-features-centre {
        grid-column: 1 / -1;
        justify-self: center;
        width: 200px;
    }

    /* Process grid tablet */
    .svc-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Content rows tablet */
    .svc-content-row {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .svc-content-row--reverse {
        direction: ltr;
    }

    .svc-content-row__media {
        order: -1;
    }

    /* Features centered grid tablet */
    .svc-features-grid-centered {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Showcase grid tablet */
    .svc-showcase-grid {
        grid-template-columns: 1fr;
    }

    /* Features split tablet */
    .svc-features-split {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    /* Products layout tablet */
    .svc-products-layout {
        grid-template-columns: 1fr;
    }

    .svc-products-media {
        width: 200px;
        margin-inline: auto;
    }
}

/* ── Tablet portrait (max 767px) ── */
@media (max-width: 767px) {
    :root {
        --section-py:     var(--space-12);
        --header-height:  64px;
        --container-px:   var(--space-5);
    }

    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }

    .section-title { font-size: var(--font-size-2xl); }

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

    .stats-bar {
        flex-direction: column;
        gap: var(--space-6);
    }

    .logo-strip {
        gap: var(--space-5);
    }

    .logo-strip img {
        max-height: 36px;
    }

    /* Service logos mobile */
    .svc-logos-inner {
        gap: var(--space-6);
    }

    .svc-logos-item img {
        max-height: 40px;
    }

    /* Content rows mobile text */
    .svc-content-row__title {
        font-size: var(--font-size-2xl);
    }

    /* Features section title mobile */
    .svc-features-section__title {
        font-size: var(--font-size-2xl);
    }

    /* Products section mobile */
    .svc-products-content__title {
        font-size: var(--font-size-2xl);
    }

    /* Stats bar mobile */
    .stats-bar__number {
        font-size: var(--font-size-3xl);
    }

    .pricing-card--featured {
        transform: none;
    }

    /* Nav — mobile */
    .site-header__nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: hsl(0 0% 99%);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
        z-index: var(--z-overlay);
        padding: var(--space-8);
    }

    .site-header__nav.is-open {
        display: flex;
    }

    .site-header__nav-list {
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
    }

    .site-header__nav-list .nav-item {
        width: 100%;
        text-align: center;
    }

    .site-header__nav-list .nav-item a {
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-semibold);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: var(--space-4) var(--space-6);
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .site-header__nav .btn {
        margin-top: var(--space-6);
        font-size: var(--font-size-xs);
        padding: 0.75rem 2.5rem;
    }

    /* Logo scaling on mobile */
    .site-header__logo img {
        height: 44px;
        max-width: 160px;
    }

    /* Close button — only close mechanism on mobile */
    .nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: var(--space-5);
        right: var(--space-5);
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        border-radius: var(--radius-full);
        cursor: pointer;
        color: var(--color-dark);
        z-index: 10;
        transition: background var(--transition-fast), color var(--transition-fast);
    }

    .nav-close:hover {
        background: var(--color-primary-muted);
        color: var(--color-primary);
    }

    /* Hide hamburger while nav overlay is open — nav-close is the only close button */
    body.nav-open .nav-hamburger {
        display: none;
    }

    /* Mobile services dropdown items — override nav uppercase/tracking (higher specificity) */
    .site-header__nav-list .nav-item .services-dropdown__item {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        letter-spacing: 0;
        text-transform: none;
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-md);
    }

    /* Services link: keep arrow centred with the text */
    .has-dropdown > a {
        justify-content: center;
    }

    .nav-hamburger {
        display: flex;
        /* Fixed so it sits in the root stacking context above the overlay */
        position: fixed;
        top: calc((var(--header-height) - 20px) / 2);
        right: var(--space-5);
        z-index: var(--z-modal);
    }

    .services-dropdown {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        /* Use max-height (not display:none) so the transition is smooth */
        display: block;
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-base);
    }

    .services-dropdown.is-open-mobile {
        max-height: 600px;
        pointer-events: auto;
    }

    .has-dropdown > a {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .has-dropdown > a .dropdown-arrow {
        transition: transform var(--transition-fast);
    }

    .has-dropdown.is-open-mobile > a .dropdown-arrow {
        transform: rotate(180deg);
    }

    /* Service hero mobile */
    .svc-hero__inner {
        gap: var(--space-8);
    }

    /* Features split mobile */
    .svc-features-cards {
        grid-template-columns: 1fr;
    }

    /* Products mobile */
    .svc-products-list {
        grid-template-columns: 1fr;
    }

    /* Features layout mobile */
    .svc-features-layout {
        grid-template-columns: 1fr;
    }

    .svc-features-centre {
        grid-column: 1;
    }

    .svc-feature-item--right {
        flex-direction: row;
        text-align: left;
    }

    /* Process grid mobile */
    .svc-process-grid {
        grid-template-columns: 1fr;
    }

    .form-checkbox-group {
        grid-template-columns: 1fr;
    }

    .filter-tabs {
        gap: var(--space-2);
    }

    .filter-tab {
        font-size: var(--font-size-xs);
        padding: var(--space-2) var(--space-4);
    }

    .timeline-step:not(:last-child)::after {
        left: 19px;
    }
}

/* ── Mobile (max 479px) ── */
@media (max-width: 479px) {
    :root {
        --container-px: var(--space-4);
    }

    .btn--lg {
        padding: 0.875rem 1.75rem;
        font-size: var(--font-size-sm);
    }

    .card {
        padding: var(--space-6);
    }

    .pricing-card {
        padding: var(--space-8) var(--space-5);
    }

    .page-hero__bg-text {
        font-size: 60px;
    }
}

/* ── Print ── */
@media print {
    .site-header,
    .site-footer,
    .btn,
    .nav-hamburger {
        display: none;
    }

    body {
        font-size: 12pt;
    }

    a::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
    }
}