/* Devtrest YouTube Carousel for Elementor
   Based on the user's provided layout (mask gradients, tilted wrapper, card sizing). */

.devtrest-ytc__container {
  width: 100%;
  position: relative;
  overflow: hidden;
  /* remove top/bottom empty spacing by default */
  margin: 0;
  padding: 0;
}

.devtrest-ytc__mask{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.devtrest-ytc__wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform-origin: center center;
}

.devtrest-ytc__track{
  display: flex;
  align-items: center;
  position: absolute;
  will-change: transform;
}

.devtrest-ytc__card{
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

/* lite-youtube fills the card */
.devtrest-ytc__card lite-youtube {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
  border-radius: inherit;
}

/* Ensure iframe fills */
.devtrest-ytc__card lite-youtube iframe{
  width: 100% !important;
  height: 100% !important;
}

/* Hide any accidental captions */
.devtrest-ytc__card * {
  box-sizing: border-box;
}

/* Empty state */
.devtrest-ytc__empty{
  padding: 12px 14px;
  border: 1px dashed rgba(255,255,255,0.35);
  border-radius: 10px;
}

/* Mask gradients (added via inline style variables in JS) */
.devtrest-ytc__mask.devtrest-ytc__mask--on::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to right,
    var(--devtrest-ytc-bg, #000) 0%,
    transparent var(--devtrest-ytc-fade, 10%),
    transparent calc(100% - var(--devtrest-ytc-fade, 10%)),
    var(--devtrest-ytc-bg, #000) 100%
  );
}

.devtrest-ytc__mask.devtrest-ytc__mask--on::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent calc(100% - var(--devtrest-ytc-bottom, 40%)),
    rgba(0,0,0,0.45) calc(100% - (var(--devtrest-ytc-bottom, 40%) / 2)),
    var(--devtrest-ytc-bg, #000) 100%
  );
}

/* Mobile: no tilt by default via responsive control; also keep track visible */
@media (max-width: 767px){
  .devtrest-ytc__wrapper{ transform: rotate(0deg); }
}