/* ==========================================================================
   COMPONENT: wave divider
   --------------------------------------------------------------------------
   The smooth SVG wave used to transition between two surfaces of different
   color. Render an .e-wave element as the FIRST child of the section that
   "owns" the wave color — the wave fills 80px (50px on mobile) above the
   section, masking the join with its sibling above.

   The fill color is set via a regular `background` (or
   `--e-wave-color` custom property). The shape is applied via mask-image so
   any color works without URL-encoding.

   Markup contract:
     <section class="e-section e-section--blue">
         <div class="e-wave" style="background-color: #dbeafe"></div>
         ...
     </section>

   Use the helper Razor partial _EWave.cshtml which sets the right inline
   color from a hex string.
   ========================================================================== */

.e-wave {
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    pointer-events: none;
    z-index: var(--e-z-decoration);
    background-color: var(--e-color-surface);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1440,40 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1440,40 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}


/* SHAPE VARIANTS — different curve profiles for variety between sections. */

.e-wave--soft {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C360,80 1080,0 1440,60 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C360,80 1080,0 1440,60 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E");
}

.e-wave--gentle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C480,80 960,0 1440,60 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C480,80 960,0 1440,60 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E");
}

.e-wave--bold {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C300,80 900,0 1440,60 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C300,80 900,0 1440,60 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E");
}


/* RESPONSIVE — shorter wave on mobile. */

@media (max-width: 639px) {

    .e-wave {
        height: 50px;
        top: -49px;
    }

}