/**
 * Lazyload iframe / video poster — shared by the React package and Webflow DevLink.
 * Icon colors use CSS variables set in TS from design tokens (see lazyload-iframe-icon-vars.ts).
 */

.tt-lazyload {
  position: relative;
  width: 100%;
  overflow: clip;
}

/* Matches tailwind `hero-image-border` plugin + responsive radii from LazyloadIframe */
.tt-lazyload--gradient-border {
  display: flex;
  width: 100%;
  border-radius: 1.5rem;
  border: 1.5rem solid transparent;
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  background-image: linear-gradient(
    to bottom,
    #fff0f5 32%,
    #fef9c3 47%,
    #ffc7db 88%
  );
  background-origin: border-box;
  background-clip: border-box;
}

@media (min-width: 768px) {
  .tt-lazyload--gradient-border {
    border-radius: 2rem;
  }
}

@media (min-width: 1024px) {
  .tt-lazyload--gradient-border {
    border-radius: 3.5rem;
    border-width: 3rem;
  }
}

.tt-lazyload__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 1rem;
}

.tt-lazyload__iframe--inactive {
  pointer-events: none;
}

.tt-lazyload__thumbnail-btn {
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: block;
  /* Overlay the iframe (matches prior absolute-positioned poster / icon) */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: auto;
}

.tt-lazyload__thumbnail-btn:focus-visible {
  outline: 2px solid #f43f85;
  outline-offset: 2px;
}

.tt-lazyload__thumbnail-btn--flow {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  height: auto;
}

.tt-lazyload__thumbnail-btn--hidden {
  display: none;
}

.tt-lazyload__poster {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: cover;
  opacity: 1;
  border-radius: 0.75rem;
  transition: opacity 150ms ease;
}

@media (min-width: 768px) {
  .tt-lazyload__poster {
    border-radius: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .tt-lazyload__poster {
    border-radius: 2rem;
  }
}

.tt-lazyload__poster--absolute {
  position: absolute;
  inset: 0;
}

.tt-lazyload__poster--radius-tight {
  border-radius: 1.5rem;
}

@media (min-width: 1024px) {
  .tt-lazyload__poster--radius-tight {
    border-radius: 2rem;
  }
}

.tt-lazyload__play-icon {
  position: absolute;
  width: 100%;
  inset: 0;
  margin: auto;
  height: 16%;
  max-height: 96px;
  color: var(--tt-lazyload-icon, #ffffff);
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
    drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  transition:
    color 100ms ease,
    transform 100ms ease;
}

.tt-lazyload__thumbnail-btn:hover .tt-lazyload__play-icon {
  color: var(--tt-lazyload-icon-hover, #ffc7db);
  transform: scale(1.1);
}