/* Dedicated hotel landing pages (/hotels/{slug}) — templates/single-cabo_hotel_page.html.
   The hero + booking form ([cabo_hotel_hero]) is a direct copy of the
   homepage's own hero block markup (inc/home.php), rendered through
   do_blocks() so it uses the real .cabo-home-scoped styles in home-v3.css —
   nothing here restyles it. This file only covers what's unique to hotel
   pages: the price-card grid, the "hotel not in catalog" fallback, and the
   post_content (gallery/description) area below the hero. */

/* One deliberate exception: home-v3.css centers the hero-grid's two
   columns against each other (align-items: center). On the homepage both
   columns are close enough in height that this looks fine. Here the copy
   column (eyebrow/title/lead/checklist) is much shorter than the full
   multi-step booking widget next to it, so centering it against that much
   taller column pushes it down into empty space below the fold instead of
   sitting level with the top of the form. Top-aligning both columns
   removes that dead space and keeps the title where a visitor actually
   sees it first. */
.cabo-hotel-page .cabo-home__hero-grid {
  align-items: start;
}

/* Hotel photo, shown once per breakpoint — not the same element repositioned,
   since the hero copy and the price-card section are separate blocks that
   can't be reordered across each other with plain CSS. Desktop shows it in
   the hero copy column, under the title, next to the form. Mobile hides
   that copy and instead shows a second copy of the same image after the
   price cards, so cards stay the first thing a mobile visitor sees below
   the fold — [cabo_hotel_booking_cta] renders that second <img>. */
.cabo-hotel-hero__image {
  border-radius: 20px;
  display: block;
  margin: 20px 0 24px;
  max-width: 420px;
  width: 100%;
}

.cabo-hotel-cta__mobile-image {
  display: none;
}

/* Mobile-only price teaser between the checklist and the full booking form
   (see the note on $price_teaser_html in cabo_airportshuttles_booking_render_hotel_hero()).
   Hidden by default — only shown under the same 800px breakpoint the hero
   image swap uses, since desktop already reaches the price cards without a
   long scroll. scroll-margin-top keeps the fixed pill header from covering
   the cards when the anchor link jumps down to them. */
.cabo-hotel-hero__price-teaser {
  display: none;
}

#pricing {
  scroll-margin-top: 130px;
}

@media (max-width: 800px) {
  .cabo-hotel-hero__price-teaser {
    background: var(--cabo-site-orange);
    border-radius: 999px;
    color: var(--cabo-site-white);
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin: 20px 0 0;
    padding: 12px 18px;
    text-align: center;
    text-decoration: none;
  }
}

/* Matches home-v3.css's own .cabo-home__hero-grid breakpoint
   (max-width: 800px) — the point where it stacks to one column — so the
   image swap lines up exactly with when the hero copy stops sitting next
   to the form. */
@media (max-width: 800px) {
  .cabo-hotel-hero__image {
    display: none;
  }

  .cabo-hotel-cta__mobile-image {
    border-radius: 20px;
    display: block;
    margin-top: 32px;
    width: 100%;
  }
}

/* The service-selector cards (Private/Shared/Big Groups) render taller
   here than on the homepage (measured: 128px vs 56px per card — same
   width, same grid-template-columns, same grid-column:auto on Private and
   Shared), and at that height the browser's auto-placement stacks Private
   and Shared in the same column across two rows instead of side by side,
   leaving column two empty. Forcing each card's row/column explicitly
   removes the ambiguity auto-placement was resolving unpredictably —
   Private and Shared always render side by side on row one, Big Groups
   always spans row two, regardless of card height. */
.cabo-hotel-page .cabo-booking__choice--service-private {
  grid-row: 1;
  grid-column: 1;
}

.cabo-hotel-page .cabo-booking__choice--service-shared {
  grid-row: 1;
  grid-column: 2;
}

.cabo-hotel-page .cabo-booking__choice--service-big_groups {
  grid-row: 2;
  grid-column: 1 / -1;
}

/* The homepage wraps its whole content in .cabo-home, which resets
   box-sizing to border-box on every descendant (assets/home-v3.css). The
   hero itself is wrapped in .cabo-home too (see [cabo_hotel_hero]), but the
   price cards and post_content below it are not, so this repeats the same
   reset for the rest of the page. */
.cabo-hotel-page__body,
.cabo-hotel-page__body *,
.cabo-hotel-page__body *::before,
.cabo-hotel-page__body *::after {
  box-sizing: border-box;
}

