/* ==========================================================================
   Hindsight Farms  -  page-facilities.css  (facilities.html only)
   Step 3 rebuild, 2026-10-01. Loaded right after main.css.

   1) Turnout and Round Pens: captions move off the photo to a caption row
      below it (.media-caption), and the counter sits at the end of that row
      (.ctl-counter). Photos, choices and behavior are unchanged.
   2) Three Riding Arenas: the tap-to-choose selector that replaced the
      scroll-driven arena story and the phone swipe strip. It reuses the
      Turnout frame and choice styles (.fac-explorer), adds a per-arena photo
      set with .ctl-arrow / .ctl-counter, and a spec band under the photo.
   3) The arena selector without JavaScript: every arena, photo and fact.

   The shared controls (.ctl-row, .ctl-arrow, .ctl-counter, .media-caption)
   keep their main.css definitions. Rules here only place them, and only
   override the older Facilities overlay styles that would otherwise win.
   Every selector is scoped to .page--facilities.
   ========================================================================== */


/* 1) TURNOUT AND ROUND PENS: CAPTION ROW BELOW THE PHOTO ------------------- */

/* The figures share one grid cell instead of sitting absolutely, so the
   frame reserves room for the longest caption and never changes height
   when a different choice is shown. */
.page--facilities .fac-photo-selector.is-enhanced .fac-explorer__media {
  --fac-photo-h: clamp(340px, 33vw, 440px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-height: 0;
  aspect-ratio: auto;
  background: var(--paper);
}
.page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  min-width: 0;
  transform: none;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}
.page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image.is-active {
  visibility: visible;
  transition: opacity 320ms ease, visibility 0s;
}
.page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image picture {
  overflow: hidden;
  background: var(--bark-deep);
}
/* The quiet settle-in zoom now moves the photograph only, not its caption. */
.page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image img {
  transform: scale(1.025);
  transition: transform 650ms ease-out;
}
.page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image.is-active img {
  transform: none;
}
/* Caption: the shared .media-caption look, restated because the older
   uppercase overlay rule is more specific. The right padding keeps the
   text clear of the counter at every width. */
