/* ALCANCE Accommodations V26 responsive refinements
 * - Keep the Accommodations hero below the sticky site header while scrolling.
 * - Match Destinations-style previous/next controls.
 * - Preserve the approved four-card desktop composition.
 * - Prevent document-level horizontal overflow on tablets/phones.
 */

.mp-ac {
  position: relative;
  z-index: 0;
  isolation: isolate;
  max-width: 100%;
}

.mp-ac .mp-ac-hero {
  position: relative;
  z-index: 0 !important;
  isolation: isolate;
  max-width: 100%;
}

.mp-ac .mp-ac-main {
  position: relative;
  z-index: 0;
  max-width: 100%;
}

/* Destinations-style circular navigation: hidden at the exhausted edge,
 * white/navy at rest and orange on hover/focus. */
.mp-ac .mp-ac-carousel__control {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border: 1px solid rgba(32, 32, 33, .14);
  border-radius: 100%;
  color: #202021;
  background: #fff;
  box-shadow: none;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease, visibility .18s ease;
}

.mp-ac .mp-ac-carousel__control:hover:not(:disabled),
.mp-ac .mp-ac-carousel__control:focus-visible:not(:disabled) {
  color: #fff;
  border-color: #F47F22;
  background: #F47F22;
  outline: 0;
}

.mp-ac .mp-ac-carousel__control:disabled {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
}

.mp-ac .mp-ac-carousel__control--prev {
  left: -19px;
}

.mp-ac .mp-ac-carousel__control--next {
  right: -19px;
}

@media (max-width: 1180px) {
  .mp-ac .mp-ac-carousel__control--prev { left: -12px; }
  .mp-ac .mp-ac-carousel__control--next { right: -12px; }
}

/* Mobile/tablet containment. The screenshots showed the entire document
 * becoming horizontally scrollable, which let the page sit partially off-screen.
 * Keep intentional horizontal scrolling only inside the type-filter strip. */
@media (max-width: 820px) {
  body.mp-accommodations-page {
    overflow-x: hidden;
  }

  body.mp-accommodations-page .site,
  body.mp-accommodations-page #page,
  body.mp-accommodations-page #content,
  body.mp-accommodations-page .site-content,
  body.mp-accommodations-page .elementor,
  body.mp-accommodations-page .elementor-element,
  body.mp-accommodations-page .elementor-widget-container {
    max-width: 100%;
  }

  .mp-ac {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .mp-ac .mp-ac-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 12px;
  }

  .mp-ac .mp-ac-hero,
  .mp-ac .mp-ac-hero__inner,
  .mp-ac .mp-ac-main,
  .mp-ac .mp-ac-layout,
  .mp-ac .mp-ac-results,
  .mp-ac .mp-ac-aside,
  .mp-ac .mp-ac-grid-shell,
  .mp-ac .mp-ac-grid,
  .mp-ac .mp-ac-card,
  .mp-ac .mp-ac-card__image,
  .mp-ac .mp-ac-card__body,
  .mp-ac .mp-ac-section-head,
  .mp-ac .mp-ac-search,
  .mp-ac .mp-ac-search__field,
  .mp-ac .mp-ac-detail-grid,
  .mp-ac .mp-ac-detail-grid > section,
  .mp-ac .mp-ac-reservation-card,
  .mp-ac .mp-ac-detail-card,
  .mp-ac .mp-ac-benefits,
  .mp-ac .mp-ac-process {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mp-ac .mp-ac-search {
    width: 100%;
    overflow: visible;
  }

  .mp-ac .mp-ac-search__field,
  .mp-ac .mp-ac-search__button,
  .mp-ac .mp-ac-sort,
  .mp-ac .mp-ac-sort select {
    width: 100%;
  }

  .mp-ac .mp-ac-search input,
  .mp-ac .mp-ac-search select,
  .mp-ac .mp-ac-guests__trigger,
  .mp-ac .mp-ac-request-form input,
  .mp-ac .mp-ac-request-form select,
  .mp-ac .mp-ac-request-form textarea {
    min-width: 0;
    max-width: 100%;
  }

  .mp-ac .mp-ac-guests__panel {
    left: 0 !important;
    right: auto !important;
    width: min(310px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .mp-ac .mp-ac-type-filters {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mp-ac .mp-ac-grid-shell {
    overflow: hidden;
  }

  .mp-ac .mp-ac-carousel__control {
    z-index: 8;
  }

  .mp-ac .mp-ac-carousel__control--prev {
    left: 6px;
  }

  .mp-ac .mp-ac-carousel__control--next {
    right: 6px;
  }

  .mp-ac .mp-ac-card,
  .mp-ac .mp-ac-card__image,
  .mp-ac .mp-ac-card__image img {
    width: 100%;
  }

  .mp-ac .mp-ac-section-head {
    width: 100%;
  }

  .mp-ac .mp-ac-sort {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .mp-ac .mp-ac-sort select {
    min-width: 0 !important;
  }
}

@media (max-width: 560px) {
  .mp-ac .mp-ac-container {
    padding-inline: 8px;
  }

  .mp-ac .mp-ac-hero__inner {
    padding-top: 24px;
    padding-bottom: 16px;
  }

  .mp-ac .mp-ac-hero__copy h1 {
    font-size: clamp(28px, 8.5vw, 32px);
    line-height: 1.08;
  }

  .mp-ac .mp-ac-search {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mp-ac .mp-ac-search__field,
  .mp-ac .mp-ac-search__button {
    grid-column: auto !important;
    min-height: 54px;
  }

  .mp-ac .mp-ac-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .mp-ac .mp-ac-sort {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .mp-ac .mp-ac-type-filters {
    margin-inline: 0;
    padding-inline: 0;
  }

  .mp-ac .mp-ac-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mp-ac .mp-ac-card__image {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  .mp-ac .mp-ac-card__body {
    min-height: 0 !important;
  }

  .mp-ac .mp-ac-carousel__control {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .mp-ac .mp-ac-carousel__control--prev { left: 4px; }
  .mp-ac .mp-ac-carousel__control--next { right: 4px; }

  .mp-ac .mp-ac-guests__panel {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  .mp-ac .mp-ac-provider-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .mp-ac .mp-ac-provider-card .mp-ac-btn {
    width: 100%;
  }

  .mp-ac .mp-ac-detail-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mp-ac .mp-ac-room,
  .mp-ac .mp-ac-form-row,
  .mp-ac .mp-ac-form-row--three,
  .mp-ac .mp-ac-amenities-grid,
  .mp-ac .mp-ac-benefits,
  .mp-ac .mp-ac-process__steps,
  .mp-ac .mp-ac-aside {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}