/* =========================================================
   COMPONENTE ONDA A FASCE — CHIAVE DEL MARE

   Quattro fasce chiuse e contigue:
   1. azzurro
   2. bianco
   3. viola
   4. azzurro inferiore

   Il componente si sovrappone alle due sezioni adiacenti.
   ========================================================= */

.cdm-wave-divider {
    position: relative;
    z-index: 20;

    width: 100%;
    height: 240px;

    margin-top: -120px;
    margin-bottom: -120px;

    padding: 0;
    overflow: hidden;
    line-height: 0;

    background: transparent;
    pointer-events: none;
    isolation: isolate;

    --cdm-wave-color-1: #15d4ff;
    --cdm-wave-color-2: #ffffff;
    --cdm-wave-color-3: #a12c87;
    --cdm-wave-color-4: #86b9dc;
}

.cdm-wave-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: transparent;
}

.cdm-wave-band {
    stroke: none;
    vector-effect: non-scaling-stroke;
}

.cdm-wave-band-1 {
    fill: var(--cdm-wave-color-1);
}

.cdm-wave-band-2 {
    fill: var(--cdm-wave-color-2);
}

.cdm-wave-band-3 {
    fill: var(--cdm-wave-color-3);
}

.cdm-wave-band-4 {
    fill: var(--cdm-wave-color-4);
}

/* Le sezioni rimangono dietro al separatore. */

.cdm-hero,
.cdm-section {
    position: relative;
    z-index: 1;
}

/* =========================================================
   DIMENSIONI OPZIONALI
   ========================================================= */

.cdm-wave-small {
    height: 170px;
    margin-top: -85px;
    margin-bottom: -85px;
}

.cdm-wave-medium {
    height: 240px;
    margin-top: -120px;
    margin-bottom: -120px;
}

.cdm-wave-large {
    height: 300px;
    margin-top: -150px;
    margin-bottom: -150px;
}

/* Onda capovolta. */

.cdm-wave-flipped .cdm-wave-svg {
    transform: rotate(180deg);
}

/* Variante più marcata. */

.cdm-wave-bold {
    filter: saturate(1.12) contrast(1.03);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .cdm-wave-divider,
    .cdm-wave-medium {
        height: 190px;
        margin-top: -95px;
        margin-bottom: -95px;
    }

    .cdm-wave-small {
        height: 140px;
        margin-top: -70px;
        margin-bottom: -70px;
    }

    .cdm-wave-large {
        height: 235px;
        margin-top: -117px;
        margin-bottom: -118px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .cdm-wave-divider,
    .cdm-wave-medium {
        height: 145px;
        margin-top: -72px;
        margin-bottom: -73px;
    }

    .cdm-wave-small {
        height: 105px;
        margin-top: -52px;
        margin-bottom: -53px;
    }

    .cdm-wave-large {
        height: 180px;
        margin-top: -90px;
        margin-bottom: -90px;
    }
}

/* =========================================================
   ACCESSIBILITÀ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cdm-wave-divider,
    .cdm-wave-svg,
    .cdm-wave-band {
        animation: none;
        transition: none;
    }
}