/* ============================================================
   Erigo Core — Reference plugin: video popup + slider (VSMILEK 012)
   ============================================================
   Loaded on demand by Partials/Reference/List.html (<f:asset.css>), so pages
   without a reference list never download it. All colours / sizes come from
   the --erigo-* custom properties with neutral fallbacks, nothing per client.
   ============================================================ */

/* ---- play button over the photo ---------------------------------------- */
.erigo-card-img-top:has(> .erigo-reference-play-link) {
  position: relative;
}

.erigo-reference-play-link {
  position: absolute;
  inset: 0;
  z-index: 2; /* above the stretched-link overlay (.erigo-card-footer link ::before, z-index 1) */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.erigo-reference-play {
  position: relative;
  display: block;
  width: var(--erigo-reference-play-size, clamp(3rem, 16%, 4.5rem));
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9), 0 4px 16px rgb(0 0 0 / 0.35);
  transition: transform 160ms ease, background-color 160ms ease;
}

.erigo-reference-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  height: 38%;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-35%, -50%);
}

.erigo-reference-play-link:hover .erigo-reference-play,
.erigo-reference-play-link:focus-visible .erigo-reference-play {
  background: var(--erigo-color-primary, #a5192d);
  transform: scale(1.08);
}

.erigo-reference-play-link:focus-visible {
  outline: 3px solid var(--erigo-color-primary, #a5192d);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .erigo-reference-play {
    transition: none;
  }

  .erigo-reference-play-link:hover .erigo-reference-play,
  .erigo-reference-play-link:focus-visible .erigo-reference-play {
    transform: none;
  }
}

/* ---- name + position on one line ---------------------------------------- */
.erigo-reference-role,
.erigo-reference-meta {
  font-weight: var(--erigo-font-weight-normal, 400);
}

/* ---- slider: `columns` cards visible, the rest scrolls ------------------- */
.erigo-card-group.erigo-reference-slider.erigo-slider-active {
  /* F03: the column grid of `.erigo-card-group-columns-N` kept `display: grid`, so the
     slider never scrolled (the track was exactly as wide as the viewport). */
  display: flex;
  grid-template-columns: none;
  gap: var(--erigo-card-group-gap, 1.5rem);
}

@media (min-width: 768px) {
  .erigo-card-group.erigo-reference-slider.erigo-slider-active > * {
    flex: 0 0 calc(
      (100% - (var(--erigo-slider-columns, 3) - 1) * var(--erigo-card-group-gap, 1.5rem)) /
        var(--erigo-slider-columns, 3)
    );
  }
}

/* ---- video dialog -------------------------------------------------------- */
.erigo-video-dialog {
  width: min(96vw, 60rem);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--erigo-radius, 0.5rem);
  background: #000;
  color: #fff;
  overflow: visible;
}

.erigo-video-dialog::backdrop {
  background: rgb(0 0 0 / 0.78);
}

.erigo-video-dialog__stage {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.erigo-video-dialog__stage iframe,
.erigo-video-dialog__stage video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.erigo-video-dialog__close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.erigo-video-dialog__close:hover,
.erigo-video-dialog__close:focus-visible {
  background: var(--erigo-color-primary, #a5192d);
}

.erigo-video-dialog__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .erigo-video-dialog__close {
    top: -2.5rem;
  }
}