/* Banner Carousel – Frontend CSS */
/* Rompe el contenedor normal del tema para ocupar todo el ancho de
   pantalla. La definía el theme (Blocksy) — ahora vive acá para no
   depender de que exista con ese nombre exacto en el tema activo. */
.full-width {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    position: relative;
}

/* Pegado al header (sin el hueco que deja el padding-top que la
   mayoría de temas le pone a su contenedor de contenido): en vez de
   adivinar cuántos px es ese padding (cambia según el tema activo),
   se lo quitamos directo a los contenedores que envuelven al
   carrusel — solo cuando lo contienen, así no afecta el espaciado
   normal de cualquier otra página/entrada sin carrusel. */
:where(main, article, .content-area):has(.bc-carousel.full-width) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* Algunos temas marcan el contenedor de contenido con un atributo
   propio (no una clase fija) para aplicarle su espaciado vertical vía
   variable CSS — este selector genérico por atributo lo neutraliza
   sin depender del nombre de esa variable ni del tema que la use; en
   temas que no usan ese atributo la regla simplemente no aplica. */
[data-vertical-spacing]:has(.bc-carousel.full-width) {
    padding-top: 0 !important;
}
/* El wrapper inmediato (.entry-content en la mayoría de temas) solo
   se limpia si el carrusel es literalmente su primer elemento —
   así, si algún día el shortcode se usa a mitad de una página normal
   en vez de como hero de portada, no le rompe el espaciado. */
.entry-content:has(> .bc-carousel.full-width:first-child) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.bc-carousel.full-width:first-child { margin-top: 0; }

/* --bc-desktop-height/--bc-mobile-height: alto configurable en
   Carruseles → Ajustes (ver bc_get_heights() en banner-carousel.php) —
   1920/768 son el ancho de referencia, fijo. Fallback 500/615 = los
   valores que este plugin traía hardcodeados antes de que existiera
   esa pantalla de ajustes. */
.bc-carousel{position:relative;width:100%;overflow:hidden;background:#e8e8e8;aspect-ratio:1920/var(--bc-desktop-height, 500);user-select:none;-webkit-user-select:none;}
.bc-track{display:flex;height:100%;transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);will-change:transform;}
.bc-slide{flex:0 0 100%;width:100%;height:100%;position:relative;overflow:hidden;}
.bc-slide a{display:block;width:100%;height:100%;}
.bc-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#e8e8e8;}
.bc-mobile{display:none;}.bc-desktop{display:block;}
@media(max-width:768px){.bc-carousel{aspect-ratio:768/var(--bc-mobile-height, 615);}.bc-desktop{display:none;}.bc-mobile{display:block;}}
.bc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(20,20,20,.78);border:none;color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s,box-shadow .2s;opacity:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 0 0 1.5px rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.35);}
.bc-arrow svg{width:22px;height:22px;flex-shrink:0;}
.bc-carousel:hover .bc-arrow{opacity:1;}
.bc-arrow:hover{background:rgba(20,20,20,.95);box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.35);}
.bc-prev{left:14px;}.bc-next{right:14px;}
.bc-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px;opacity:1;}
@media(max-width:768px){.bc-arrow{opacity:1;width:36px;height:36px;}.bc-arrow svg{width:18px;height:18px;}.bc-prev{left:8px;}.bc-next{right:8px;}}
.bc-controls{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;z-index:10;}
.bc-dots{display:flex;gap:7px;padding:6px 10px;background:rgba(20,20,20,.65);border-radius:20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.bc-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:background .2s,transform .2s;}
.bc-dot.active{background:#fff;transform:scale(1.25);}
.bc-dot:hover:not(.active){background:rgba(255,255,255,.75);}
.bc-dot:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.bc-playpause{width:26px;height:26px;border-radius:50%;border:none;background:rgba(20,20,20,.78);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .2s;}
.bc-playpause:hover{background:rgba(20,20,20,.95);}
.bc-playpause:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.bc-playpause svg{width:13px;height:13px;flex-shrink:0;}
.bc-playpause .bc-icon-play{display:none;}
.bc-playpause.is-paused .bc-icon-pause{display:none;}
.bc-playpause.is-paused .bc-icon-play{display:block;}
@media(max-width:768px){.bc-controls{bottom:8px;gap:5px;}.bc-dots{gap:5px;padding:4px 8px;}.bc-dot{width:6px;height:6px;}.bc-playpause{width:22px;height:22px;}.bc-playpause svg{width:11px;height:11px;}}