/* ==========================================================================
   parts/horse-gallery.css — horse single gallery (parts/horse/gallery.php; JS assets/js/parts/horse-gallery.js).
   A port of live's Fluent Snippet 5 (docs/scout/r2/mrs-slider.inline.css, cascade resolved: each rule below holds
   the declarations that win on live) plus Bricks' #brxe-endrzj custom CSS, re-scoped to .horse-gallery.
   Class vocabulary kept from live (mrs-*, R2-PLAN OD13). Spec: docs/R2-PLAN.md §1.4, §4.1, GAP-FILL #3;
   docs/scout/r2/SINGLE.md §5.2 (measurements), BEHAVIOUR-R2.md §2.1.7 (breakpoints).
   Mobile-first; live's queries are max-width 520 / 767 / 768 → min-width 521 / 768 / 769 here.
   Not ported (dead on live, DI-R2-22): `@media (max-width:840px){#brxe-endrzj .mrs-main-image-wrap.is-image
   {height:unset}}` (live's JS inline height beat it; here it would cancel the server-side first height),
   .mrs-floating-tag / .mrs-floating-tooltip* / .mrs-touch-hide (no elements), .mrs-main{flex:…; gap:6px} (no effect).
   ========================================================================== */

/* Root: live .mrs-slider inside Bricks' full-width .brxe-block. The one-off colours of the snippet are declared
   here once (verbatim Snippet 5 values). */
.horse-gallery {
  --hg-border: #506d89;                              /* main stage border (verbatim Snippet 5) */
  --hg-stage-bg: var(--secondary);                   /* #0f202d: image stage + video thumb tile */
  --hg-arrow-bg: rgba(255, 255, 255, .18);           /* verbatim Snippet 5 */
  --hg-arrow-bg-hover: rgba(255, 255, 255, .3);      /* verbatim Snippet 5 */
  --hg-veil: rgba(255, 255, 255, .45);               /* inactive thumb veil (verbatim Snippet 5) */
  --hg-meta: #a8c8e8;                                /* overlay sub line + price (verbatim Snippet 5) */
  --hg-overlay: linear-gradient(to bottom, rgba(4, 46, 74, 0) 5%, var(--tertiary-trans-90) 53%);
  --hg-bar: #e0e0e0;                                 /* page bar (verbatim Snippet 5) */
  --hg-bar-active: #3b55e6;                          /* active page bar (verbatim Snippet 5) */
  --hg-play-bg: rgba(0, 0, 0, .4);                   /* play icon disc (verbatim Snippet 5) */
  --hg-play-bg-hover: rgba(255, 255, 255, .4);
  --hg-play-border: rgba(255, 255, 255, .8);

  width: 100%;                                       /* a stretched block on live (.brxe-block > .brxe-shortcode) */
  max-width: 900px;
  margin: 0 auto 32px;
  padding: 12px;                                     /* ≤768 (live) */
  border-radius: 12px;
  color: var(--white);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Stage ------------------------------------------------------------------------------------------ */
.horse-gallery .mrs-main { position: relative; }

.horse-gallery .mrs-main-image-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hg-border);
  border-radius: 16px;
  transition: height .4s ease;
}

/* The first height before (and without) JS: image 0's full-size ratio (DI-R2-16). horse-gallery.js sets live's
   rounded px height at DOMContentLoaded and then removes --hg-ratio, so the ratio never fights an inline height.
   A device that can hover shows a portrait image in a 600px stage (live's JS rule; (hover: none) keeps the ratio). */
.horse-gallery .mrs-main-image-wrap { aspect-ratio: var(--hg-ratio); }
@media not (hover: none) {
  .horse-gallery .mrs-main-image-wrap.is-portrait {
    aspect-ratio: auto;
    height: 600px;
  }
}

.horse-gallery .mrs-main-image-wrap.is-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hg-stage-bg);
}

.horse-gallery .mrs-main-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;                               /* live #brxe-endrzj .mrs-main-image (beats the snippet's cover) */
}

/* Video slide: the JS shows one (style.display = block) and gives the stage a 16:9 px height. */
.horse-gallery .mrs-main-video {
  display: none;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: #000;
  object-fit: contain;
}

/* Arrows (> 768 only) ----------------------------------------------------------------------------- */
.horse-gallery .mrs-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: none;                                     /* live .desktop-only{display:none!important} ≤768 */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: var(--hg-arrow-bg);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 28px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: .2s ease;
}
.horse-gallery .mrs-arrow:hover { background: var(--hg-arrow-bg-hover); }
.horse-gallery .mrs-arrow-prev { left: 18px; }
.horse-gallery .mrs-arrow-next { right: 18px; }

/* Overlay (slide 0 only; the JS shows it with style.display = flex) --------------------------------- */
.horse-gallery .mrs-overlay-info {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: none;
  justify-content: space-between;
  align-items: end;
  min-height: 24rem;
  padding: 28px 32px;
  background: var(--hg-overlay);
  color: var(--white);
  font-family: var(--font-heading);
  transition: none;
}

/* Hovering the next arrow hides the overlay (live; the previous arrow does not). */
.horse-gallery .mrs-main:has(.mrs-arrow-next:hover) .mrs-overlay-info {
  opacity: 0;
  pointer-events: none;
}

.horse-gallery .mrs-overlay-left {
  max-width: 85%;                                    /* ≤520 (live); 70% above */
  text-align: left;
}