.page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image figcaption {
  position: static;
  max-width: none;
  margin: 0;
  padding: 10px 84px 12px 16px;
  background: none;
  color: var(--stone);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
/* Counter: same cell, placed on the caption row's first line (below). */
.page--facilities .fac-photo-selector.is-enhanced .fac-explorer__count {
  grid-area: 1 / 1;
  position: static;
  z-index: auto;
  justify-self: end;
  min-width: 0;
  padding: 0;
  background: none;
  color: var(--stone);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 21px;
  letter-spacing: .04em;
  text-align: right;
}
/* Tablet and desktop: as before, the photograph fills the height the
   choices need (never less than the old frame), with the caption row at
   the bottom. The counter sits on the caption's first line. */
@media (min-width: 768px) {
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__media {
    grid-template-rows: 1fr;
    align-content: stretch;
  }
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image {
    display: flex;
    flex-direction: column;
  }
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image picture {
    flex: 1 1 0;
    height: auto;
    min-height: var(--fac-photo-h);
  }
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image img {
    height: 100%;
  }
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image figcaption {
    flex: none;
  }
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__count {
    align-self: end;
    margin: 0 16px 12px 0;
  }
}
/* 768 to 999px: a caption can wrap to two lines here, so every caption
   row reserves two; the photograph then keeps one height for all choices. */
@media (min-width: 768px) and (max-width: 999px) {
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image figcaption {
    min-height: 64px;
  }
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__count {
    margin-bottom: 33px;
  }
}
/* Phones keep the 3:2 frame; the counter's top margin is a percentage of
   the cell width, which equals the photo height at 3:2. */
@media (max-width: 767px) {
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image picture {
    height: auto;
  }
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__count {
    align-self: start;
    margin: calc(66.6667% + 10px) 16px 0 0;
  }
}

/* Wide screens: labels above values, one column per fact. */
/* Narrow desktops and tablets: slightly tighter choices so the right
   column stays in step with the photo. */
/* Below 1024px the five Covered Arena facts need a second row, so each
   spec list keeps its own height instead of reserving the tallest. The
   photo and the choices above it still never move. Photo controls get a
   full-width row of their own directly under the photo (previous, count,
   next), and the caption runs full width beneath them. */
/* Phones: the photo, then the three 64px choices (main.css compact style),
   then the open arena's specs. */
/* REDUCED MOTION ------------------------------------------------------------
   main.css already removes every transition; the zoom offset goes too. */
@media (prefers-reduced-motion: reduce) {
  .page--facilities .fac-photo-selector.is-enhanced .fac-explorer__image img {
    transform: none !important;
  }
}

/* Riding arenas, desktop scroll story (2026-10-04). Flynn: "the photo changes
   but the card isn't next to it", then "instead of having the picture move
   have the text bars move to match the photo."

   The photograph pins as it always has (main.css). With .is-reel, set by
   facilities.js, the cards stop scrolling past it. Each card sits in a box
   pinned exactly like the photograph (same cell, same top, same height), so
   photograph and cards hold still together, and the three cards slide as one
   stack so the highlighted one lines up with the photograph: level with its
   top (first card), centred (middle card), level with its bottom (last card).
     --fac-arena-pitch  height of one card row, measured by facilities.js
     --fac-arena-shift  how far the stack has slid up, set by facilities.js
     --fac-arena-slot   the card's place in the stack (0, 1, 2)
   The block keeps its height (three rows), which is the distance the
   photograph stays pinned for. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .page--facilities .fac-arena-story.is-armed.is-reel {
    grid-template-rows: repeat(3, minmax(var(--fac-arena-pitch, 0px), 1fr));
  }
  .page--facilities .fac-arena-story.is-armed.is-reel .fac-arena-card .fac-arena-card__chapter {
    grid-row: 1 / 4;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 4vh);
    height: min(58vh, 560px);
    display: block;
    padding-block: 0;
    pointer-events: none; /* the three boxes overlap; only the cards take the pointer */
  }
  .page--facilities .fac-arena-story.is-armed.is-reel .fac-arena-card__surface {
    height: calc(var(--fac-arena-pitch) - 24px);
    margin-top: 12px;
    pointer-events: auto;
    translate: 0 calc(var(--fac-arena-slot, 0) * var(--fac-arena-pitch) - var(--fac-arena-shift, 0px));
    transition: opacity 260ms ease, border-color 260ms ease, box-shadow 260ms ease,
      translate 520ms cubic-bezier(.22, .61, .36, 1);
  }
  .page--facilities .fac-arena-story.is-reel .fac-arena-card:nth-child(2) .fac-arena-card__surface { --fac-arena-slot: 1; }
  .page--facilities .fac-arena-story.is-reel .fac-arena-card:nth-child(3) .fac-arena-card__surface { --fac-arena-slot: 2; }
  .page--facilities .fac-arena-story.is-measuring .fac-arena-card__surface,
  .page--facilities .fac-arena-story.is-measuring .fac-arena-card__media { transition: none !important; }
}

/* 4) BARNS: PHOTO SLIDER (2026-10-07, Milan's Oct 6 review) -----------------
   The barns plate's main photograph becomes the same small slider Boarding
   uses for its stalls: one photo at a time, arrows on the photo, a counter
   and a caption. boarding.js drives it through data-boarding-selector.
   Without JavaScript the first photo shows. */
.page--facilities .fac-barn-carousel { min-height: 0; }
.page--facilities .fac-barn-carousel__frame {
  position: relative;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  background: var(--bark-deep);
}
.page--facilities .fac-barn-carousel__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.page--facilities .fac-barn-carousel__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.page--facilities .fac-barn-carousel__slide picture {
  position: absolute;
  inset: 0;
}
.page--facilities .fac-barn-carousel .fac-barn-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
/* Captions keep the plate's own overlay style (.fac-barns__main figcaption),
   the same as the wash-rack photo beside the slider. */
.page--facilities .fac-barn-carousel__count {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 6px 10px;
  background: rgba(250, 247, 242, .94);
  border: 1px solid rgba(185, 148, 106, .6);
  color: var(--bark);
  font: 500 12px/1.4 var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .04em;
}
.page--facilities .fac-barn-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--bark);
  cursor: pointer;
}
.page--facilities .fac-barn-carousel__arrow--previous { left: 12px; }
.page--facilities .fac-barn-carousel__arrow--next { right: 12px; }
.page--facilities .fac-barn-carousel__arrow:hover { background: var(--cream); }
.page--facilities .fac-barn-carousel__arrow:focus-visible { outline: 2px solid var(--bark); outline-offset: -5px; }
@media (max-width: 899px) {
  .page--facilities .fac-barn-carousel__frame {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page--facilities .fac-barn-carousel__slide { transition: none; }
}
/* END BARNS: PHOTO SLIDER */