/* Destination detail: wayfinding, readable facts and native room dialogs. */
.resort-page { --border: rgba(0,0,0,.12); --resort-header-height: 90px; --resort-nav-height: 56px; }
.resort-page .container, .resort-page .wrapper { max-width: 1240px; width: 100%; padding-inline: 24px; margin-inline: auto; }
.resort-page > section[id] { scroll-margin-top: calc(var(--resort-header-height) + var(--resort-nav-height) + 20px); }
.resort-nav-shell { position: sticky; top: var(--resort-header-height); z-index: 40; background: var(--white); border-bottom: 1px solid var(--border); }
.resort-nav { display: flex; align-items: center; gap: 28px; overflow-x: auto; scrollbar-width: thin; }
.resort-nav a { display: inline-flex; flex-shrink: 0; align-items: center; min-height: 56px; padding: 10px 0; color: var(--dark-green); font-size: 16px; line-height: 1.5; }
.resort-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.resort-page a:focus-visible, .resort-page button:focus-visible, .resort-page [tabindex="0"]:focus-visible { outline: 2px solid var(--dark-green); outline-offset: 3px; }
.resort-nav a:focus-visible { outline-offset: -3px; }
.resort-page .about-dest .wrapper { max-width: 808px; }
.resort-page .about-dest p { font-size: 19px; line-height: 1.65; }
.resort-page .about-dest h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 400; line-height: 1.2; }
.resort-page .section-title { text-align: left; }
.resort-page .villa-list, .resort-page .dining-list, .resort-page .wellbeing-list { margin-top: 28px; gap: 40px; }
.resort-page .villa-card, .resort-page .dining-card, .resort-page .wellbeing-card { min-width: 0; }
.resort-page .villa-card__content h3, .resort-page .dining-card__content h3, .resort-page .wellbeing-card__content h3 { font-size: 28px; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 14px; }
.resort-page .villa-card__subtitle { font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--muted); margin-bottom: 16px; }
.resort-page .villa-card__copy, .resort-page .dining-card__copy, .resort-page .wellbeing-card__copy { font-size: 17px; line-height: 1.65; margin-bottom: 20px; }
.resort-page .villa-card__copy p, .resort-page .dining-card__copy p, .resort-page .wellbeing-card__copy p { font-size: inherit; line-height: inherit; }
.resort-page .villa-card__facts { font-size: 15px; line-height: 1.5; }
.resort-page .villa-card__fact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-color: var(--border); }
.resort-page .villa-card__fact dd { text-align: right; }
.resort-page .villa-card__view-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; padding: 8px 0; font: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 5px; }
.resort-carousel-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.resort-carousel-tools[hidden] { display: none; }
.resort-carousel-tools > span { font-size: 14px; color: var(--muted); }
.resort-carousel-tools > div { display: flex; gap: 8px; }
.resort-carousel-tools button { width: 44px; height: 44px; border: 1px solid var(--dark-green); border-radius: 50%; background: var(--white); color: var(--dark-green); font: inherit; cursor: pointer; }
.resort-carousel-tools button:disabled { opacity: .35; cursor: default; }
.resort-page .facilities-modal { padding: 0; width: min(600px, calc(100% - 32px)); max-width: 600px; max-height: 80vh; max-height: 80svh; color: var(--dark-green); overflow-y: auto; }
.resort-page .facilities-modal__header { position: sticky; top: 0; z-index: 1; background: var(--white); padding: 20px 24px; margin: 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.resort-page .facilities-modal__header h3 { margin: 0; font-size: 22px; font-weight: 400; line-height: 1.3; }
.resort-page .facilities-modal__close { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: -6px -8px 0 0; }
.resort-page .facilities-modal__list { display: block; list-style: disc; margin: 0; padding: 20px 24px 24px 44px; font-size: 17px; line-height: 1.6; max-height: none; overflow: visible; }
.resort-page .facilities-modal__list li { padding: 0 0 14px 2px; }
.resort-page .facilities-modal__list li:last-child { padding-bottom: 0; }
@media (max-width: 1024px) {
  .resort-nav { gap: 24px; }
  .resort-page .container.mob-slide { padding-inline: 24px; }
  .resort-page .villa-list, .resort-page .dining-list, .resort-page .wellbeing-list { gap: 20px; padding: 0 0 12px; scroll-padding-inline: 0; }
  .resort-page .villa-card, .resort-page .dining-card, .resort-page .wellbeing-card { flex: 0 0 88%; min-width: 0; }
}
@media (max-width: 600px) {
  .resort-page section { padding-block: 40px; }
  .resort-page .about-dest p { font-size: 18px; }
  .resort-page .villa-card__content h3, .resort-page .dining-card__content h3, .resort-page .wellbeing-card__content h3 { font-size: 25px; }
  .resort-page .facilities-modal__header { padding: 18px 20px; }
  .resort-page .facilities-modal__header h3 { font-size: 20px; }
}

/* Mobile gallery: unobstructed photography, a next-image preview and one control row. */
.resort-gallery-mobile-controls { display: none; }
@media (max-width: 800px) {
  .resort-page #gallery { width: calc(100% - 24px); margin-left: 24px; }
  .resort-page #gallery .glide__arrows,
  .resort-page #gallery .glide__bullets { display: none; }
  .resort-gallery-mobile-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px 0 0; }
  .resort-gallery-counter { color: var(--muted); font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
  .resort-gallery-buttons { display: flex; gap: 8px; }
  .resort-gallery-buttons button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--dark-green); border-radius: 50%; background: var(--white); color: var(--dark-green); font: inherit; cursor: pointer; }
  .resort-gallery-buttons button:active { background: var(--cream); }
}