/**
 * Bootstrap Layout — the only stylesheet the public site needs
 *
 * Six rules, so a background image can change per device without generating a
 * stylesheet per page. The builder writes the image of each device as a custom
 * property on the element (plus the smallest one as a plain background-image, so
 * the page still shows something if this file never loads); these media queries
 * swap the property at the Bootstrap breakpoints.
 *
 * Static and cacheable: it says nothing about any particular page.
 *
 * @copyright  (C) 2026 content-editor-joomla
 * @license    GNU General Public License version 2 or later
 */

.bsl-bg-image {
  background-image: var(--bsl-bgi-xs);
}

@media (min-width: 768px) {
  .bsl-bg-image {
    background-image: var(--bsl-bgi-md, var(--bsl-bgi-xs));
  }
}

@media (min-width: 992px) {
  .bsl-bg-image {
    background-image: var(--bsl-bgi-lg, var(--bsl-bgi-md, var(--bsl-bgi-xs)));
  }
}

/* ------------------------------------------------------------------ */
/* Half a twelfth, per device                                          */
/*                                                                     */
/* Twelve does not divide by eight, and `3.5 + 4.5 + 4` is a layout    */
/* people ask for. Bootstrap has no `col-md-3.5`, so the builder writes */
/* the width as the percentage of the line it really is — the same      */
/* arithmetic Bootstrap does for its own classes, one step finer — and  */
/* these three rules hand it over at the same breakpoints.              */
/*                                                                     */
/* The column stays a column: the gutter comes from `.row > *`, the     */
/* wrapping from the flex row, and below its breakpoint it has no width */
/* rule at all, so it takes the whole line exactly like `col-md-*`.     */
/*                                                                     */
/* `!important` for the same reason as the exact spacings: this is an   */
/* explicit width for this column, and what it argues against are       */
/* Bootstrap's own classes, which carry `!important` themselves.        */
/* ------------------------------------------------------------------ */

.bsl-w-xs {
  flex: 0 0 auto !important;
  width: var(--bsl-w-xs) !important;
}

@media (min-width: 768px) {
  .bsl-w-md {
    flex: 0 0 auto !important;
    width: var(--bsl-w-md) !important;
  }
}

@media (min-width: 992px) {
  .bsl-w-lg {
    flex: 0 0 auto !important;
    width: var(--bsl-w-lg) !important;
  }
}

/* ------------------------------------------------------------------ */
/* How tall a block is, per device                                     */
/*                                                                     */
/* Same three rules, same reason: a band that is half a laptop high is */
/* most of a phone, and a height per page would mean a stylesheet per  */
/* page. The builder writes the height of each device as a custom      */
/* property; these swap it at the Bootstrap breakpoints.               */
/* ------------------------------------------------------------------ */

.bsl-h {
  min-height: var(--bsl-h-xs);
}

@media (min-width: 768px) {
  .bsl-h {
    min-height: var(--bsl-h-md, var(--bsl-h-xs));
  }
}

@media (min-width: 992px) {
  .bsl-h {
    min-height: var(--bsl-h-lg, var(--bsl-h-md, var(--bsl-h-xs)));
  }
}

/* Exact: the height is the height. What does not fit is cropped, and an  */
/* image inside fills the box edge to edge — hija directa, o la única cosa */
/* que hay en una columna de la fila, que es como se maqueta una franja a   */
/* sangre (Bell, 15-sep-2026: la foto está en la columna, no en la sección).*/
.bsl-h-exact {
  height: var(--bsl-h-xs);
  overflow: hidden;
}

.bsl-h-exact > img,
.bsl-h-exact > a > img,
.bsl-h-exact > [class*="col"] > img:only-child,
.bsl-h-exact > [class*="col"] > a:only-child > img,
.bsl-h-exact > [class*="col"] > p:only-child > img:only-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bsl-h-exact > a,
.bsl-h-exact > [class*="col"] > a:only-child,
.bsl-h-exact > [class*="col"] > p:only-child {
  display: block;
  height: 100%;
  margin: 0;
}

/* Una fila exacta es flex: sus columnas ya se estiran, pero una que se */
/* pase de alto tiene que quedarse dentro de la caja, no desbordarla.   */
.bsl-h-exact > [class*="col"] {
  max-height: 100%;
  overflow: hidden;
}

@media (min-width: 768px) {
  .bsl-h-exact {
    height: var(--bsl-h-md, var(--bsl-h-xs));
  }
}

@media (min-width: 992px) {
  .bsl-h-exact {
    height: var(--bsl-h-lg, var(--bsl-h-md, var(--bsl-h-xs)));
  }
}

