/* ============================================================
   OUR HORSES — directory + profile styles.
   Loaded only by the Our Horses pages (and the admin preview), and every rule is scoped to
   .horses-* / .horse-* / .hp-* / .hg-*, so no other page is affected. Colours, fonts, radii and
   shadows all come from the site's existing variables (style.css).
   ============================================================ */

/* ---------- directory ---------- */
.horses-section .section-head { margin-bottom: 48px; }
.horses-section .section-lede { max-width: 760px; margin: 0 auto; }
.horse-card .service-image { aspect-ratio: 4 / 5; background: var(--rose-100); }
.horse-card .service-image img { height: 100%; }
.horse-card .service-body { padding: 28px 28px 30px; }
.horse-card .service-body h3 { margin-bottom: 10px; }
.horses-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.horses-empty p:first-child { font-family: var(--font-display); font-style: italic; font-size: 22px; }

/* ---------- profile layout ---------- */
.horse-profile { background: var(--rose-50); padding: 80px 0 100px; }
.hp-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.hp-info-wide { grid-column: 1 / -1; max-width: 760px; margin: 0 auto; }
@media (max-width: 900px) {
  .horse-profile { padding: 50px 0 70px; }
  .hp-top { grid-template-columns: 1fr; gap: 36px; }       /* gallery above the details on mobile */
}

.hp-intro { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; color: var(--ink); margin-bottom: 26px; }
.hp-facts { margin: 0 0 28px; border-top: 1px dashed var(--line); }
.hp-fact { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
.hp-fact dt { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-600); }
.hp-fact dd { margin: 0; font-size: var(--common-size-20); color: var(--ink); }
.hp-block { margin-bottom: 26px; }
.hp-h { font-family: var(--font-display); font-style: italic; font-size: 24px; margin-bottom: 12px; }
.hp-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.hp-tags li { padding: 7px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--rose-200); color: var(--rose-700); font-size: 14px; font-weight: 500; }
.hp-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hp-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--common-size-20); line-height: 1.55; }
.hp-list li::before { content: ''; flex-shrink: 0; width: 10px; height: 10px; margin-top: 10px; border-radius: 50%; background: var(--rose-400); }
.hp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
@media (max-width: 560px) { .hp-fact { grid-template-columns: 1fr; gap: 4px; } .hp-actions .btn { width: 100%; justify-content: center; } }

/* ---------- story / fun facts / achievements ---------- */
.hp-section { margin-top: 80px; }
.hp-head-left { text-align: left; margin: 0 0 28px; max-width: none; }
.hp-head-left .section-title { margin-bottom: 0; }
.hp-story { max-width: 820px; }
.hp-story p { font-size: var(--common-size-20); line-height: 1.85; color: var(--ink-soft); margin-bottom: 18px; }
.hp-facts-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-facts-grid li { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--rose-500); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 24px; font-size: var(--common-size-20); line-height: 1.6; }
.hp-ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.hp-ach { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.hp-ach-img { aspect-ratio: 16 / 10; background: var(--rose-100); overflow: hidden; }
.hp-ach-img img { width: 100%; height: 100%; object-fit: cover; }
.hp-ach-body { padding: 24px 26px 28px; }
.hp-ach-when { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-600); margin-bottom: 8px; }
.hp-ach h3 { font-size: 24px; font-style: italic; margin-bottom: 8px; }
.hp-ach-result { font-weight: 600; color: var(--rose-700); margin-bottom: 4px; }
.hp-ach-event { color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.hp-ach-desc { color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
@media (max-width: 900px) { .hp-facts-grid, .hp-ach-grid { grid-template-columns: repeat(2, 1fr); } .hp-section { margin-top: 56px; } }
@media (max-width: 600px) { .hp-facts-grid, .hp-ach-grid { grid-template-columns: 1fr; } }

/* admin-only preview notice (fixed to the bottom so it never moves the page) */
.hp-preview { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--rose-900); color: #fff; padding: 12px 20px; font-size: 14px; text-align: center; box-shadow: 0 -6px 24px rgba(46, 13, 24, 0.25); }
.hp-preview a { color: var(--rose-200); text-decoration: underline; margin-left: 10px; }

/* ============================================================
   GALLERY (.hg) — also used by the admin transition preview
   ============================================================ */
.hg { width: 100%; }
.hg-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius); background: var(--rose-100); box-shadow: var(--shadow);
  perspective: 1500px; touch-action: pan-y;
}
.hg-stage, .hg-thumbs { scroll-margin-top: calc(var(--header-h, 78px) + 16px); }   /* never scrolled in underneath the fixed header */
.hg-stage:focus-visible { outline: 3px solid var(--rose-500); outline-offset: 3px; }
.hg-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; backface-visibility: hidden;
  --hg-ms: 700ms;
  transition: transform var(--hg-ms) cubic-bezier(0.65, 0, 0.35, 1), opacity var(--hg-ms) ease, filter var(--hg-ms) ease;
}
.hg-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; cursor: zoom-in; }
.hg-slide.is-active { opacity: 1; visibility: visible; transform: none; filter: none; z-index: 2; }
.hg-slide.is-enter, .hg-slide.is-leave { opacity: 1; visibility: visible; }
.hg-slide.is-enter { transition: none !important; z-index: 2; }
.hg-slide.is-leave { z-index: 1; }
.hg-slide.no-t { transition: none !important; }

