/* ═══════════════════════════════════════════════════════════
   MEDIA GRID — .media-showcase
   Tres bloques independientes: Imagen -> Video al click
   ═══════════════════════════════════════════════════════════ */

.media-showcase {
  padding: var(--bb-section-gap) 0;
  background-color: var(--bb-color-gray-10);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bb-space-10);
  max-width: var(--bb-container-max);
  margin: 0 auto;
  padding: 0 var(--bb-space-6);
  perspective: 1200px; /* Soporte para física 3D */
}

.media-block {
  position: relative;
  aspect-ratio: 9 / 16; /* Proporción vertical solicitada */
  background-color: var(--bb-color-surface-high);
  border-radius: var(--bb-radius-lg);
  overflow: visible; /* Permitir sombras y efectos de profundidad */
  cursor: pointer;
  box-shadow: var(--bb-shadow-1);
  transition: box-shadow var(--bb-duration-base) var(--bb-ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}

.media-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--bb-shadow-2);
}

/* Imagen de portada */
.media-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: var(--bb-radius-lg);
  transition: opacity var(--bb-duration-slow) var(--bb-ease-out);
  pointer-events: none;
}

/* Video (oculto/pausado inicialmente) */
.media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--bb-duration-slow) var(--bb-ease-out);
}

/* Estado Activo (Video reproduciendo) */
.media-block.is-playing .media-poster {
  opacity: 0;
  pointer-events: none;
}

.media-block.is-playing .media-video {
  opacity: 1;
}

.media-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(20px);
  width: 70px;
  height: 70px;
  background-color: #B3B3B3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: all var(--bb-duration-base) var(--bb-ease-out);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.media-play-icon-container {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.media-play-icon {
  height: 32px;
  width: auto;
  display: block;
}

.media-block:hover .media-play-button {
  background-color: #CCCCCC;
  transform: translate(-50%, -50%) translateZ(40px) scale(1.1);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.media-block.is-playing .media-play-button {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

/* Caption del bloque */
.media-block__caption {
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  font-size: 0.9rem;
  color: var(--bb-color-gray-60);
  font-family: var(--bb-font-sans);
  pointer-events: none;
  transition: opacity var(--bb-duration-base) var(--bb-ease-out);
}

/* Responsivo: 1 columna en móvil */
@media (max-width: 768px) {
  .media-grid {
    grid-template-columns: 1fr;
    gap: var(--bb-space-16); /* Espacio aumentado para evitar el solapamiento de los textos */
  }

  .media-block {
    aspect-ratio: 9 / 16; /* Mantener proporción vertical en móvil */
    margin-bottom: var(--bb-space-4); /* Refuerzo de margen inferior */
  }

  .media-block__caption {
    bottom: -2.25rem; /* Ajuste fino de posición en móvil */
    font-size: 0.85rem;
  }
}