/*
 * .collection-teaser — reusable banner block.
 * Editors paste the matching HTML snippet (templates/snippets/collection-teaser.html)
 * anywhere in a Basic Page body. This file is loaded sitewide via the
 * kaindl_theme/teaser-banner library.
 */

.collection-teaser.content-element {
  padding-top: 42px;
}

.collection-teaser .collection-teaser__layout {
  margin: 0 auto;
  max-width: var(--kaindl-container-max);
  width: 100%;
  position: relative;
}

.collection-teaser .collection-teaser__media {
  width: 100%;
}

.collection-teaser .collection-teaser__image-curtain-wrapper {
  overflow: hidden;
  position: relative;
}

.collection-teaser .collection-teaser__image-curtain {
  overflow: hidden;
  position: relative;
}

.collection-teaser .collection-teaser__image-curtain-content {
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 1.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.collection-teaser .collection-teaser__image-wrapper {
  margin: 0;
}

.collection-teaser .collection-teaser__image {
  display: block;
  height: auto;
  width: 100%;
}

.collection-teaser .collection-teaser__body {
  margin-left: auto;
  margin-top: 0;
  max-width: none;
  position: relative;
  width: 100%;
  z-index: 2;
}

.collection-teaser .collection-teaser__box {
  background: #f5f5f5;
  min-height: auto;
  opacity: 1;
  padding: 30px 18px 34px;
  transform: none;
  transition:
    opacity 0.85s ease,
    transform 0.85s ease;
}

.collection-teaser .collection-teaser__box-headline {
  color: #000;
  font-size: var(--kaindl-type-title-lg);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: var(--kaindl-leading-tight);
  margin: 0;
  text-transform: uppercase;
}

.collection-teaser .collection-teaser__box-text {
  margin-top: 15px;
}

.collection-teaser .collection-teaser__box-text p {
  color: #666;
  font-size: var(--kaindl-type-card-text);
  line-height: var(--kaindl-leading-copy);
  margin: 0;
}

/* Lists inside the teaser box inherit the paragraph's muted color + scale
   so they read as part of the same description, and pick up some breathing
   room above when they follow a <p>. The rotated-square bullet comes from
   the global prose-list rule in page-body.css. */
.collection-teaser .collection-teaser__box-text ul,
.collection-teaser .collection-teaser__box-text ol {
  color: #666;
  font-size: var(--kaindl-type-card-text);
  line-height: var(--kaindl-leading-copy);
  margin-top: 1em;
}

.collection-teaser .collection-teaser__box-text > p + ul,
.collection-teaser .collection-teaser__box-text > p + ol {
  margin-top: 1.1em;
}

.collection-teaser .collection-teaser__box > p {
  margin: 0;
}

.collection-teaser .collection-teaser__box-text + p {
  margin-top: 20px;
}

.collection-teaser[data-home-animate="true"].is-observing:not(.is-inview)
  .collection-teaser__image-curtain-content {
  clip-path: inset(0 100% 0 0);
  transform: translate3d(-2.5%, 0, 0) scale(1.02);
}

.collection-teaser[data-home-animate="true"].is-observing:not(.is-inview)
  .collection-teaser__box {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.collection-teaser[data-home-animate="true"].is-observing:not(.is-inview)
  .collection-teaser__box-headline {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.collection-teaser.is-inview .collection-teaser__image-curtain-content {
  clip-path: inset(0 0 0 0);
  transform: none;
}

.collection-teaser.is-inview .collection-teaser__box {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.32s;
}

.collection-teaser.is-inview .collection-teaser__box-headline {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.44s;
}

@media (min-width: 640px) {
  .collection-teaser.content-element {
    padding-top: 52px;
  }

  .collection-teaser .collection-teaser__box {
    padding: 34px 26px 38px;
  }

  .collection-teaser .collection-teaser__box-text + p {
    margin-top: 26px;
  }
}

@media (min-width: 1280px) {
  .collection-teaser.content-element {
    padding-top: 74px;
  }

  .collection-teaser .collection-teaser__layout {
    max-width: 1120px;
  }

  .collection-teaser .collection-teaser__media {
    width: min(70%, 760px);
  }

  .collection-teaser .collection-teaser__body {
    margin-top: -128px;
    max-width: 763px;
    width: min(58%, 620px);
  }

  .collection-teaser .collection-teaser__box {
    min-height: 300px;
    padding: 62px 54px 58px;
  }

  .collection-teaser .collection-teaser__box-text + p {
    margin-top: 34px;
  }
}

@media (min-width: 1536px) {
  .collection-teaser .collection-teaser__layout {
    max-width: var(--kaindl-container-max);
  }

  .collection-teaser .collection-teaser__media {
    width: min(75%, 980px);
  }

  .collection-teaser .collection-teaser__body {
    margin-top: -182px;
    max-width: 763px;
    width: min(61%, 763px);
  }

  .collection-teaser .collection-teaser__box {
    min-height: 352px;
    padding: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collection-teaser .collection-teaser__box-headline,
  .collection-teaser .collection-teaser__image-curtain-content,
  .collection-teaser .collection-teaser__box {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}