/**
 * Block: actionworld/teaser (image + text + button, used for Paintballfarm)
 * Becomes blocks/teaser/style.css.
 */
.aw-teaser {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 80vh, 820px);
  padding-block: var(--aw-section);
  overflow: hidden;
}

.aw-teaser__bg {
  position: absolute;
  inset: -8% 0;
  z-index: -2;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 70% center;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aw-teaser__bg { animation: aw-parallax linear both; animation-timeline: view(); }
  }
}
@keyframes aw-parallax {
  from { transform: translateY(-6%); }
  to   { transform: translateY(6%); }
}

.aw-teaser::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .92) 0%, rgb(0 0 0 / .7) 38%, rgb(0 0 0 / 0) 70%),
    linear-gradient(0deg, var(--aw-black) 0%, transparent 18%, transparent 82%, var(--aw-black) 100%);
}

.aw-teaser__content { max-width: 34rem; }
.aw-teaser__kicker {
  margin-bottom: 1rem;
  color: var(--aw-white);
  font-size: var(--aw-step-1);
  font-weight: 600;
}
.aw-teaser__title {
  font-size: clamp(3.4rem, 2rem + 6vw, 7rem);
  line-height: .8;
  margin-bottom: 1.5rem;
}
.aw-teaser__title span { display: block; }
.aw-teaser__text { color: #d5d9e0; margin-bottom: 2rem; }

/* Mobile: photo on top, fading into the black; the text starts in the fade */
@media (max-width: 700px) {
  .aw-teaser { display: block; min-height: 0; padding-top: 0; }
  .aw-teaser__bg {
    position: relative;
    inset: auto;
    display: block;
    height: clamp(300px, 85vw, 520px);
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(0deg, transparent 0%, #000 45%);
  }
  .aw-teaser::after { display: none; }
  .aw-teaser .aw-wrap { position: relative; margin-top: clamp(-7rem, -20vw, -4rem); }
}