/* Same fix home-v3.css already applies to .cabo-site-main (with the same
   explanation there): core's default block-group spacing gives <main> a
   24px margin-top, meant to sit below an in-flow header. The site header
   is fixed/overlaid here too (site-shell.css), so that margin just shows
   up as a bare white sliver above the hero instead of pushing anything
   down — the hero needs to start flush at the very top of the viewport. */
.cabo-hotel-page {
  margin-top: 0;
}

/* Deliberately no padding on .cabo-hotel-page itself — [cabo_hotel_hero] is
   a full-bleed (alignfull) section and needs to sit flush against the
   header exactly like the homepage's own hero does. Padding for the price
   cards and post_content below it lives on .cabo-hotel-page__body instead,
   matching .cabo-home__inner's own max-width so that section lines up with
   the hero's content width above it. */
.cabo-hotel-page__body {
  margin-inline: auto;
  max-width: var(--cabo-site-content);
  padding-block: clamp(32px, 5vw, 56px) clamp(56px, 7vw, 96px);
  padding-inline: clamp(16px, 4vw, 64px);
}

.cabo-hotel-cta {
  margin: 0 0 40px;
}

.cabo-hotel-cta__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cabo-hotel-cta__card {
  background: var(--cabo-site-white);
  border: 1px solid var(--cabo-site-line);
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(5, 5, 5, 0.16);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px;
  position: relative;
}

.cabo-hotel-cta__card--best {
  border: 2px solid var(--cabo-site-orange);
  box-shadow: 0 20px 40px rgba(11, 23, 29, 0.22);
}

.cabo-hotel-cta__badge {
  background: var(--cabo-site-orange);
  border-radius: 999px;
  color: var(--cabo-site-white);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  position: absolute;
  right: 14px;
  text-transform: uppercase;
  top: -12px;
}

.cabo-hotel-cta__hotel {
  color: var(--cabo-site-muted);
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}

.cabo-hotel-cta__title {
  color: var(--cabo-site-ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  margin: 2px 0 8px;
}

.cabo-hotel-cta__amount {
  color: var(--cabo-site-orange);
  font-size: 24px;
  font-weight: 850;
  margin: 0;
}

.cabo-hotel-cta__caption {
  color: var(--cabo-site-muted);
  font-size: 12px;
  margin: 0 0 6px;
}

.cabo-hotel-cta__blurb {
  color: var(--cabo-site-muted);
  flex-grow: 1;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.cabo-hotel-cta__book {
  background: var(--cabo-site-orange);
  border: 0;
  border-radius: 999px;
  color: var(--cabo-site-white);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  margin-top: auto;
  padding: 12px 18px;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.cabo-hotel-cta__book:hover,
.cabo-hotel-cta__book:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.cabo-hotel-cta--unavailable {
  background: #fff4e8;
  border: 1px solid #ffc184;
  border-radius: 20px;
  margin: 0 0 40px;
  padding: clamp(20px, 3vw, 32px);
}

.cabo-hotel-cta--unavailable p {
  color: #8a4b00;
  font-weight: 600;
  margin: 0;
}

.cabo-hotel-cta--unavailable a {
  color: #8a4b00;
  text-decoration: underline;
}

.cabo-hotel-page__content {
  color: var(--cabo-site-ink);
  font-size: 16px;
  line-height: 1.7;
  max-width: 760px;
}

.cabo-hotel-page__content p {
  margin: 0 0 18px;
}

.cabo-hotel-page__content figure.wp-block-gallery {
  margin: 0 0 24px;
}

/* [cabo-airportshuttles/hotel-gallery] pattern — a card-style photo grid
   the admin inserts into the page content, then fills with real images via
   the native Gallery block UI (add/remove/reorder is all native Gutenberg
   behavior, nothing custom to maintain here). */
.cabo-hotel-gallery {
  margin: 40px 0;
  max-width: none;
}

.cabo-hotel-gallery__grid.wp-block-gallery {
  gap: 16px;
}

.cabo-hotel-gallery__grid.wp-block-gallery .wp-block-image {
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(11, 23, 29, 0.14);
  overflow: hidden;
}

.cabo-hotel-gallery__grid.wp-block-gallery .wp-block-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .cabo-hotel-cta__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cabo-hotel-cta__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cabo-hotel-cta__badge {
    right: auto;
    left: 14px;
  }
}