/* the ten movement styles: starting pose of the incoming photo (.is-enter) and end pose of the outgoing one (.is-leave) */
.hg-stage[data-fx="fade"] .is-enter, .hg-stage[data-fx="fade"] .is-leave { opacity: 0; }
.hg-stage[data-fx="blur"] .is-enter, .hg-stage[data-fx="blur"] .is-leave { opacity: 0; filter: blur(20px); }
.hg-stage[data-fx="slide-left"]  .is-enter { transform: translateX(100%); }
.hg-stage[data-fx="slide-left"]  .is-leave { transform: translateX(-100%); }
.hg-stage[data-fx="slide-right"] .is-enter { transform: translateX(-100%); }
.hg-stage[data-fx="slide-right"] .is-leave { transform: translateX(100%); }
.hg-stage[data-fx="slide-up"]    .is-enter { transform: translateY(100%); }
.hg-stage[data-fx="slide-up"]    .is-leave { transform: translateY(-100%); }
.hg-stage[data-fx="slide-down"]  .is-enter { transform: translateY(-100%); }
.hg-stage[data-fx="slide-down"]  .is-leave { transform: translateY(100%); }
.hg-stage[data-fx="flip-left"]  .is-enter { opacity: 0; transform: rotateY(90deg); }
.hg-stage[data-fx="flip-left"]  .is-leave { opacity: 0; transform: rotateY(-90deg); }
.hg-stage[data-fx="flip-right"] .is-enter { opacity: 0; transform: rotateY(-90deg); }
.hg-stage[data-fx="flip-right"] .is-leave { opacity: 0; transform: rotateY(90deg); }
.hg-stage[data-fx="flip-up"]    .is-enter { opacity: 0; transform: rotateX(-90deg); }
.hg-stage[data-fx="flip-up"]    .is-leave { opacity: 0; transform: rotateX(90deg); }
.hg-stage[data-fx="flip-down"]  .is-enter { opacity: 0; transform: rotateX(90deg); }
.hg-stage[data-fx="flip-down"]  .is-leave { opacity: 0; transform: rotateX(-90deg); }

/* reduced motion (or JS flag): photos change straight away, nothing slides, blurs or flips */
.hg.hg-reduced .hg-slide, .hg.hg-reduced .hg-slide.is-leave { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .hg-slide { transition: none !important; } }

/* a photo that could not load */
.hg-slide.is-broken { background: var(--rose-100); display: grid; place-items: center; }
.hg-slide.is-broken img { display: none; }
.hg-fallback { display: none; padding: 20px; text-align: center; color: var(--rose-700); font-family: var(--font-display); font-style: italic; font-size: 22px; }
.hg-slide.is-broken .hg-fallback { display: block; position: relative; z-index: 1; }

/* controls: same dark-wine glass look as the homepage banner arrows */
.hg-arrow, .hg-zoom, .hg-toggle, .hg-lb-close, .hg-lb-arrow {
  display: grid; place-items: center; border-radius: 50%; color: #fff; cursor: pointer;
  background: rgba(46, 13, 24, 0.5); border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 0.25s ease, transform 0.25s ease;
}
.hg-arrow:hover, .hg-zoom:hover, .hg-toggle:hover, .hg-lb-close:hover, .hg-lb-arrow:hover { background: var(--rose-500); }
.hg-arrow:focus-visible, .hg-zoom:focus-visible, .hg-toggle:focus-visible, .hg-thumb:focus-visible,
.hg-lb-close:focus-visible, .hg-lb-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--rose-600); }
.hg-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; }
.hg-prev { left: 12px; }
.hg-next { right: 12px; }
.hg-zoom { position: absolute; top: 12px; right: 12px; z-index: 5; width: 40px; height: 40px; }
.hg-bar { position: absolute; left: 12px; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; }
.hg-counter { padding: 7px 14px; border-radius: 999px; background: rgba(46, 13, 24, 0.55); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.hg-toggle { width: 36px; height: 36px; }
.hg-toggle .ic-play { display: none; }
.hg-toggle.is-paused .ic-play { display: block; }
.hg-toggle.is-paused .ic-pause { display: none; }

.hg-caption { min-height: 1.7em; margin: 14px 2px 0; font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--ink-soft); line-height: 1.5; }
.hg-thumbs { display: flex; gap: 10px; margin-top: 12px; padding: 4px 2px 8px; overflow-x: auto; scrollbar-width: thin; }
.hg-thumb { flex: 0 0 auto; width: 70px; height: 88px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--rose-100); cursor: pointer; opacity: 0.75; transition: opacity 0.2s ease, border-color 0.2s ease; }
.hg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-thumb:hover { opacity: 1; }
.hg-thumb.is-active { opacity: 1; border-color: var(--rose-500); }
@media (max-width: 600px) { .hg-arrow { width: 42px; height: 42px; } .hg-thumb { width: 58px; height: 72px; } }

/* ---------- enlarged viewer ---------- */
body.hg-lb-open { overflow: hidden; }
.hg-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(46, 13, 24, 0.94); display: grid; place-items: center; padding: 56px 70px 70px; }
.hg-lightbox[hidden] { display: none; }
.hg-lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hg-lb-img { max-width: min(92vw, 1400px); max-height: calc(100vh - 190px); width: auto; height: auto; object-fit: contain; border-radius: 8px; background: transparent; box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45); }
.hg-lb-cap { color: rgba(255, 255, 255, 0.9); font-family: var(--font-display); font-style: italic; font-size: 20px; text-align: center; max-width: 780px; min-height: 1.4em; }
.hg-lb-close { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; }
.hg-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.hg-lb-prev { left: 14px; }
.hg-lb-next { right: 14px; }
.hg-lb-count { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 14px; letter-spacing: 0.08em; }
@media (max-width: 700px) { .hg-lightbox { padding: 60px 12px 64px; } .hg-lb-arrow { width: 44px; height: 44px; } .hg-lb-prev { left: 6px; } .hg-lb-next { right: 6px; } }