/*
 Theme Name:   Bosk
 Theme URI:    http://bosk.testapp.com.ar
 Description:  Child theme basado en Hello Elementor para Bosk.
 Author:       Cronopia
 Author URI:   https://cronopiaweb.com
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  bosk
*/

/*
--------------------------------------
  BOSK THEME - ÍNDICE DE SECCIONES CSS
--------------------------------------
  1. Variables globales y contenedor
  2. Helpers de alineación (.align-right, .align-left)
  3. Estilos para Shortcode "video_preview"
     (overlay, botón play, responsive)
--------------------------------------
*/


/*
--------------------------------------
  1.
  Variables CSS para contenedor y gutters
  Variables Globales
--------------------------------------
*/
:root {
  --container: 1500px;
  --gutter: 70px;   /* Desktop */
}

@media (max-width:1299px){
  :root{ --gutter: 20px; }   /* Tablet */
}
@media (max-width:767px){
  :root{ --gutter: 12px; }   /* Mobile */
}


/*
--------------------------------------
  2.
  Helpers de alineación de secciones
  .align-right y .align-left
--------------------------------------
*/

/* Padre alineado a la derecha (contenido hacia la derecha, extendido a la izq) */
.align-right {
  width: 100%;
}
.align-right {
  width: (100%, var(--container));
  margin-left: auto;   /* se pega al lado derecho del container */
  margin-right: 0;
  padding-right: 0;
  padding-left: max(
    var(--gutter),
    calc((100vw - var(--container))/2 + var(--gutter))
  );
}

/* Padre alineado a la izquierda (contenido hacia la izquierda, extendido a la der) */
.align-left {
  width: 100%;
}

.align-left {
  width: var(--container);
  margin-right: auto;  /* se pega al lado izquierdo del container */
  margin-left: 0;
  padding-left: 0px !important;
  padding-right: max(
    var(--gutter),
    calc((100vw - var(--container))/2 + var(--gutter))
  );
}



/*
--------------------------------------  
  3.
  Estilos para Shortcode "video_preview"
  Videos con overlay y botón de play
  Aplica a .video-preview-wrapper y elementos relacionados
--------------------------------------
*/
.video-preview-wrapper {
    position: relative;
    width: 100%;
    height: 100%; /* ocupa siempre el alto del padre (100vh en tu caso) */
    overflow: hidden;
}

/* VIDEO SIEMPRE A TAMAÑO COMPLETO */
.video-preview-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* llena el contenedor siempre */
    display: block;
    opacity: 0;
    transition: opacity .4s ease;
}

/* OVERLAY (imagen + botón) TAMBIÉN A FULL SIZE */
.video-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .4s ease;
    cursor: pointer;
}

.video-preview-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* BOTÓN PLAY RESPONSIVE Y ESCALABLE */
.video-play-btn {
    position: absolute;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    width: 35%;       /* ← RELATIVO al tamaño del contenedor */
    max-width: 290px; /* límite en desktop */
}

.video-play-btn img {
    width: 100%;
    height: auto;
}

/* Ajustes según pantallas */
@media(max-width: 1024px) {
    .video-play-btn {
        width: 28%;
    }
}

@media(max-width: 768px) {
    .video-play-btn {
        width: 250px;
    }
}

@media(max-width: 480px) {
    .video-play-btn {
        width: 250px;
    }
    
}

/* Ocultar overlay al reproducir */
.video-preview-hidden {
    opacity: 0 !important;
    pointer-events: none;

    /* esto modifique yo */
    align-items: center;
    justify-content: center;
    background: #000;
    transition: opacity .4s ease;
    cursor: pointer;
}
    
.video-preview-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-play-btn {
    position: absolute;
    padding: 12px 20px;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 22px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    z-index: 10;
}


.video-preview-hidden {
    opacity: 0 !important;
    pointer-events: none;
}