/* Dark hero — every page except the home page uses this for its title
   band, same navy the footer uses, so the site reads as one consistent
   "light content between two dark bookends" shape. */
.page-hero { padding: clamp(8.5rem, 15vw, 12rem) 0 clamp(3.5rem, 8vw, 6rem); background: var(--navy); }
.page-hero .eyebrow, .tour-hero .eyebrow { color: var(--warm-white); }
.page-hero .eyebrow::before, .tour-hero .eyebrow::before { background: var(--sunset); }
.tour-hero h1, .page-hero h1 { max-width: 18ch; margin-bottom: 1rem; color: var(--sunset); }
.page-hero > .container > p.reveal { color: var(--warm-white); }
.page-hero__meta, .tour-hero__meta, .tour-chips { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.25rem; }
.badge, .tour-chip { display: inline-flex; align-items: center; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.75); font-size: var(--fs-caption); font-weight: 600; }
.tour-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.tour-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.tour-intro { font-size: clamp(1.08rem, 2vw, 1.3rem); }
.bokun-booking-panel { margin: 2.5rem 0; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--warm-white); box-shadow: 0 18px 50px rgba(14,55,61,.08); }
.bokun-booking-panel .bokunWidget { min-height: 220px; margin-top: 1.5rem; }
.highlights-grid, .tour-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.highlight-card, .tour-card { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--warm-white); }
.highlight-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.tour-details { position: sticky; top: 7rem; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--riviera-dark); color: white; }
.tour-details h2 { color: inherit; }
.tour-details dl { margin: 1.25rem 0 0; }
.tour-details div { padding: .75rem 0; border-top: 1px solid rgba(255,255,255,.18); }
.tour-details dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .72; }
.tour-details dd { margin: .2rem 0 0; }
.tour-note { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.1); color: white; }
.tour-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.tour-gallery .media-frame { aspect-ratio: 4 / 3; }
.tour-gallery .media-frame:first-child:nth-last-child(3) { grid-row: span 2; aspect-ratio: auto; }
.tour-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.tour-nav a { color: var(--riviera-dark); font-weight: 600; }
.tour-nav a:hover { color: var(--sunset); }
.tour-nav__next { text-align: right; }
.tour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tour-card { padding: 0; overflow: hidden; }
.tour-card__media { aspect-ratio: 4 / 3; border-radius: 0; }
.tour-card__body { padding: 1.4rem; }
.tour-card__meta { color: var(--sunset-dark); font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.tour-card h2 { font-size: 1.15rem; margin: .45rem 0 .75rem; }
.tour-card__link { font-weight: 600; color: var(--riviera-dark); }

.vehicle-carousel { margin-bottom: clamp(3rem, 7vw, 6rem); }
.vehicle-carousel__header { margin-bottom: 1.5rem; }
.vehicle-carousel__header h2 { margin-bottom: 0; }
.vehicle-carousel__stage { position: relative; }
.vehicle-carousel__button { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0 0 .15rem; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(10,37,64,.58); color: white; font-size: 2.5rem; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); transform: translateY(-50%); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.vehicle-carousel__button--prev { left: 1.25rem; }
.vehicle-carousel__button--next { right: 1.25rem; }
.vehicle-carousel__button:hover { background: rgba(10,37,64,.88); transform: translateY(-50%) scale(1.06); }
.vehicle-carousel__button:focus-visible, .vehicle-carousel__dot:focus-visible, .vehicle-carousel__viewport:focus-visible { outline: 3px solid var(--riviera); outline-offset: 3px; }
.vehicle-carousel__viewport { overflow: hidden; border-radius: var(--radius-lg); cursor: grab; touch-action: pan-y; user-select: none; }
.vehicle-carousel__viewport.is-dragging { cursor: grabbing; }
.vehicle-carousel__track { display: flex; }
.vehicle-slide { position: relative; flex: 0 0 100%; aspect-ratio: 16 / 8; overflow: hidden; background: var(--sand); scroll-snap-align: start; }
.vehicle-slide img { width: 100%; height: 100%; object-fit: cover; }
.vehicle-slide figcaption { position: absolute; left: 1.25rem; bottom: 1.25rem; padding: .65rem 1rem; background: rgba(10, 37, 64, .82); color: white; font-weight: 600; backdrop-filter: blur(8px); }
.vehicle-carousel__dots { display: flex; justify-content: center; gap: .55rem; margin-top: 1.25rem; }
.vehicle-carousel__dot { width: .65rem; height: .65rem; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: width var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.vehicle-carousel__dot[aria-current="true"] { width: 1.8rem; border-radius: 999px; background: var(--riviera); }

@media (max-width: 600px) {
  .vehicle-slide { aspect-ratio: 4 / 3; }
  .vehicle-slide figcaption { left: .75rem; bottom: .75rem; }
  .vehicle-carousel__button { width: 2.75rem; height: 2.75rem; font-size: 2.1rem; }
  .vehicle-carousel__button--prev { left: .65rem; }
  .vehicle-carousel__button--next { right: .65rem; }
}
@media (max-width: 900px) { .tour-layout { grid-template-columns: 1fr; } .tour-details { position: static; } .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .highlights-grid, .tour-grid, .tour-gallery { grid-template-columns: 1fr; } .tour-gallery .media-frame:first-child:nth-last-child(3) { grid-row: auto; aspect-ratio: 4 / 3; } }