/* =========================================================
   HSC Video Feature
   Reusable click-to-play video component.
   Theme per client by overriding the CSS variables below.
   ========================================================= */

:root {
  --hsc-vf-accent:        #9B7760; /* play button background */
  --hsc-vf-accent-strong: #4A1B0C; /* sound toggle background */
  --hsc-vf-icon:          #F8DED1; /* icon / control color */
  --hsc-vf-placeholder:   #E6D5C5; /* card bg before poster loads */
  --hsc-vf-radius:        8px;     /* corner radius */
}

/* ---------- Click-to-play feature ---------- */
.hsc-video-feature {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* overridden inline per instance */
  overflow: hidden;
  border-radius: var(--hsc-vf-radius);
  cursor: pointer;
  background: var(--hsc-vf-placeholder);
}
.hsc-video-feature img,
.hsc-video-feature video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Center play button */
.hsc-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--hsc-vf-accent) 85%, transparent);
  color: var(--hsc-vf-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}
.hsc-video-play svg { margin-left: 3px; } /* optically center the triangle */
.hsc-video-play:hover {
  background: var(--hsc-vf-accent);
  transform: translate(-50%, -50%) scale(1.08);
}

/* While playing: button hidden, briefly flashes on tap */
.hsc-video-feature.is-playing .hsc-video-play {
  width: 60px;
  height: 60px;
  background: color-mix(in srgb, var(--hsc-vf-accent) 70%, transparent);
  opacity: 0;
  pointer-events: none;
}
.hsc-video-feature.is-playing.show-state .hsc-video-play {
  opacity: 1;
}

/* Sound toggle, bottom right */
.hsc-video-sound {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--hsc-vf-accent-strong) 45%, transparent);
  color: var(--hsc-vf-icon);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: background 0.25s ease;
}
.hsc-video-sound:hover {
  background: color-mix(in srgb, var(--hsc-vf-accent-strong) 70%, transparent);
}
.hsc-video-feature.is-playing .hsc-video-sound { display: flex; }

/* Icon swap by state */
.hsc-video-sound .hsc-icon-sound { display: none; }
.hsc-video-sound .hsc-icon-muted { display: block; }
.hsc-video-sound.is-unmuted .hsc-icon-sound { display: block; }
.hsc-video-sound.is-unmuted .hsc-icon-muted { display: none; }

/* Poster layering */
.hsc-video-poster { z-index: 2; }
.hsc-video-feature.is-playing .hsc-video-poster { display: none; }

/* ---------- Autoplay hero ---------- */
.hsc-hero-video {
  position: relative;
  width: 100%;
  height: 100vh; /* overridden inline */
  overflow: hidden;
}
.hsc-hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .hsc-video-play { width: 60px; height: 60px; }
  .hsc-video-play svg { width: 22px; height: 22px; }
  .hsc-video-sound { width: 36px; height: 36px; bottom: 12px; right: 12px; }
}

/* ---------- Fallback for browsers without color-mix() ---------- */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .hsc-video-play { background: var(--hsc-vf-accent); }
  .hsc-video-sound { background: var(--hsc-vf-accent-strong); }
}