/* Y sin marcar nada: una caja con altura cuyo ÚNICO contenido es una foto  */
/* — la franja a sangre — recorta por su cuenta. Poner una altura ahí y que */
/* la foto la estire era la respuesta equivocada a lo único que se pedía    */
/* (Bell, 15-sep-2026: «yo en la página refresco y no veo nada»). Con       */
/* cualquier otra cosa dentro, la altura sigue siendo un mínimo y manda la  */
/* casilla «Exacta».                                                        */
.bsl-h:has(> img:only-child, > a:only-child > img:only-child, > [class*="col"]:only-child > img:only-child, > [class*="col"]:only-child > a:only-child > img:only-child, > [class*="col"]:only-child > p:only-child > img:only-child) {
  height: var(--bsl-h-xs);
  overflow: hidden;
}

@media (min-width: 768px) {
  .bsl-h:has(> img:only-child, > a:only-child > img:only-child, > [class*="col"]:only-child > img:only-child, > [class*="col"]:only-child > a:only-child > img:only-child, > [class*="col"]:only-child > p:only-child > img:only-child) {
    height: var(--bsl-h-md, var(--bsl-h-xs));
  }
}

@media (min-width: 992px) {
  .bsl-h:has(> img:only-child, > a:only-child > img:only-child, > [class*="col"]:only-child > img:only-child, > [class*="col"]:only-child > a:only-child > img:only-child, > [class*="col"]:only-child > p:only-child > img:only-child) {
    height: var(--bsl-h-lg, var(--bsl-h-md, var(--bsl-h-xs)));
  }
}

.bsl-h:has(> img:only-child, > a:only-child > img:only-child, > [class*="col"]:only-child > img:only-child, > [class*="col"]:only-child > a:only-child > img:only-child, > [class*="col"]:only-child > p:only-child > img:only-child) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La columna (o el enlace, o el <p>) que hay en medio no mide por su       */
/* cuenta: llena la caja, que es lo que la foto va a cubrir.                */
.bsl-h:has(> img:only-child, > a:only-child > img:only-child, > [class*="col"]:only-child > img:only-child, > [class*="col"]:only-child > a:only-child > img:only-child, > [class*="col"]:only-child > p:only-child > img:only-child) [class*="col"],
.bsl-h:has(> img:only-child, > a:only-child > img:only-child, > [class*="col"]:only-child > img:only-child, > [class*="col"]:only-child > a:only-child > img:only-child, > [class*="col"]:only-child > p:only-child > img:only-child) a,
.bsl-h:has(> img:only-child, > a:only-child > img:only-child, > [class*="col"]:only-child > img:only-child, > [class*="col"]:only-child > a:only-child > img:only-child, > [class*="col"]:only-child > p:only-child > img:only-child) p {
  display: block;
  height: 100%;
  max-height: 100%;
  margin: 0;
  overflow: hidden;
}

/* The video cover: the picture shown before a YouTube or Vimeo video     */
/* plays, with a play badge. site-video.js swaps the player in on click.  */
.bsl-video-cover {
  cursor: pointer;
}

.bsl-video-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bsl-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  transition: background .15s;
}

.bsl-video-cover:hover .bsl-video-play,
.bsl-video-cover:focus-visible .bsl-video-play {
  background: rgba(0, 0, 0, .8);
}

.bsl-video-play::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -.9rem 0 0 -.55rem;
  border-style: solid;
  border-width: .9rem 0 .9rem 1.5rem;
  border-color: transparent transparent transparent #fff;
}

/* ------------------------------------------------------------------ */
/* An exact padding or margin, per device                              */
/*                                                                     */
/* One class per side, and only on the sides whose measurement changes  */
/* with the screen: a side that is the same everywhere is written as a  */
/* plain declaration and a side that is set nowhere writes nothing —    */
/* `padding-top: var(--bsl-pt-xs)` with nothing behind it is not "no    */
/* padding", it is a declaration that fails and takes the template's    */
/* own spacing with it.                                                 */
/*                                                                     */
/* `!important` because that is the deal the panel makes: an exact      */
/* measurement overrides the Bootstrap scale above it, and the scale is */
/* written with utilities, which carry `!important` themselves.         */
/* ------------------------------------------------------------------ */

.bsl-sp-pt {
  padding-top: var(--bsl-pt-xs) !important;
}

.bsl-sp-pr {
  padding-right: var(--bsl-pr-xs) !important;
}

.bsl-sp-pb {
  padding-bottom: var(--bsl-pb-xs) !important;
}

.bsl-sp-pl {
  padding-left: var(--bsl-pl-xs) !important;
}

.bsl-sp-mt {
  margin-top: var(--bsl-mt-xs) !important;
}

.bsl-sp-mr {
  margin-right: var(--bsl-mr-xs) !important;
}

