/* =========================================================
   CHIAVE DEL MARE — RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .cdm-hero {
        min-height: 100vh;
        height: auto;
        padding: 0;
    }

    .cdm-hero-content {
        width: min(92%, 640px);
        padding: 120px 18px 72px;
    }

    .cdm-hero h1 {
        font-size: clamp(40px, 12vw, 54px);
        line-height: 1;
        margin-bottom: 22px;
    }

    .cdm-eyebrow {
        margin-bottom: 14px;
        font-size: 12px;
        letter-spacing: 2.4px;
    }

    .cdm-description {
        max-width: 34rem;
        margin-bottom: 34px;
        font-size: 17px;
        line-height: 1.55;
    }

    .cdm-buttons {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .cdm-btn {
        width: min(100%, 280px);
        min-width: 0;
    }

    /* -----------------------------------------------------
       SEZIONI GENERALI
       ----------------------------------------------------- */

    .cdm-section {
        min-height: 78vh;
        padding: 96px 18px;
    }

    .cdm-section-container {
        width: min(100%, 680px);
    }

    .cdm-section-title {
        margin-bottom: 18px;
        font-size: clamp(36px, 10.5vw, 52px);
        line-height: 1.04;
    }

    .cdm-section-text {
        font-size: 17px;
        line-height: 1.55;
    }

    .cdm-section-video-bg {
        object-position: center center;
    }

    .cdm-panorama-section .cdm-section-video-bg {
        object-position: 55% center;
    }

    /* -----------------------------------------------------
       DIVING
       ----------------------------------------------------- */

    .cdm-diving-section {
        min-height: 88vh;
    }

    .cdm-diving-content {
        grid-template-columns: 1fr;
        gap: 34px;
        text-align: center;
    }

    .cdm-diving-copy {
        max-width: 100%;
        margin: 0 auto;
    }

    .cdm-diving-copy .cdm-section-title,
    .cdm-diving-copy .cdm-section-text {
        text-align: center;
    }

    .cdm-diving-copy .cdm-section-text {
        margin-right: auto;
        margin-left: auto;
    }

    .cdm-turtle-btn {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .cdm-turtle-img {
        width: min(68vw, 280px);
    }

    .cdm-turtle-label {
        margin-top: 8px;
        font-size: 14px;
        letter-spacing: 0.9px;
    }

    /* -----------------------------------------------------
       DESERTO
       ----------------------------------------------------- */

    .cdm-desert-section {
        min-height: 88vh;
    }

    .cdm-desert-content {
        grid-template-columns: 1fr;
        gap: 34px;
        text-align: center;
    }

    .cdm-desert-copy {
        max-width: 100%;
        margin: 0 auto;
    }

    .cdm-desert-copy .cdm-section-title,
    .cdm-desert-copy .cdm-section-text {
        text-align: center;
    }

    .cdm-desert-copy .cdm-section-text {
        margin-right: auto;
        margin-left: auto;
    }

    .cdm-jeep-btn {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .cdm-jeep-img {
        width: min(78vw, 310px);
    }

    .cdm-jeep-label {
        margin-top: 8px;
        font-size: 14px;
        letter-spacing: 0.9px;
    }
}

/* =========================================================
   ANIMAZIONI MOBILE
   Tenute fuori dalla media query per evitare problemi
   di parsing su alcuni browser/minificatori.
   ========================================================= */

@keyframes cdmTurtleSwimAway {
    from {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(180px, -50px) rotate(10deg) scale(0.5);
    }
}

@keyframes cdmJeepDriveAway {
    from {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-180px, 20px) scale(0.58);
    }
}

/* Tablet piccolo / smartphone in orizzontale */
@media (min-width: 769px) and (max-width: 1024px) {

    .cdm-diving-content,
    .cdm-desert-content {
        gap: 42px;
    }

    .cdm-section-title {
        font-size: clamp(40px, 6vw, 60px);
    }
}

/* Riduzione animazioni per accessibilità */
@media (prefers-reduced-motion: reduce) {

    .cdm-turtle-img,
    .cdm-jeep-img {
        animation: none !important;
    }
}

/* =========================================================
   OTTIMIZZAZIONE SCROLL MOBILE
   ========================================================= */

@media (max-width: 768px) {

    html {
        scroll-behavior: auto;
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body {
        touch-action: pan-y;
        overscroll-behavior-y: auto;
    }

    .cdm-site-main,
    .cdm-section,
    .cdm-hero {
        touch-action: pan-y;
    }

    .cdm-hero-video,
    .cdm-section-video-bg {
        pointer-events: none;
        touch-action: none;
    }

    .cdm-hero-overlay,
    .cdm-section-overlay,
    .cdm-wave {
        pointer-events: none;
    }

    .cdm-turtle-img,
    .cdm-jeep-img {
        will-change: auto;
        filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.32));
    }
}

@media (max-width: 768px) {

    .cdm-turtle-img,
    .cdm-jeep-img {
        animation: none;
        will-change: auto;
    }

    .cdm-turtle-btn.is-swimming-away .cdm-turtle-img {
        animation: cdmTurtleSwimAway 0.85s ease-in forwards;
    }

    .cdm-jeep-btn.is-driving-away .cdm-jeep-img {
        animation: cdmJeepDriveAway 0.85s ease-in forwards;
    }
}

/* =========================================================
   SPAZIO HERO SOTTO HEADER MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .cdm-hero-content {
        width: min(92%, 640px);
        padding-top: 170px;
        padding-right: 18px;
        padding-bottom: 80px;
        padding-left: 18px;
    }
}


/* =========================================================
   IMMAGINI RESPONSIVE DELLE SEZIONI
   ========================================================= */

@media (max-width: 768px) {
    .cdm-section-picture,
    .cdm-section-image-bg {
        pointer-events: none;
        touch-action: none;
    }

    .cdm-panorama-section .cdm-section-image-bg,
    .cdm-diving-section .cdm-section-image-bg,
    .cdm-desert-section .cdm-section-image-bg {
        object-position: center center;
    }
}

@media (max-width: 768px) {
    html.cdm-menu-open,
    body.cdm-menu-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.cdm-menu-open {
        position: fixed;
        left: 0;
        width: 100%;
    }

    .cdm-nav.is-open {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
}