/* DAR Matching System 10.11.4.11
 * Single media frame stabilization.
 *
 * Loaded only on property single pages and intentionally last. It freezes the
 * public image pipeline visually: the frame owns the height; img never pushes
 * layout. Selectors are scoped to the single surface but do not depend only on
 * data-dar-ms-current-view, because older route contexts can vary.
 */

.dar-ms-portal-single [data-dar-ms-single-media-frame="1"],
.dar-ms-portal-single .dar-ms-portal-single__gallery-main,
[data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] [data-dar-ms-single-media-frame="1"] {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: clamp(390px, 42vw, 560px) !important;
  min-height: 0 !important;
  max-height: 560px !important;
  overflow: hidden !important;
  border-radius: 24px;
  background: #d8d5cf;
  isolation: isolate;
}

.dar-ms-portal-single [data-dar-ms-single-media-frame="1"] > img,
.dar-ms-portal-single [data-dar-ms-single-media="1"],
.dar-ms-portal-single .dar-ms-portal-single__gallery-main > img,
[data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] [data-dar-ms-single-media-frame="1"] > img,
[data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] [data-dar-ms-single-media="1"] {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Keep overlays above the absolutely positioned image. */
.dar-ms-portal-single [data-dar-ms-single-media-frame="1"] .dar-ms-portal-single__state,
.dar-ms-portal-single [data-dar-ms-single-media-frame="1"] .dar-ms-portal-single__gallery-nav,
.dar-ms-portal-single [data-dar-ms-single-media-frame="1"] .dar-ms-portal-single__gallery-count {
  position: absolute;
  z-index: 2;
}

.dar-ms-portal-single .dar-ms-portal-single__thumb,
[data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.dar-ms-portal-single .dar-ms-portal-single__thumb img,
[data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 1100px) {
  .dar-ms-portal-single [data-dar-ms-single-media-frame="1"],
  .dar-ms-portal-single .dar-ms-portal-single__gallery-main,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] [data-dar-ms-single-media-frame="1"] {
    height: clamp(330px, 56vw, 500px) !important;
    max-height: 500px !important;
  }
}

@media (max-width: 640px) {
  .dar-ms-portal-single [data-dar-ms-single-media-frame="1"],
  .dar-ms-portal-single .dar-ms-portal-single__gallery-main,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] [data-dar-ms-single-media-frame="1"] {
    height: clamp(260px, 58vh, 420px) !important;
    max-height: 420px !important;
    border-radius: 20px;
  }
}


/* DAR_MS 13.1.4
 * Mobile hero/gallery recovery.
 *
 * Ownership:
 * - single mobile gallery frame height
 * - mobile thumbs rail/grid behavior
 * - hero/gallery ordering inside the single hero on handheld layouts
 *
 * This file is loaded after portal-responsive.css on single pages, so it owns
 * the mobile gallery contract and prevents generic responsive rules from
 * degrading the media frame.
 */
@media (max-width: 900px) {
  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__hero[data-dar-ms-single-hero="1"],
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__hero[data-dar-ms-single-hero="1"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border-radius: 28px;
    align-items: start;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__gallery[data-dar-ms-single-gallery="1"],
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__gallery[data-dar-ms-single-gallery="1"] {
    order: 1;
    gap: 10px;
    min-width: 0;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__hero-copy,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__hero-copy {
    order: 2;
    min-width: 0;
    gap: 14px;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] [data-dar-ms-single-media-frame="1"],
  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__gallery-main,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] [data-dar-ms-single-media-frame="1"],
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__gallery-main {
    height: clamp(300px, 62vw, 420px) !important;
    max-height: none !important;
    border-radius: 22px;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__gallery-nav,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__gallery-nav {
    width: 42px;
    height: 42px;
    font-size: 24px;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__state,
  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__gallery-count,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__state,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__gallery-count {
    inset-block-start: 12px;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__gallery-count,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__gallery-count {
    inset-inline-end: 12px;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__state,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__state {
    inset-inline-start: 12px;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__gallery-nav--prev,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__gallery-nav--prev {
    inset-inline-start: 12px;
    inset-block-end: 12px;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__gallery-nav--next,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__gallery-nav--next {
    inset-inline-end: 12px;
    inset-block-end: 12px;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__thumbs[data-gallery-thumbs],
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__thumbs[data-gallery-thumbs] {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    overflow-x: visible;
    padding-block-end: 0;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__thumb,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__thumb {
    min-width: 0;
    max-width: none;
    min-height: 0;
    width: 100%;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__thumb img,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__thumb img {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__hero[data-dar-ms-single-hero="1"],
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__hero[data-dar-ms-single-hero="1"] {
    gap: 12px;
    padding: 12px;
    border-radius: 24px;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] [data-dar-ms-single-media-frame="1"],
  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__gallery-main,
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] [data-dar-ms-single-media-frame="1"],
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__gallery-main {
    height: clamp(240px, 68vw, 360px) !important;
    border-radius: 20px;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__thumbs[data-gallery-thumbs],
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__thumbs[data-gallery-thumbs] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
}


/* DAR_MS 13.1.6
 * Mobile gallery simplification.
 *
 * Scope:
 * - mobile single gallery only
 * - keep counter + arrows
 * - remove the thumbnail rail for a cleaner handheld hero
 */
@media (max-width: 640px) {
  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__thumbs[data-gallery-thumbs],
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__thumbs[data-gallery-thumbs] {
    display: none !important;
  }

  .dar-ms-portal-single[data-dar-ms-single="1"] .dar-ms-portal-single__gallery[data-dar-ms-single-gallery="1"],
  [data-dar-ms-portal-root="1"][data-dar-ms-current-view="single"] .dar-ms-portal-single__gallery[data-dar-ms-single-gallery="1"] {
    gap: 0 !important;
  }
}