/* ==========================================================================
   NASHORN – Final CTA, desktop
   Developed by webndo

   From 1200px the textile is the full scene. Copy sits in the center,
   under a blue line that drops from the section’s top edge.
   Smaller screens stay as they are.
   ========================================================================== */

.cta__line {
  display: none;
}

.cta__media-shift,
.cta__shift {
  display: contents;
}

@media (min-width: 1200px) {
  .cta {
    --cta-img-y: 0px;
    --cta-text-y: 0px;
    align-items: stretch;
    min-height: clamp(620px, 78vh, 820px);
    overflow: hidden;
  }

  .cta__media {
    z-index: 1;
    inset: 0;
    width: auto;
    overflow: hidden;
  }

  .cta__media-shift {
    display: block;
    position: absolute;
    top: -110px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: calc(100% + 220px);
    transform: translate3d(0, var(--cta-img-y), 0);
  }

  .cta__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 42%;
    transform: none;
  }

  .cta__media::after {
    z-index: 2;
    background: linear-gradient(
      0deg,
      rgba(7, 19, 29, 0.95) 0%,
      rgba(7, 19, 29, 0.8) 24%,
      rgba(7, 19, 29, 0.48) 50%,
      rgba(7, 19, 29, 0.18) 72%,
      rgba(7, 19, 29, 0.04) 88%,
      transparent 100%
    );
  }

  .cta__inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-rows: minmax(48px, 1fr) auto minmax(48px, 1fr);
    justify-items: center;
    align-items: stretch;
    align-self: stretch;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: clamp(620px, 78vh, 820px);
    margin-inline: 0;
    padding-block: 0;
  }

  .cta__line {
    grid-row: 1;
    align-self: stretch;
    display: block;
    width: 2px;
    margin-bottom: 36px;
    background: #f6f8fa;
    transform-origin: top center;
  }

  .js .cta__line {
    transform: scaleY(0);
  }

  .js .cta:has(.cta__content.is-revealed) .cta__line {
    transform: scaleY(1);
    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cta__shift {
    display: block;
    grid-row: 2;
    grid-column: 1;
    width: min(820px, calc(100% - 2 * min(var(--gutter), 40px)));
    max-width: 820px;
    text-align: center;
    transform: translate3d(0, var(--cta-text-y), 0);
  }

  .cta__content {
    grid-row: auto;
    grid-column: auto;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    text-align: center;
    translate: none;
    transform: none;
  }

  .cta__text {
    max-width: 640px;
    margin-inline: auto;
  }

  .cta__actions {
    justify-content: center;
  }

  .js .cta__content > * {
    opacity: 0;
    translate: 0 36px;
  }

  .js .cta__content.is-revealed > * {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
      translate 1100ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 160ms;
  }

  .js .cta__content.is-revealed > .cta__text {
    transition-delay: 300ms;
  }

  .js .cta__content.is-revealed > .cta__actions {
    transition-delay: 460ms;
  }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .cta__media-shift {
    top: 0;
    height: 100%;
    transform: none;
  }

  .cta__media img {
    transform: none;
  }

  .js .cta__line,
  .js .cta:has(.cta__content.is-revealed) .cta__line {
    transform: none;
    transition: none;
  }

  .js .cta__content > *,
  .js .cta__content.is-revealed > * {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .cta__shift,
  .cta__content {
    translate: none;
    transform: none;
  }
}