/* ========================= */
/* CAROUSEL — LARGE TABLET / SMALL DESKTOP */
/* ========================= */
@media (min-width: 1151px) and (max-width: 1350px) {
    .carousel-item.left {
        transform: translate3d(calc(-90% - min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }

    .carousel-item.right {
        transform: translate3d(calc(-10% + min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }
}


/* ========================= */
/* CAROUSEL — TABLET XL */
/* ========================= */
@media (min-width: 1065px) and (max-width: 1150px) {
    .carousel-item.left {
        transform: translate3d(calc(-80% - min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }

    .carousel-item.right {
        transform: translate3d(calc(-20% + min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }
}


/* ========================= */
/* CAROUSEL — TABLET LARGE */
/* ========================= */
@media (min-width: 956px) and (max-width: 1064px) {
    .carousel-item.left {
        transform: translate3d(calc(-70% - min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }

    .carousel-item.right {
        transform: translate3d(calc(-30% + min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }
}


/* ========================= */
/* CAROUSEL — TABLET */
/* ========================= */
@media (min-width: 769px) and (max-width: 955px) {
    .carousel-item.left {
        transform: translate3d(calc(-60% - min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }

    .carousel-item.right {
        transform: translate3d(calc(-40% + min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }
}


/* ========================= */
/* CAROUSEL — MOBILE LARGE */
/* ========================= */
@media (min-width: 601px) and (max-width: 768px) {
    .carousel-item.left {
        transform: translate3d(calc(-55% - min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }

    .carousel-item.right {
        transform: translate3d(calc(-45% + min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }
}


/* ========================= */
/* CAROUSEL — MOBILE */
/* ========================= */
@media (min-width: 556px) and (max-width: 600px) {
    .carousel-item.left {
        transform: translate3d(calc(-52% - min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }

    .carousel-item.right {
        transform: translate3d(calc(-48% + min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }
}


/* ========================= */
/* CAROUSEL — SMALL MOBILE */
/* ========================= */
@media (min-width: 421px) and (max-width: 555px) {
    .carousel-item.left {
        transform: translate3d(calc(-50% - min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }

    .carousel-item.right {
        transform: translate3d(calc(-50% + min(34vw, 125px)), -50%, 0) scale(0.62);
        opacity: 0.22;
    }
}


/* ========================= */
/* CAROUSEL — VERY SMALL MOBILE */
/* ========================= */
@media (max-width: 420px) {
    .carousel {--item-width: 88vw;--item-height: 58vw;height: 315px;}
    .carousel-nav {width: 36px;height: 36px;}
}


/* ========================= */
/* MOBILE PAYSAGE */
/* ========================= */
@media screen and (max-height: 600px) and (orientation: landscape) {

    #carousel {padding: 55px 20px 80px;}

    #carousel h2 {margin-bottom: 40px;font-size: 1.6rem;}

    #carousel .carousel {
        --item-width: 62vw;
        --item-height: 28vw;
        --side-offset: 30vw;

        height: 300px;margin-top: 0;
        margin-bottom: 35px;padding-bottom: 70px;
    }

    .carousel-nav {width: 40px;height: 40px;}

    .contact-me-btn {margin-top: 38px;padding: 9px 16px;}

    .carousel-item img {
        object-fit: cover;object-position: center 20%;
        background: var(--section-light-card);
    }

}


/* ========================= */
/* MOBILE INTERACTION PATCH */
/* ========================= */

/* ---------- */
/* GLOBAL TAP */
/* ---------- */
* {-webkit-tap-highlight-color: transparent;}

/* ---------- */
/* BUTTON FIX */
/* ---------- */
.pricing-button,
.carousel-nav,
.contact-me-btn {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}


/* ========================= */
/* MOBILE ONLY */
/* ========================= */
@media (hover: none) {

    /* ---------- */
    /* PRICING BTN */
    /* ---------- */
    .pricing-button:hover,
    .pricing-button:active,
    .pricing-button:focus {
        transform: none;
        background: rgba(23, 33, 29, 0.06);
        color: var(--section-light-text);
        box-shadow: none;
    }

    .pricing-button.active,
    .pricing-button.active:hover,
    .pricing-button.active:active,
    .pricing-button.active:focus {
        background: var(--section-light-accent);
        color: var(--section-dark-text);
        box-shadow: var(--shadow-soft);
    }

    /* ---------- */
    /* CAROUSEL NAV */
    /* ---------- */
    .carousel-nav:hover,
    .carousel-nav:focus,
    .carousel-nav:active {
        background: var(--section-light-accent);
        box-shadow: var(--shadow-soft);
        transform: translateY(-50%);
    }

    /* ---------- */
    /* CONTACT BTN */
    /* ---------- */
    .contact-me-btn:hover,
    .contact-me-btn:focus,
    .contact-me-btn:active {
        transform: none;
        background: var(--section-light-accent);
        box-shadow: var(--shadow-soft);
    }

    .contact-me-btn:hover .contact-icon-paw,
    .contact-me-btn:focus .contact-icon-paw,
    .contact-me-btn:active .contact-icon-paw {
        transform: none;
    }
}


/* ========================= */
/* ACCESSIBILITY */
/* ========================= */
a:focus,
button:focus {
    outline: none;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--section-light-hover);
    outline-offset: 3px;
}