/* ---------- Hero slider (prefix: fm-hero) ---------- */
.fm-hero {
  --fm-hero-accent: #f26b21;
  --fm-header-h: 80px;            /* fallback; JS sets the real header height */
  position: relative;
  margin-top: var(--fm-header-h); /* top space so a fixed/sticky header doesn't cover the slider */
  width: 100%;
  overflow: hidden;
  background: #000;
}

/* Same frame for images and videos; ratio per breakpoint */
.fm-hero__track {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;                       /* mobile */
}
@media (min-width: 576px) { .fm-hero__track { aspect-ratio: 16 / 10; } }   /* tablet */
@media (min-width: 768px) { .fm-hero__track { aspect-ratio: 1920 / 950; } } /* desktop: 1920 x 950 */

/* Fade slides */
.fm-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s;
}
.fm-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity .8s ease;
}

.fm-hero__media,
.fm-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fm-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 55%);
}

/* Video fills the whole 1920 x 950 frame */
.fm-hero__video { object-fit: cover; background: #000; }

/* Click gate: covers the slider when the browser blocks autoplay with sound */
.fm-hero__start {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(0,0,0,.35);
  color: #fff;
  font: inherit;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.fm-hero__start-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--fm-hero-accent);
  transition: transform .2s;
}
.fm-hero__start:hover .fm-hero__start-icon { transform: scale(1.08); }
.fm-hero__start svg { width: 40px; height: 40px; fill: #fff; }
.fm-hero__start-text { font-size: 1.1rem; }
.fm-hero.is-await .fm-hero__start { display: flex; }

/* Top-left controls (mute + pause) */
.fm-hero__controls {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 6;
  display: flex;
  gap: 8px;
}
.fm-hero__ctrl {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.fm-hero__ctrl:hover { background: var(--fm-hero-accent); }
.fm-hero__ctrl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fm-hero__icon { width: 20px; height: 20px; fill: #fff; }

/* Icon states */
.fm-hero__icon--muted, .fm-hero__icon--play { display: none; }
.fm-hero__mute[aria-pressed="true"] .fm-hero__icon--sound,
.fm-hero__pause[aria-pressed="true"] .fm-hero__icon--pause { display: none; }
.fm-hero__mute[aria-pressed="true"] .fm-hero__icon--muted,
.fm-hero__pause[aria-pressed="true"] .fm-hero__icon--play { display: block; }

/* Mute and pause buttons only show on video slides */
.fm-hero__mute, .fm-hero__pause { display: none; }
.fm-hero.is-video .fm-hero__mute,
.fm-hero.is-video .fm-hero__pause { display: flex; }

/* Arrows */
.fm-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  cursor: pointer;
  transition: background .2s;
}
.fm-hero__arrow:hover { background: var(--fm-hero-accent); }
.fm-hero__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.fm-hero__arrow--prev { left: 16px; }
.fm-hero__arrow--next { right: 16px; }
.fm-hero__arrow--prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.fm-hero__arrow--next::after { transform: translate(-70%, -50%) rotate(45deg); }
@media (max-width: 767.98px) { .fm-hero__arrow { display: none; } } /* swipe on mobile */

/* Dots */
.fm-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.fm-hero__dot {
  width: 28px;
  height: 4px;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: background .2s;
}
.fm-hero__dot.is-active { background: var(--fm-hero-accent); }

.fm-hero__arrow:focus-visible,
.fm-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fm-hero__slide, .fm-hero__slide.is-active { transition: none; }
}
/* Mobile: video slide is hidden, only image slides play */
@media (max-width: 767.98px) {
  .fm-hero__slide[data-type="video"] { display: none; }
}