/* Breakpoint overrides. Loaded last so it wins. */


/* ---- Tablet and below: off-canvas nav ------------------------------------ */

@media (max-width: 991px) {
  :root {
    /* The reference keeps 120px section padding at every width — it does not
       compress vertical rhythm on small screens. */
    --rnx-header-h: 85px;
    /* Hero headline drops 90px -> 42px below 992, the one type size that
       changes at all. */
    --rnx-size-hero: 42px;
  }

  /* Below 992 the fleet carousel stops bleeding off the edges and sits at the
     container width, one card at a time. Declared after the :root block above
     so these win, and stepped to match Bootstrap's 540 / 720 containers. */
  .fleet-swiper,
  .fleet-swiper .swiper-slide {
    --rnx-slide-w: calc(100vw - 24px);
  }

  .nav-toggle {
    display: block;
    order: 3;
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .nav-toggle__open {
    display: none;
  }

  body.nav-open .nav-toggle__close {
    display: block;
  }

  /* The panel underneath is white, and a hero slide can be light too, so the
     close control has to leave the white it uses over the dark hero. */
  body.nav-open .nav-toggle {
    color: var(--rnx-ink);
  }

  .site-nav {
    position: fixed;
    inset: var(--rnx-header-h) 0 0;
    z-index: 99;
    margin-left: 0;
    padding: 24px 24px 60px;
    background: var(--rnx-white);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: all var(--rnx-dur) var(--rnx-ease);
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-list {
    display: block;
  }

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

  .nav-link,
  .site-header.is-stuck .nav-link {
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    color: var(--rnx-ink);
  }

  /* Static, stacked panels instead of floating dropdowns. */
  .dropdown,
  .has-dropdown--wide .dropdown,
  .nav-item:nth-last-child(-n + 3) .dropdown {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 14px 14px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .has-dropdown.is-open > .dropdown {
    display: block;
  }

  .has-dropdown:hover > .dropdown:not(.is-open) {
    display: none;
  }

  .has-dropdown.is-open > .dropdown {
    display: block;
  }

  .dropdown-col + .dropdown-col {
    margin-top: 14px;
  }

  .header-help {
    display: none;
  }

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

  .footer-contact__item {
    border-left: 0;
    border-top: 1px solid var(--rnx-rule-dark);
  }

  .footer-contact__item:first-child {
    border-top: 0;
  }

  .offset-lg-1 {
    margin-left: 0;
  }
}

/* ---- Homepage sections --------------------------------------------------- */

@media (max-width: 991px) {
  /* One scrolling row, not a wrapping grid. The reference runs this band as a
     draggable carousel — 16 logos on a single line showing two at a time on a
     phone — and a grid of seven badges instead stacked into three ragged rows
     with one marque stranded on the last. Scroll snapping gives the same feel
     without a second carousel library. */
  .clients__grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .clients__grid::-webkit-scrollbar {
    display: none;
  }

  .clients__grid > li {
    flex: 0 0 33.333%;
    scroll-snap-align: center;
  }

  /* Used by the car-types inner page, which stays a grid. */
  .car-types__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stacked columns need the reference's 30px gap between them. */
  .about .row > [class*="col-"]:not(:last-child) {
    margin-bottom: 30px;
  }

  /* The reference spaces stacked process cards 30px apart, not 40. */
  .process__row {
    row-gap: 30px;
  }

  /* Below 992 the reference drops the panel's overlap and inset entirely: it
     sits flush under the photo, full width, stacked, with 30px 20px padding. */
  .car-card__con {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    padding: 30px 20px;
    border-radius: 0 0 var(--rnx-radius-card-all) var(--rnx-radius-card-all);
  }

  .car-card__main,
  .car-card__book {
    flex: 1 1 auto;
    width: 100%;
    padding: 0;
  }

  .car-card__book {
    justify-content: space-between;
  }

  .car-card__price {
    text-align: right;
  }

  /* The booking bar leaves the 60px pill for a 20px card and wraps to three
     per row; below 768 it stacks one per row. */
  .booking-form {
    flex-wrap: wrap;
    padding: 15px 15px 0;
    border-radius: var(--rnx-radius-card-all);
  }

  .booking-field {
    flex: 0 0 calc(100% / 3);
    padding: 0 6px;
    margin-bottom: 15px;
    border-left: 0;
    border-bottom: 1px solid var(--rnx-rule);
  }

  .booking-submit {
    flex: 0 0 calc(100% / 3);
    min-width: 0;
    margin: 0 0 15px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .fleet-swiper,
  .fleet-swiper .swiper-slide {
    --rnx-slide-w: 516px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .fleet-swiper,
  .fleet-swiper .swiper-slide {
    --rnx-slide-w: 696px;
  }
}

@media (max-width: 991px) {
  /* The fleet carousel arrows sit on top of the car photo once the slide is
     narrow, so they go away on touch — the reference does the same with its
     own carousel nav at this size. Swiper's touch gestures and the autoplay
     are untouched, so the carousel still advances by swipe. */
  .fleet-nav {
    display: none;
  }

  /* iOS Safari zooms the whole page in when you focus a control whose text is
     under 16px, and does not zoom back out afterwards. Every field here was
     14px, so tapping the booking bar or any contact field threw the layout.
     16px is the threshold, not a design preference.

     The component selectors below are listed explicitly because a bare
     `input` rule loses to `.contact-form input` on specificity — a media query
     adds none, so being later in the cascade is not enough. */
  input,
  select,
  textarea,
  .contact-form input,
  .contact-form textarea,
  .booking-field input,
  .booking-field select {
    font-size: 16px;
  }

  /* Touch targets. Both of these landed at 42px, just under the 44px that
     Apple and the WCAG target-size guidance both settle on. */
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .car-filter button {
    min-height: 44px;
  }

  /* The rate table is 720px wide and scrolls inside its own wrapper on a
     phone. Pin the car name so it stays put while the rate columns scroll —
     without it you reach "per month" with no idea which car the row is. The
     shadow on the trailing edge is what tells you the rest is still moving. */
  .rate-table tbody th,
  .rate-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    box-shadow: 1px 0 0 var(--rnx-rule);
  }
}

@media (max-width: 767px) {
  /* A phone hero is about 0.44:1 while the studio shots are 1.60:1, so `cover`
     discarded roughly 72% of the width — you saw a door and a wheel, not a
     car. Swap in a portrait version that keeps the whole car and extends the
     studio backdrop upward. Any car without one falls back to the landscape
     image, so this is safe for the whole fleet. */
  .hero-slide {
    background-image: var(--hero-img-mobile, var(--hero-img));
  }

  /* Sit just above centre rather than dead centre, to lift the buttons clear
     of the car's bonnet without pinning the copy to the top of the screen.
     With align-items:center the flex item *and its margins* are centred, so a
     bottom margin raises the visible content by half of it — 96px here lifts
     it 48px. */
  .hero-slide__copy {
    margin-bottom: 96px;
  }

  /* Keep the name and the rate on one line while they fit — that is what the
     reference does — but stop the name from being squeezed and wrapping
     mid-phrase while the rate sits beside it. Not shrinking means the rate
     drops to the next line instead, which is the readable failure. */
  .hero-slide__car {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .booking-field,
  .booking-submit {
    flex: 0 0 100%;
  }

  .booking-submit {
    margin-left: 6px;
    margin-right: 6px;
  }
}

/* ---- Phone --------------------------------------------------------------- */

@media (max-width: 575px) {
  /* Two marques at a time on a phone, which is what the reference shows. */
  .clients__grid > li {
    flex: 0 0 50%;
  }

  .brand-mark strong {
    font-size: 14px;
  }

  .brand-mark em {
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  /* Badges stay near full size now the band is a single scrolling row — the
     earlier reduction to 40px existed only to stop three stacked rows making
     the band taller on a phone than on a desktop. */
  .clients__grid img {
    height: calc(48px * var(--logo-scale, 1));
  }

  .car-types__grid {
    grid-template-columns: 1fr;
  }

  /* The hero buttons deliberately do NOT stretch to full width here. Measured
     against the reference at 353px, its buttons stay content-sized (~180px and
     ~164px) and simply wrap onto separate lines when they no longer fit
     side by side. Stretching them was ours, not the reference's. */

  .service-card__bar {
    margin-left: 44px;
    padding: 16px 20px;
  }

  .service-card__num {
    left: -44px;
    width: 44px;
    height: 44px;
  }

  /* Button padding stays at the desktop 14px/42px. The reference does not
     reduce it on a phone — its hero buttons measure 14px 42px at 353px — and
     narrowing ours was what made them read as a different component. */

  .footer-about {
    max-width: none;
  }
}