/* =========================================================================
   5. PODIVEJTE SE / Zkusenosti zakazniku - 3 videa
   Figma: "Navrh HP" / Videa (2906:484)
   Vyzaduje: assets/mth-base.css
   ========================================================================= */

.mth-videos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mth-video {
  position: relative;
  border-radius: var(--mth-radius);
  overflow: hidden;
  background: var(--mth-cream);
  aspect-ratio: 407 / 723;
  width: 100%;
}
.mth-video:nth-child(1) {
  grid-column: 1;
}
.mth-video:nth-child(2) {
  grid-column: 2;
}
.mth-video:nth-child(3) {
  grid-column: 3;
}

.mth-video__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mth-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
.mth-video:hover .mth-video__play {
  background: rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%) scale(1.06);
}
.mth-video__play svg {
  width: 32px;
  height: 36px;
  fill: #fff;
  margin-left: 5px;
}

.mth-video__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  font-size: 14px;
  line-height: 1.35;
  color: #fff;
  text-align: left;
  pointer-events: none;
}

/* stav po spusteni - prekryv zmizi, video ma vlastni ovladani */
.mth-video.is-playing::after,
.mth-video.is-playing .mth-video__play,
.mth-video.is-playing .mth-video__caption {
  display: none;
}

@media (max-width: 639px) {
  .mth-videos__grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .mth-video__play {
    width: 70px;
    height: 70px;
  }
  .mth-video__play svg {
    width: 24px;
    height: 28px;
  }
}