/* =============================================================================
   MYBEYOGA — sección "Nuestra sala" (portada)
   -----------------------------------------------------------------------------
   Módulo propio de inc/sala-video.php: no toca assets/css/mybeyoga.css.
   Reutiliza los tokens --yg-* (color, tipografía, espaciado, radios) que ya
   define mybeyoga.css en :root -- data-theme="dark" los redefine ahí mismo,
   así que esta sección cambia de tema sola, sin overrides propios aquí.
   ============================================================================= */

:root .yg-sala__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  justify-items: center;
}
@media (min-width: 860px) {
  :root .yg-sala__grid {
    grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
    justify-items: stretch;
  }
}

:root .yg-sala__frame {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 16;
  margin: 0;
  border-radius: var(--yg-arch);
  overflow: hidden;
  background: var(--yg-sand);
  box-shadow: 0 24px 60px -24px rgba(34, 39, 28, 0.4);
}

:root .mby-sala-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--yg-sand);
}

:root .mby-sala-toggle {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(247, 244, 239, 0.55);
  border-radius: 9999px;
  background: rgba(24, 28, 19, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #F7F4EF;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
:root .mby-sala-toggle:hover { background: rgba(24, 28, 19, 0.68); transform: translateY(-1px); }
:root .mby-sala-toggle:focus-visible { outline: 3px solid var(--yg-sage); outline-offset: 2px; }

:root .mby-sala-toggle__icon { display: block; }
:root .mby-sala-toggle__icon--pause { display: none; }
:root .mby-sala-toggle[data-playing="true"] .mby-sala-toggle__icon--play { display: none; }
:root .mby-sala-toggle[data-playing="true"] .mby-sala-toggle__icon--pause { display: block; }

:root .yg-sala__body { max-width: 34rem; }

/* Escritorio: el texto va en un panel crema que ocupa toda la columna a la
   altura del video, en vez de un bloque estrecho con blanco a la derecha
   (el cliente pidio aprovechar el ancho en todas las secciones). El texto
   sigue limitado a una medida de lectura comoda dentro del panel. */
@media (min-width: 860px) {
  :root .yg-sala__grid { align-items: stretch; }
  :root .yg-sala__body {
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 5vw, 5.5rem);
    background: var(--yg-cream);
    border-radius: var(--yg-radius-m);
  }
  :root .yg-sala__body > * { max-width: 38rem; }
  :root .yg-sala__body .yg-title { font-size: clamp(2.5rem, 3.6vw, 3.75rem); }
  :root .yg-sala__body .yg-text p { font-size: clamp(1.0625rem, 1.2vw, 1.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  :root .mby-sala-toggle { transition: none !important; }
}