/* Comfort Line V71 — edge-efficient responsive layout, desktop + mobile.
   Layout-only changes. Do not alter booking logic, prices or conversion events. */
:root { --cl71-gutter: clamp(12px, 1.65vw, 28px); }
.container { width: 100%; max-width: 1540px; margin-inline: auto; padding-inline: var(--cl71-gutter); }
.section.container, .section .container { padding-inline: var(--cl71-gutter); }
.hero-inner, .service-content, .service-article, .booking-card, .booking-section,
.hero-copy, .route-guide, .route-guide-cta { min-width: 0; }
.hero-inner .booking-card, .booking-section .booking-card { width: 100%; max-width: 100%; }
/* The booking form uses the right-hand column rather than a fixed 500px slot. */
@media (min-width: 981px) {
  .hero .hero-inner { grid-template-columns: minmax(0,1fr) minmax(460px, 44%); gap: clamp(20px,2.8vw,44px); }
}
@media (min-width: 1320px) {
  .hero .hero-inner { grid-template-columns: minmax(0,1fr) minmax(560px,46%); }
}
@media (min-width: 768px) and (max-width: 980px) {
  .hero .hero-inner { grid-template-columns: minmax(0,1fr); }
  .hero .booking-card { width: min(100%, 740px); justify-self: center; }
}
/* Small but safe gutters: enlarge usable viewport without causing overflow. */
@media (max-width: 767px) {
  :root { --cl71-gutter: 10px; }
  .container, body main > section.container, body main > div.container,
  .section.container, .section .container { padding-inline: 10px !important; }
  .hero .hero-inner { width: 100%; gap: 15px; }
  .hero .booking-card, .booking-section .booking-card {
    max-width: 100%; width: 100%; padding-inline: 12px !important;
    margin-inline: 0; box-sizing: border-box;
  }
  .booking-card .grid, .booking-card .grid.two,
  .booking-card .vehicle-options { min-width: 0; max-width: 100%; }
  .booking-card input, .booking-card select, .booking-card textarea,
  .booking-card .location-search { min-width: 0; max-width: 100%; }
  .route-guide { max-width: 100%; }
  /* The inline max-width on the promotional panel should not waste phone width. */
  .conversion-panel { max-width: 100% !important; width: 100% !important;
     padding-inline: 14px !important; box-sizing: border-box; }
}
/* City-ride landing pages and associated CTAs use more horizontal space. */
.route-guide.container { max-width: 1180px; }
.route-guide-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.route-guide-cta .main-btn { width: auto; min-width: min(100%, 220px); margin-top: 0; }
.route-guide-cta .secondary-btn { width: auto; min-width: min(100%, 160px); margin-top: 0; }
@media (max-width: 460px) {
  .route-guide-cta > a { flex: 1 1 100%; text-align: center; }
}
/* Prevent images and text from widening mobile document accidentally. */
.route-guide-vehicles { grid-template-columns: repeat(2,minmax(0,1fr)); }
.route-guide-vehicles > *, .seo-cluster-nav, .seo-cluster-list { min-width: 0; }