.horse-gallery .mrs-horse-title {
  margin: 0 0 10px;
  color: var(--white);
  font-size: 2rem;                                   /* ≤520 (live); var(--h2) above */
  font-weight: 700;
  line-height: 1.25;
}

.horse-gallery .mrs-horse-meta { margin-top: 6px; }

.horse-gallery .mrs-horse-sub {
  margin-bottom: 8px;
  color: var(--hg-meta);
  font-size: var(--text-l);
  font-weight: 700;
  opacity: .85;
}

.horse-gallery .mrs-horse-price {
  display: inline-block;
  padding-top: .6rem;
  border-top: 1px solid;
  color: var(--hg-meta);
  font-size: var(--text-l);
  font-weight: 600;
  text-align: left;
}

.horse-gallery .mrs-overlay-right {
  display: flex;
  align-items: flex-end;
}

.horse-gallery .mrs-overlay-logo {
  width: auto;
  height: 32px;                                      /* ≤520 (live, !important there); 100px above */
  object-fit: contain;
}

/* Mobile controls (≤ 768) ------------------------------------------------------------------------- */
.horse-gallery .mrs-mobile-controls {
  display: block;
  margin: 12px 0;
  padding: 0 4px;
}

.horse-gallery .mrs-pagination {
  display: flex;
  flex-wrap: wrap;                                   /* 8 bars per row, then the next row */
  justify-content: center;
  gap: 6px;
  margin-bottom: 15px;
}

.horse-gallery .mrs-page-bar {
  flex: 0 0 calc(12.5% - 6px);
  max-width: calc(12.5% - 6px);
  height: 6px;
  border-radius: 2px;
  background-color: var(--hg-bar);
  cursor: pointer;
  transition: background-color .3s ease;
}
.horse-gallery .mrs-page-bar.is-active { background-color: var(--hg-bar-active); }

.horse-gallery .mrs-mobile-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.horse-gallery .mrs-mob-btn {
  flex: 1;
  padding: 4px 0;
  border: 2px solid var(--primary);
  border-radius: 8px;
  background: var(--wfx-btn-grad);                   /* #1263FF → #0B3B99 (verbatim Snippet 5) */
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .2s;
}
.horse-gallery .mrs-mob-btn:hover { opacity: .9; }

/* Thumb strip: 4 visible, scroll-snapped, scrollbar hidden --------------------------------------------- */
.horse-gallery .mrs-thumbs {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.horse-gallery .mrs-thumbs::-webkit-scrollbar { display: none; }

.horse-gallery .mrs-thumb {
  position: relative;
  flex: 0 0 calc(25% - 8px);
  max-width: calc(25% - 8px);
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  scroll-snap-align: start;
}

/* ≤767 (live #brxe-endrzj): no veil, no ring; the active thumb gets a 2px white border instead. */
.horse-gallery .mrs-thumb.is-active { border: 2px solid var(--white); }

/* The image is inline (base: height auto, vertical-align middle) and centred in the row-stretched button. */
.horse-gallery .mrs-thumb img {
  width: 100%;
  max-height: 148px;
  object-fit: cover;
}

.horse-gallery .mrs-thumb-video { background: var(--hg-stage-bg); }

/* No CSS height or ratio here (GAP-FILL #3): the <video width height> attributes give the file's ratio. */
.horse-gallery .mrs-thumb-video video {
  display: block;                                    /* frame 0 is the thumbnail (live sets it from JS too) */
  width: 100%;
  height: 100%;
  max-height: 150px;
  border-radius: 10px;
  object-fit: cover;
}

.horse-gallery .mrs-thumb-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--hg-play-border);
  border-radius: 50%;
  background: var(--hg-play-bg);
  backdrop-filter: blur(4px);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.horse-gallery .mrs-thumb-play-icon::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 2px;                                  /* optical centring */
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--white);
}

.horse-gallery .mrs-thumb-video:hover .mrs-thumb-play-icon {
  background: var(--hg-play-bg-hover);
  transform: translate(-50%, -50%) scale(1.1);
  transition: .2s ease;
}

/* Empty gallery (stable horses only): live's bare shortcode text in its full-width block (no slider box). */
.horse-gallery.horse-gallery--empty {
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-family: inherit;
}

/* ≥ 521 --------------------------------------------------------------------------------------------- */
@media (min-width: 521px) {
  .horse-gallery .mrs-overlay-left { max-width: 70%; }
  .horse-gallery .mrs-horse-title { font-size: var(--h2); }
  .horse-gallery .mrs-overlay-logo {
    height: 100px;
    object-fit: fill;
  }
}

/* ≥ 768: the veil on inactive thumbs and the 2px ring on the active one (live's ::after; off ≤767). */
@media (min-width: 768px) {
  .horse-gallery .mrs-thumb.is-active { border: none; }
  .horse-gallery .mrs-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--hg-veil);
    transition: .2s ease;
  }
  .horse-gallery .mrs-thumb.is-active::after {
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 2px var(--white);
    pointer-events: none;
  }
}

/* ≥ 769: arrows instead of the mobile controls; no stage padding. */
@media (min-width: 769px) {
  .horse-gallery {
    padding: 0;
    border-radius: 16px;
  }
  .horse-gallery .mrs-arrow { display: flex; }
  .horse-gallery .mrs-mobile-controls { display: none; }
}