/*
 * SCS Page Builder – Academy Design v1.1.33
 * Seamless image-header waves: show the actual Academy page background
 * through the transparent part of the wave instead of painting it white.
 * Scoped to Academy hero headers; backgrounds, content and SVG geometry stay intact.
 */

/* Fallback for browsers without CSS masking: avoid the original stark-white wave. */
.scs-academy .scs-hero > .scs-wave-white path,
.scs-academy .scs-inner-hero > .scs-wave-white path,
.scs-academy .scs-offer-image-hero > .scs-offer-image-wave path {
  fill: #fff9f5;
}

/* Modern browsers: cut the existing wave curve out of the header itself.
 * The true underlying page gradient now continues seamlessly through it. */
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .scs-academy .scs-hero,
  .scs-academy .scs-inner-hero,
  .scs-academy .scs-offer-image-hero {
    --scs-wave-cut-height: 45px;
    -webkit-mask-image: linear-gradient(#000, #000), url('../img/wave-mask-standard.svg');
    mask-image: linear-gradient(#000, #000), url('../img/wave-mask-standard.svg');
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    -webkit-mask-position: left top, left bottom;
    mask-position: left top, left bottom;
    -webkit-mask-size: 100% calc(100% - var(--scs-wave-cut-height) + 1px), 100% var(--scs-wave-cut-height);
    mask-size: 100% calc(100% - var(--scs-wave-cut-height) + 1px), 100% var(--scs-wave-cut-height);
  }

  .scs-academy .scs-hero {
    --scs-wave-cut-height: 42px;
  }

  /* Generic editor-created pages use a slightly different wave contour. */
  .scs-academy .scs-generic-page-hero {
    -webkit-mask-image: linear-gradient(#000, #000), url('../img/wave-mask-generic.svg');
    mask-image: linear-gradient(#000, #000), url('../img/wave-mask-generic.svg');
  }

  /* The eight instrument/offer page headers have their own larger wave. */
  .scs-academy .scs-offer-image-hero {
    --scs-wave-cut-height: 76px;
    -webkit-mask-image: linear-gradient(#000, #000), url('../img/wave-mask-offer.svg');
    mask-image: linear-gradient(#000, #000), url('../img/wave-mask-offer.svg');
  }

  /* The wave is now part of the mask, not a white painted SVG overlay. */
  .scs-academy .scs-hero > .scs-wave,
  .scs-academy .scs-inner-hero > .scs-wave,
  .scs-academy .scs-offer-image-hero > .scs-offer-image-wave {
    display: none;
  }

  @media (max-width: 900px) {
    .scs-academy .scs-inner-hero {
      --scs-wave-cut-height: 25px;
    }
    .scs-academy .scs-hero {
      --scs-wave-cut-height: 42px;
    }
    .scs-academy .scs-offer-image-hero {
      --scs-wave-cut-height: 64px;
    }
  }

  @media (max-width: 560px) {
    .scs-academy .scs-offer-image-hero {
      --scs-wave-cut-height: 54px;
    }
  }
}


/* v1.1.34 – seamless transition for all eight Unterricht / Angebote pages.
 * The v1.1.33 wave mask already shows the enclosing .scs-offer-page
 * background correctly. However, the first content section still had an
 * older explicit #fff background in reference-v110.css. As a result a white
 * stripe began exactly where the header's masked background ended.
 * Make ONLY that editorial section transparent so both sides of the wave
 * show the exact same underlying gradient. Preserve the wave shape, cards,
 * hero images, regular page sections, and WooCommerce checkout. */
.scs-academy.scs-offer-page > .scs-offer-editorial {
  background: transparent !important;
  background-image: none !important;
}