.bsl-sp-mb {
  margin-bottom: var(--bsl-mb-xs) !important;
}

.bsl-sp-ml {
  margin-left: var(--bsl-ml-xs) !important;
}

@media (min-width: 768px) {
  .bsl-sp-pt {
    padding-top: var(--bsl-pt-md, var(--bsl-pt-xs)) !important;
  }

  .bsl-sp-pr {
    padding-right: var(--bsl-pr-md, var(--bsl-pr-xs)) !important;
  }

  .bsl-sp-pb {
    padding-bottom: var(--bsl-pb-md, var(--bsl-pb-xs)) !important;
  }

  .bsl-sp-pl {
    padding-left: var(--bsl-pl-md, var(--bsl-pl-xs)) !important;
  }

  .bsl-sp-mt {
    margin-top: var(--bsl-mt-md, var(--bsl-mt-xs)) !important;
  }

  .bsl-sp-mr {
    margin-right: var(--bsl-mr-md, var(--bsl-mr-xs)) !important;
  }

  .bsl-sp-mb {
    margin-bottom: var(--bsl-mb-md, var(--bsl-mb-xs)) !important;
  }

  .bsl-sp-ml {
    margin-left: var(--bsl-ml-md, var(--bsl-ml-xs)) !important;
  }
}

@media (min-width: 992px) {
  .bsl-sp-pt {
    padding-top: var(--bsl-pt-lg, var(--bsl-pt-md, var(--bsl-pt-xs))) !important;
  }

  .bsl-sp-pr {
    padding-right: var(--bsl-pr-lg, var(--bsl-pr-md, var(--bsl-pr-xs))) !important;
  }

  .bsl-sp-pb {
    padding-bottom: var(--bsl-pb-lg, var(--bsl-pb-md, var(--bsl-pb-xs))) !important;
  }

  .bsl-sp-pl {
    padding-left: var(--bsl-pl-lg, var(--bsl-pl-md, var(--bsl-pl-xs))) !important;
  }

  .bsl-sp-mt {
    margin-top: var(--bsl-mt-lg, var(--bsl-mt-md, var(--bsl-mt-xs))) !important;
  }

  .bsl-sp-mr {
    margin-right: var(--bsl-mr-lg, var(--bsl-mr-md, var(--bsl-mr-xs))) !important;
  }

  .bsl-sp-mb {
    margin-bottom: var(--bsl-mb-lg, var(--bsl-mb-md, var(--bsl-mb-xs))) !important;
  }

  .bsl-sp-ml {
    margin-left: var(--bsl-ml-lg, var(--bsl-ml-md, var(--bsl-ml-xs))) !important;
  }
}

/* ------------------------------------------------------------------ */
/* Appear on entering the screen                                       */
/*                                                                     */
/* One effect and one only: a fade with a short rise, once, when the   */
/* block reaches the screen. The hidden state is a class the script    */
/* adds — never this file — so with no JavaScript everything is        */
/* simply visible, which is the trap every animation library falls in. */
/* ------------------------------------------------------------------ */

.bsl-anim-ready {
  opacity: 0;
  transform: translateY(12px);
}

.bsl-anim-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease-out, transform .5s ease-out;
}

.bsl-anim-in[data-bsl-anim-delay="100"] { transition-delay: .1s; }
.bsl-anim-in[data-bsl-anim-delay="200"] { transition-delay: .2s; }
.bsl-anim-in[data-bsl-anim-delay="300"] { transition-delay: .3s; }

/* Whoever asked their system for less movement gets the fade alone */
@media (prefers-reduced-motion: reduce) {
  .bsl-anim-ready {
    transform: none;
  }

  .bsl-anim-in {
    transition: opacity .3s linear;
    transition-delay: 0s;
  }
}

/* ------------------------------------------------------------------ */
/* Un color de texto puesto en una sección o en una columna            */
/*                                                                     */
/* `color` se hereda, y la herencia pierde contra cualquier regla que   */
/* el hijo tenga para sí. Una plantilla con `p { color: var(--mute) }`  */
/* deja gris el párrafo dentro de una sección que dijiste blanca, y no  */
/* hay `!important` en el padre que lo arregle: el important sólo       */
/* decide entre declaraciones del mismo elemento.                      */
/*                                                                     */
/* Así que el color viaja también como propiedad y esta regla se lo da  */
/* al texto de dentro. Los enlaces quedan fuera a propósito: un enlace  */
/* que se vuelve del color del texto deja de parecer un enlace, y eso   */
/* es una decisión suya, no un efecto secundario de pintar una banda.   */
/* ------------------------------------------------------------------ */

.bsl-ink :is(p, li, dt, dd, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, i, blockquote, figcaption, td, th, label, legend) {
  color: var(--bsl-ink) !important;
}