/* ==========================================================================
   Warba International Co. for Renting and Leasing (WIC)
   responsive.css — breakpoint behaviour

   Breakpoints: 1180 / 1024 / 900 (nav switches) / 760 / 560 / 400
   The mobile layouts are designed rather than reflowed: the hero drops its
   tally below the copy instead of squeezing it, fleet cards go two-up before
   one-up so vehicles stay comparable, and the customer register becomes a
   stacked list with its keys retained.
   ========================================================================== */

/* --- 1180: pull the container in ------------------------------------------ */
@media (max-width: 1180px) {
    :root { --gutter: 22px; }
    .hero__inner { gap: var(--sp-7); }
    .site-footer__main { gap: var(--sp-7); }
}

/* --- 1024: four-up grids become two-up ------------------------------------ */
@media (max-width: 1024px) {
    :root { --section-spacing: var(--sp-8); }

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

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

    .register { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .register__item:nth-child(odd) { border-left: 0; }
    .register__item:nth-child(n + 3) { border-top: 1px solid var(--border-color); }

    .site-footer__main { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
}

/* --- 980: hero stacks ----------------------------------------------------- */
@media (max-width: 980px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-7);
        padding-block: clamp(56px, 9vw, 96px);
    }
    .hero__copy { max-width: 52ch; }
    .hero__scrim {
        background:
            linear-gradient(180deg, rgba(11, 26, 34, .93) 0%, rgba(11, 26, 34, .86) 55%, rgba(11, 26, 34, .93) 100%);
    }
    .hero__media img { object-position: 50% 50%; }

    .tally { max-width: 520px; }
}

/* ==========================================================================
   900 — navigation switches to the mobile drawer
   ========================================================================== */
@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }

    /* The panel slides DOWN from behind the header rather than in from the
       right. A closed drawer parked off the right edge is still counted in
       the document's scrollable width, which let the whole page be swiped
       sideways on a phone; parked above the viewport it costs nothing.   */
    .nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        z-index: 95;
        max-height: calc(100dvh - var(--header-h));
        padding: var(--sp-4) var(--gutter) var(--sp-6);
        background: var(--surface);
        border-bottom: 1px solid var(--border-strong);
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform var(--dur) var(--ease), visibility var(--dur);
    }
    .nav.is-open { transform: translateY(0); visibility: visible; }

    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

    .nav__item { width: 100%; }

    .nav__link {
        width: 100%;
        justify-content: space-between;
        padding: var(--sp-4) var(--sp-4);
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        font-size: var(--step-1);
    }
    .nav__link:hover { background: transparent; }

    /* The active marker becomes a left bar — an underscore reads as a divider
       once the items are stacked.                                          */
    .nav__link[aria-current="page"]::after {
        left: 0;
        right: auto;
        top: var(--sp-3);
        bottom: var(--sp-3);
        width: 3px;
        height: auto;
    }

    .nav__dropdown {
        position: static;
        min-width: 0;
        padding: 0 0 var(--sp-3) var(--sp-5);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .nav__item--has-children.is-open .nav__dropdown { display: block; }
    .nav__dropdown a { padding: var(--sp-3); }

    .nav__cta { margin: var(--sp-5) 0 0; }
    .nav__cta .btn { width: 100%; justify-content: center; }

    /* Backdrop behind the open drawer. */
    .nav-scrim {
        position: fixed;
        inset: var(--header-h) 0 0;
        z-index: 90;
        background: rgba(11, 26, 34, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--dur) var(--ease), visibility var(--dur);
    }
    .nav-scrim.is-open { opacity: 1; visibility: visible; }
}

/* Locked while the drawer is open, so the page behind cannot scroll. */
body.nav-open { overflow: hidden; }

@media (min-width: 901px) {
    .nav-scrim { display: none; }
    body.nav-open { overflow: auto; }
}

/* --- 760: two-up grids become one-up -------------------------------------- */
@media (max-width: 760px) {
    :root {
        --header-h: 66px;
        --section-spacing: var(--sp-7);
    }

    .brand img { height: 30px; }

    .split,
    .contact-grid,
    .grid--2 { grid-template-columns: minmax(0, 1fr); }
    .split--reverse .split__media { order: 0; }

    .framed::before { inset: -10px -10px 10px 10px; }

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

    .callout { flex-direction: column; align-items: flex-start; padding: var(--sp-6); }
    .callout .btn-row { width: 100%; }

    .panel { padding: var(--sp-6); }

    .register { grid-template-columns: minmax(0, 1fr); }
    .register__item { border-left: 0; border-top: 1px solid var(--border-color); }
    .register__item:first-child { border-top: 0; }

    .site-footer__main {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-7);
        padding-block: var(--sp-8) var(--sp-7);
    }
    .site-footer__bar { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

    .form-check { grid-template-columns: minmax(0, 1fr); }
    .form-check .btn { width: 100%; justify-content: center; }

    .cookie-note { gap: var(--sp-3); padding: var(--sp-4); }
    .cookie-note .btn { width: 100%; justify-content: center; }
    .to-top { right: var(--sp-4); bottom: var(--sp-4); }
}

/* --- 560: fleet cards go one-up, tally tightens --------------------------- */
@media (max-width: 560px) {
    :root { --gutter: 18px; }

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

    /* One-up cards get taller media so the vehicle still reads at width. */
    .vehicle-card__media { aspect-ratio: 16 / 10; }

    .tally { padding: var(--sp-5); }
    .tally__grid { gap: 6px 0; }
    .tally__unit { width: 6px; height: 21px; }
    .tally__count { font-size: 2.6rem; }

    .hero .btn-row { margin-top: var(--sp-6); }
    .btn-row .btn { flex: 1 1 auto; justify-content: center; }

    .contact-list li,
    .feature-list li { gap: var(--sp-3); }
}

/* --- 400: smallest supported width ---------------------------------------- */
@media (max-width: 400px) {
    :root { --gutter: 16px; }

    .tally { padding: var(--sp-4); }
    .tally__grid { gap: 5px 0; }
    .tally__unit { width: 5px; height: 18px; }
    .tally__count { font-size: 2.3rem; }
    .tally__figure { gap: var(--sp-2); }

    .service-card,
    .panel { padding: var(--sp-5); }

    .vehicle-card__body { padding: var(--sp-4); }

    .footer-contact dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .footer-contact dt { margin-top: var(--sp-2); }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
    .site-header, .nav, .nav-toggle, .to-top, .cookie-note, .hero__media, .page-hero__media { display: none !important; }
    .hero, .page-hero, .on-dark, .site-footer { background: #fff !important; color: #000 !important; }
    .on-dark h1, .on-dark h2, .on-dark h3, .on-dark p, .on-dark li { color: #000 !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}