/**
 * Public video-review grid.
 * Rutube itself is not requested until reviews.js creates an iframe.
 */

.afrr-grid {
  display: grid;
  grid-template-columns: repeat(var(--afrr-mobile-columns, 2), minmax(0, 1fr));
  gap: clamp(0.75rem, 2.4vw, 1.5rem);
}

.afrr-review {
  min-width: 0;
}

.afrr-player {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #dce3de;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(23, 35, 29, 0.1);
}

.afrr-review--vertical .afrr-player {
  aspect-ratio: 9 / 16;
}

.afrr-review--horizontal .afrr-player {
  aspect-ratio: 16 / 9;
}

.afrr-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  color: #17231d;
  background: #dce3de;
  border: 0;
  cursor: pointer;
}

.afrr-poster:focus-visible {
  outline: 3px solid #e7a35c;
  outline-offset: -3px;
}

.afrr-poster__image,
.afrr-poster__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.afrr-poster__placeholder {
  background:
    linear-gradient(135deg, rgba(36, 76, 58, 0.14), transparent 60%), #dce3de;
}

.afrr-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(48px, 20%, 76px);
  color: #ffffff;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.28));
  transform: translate(-50%, -50%);
  transition: transform 180ms ease;
}

.afrr-play-icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.afrr-play-icon circle {
  fill: #244c3a;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
}

.afrr-play-icon path {
  fill: currentColor;
}

.afrr-poster:hover .afrr-play-icon {
  transform: translate(-50%, -50%) scale(1.06);
}

.afrr-title {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  left: 0.65rem;
  display: block;
  padding: 0.65rem 0.75rem;
  color: #17231d;
  background: rgba(252, 250, 246, 0.94);
  font-size: clamp(0.78rem, 2.5vw, 1rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

/*
 * Loaded state intentionally has no radius, shadow, poster, title, play icon
 * or visual overlays. Only Rutube's own player remains.
 */
.afrr-player.is-loaded {
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.afrr-player.is-loaded iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

@media (min-width: 768px) {
  .afrr-grid {
    grid-template-columns: repeat(
      var(--afrr-desktop-columns, 2),
      minmax(0, 1fr)
    );
  }
}

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