/* Z.H. Rentals 2.26.1 mobile-reading refinement
   Mobile-only presentation layer. Desktop/tablet above 820px intentionally unchanged. */

@media (max-width: 820px) {
  /* Shared public header / navigation: compact, thumb-friendly, less vertical drag. */
  .site-header {
    height: 72px;
    min-height: 72px;
    padding-inline: 12px;
  }
  .brand img {
    width: min(198px, 52vw);
    height: 54px;
  }
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #d5e1e9;
    border-radius: 10px;
    background: #fff;
    color: #082d59;
    line-height: 1;
  }
  .main-nav {
    top: 72px;
    left: 8px;
    right: 8px;
    gap: 0;
    padding: 8px;
    border-radius: 13px;
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav a,
  .main-nav button {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
  }
  .main-nav a + a,
  .main-nav a + button,
  .main-nav button + a {
    border-top: 1px solid #edf2f6;
  }
  .main-nav .btn,
  .main-nav .nav-cta {
    justify-content: center;
    width: 100%;
    margin-top: 5px;
    border-top: 0;
  }
  body:has(.main-nav.open) .mobile-action-bar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
  }

  /* Homepage: preserve the accepted hero, simply give it more breathing room. */
  .hero-inner {
    padding-block: 42px 68px;
    gap: 30px;
  }
  .hero h1 {
    font-size: clamp(2.7rem, 12.2vw, 3.75rem);
    line-height: .98;
  }
  .hero-sub {
    margin: 17px 0 21px;
    font-size: 1.02rem;
    line-height: 1.58;
  }
  .hero-actions {
    gap: 9px;
  }
  .trust-row {
    margin-top: 24px;
    gap: 10px 14px;
  }
  .trust-row > div {
    font-size: .82rem;
  }
  .trust-row strong {
    font-size: 1.25rem;
  }
  .hero-car-card {
    max-width: 470px;
    margin-inline: auto;
  }

  /* Quick booking / fleet: same controls, less padding and repeated vertical space. */
  .booking-card {
    padding: 18px;
    gap: 12px;
  }
  .section {
    padding: 58px 0;
  }
  .vehicle-body {
    padding: 18px;
  }
  .vehicle-topline h3 {
    font-size: 1.42rem;
  }
  .specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    margin-bottom: 14px;
    font-size: .82rem;
  }
  .vehicle-price {
    padding-top: 12px;
  }
  .vehicle-price strong {
    font-size: 1.62rem;
  }
  .vehicle-actions {
    margin-top: 12px;
  }

  /* Fixed quick actions stay useful without owning the viewport. */
  .mobile-action-bar {
    left: 8px;
    right: 8px;
    bottom: max(7px, env(safe-area-inset-bottom));
    gap: 7px;
    padding: 6px;
    border-radius: 13px;
    transition: opacity .16s ease, transform .16s ease;
  }
  .mobile-action-bar .btn {
    min-height: 42px;
    padding: 9px 11px;
    font-size: .78rem;
  }
  .site-footer {
    padding-bottom: 78px;
  }

  /* Cars: compact the mobile reading rhythm while preserving actions and imagery. */
  .cars-header-inner {
    min-height: 66px;
  }
  .cars-brand img {
    height: 42px;
    max-width: 184px;
  }
  .cars-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 9px;
  }
  .cars-nav {
    top: 66px;
    left: 8px;
    right: 8px;
    padding: 8px;
    border-radius: 12px;
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
  }
  .cars-nav > a {
    min-height: 43px;
    padding: 10px 11px;
  }
  .cars-hero {
    padding: 42px 0 44px;
  }
  .cars-hero-grid {
    gap: 28px;
  }
  .cars-hero-copy h1 {
    font-size: clamp(2.75rem, 12.3vw, 3.85rem);
    line-height: .98;
  }
  .cars-hero-lead {
    margin-top: 16px;
    font-size: .92rem;
    line-height: 1.58;
  }
  .cars-hero-actions {
    margin-top: 20px;
  }
  .cars-proof-row {
    margin-top: 25px;
    padding-top: 15px;
  }
  .cars-availability-card {
    padding: 18px;
  }
  .cars-date-form {
    margin-top: 15px;
    gap: 10px;
  }
  .cars-intro {
    padding: 48px 0 20px;
    gap: 18px;
  }
  .cars-fleet-section {
    padding-bottom: 52px;
  }

  /* Fleet shelf: on touch screens, browse vehicles horizontally instead of stacking a long list. */
  .cars-fleet-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 2px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px;
    scrollbar-width: none;
  }
  .cars-fleet-grid::-webkit-scrollbar {
    display: none;
  }
  .cars-fleet-grid > .cars-vehicle-card,
  .cars-fleet-grid > .cars-loading-card {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    scroll-snap-align: start;
  }
  .cars-card-body {
    padding: 17px;
  }
  .cars-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }
  .cars-confidence,
  .cars-help {
    padding-block: 50px;
  }

  /* Explore hub: mobile becomes an editorial shelf experience, desktop remains a grid. */
  .explore-hero {
    min-height: 560px;
    padding: 64px 0 58px;
  }
  .explore-hero h1 {
    font-size: clamp(2.75rem, 12vw, 3.75rem);
    line-height: .98;
    margin-bottom: 15px;
  }
  .explore-hero p:not(.eyebrow) {
    font-size: 1rem;
    line-height: 1.58;
  }
  .explore-hero-actions {
    margin-top: 20px;
  }
  .explore-places,
  .explore-real-life,
  .explore-attractions-band,
  .explore-directory {
    padding-top: 54px;
    padding-bottom: 54px;
  }
  .explore-place-grid,
  .explore-life-grid,
  .explore-attraction-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 0;
    gap: 14px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .explore-place-grid::-webkit-scrollbar,
  .explore-life-grid::-webkit-scrollbar,
  .explore-attraction-grid::-webkit-scrollbar,
  .guide-related-grid::-webkit-scrollbar,
  .benefit-stack::-webkit-scrollbar {
    display: none;
  }
  .explore-place-grid {
    grid-auto-columns: 84%;
  }
  .explore-life-grid {
    grid-auto-columns: 78%;
  }
  .explore-attraction-grid {
    grid-auto-columns: 79%;
  }
  .explore-place-tile,
  .explore-life-grid > a,
  .explore-attraction-grid > a {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
  .explore-place-tile {
    min-height: 245px;
  }
  .explore-life-grid a {
    padding: 19px;
  }
  .explore-attraction-grid img,
  .explore-attraction-grid > a.image-fallback:before {
    height: 165px;
  }
  .explore-attraction-grid div {
    padding: 16px;
  }
  .explore-attraction-grid p {
    display: block;
    font-size: .86rem;
  }
  .explore-directory-grid {
    grid-template-columns: 1fr 1fr;
  }
  .explore-filter-bar {
    margin-bottom: 20px;
  }

  /* Explore guides: protect an image-first zone before the long headline begins. */
  .guide-hero {
    min-height: 740px;
    align-items: flex-end;
  }
  .guide-hero-media img {
    object-position: center 38%;
  }
  .guide-hero-shade {
    background:
      linear-gradient(180deg, rgba(3,22,42,.05) 0%, rgba(3,22,42,.08) 31%, rgba(3,22,42,.54) 52%, rgba(3,22,42,.93) 72%, rgba(3,22,42,.98) 100%),
      linear-gradient(90deg, rgba(3,22,42,.10), rgba(4,28,50,.02));
  }
  .guide-hero-inner {
    width: min(100% - 28px, 1180px);
    padding-top: 300px;
    padding-bottom: 34px;
  }
  .guide-breadcrumb {
    margin-bottom: 15px;
    font-size: .72rem;
  }
  .guide-hero h1 {
    max-width: none;
    margin: 8px 0 13px;
    font-size: clamp(2.35rem, 10.8vw, 3.35rem);
    line-height: 1.01;
    letter-spacing: -.035em;
  }
  .guide-hero-lead {
    font-size: .96rem;
    line-height: 1.55;
  }
  .guide-meta {
    margin-top: 15px;
    gap: 7px;
  }
  .guide-meta span {
    padding: 6px 9px;
    font-size: .7rem;
  }
  .guide-actions {
    margin-top: 16px;
    gap: 8px;
  }
  .guide-article {
    width: min(100% - 28px, 930px);
    padding-top: 42px;
    padding-bottom: 66px;
  }
  .guide-article > section {
    padding: 30px 0;
  }
  .guide-article p,
  .guide-article li {
    font-size: .97rem;
    line-height: 1.7;
  }
  .guide-answer {
    padding: 18px 19px;
    font-size: 1.02rem !important;
  }
  .guide-related-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .guide-related-card {
    min-height: 150px;
    scroll-snap-align: start;
  }
  .guide-rental-bridge {
    margin-top: 32px;
    padding: 25px !important;
    gap: 20px;
  }

  /* Member: returning customers reach authentication sooner; benefits become a swipe shelf. */
  .member-header {
    height: 70px;
    min-height: 70px;
    padding: 0 12px;
  }
  .member-header .brand img {
    height: 42px;
    max-width: 184px;
  }
  .member-header nav.member-nav {
    top: 70px;
    left: 8px;
    right: 8px;
    padding: 8px;
    border-radius: 11px;
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
  }
  .member-hero {
    padding: 34px 0 24px;
  }
  .member-hero .hero-grid {
    gap: 20px;
  }
  .member-hero h1 {
    font-size: clamp(2.35rem, 10.8vw, 3.15rem);
    line-height: 1.02;
    margin-bottom: 13px;
  }
  .member-hero p {
    margin-block: 0;
    font-size: .98rem;
    line-height: 1.56;
  }
  .benefit-stack {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding-bottom: 5px;
    scrollbar-width: none;
  }
  .benefit-stack > div {
    min-height: 88px;
    padding: 11px 12px;
    scroll-snap-align: start;
  }
  .benefit-stack b {
    font-size: 18px;
  }
  .auth-shell {
    padding: 20px 0 54px;
  }
  .auth-card {
    padding: 20px;
  }

  /* Manage Booking: utility-first hierarchy; lookup arrives sooner. */
  .mb-header-inner {
    min-height: 64px;
  }
  .mb-brand img {
    height: 40px;
    max-width: 174px;
  }
  .mb-shell {
    width: min(100% - 28px, 1180px);
    padding: 22px 0 48px;
  }
  .mb-lookup {
    gap: 18px;
  }
  .mb-lookup-copy h1 {
    font-size: clamp(2.2rem, 10.4vw, 3rem);
    line-height: 1;
  }
  .mb-lookup-copy > p:not(.mb-kicker) {
    margin: 14px 0;
    font-size: .96rem;
    line-height: 1.55;
  }
  .mb-proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 12px;
    margin-top: 16px;
  }
  .mb-proof span {
    font-size: .76rem;
  }
  .mb-lookup-card {
    padding: 17px;
    gap: 11px;
  }
  .mb-lookup-card h2 {
    font-size: 1.18rem;
  }

  /* Contact: keep every contact route visible but shorten the trip to the enquiry form. */
  .contact-page-hero {
    padding: 48px 0 52px;
  }
  .contact-page-hero-grid {
    gap: 24px;
  }
  .contact-page-hero h1 {
    font-size: clamp(2.5rem, 11.6vw, 3.35rem);
    line-height: .99;
    margin-bottom: 15px;
  }
  .contact-page-hero-copy > p:not(.eyebrow) {
    font-size: .96rem;
    line-height: 1.58;
  }
  .contact-page-hero-actions {
    margin-top: 20px;
  }
  .contact-booked-card {
    padding: 19px;
  }
  .contact-channel-wrap {
    margin-top: -14px;
  }
  .contact-channels > a,
  .contact-channels > div {
    padding: 16px 18px;
  }
  .contact-enquiry-section {
    padding: 56px 0 64px;
  }
  .contact-enquiry-copy {
    margin-bottom: 25px;
  }
  .contact-enquiry-copy h2 {
    font-size: clamp(2rem, 9vw, 2.75rem);
    margin-bottom: 12px;
  }
  .contact-paths {
    gap: 8px;
    margin-top: 20px;
  }
  .contact-paths > a {
    grid-template-columns: 36px 1fr;
    gap: 11px;
    padding: 12px 14px;
  }
  .contact-paths > a > span {
    width: 36px;
    height: 36px;
  }
  .contact-form-card {
    padding: 19px;
  }
  .contact-form-heading {
    margin-bottom: 17px;
  }
  .contact-form-card textarea {
    min-height: 125px;
  }

  /* Community: keep the premium look but make the empty/review state more economical. */
  .community-header {
    height: 70px;
    min-height: 70px;
    padding: 0 12px;
  }
  .community-header .brand img {
    height: 42px;
    max-width: 184px;
  }
  .community-header nav.community-nav {
    top: 70px;
    left: 8px;
    right: 8px;
    padding: 8px;
    border-radius: 11px;
  }
  .community-hero {
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .community-hero h1 {
    font-size: clamp(2.45rem, 11vw, 3.3rem);
    line-height: 1.02;
    margin-block: 10px 13px;
  }
  .community-hero p {
    font-size: .98rem;
    line-height: 1.55;
  }
  .community-switcher {
    margin-top: 20px;
    gap: 9px;
  }
  .community-switcher button {
    padding: 13px 14px;
  }
  .reviews-section,
  .gallery-section {
    min-height: 0;
    padding-top: 38px;
    padding-bottom: 58px;
  }
  .empty,
  .empty-state {
    padding: 30px 18px;
  }
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: clamp(2.55rem, 12.5vw, 3.35rem);
  }
  .hero-inner {
    padding-top: 36px;
  }
  .hero-actions .btn,
  .cars-hero-actions .cars-btn,
  .guide-actions .btn {
    width: 100%;
  }
  .vehicle-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .vehicle-actions .btn {
    width: 100%;
  }
  .cars-fleet-grid {
    grid-auto-columns: 88%;
  }
  .explore-place-grid {
    grid-auto-columns: 88%;
  }
  .explore-life-grid,
  .explore-attraction-grid {
    grid-auto-columns: 84%;
  }
  .guide-hero {
    min-height: 760px;
  }
  .guide-hero-inner {
    padding-top: 315px;
  }
  .guide-hero h1 {
    font-size: clamp(2.25rem, 10.5vw, 2.95rem);
  }
  .guide-related-grid,
  .benefit-stack {
    grid-auto-columns: 88%;
  }
  .mb-proof {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 820px) {
  .mobile-action-bar {
    transition: none;
  }
}