/* Binding reference: the cards inside the portfolio's country panels.
   All hotel overview surfaces use the same width, grid and card component. */
:root {
  --hl-card-columns: 3;
  --hl-card-page-inset: clamp(24px, calc(var(--hl-layout-width, 100vw) * .058), 100px);
  --hl-card-panel-inset: 26px;
  --hl-resort-card-gap: 20px;
  --hl-card-width: calc((var(--hl-layout-width, 100vw) - 2 * var(--hl-card-page-inset) - 2 * var(--hl-card-panel-inset) - 2px - (var(--hl-card-columns) - 1) * var(--hl-resort-card-gap)) / var(--hl-card-columns));
}
@media (max-width: 1340px) { :root { --hl-card-columns: 2; } }
@media (max-width: 680px) { :root { --hl-card-page-inset: 15px; --hl-card-panel-inset: 16px; } }
@media (max-width: 620px) { :root { --hl-card-columns: 1; } }
body .hl-resort-card {
  width: var(--hl-card-width);
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 24px;
}
/* Shared card geometry must not reveal cards excluded by a filter. */
body .hl-resort-card[hidden],
body .hl-resort-card.is-hidden { display: none !important; }
body .destination-accordion__panel .hotel-grid,
body .destination-panel .hotel-grid,
body .portfolio-layout .hotel-grid,
body .openings-grid {
  display: grid;
  grid-template-columns: repeat(var(--hl-card-columns), minmax(0, var(--hl-card-width))) !important;
  gap: var(--hl-resort-card-gap) !important;
  justify-content: start;
  align-items: stretch;
}
body .hotel-grid.list-view { grid-template-columns: minmax(0, var(--hl-card-width)) !important; }
.results-shell {
  width: calc(100% - 2 * var(--hl-card-page-inset));
  max-width: none;
}
.home-page.hl-content .resorts .resort-grid { gap: var(--hl-resort-card-gap) !important; }
.home-page.hl-content .resorts .resort-grid > .hl-resort-card {
  flex: 0 0 var(--hl-card-width) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  scroll-snap-align: start;
}
/* Keep the same photo, text and touch targets as the shared portfolio card. */
body .hl-resort-card__visual { width: 100% !important; flex: 0 0 auto !important; height: auto !important; aspect-ratio: 16 / 10; }
@media (max-width: 720px) {
  body .hl-resort-card__visual { aspect-ratio: 4 / 3; }
}

/* Phone card density: one shared rule for home, search, portfolio and favorites.
   Photo ratio stays 4:3. Only the text area and phone gutters change. */
@media (max-width: 620px) {
  :root { --hl-card-page-inset: 8px; --hl-card-panel-inset: 7px; }
  body .destination-explorer { padding-inline: 8px; }
  body .destination-accordion__panel,
  body .results-shell .destination-group .destination-panel { padding-inline: 7px; }
}
@media (max-width: 760px) {
  body .hl-resort-card { height: auto; align-self: start; }
  body .hl-resort-card__body { flex: 0 0 auto; padding: 14px !important; }
  body .hl-resort-card__meta { gap: 8px; font-size: 12px !important; line-height: 1.3 !important; letter-spacing: .04em; }
  body .hl-resort-card__stars { font-size: 14px; }
  body .hl-resort-card__luxury { margin: 9px 0 0; gap: 7px; font-size: 12px !important; line-height: 1.3 !important; letter-spacing: .06em; }
  body .hl-resort-card h3 { margin-top: 7px !important; font-size: 24px !important; line-height: 1.15 !important; overflow-wrap: anywhere; }
  body .hl-resort-card__description {
    margin-top: 8px !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  body .hl-resort-card__tags { margin: 9px 0 10px; gap: 5px; }
  body .hl-resort-card__tags span { padding: 4px 8px; font-size: 12px !important; line-height: 1.35 !important; }
  body .hl-resort-card__fact { margin-top: 0; padding: 8px 0 !important; gap: 10px; font-size: 14px !important; line-height: 1.35 !important; }
  body .hl-resort-card__fact + .hl-resort-card__fact { border-top: 0; }
  body .hl-resort-card__fact strong { min-width: 0; overflow-wrap: anywhere; }
  body .hl-resort-card__price { margin-top: 10px; }
  body .hl-resort-card__price > small { font-size: 12px !important; line-height: 1.35 !important; letter-spacing: .025em; }
  body .hl-resort-card__price-value strong { margin-top: 5px; font-size: 26px; line-height: 1.12; overflow-wrap: anywhere; }
  body .hl-resort-card__price-value span,
  body .hl-resort-card__price-empty span,
  body .hl-resort-card__price em { margin-top: 4px; font-size: 13px !important; line-height: 1.35 !important; }
  body .hl-resort-card__price-empty strong { font-size: 16px !important; }
  body .hl-resort-card__cta { margin-top: 11px; min-height: 44px !important; padding: 8px 14px; font-size: 14px !important; line-height: 1.3; }
  .home-page.hl-content .resorts .resort-grid { align-items: flex-start; scroll-snap-type: x mandatory; overflow-y: hidden; overscroll-behavior-y: auto; }
}
/* Touch scrolling must not trigger sticky hover lifts or image zoom. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  body .hl-resort-card, body .hl-resort-card__visual img { transition: none; }
  body .hl-resort-card:hover, body .hl-resort-card:hover .hl-resort-card__visual img { transform: none; }
}

/* Browser-owned vertical scrolling, compositor-only horizontal dragging.
   Applied only after the shared gesture controller is ready. */
@media (max-width: 760px), (max-width: 1050px) and (pointer: coarse) and (orientation: landscape) {
  body [data-hl-card-pager="ready"] {
    touch-action: pan-y pinch-zoom;
    overflow-y: hidden;
    overflow-anchor: none;
  }
  body [data-hl-card-pager="ready"],
  .home-page.hl-content .resorts .resort-grid[data-hl-card-pager="ready"] {
    overflow-x: hidden;
    scroll-snap-type: none;
    scroll-behavior: auto;
    overscroll-behavior-y: auto;
  }
  body [data-hl-card-pager="ready"] > .hl-resort-card { scroll-snap-align: none start; scroll-snap-stop: always; }
}