/* Video Lightbox Component */
/* Media query breakpoints */
@font-face {
  font-family: "Cardo Bold";
  src: url("/themes/custom/historias/assets/fonts/cardo/Cardo-Bold.woff2") format("woff2"), url("/themes/custom/historias/assets/fonts/cardo/Cardo-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cardo Regular";
  src: url("/themes/custom/historias/assets/fonts/cardo/Cardo-Regular.woff2") format("woff2"), url("/themes/custom/historias/assets/fonts/cardo/Cardo-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cardo Italic";
  src: url("/themes/custom/historias/assets/fonts/cardo/Cardo-Italic.woff2") format("woff2"), url("/themes/custom/historias/assets/fonts/cardo/Cardo-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Display";
  src: url("/themes/custom/historias/assets/fonts/librecaslon/LibreCaslonDisplay-Regular.woff2") format("woff2"), url("/themes/custom/historias/assets/fonts/librecaslon/LibreCaslonDisplay-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "icomoon";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/themes/custom/historias/assets/fonts/icomoon/icomoon.tff") format("tff"), url("/themes/custom/historias/assets/fonts/icomoon/icomoon.eot?") format("eot"), url("/themes/custom/historias/assets/fonts/icomoon/icomoon.woff") format("woff");
}
.c-video-lightbox {
  --vlb-radius: 25px;
  --vlb-play-size: 76px;
  --vlb-play-color: #fff;
  --vlb-backdrop-bg: rgba(0 0 0 / 0.85);
  --vlb-trans-img: 1s cubic-bezier(0.25, 0.8, 0.25, 1);
  --vlb-trans-svg: 0.3s ease;
  --vlb-panel-max: min(92vw, 1080px);
}

.c-video-lightbox {
  position: relative;
  display: block;
}

.c-video-lightbox__trigger {
  position: relative;
  display: block;
  all: unset;
  width: 100%;
  overflow: hidden;
  border-radius: var(--vlb-radius);
  cursor: pointer;
}
.c-video-lightbox__trigger:focus-visible {
  outline: 3px solid var(--color-primary-500, #034c5e);
  outline-offset: 3px;
  border-radius: var(--vlb-radius);
}
.c-video-lightbox__trigger:hover .c-video-lightbox__play .front {
  transform: translateX(100%);
}
.c-video-lightbox__trigger:hover .c-video-lightbox__play .back {
  transform: translateX(0%);
}

.c-video-lightbox__thumb {
  display: block;
  background: #000;
  line-height: 0;
  aspect-ratio: 16/9;
}
.c-video-lightbox__thumb img.c-video-lightbox__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform var(--vlb-trans-img);
  transform-origin: center;
}

.c-video-lightbox__play {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform var(--vlb-trans-svg), opacity var(--vlb-trans-svg);
}
.c-video-lightbox__play svg {
  width: 76px;
  height: 76px;
}
@media (min-width: 992px) {
  .c-video-lightbox__play svg {
    width: 96px;
    height: 96px;
  }
}
.c-video-lightbox__play .front,
.c-video-lightbox__play .back {
  will-change: transform;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.c-video-lightbox__play .back {
  transform: translateX(-100%);
}

.c-video-lightbox__play-icon {
  display: block;
  color: var(--vlb-play-color);
  fill: var(--vlb-play-color);
}

@media (prefers-reduced-motion: reduce) {
  .c-video-lightbox__img,
  .c-video-lightbox__play {
    transition: none;
  }
}
.c-video-lightbox__dialog {
  --vlb-backdrop-bg: rgba(0 0 0 / 0.85);
  --vlb-panel-max: min(92vw, 1080px);
  --vlb-radius: 25px;
  position: fixed;
  display: flex;
  z-index: 9000;
  inset: 0;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.c-video-lightbox__dialog.is-open {
  visibility: visible;
  pointer-events: auto;
}

.c-video-lightbox__backdrop {
  position: absolute;
  background: var(--vlb-backdrop-bg);
  opacity: 0;
  inset: 0;
  transition: opacity 0.3s ease;
}

.c-video-lightbox__dialog.is-open .c-video-lightbox__backdrop {
  opacity: 1;
}

.c-video-lightbox__panel {
  position: relative;
  max-width: 900px;
  opacity: 0;
  z-index: 1;
  width: var(--vlb-panel-max);
  transform: scale(0.9) translateY(32px);
  transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.3s ease;
}

.c-video-lightbox__dialog.is-open .c-video-lightbox__panel {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.c-video-lightbox__close {
  position: absolute;
  top: -38px;
  right: -8px;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100px;
  color: var(--white);
  background: transparent;
  border: 2px solid transparent;
  font-size: 1.75rem;
  line-height: 2.375rem;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  opacity: 0.65;
}
.c-video-lightbox__close:hover, .c-video-lightbox__close:focus-visible {
  border-color: #fff;
  transform: scale(0.8) rotateZ(90deg);
  opacity: 1;
}
.c-video-lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

.c-video-lightbox__ratio {
  position: relative;
  background: #000;
  width: 100%;
  max-width: 900px;
  overflow: hidden;
}
.c-video-lightbox__ratio::before {
  display: block;
  content: "";
}
.c-video-lightbox__ratio--16-9::before {
  padding-top: 56.25%;
}
.c-video-lightbox__ratio--4-3::before {
  padding-top: 75%;
}
.c-video-lightbox__ratio--1-1::before {
  padding-top: 100%;
}

.c-video-lightbox__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/*# sourceMappingURL=video-lightbox.css.map */