/**
 * Promo embed layout (BLK-01). Strip/carousel track chrome; card sizing stays in skins.
 *
 * Breakpoints: lg 992px (strip uses skin cols-* at 992px+).
 * Below lg, force two-up item width and beat per-skin .promo-embed--cols-* rules (higher specificity).
 */

/* Keep pre-Slick flex tracks from widening the page (block showcase / home). */
.promo-embed--carousel .promo-embed__track {
  max-width: 100%;
}

.promo-embed--carousel .promo-embed__track:not(.slick-initialized) {
  overflow-x: auto;
  overflow-y: visible;
}

/* Equal-height cards in every layout. Selectors carry `html body` so they outrank
   per-skin `body.skin-x ... .slick-slide > div { height: auto !important }` rules. */
html body .promo-embed.promo-embed--grid .promo-embed__grid > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
html body .promo-embed.promo-embed--grid .promo-embed__grid > [class*="col-"] > .card {
  flex: 1 1 auto;
  width: 100%;
}
html body .promo-embed .promo-embed__track:not(.slick-initialized) > .promo-embed__item,
html body .promo-embed .promo-embed__track.slick-initialized .slick-track {
  display: flex !important;
  align-items: stretch !important;
}
html body .promo-embed .promo-embed__track.slick-initialized .slick-slide {
  float: none !important;
  height: auto !important;
  display: flex !important;
}
html body .promo-embed .promo-embed__track.slick-initialized .slick-slide > div,
html body .promo-embed .promo-embed__track.slick-initialized .slick-slide .promo-embed__item {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
}
html body .promo-embed .promo-embed__track .promo-embed__item > .card {
  flex: 1 1 auto;
  height: 100% !important;
  width: 100%;
}

/* Breathing room above the horizontal scrollbar on strip tracks. */
.promo-embed--strip .promo-embed__track {
  padding-bottom: 0.65rem;
  scrollbar-gutter: stable;
}

/* Themed scrollbar. Colours come from the Theme Options tokens, so global colour
   tweaks carry through. Skins re-point the --dv-scrollbar-* aliases, not the colours. */
:root {
  --dv-scrollbar-track: var(--dv-color-border);
  --dv-scrollbar-thumb: var(--dv-color-muted-ink);
  --dv-scrollbar-thumb-hover: var(--dv-color-heading);
  --dv-scrollbar-size: 6px;
  --dv-scrollbar-radius: 999px;
}
.promo-embed__track {
  scrollbar-width: thin;
  scrollbar-color: var(--dv-scrollbar-thumb) var(--dv-scrollbar-track);
}
.promo-embed__track:hover {
  scrollbar-color: var(--dv-scrollbar-thumb-hover) var(--dv-scrollbar-track);
}
/* Safari: no scrollbar-color, so style the WebKit pseudo-elements instead. */
@supports not (scrollbar-color: auto) {
  .promo-embed__track::-webkit-scrollbar {
    height: var(--dv-scrollbar-size);
  }
  .promo-embed__track::-webkit-scrollbar-track {
    background: var(--dv-scrollbar-track);
    border-radius: var(--dv-scrollbar-radius);
  }
  .promo-embed__track::-webkit-scrollbar-thumb {
    background: var(--dv-scrollbar-thumb);
    border-radius: var(--dv-scrollbar-radius);
  }
  .promo-embed__track::-webkit-scrollbar-thumb:hover {
    background: var(--dv-scrollbar-thumb-hover);
  }
}

@media (max-width: 991.98px) {
  .promo-embed--strip .promo-embed__item,
  .promo-embed--strip.promo-embed--cols-2 .promo-embed__item,
  .promo-embed--strip.promo-embed--cols-3 .promo-embed__item,
  .promo-embed--strip.promo-embed--cols-4 .promo-embed__item {
    flex: 0 0 auto;
    width: min(16rem, calc((100% - 1.25rem) / 2));
    max-width: none;
  }
}