@import "Site.css";


.carousel-container {
    max-width: 1500px;
    margin-inline: auto;
}

.embla {
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
}

.embla__container {
    display: flex;
}

.embla__slide {
    padding: 1rem;
    text-align: center;
    flex: 0 0 100%;
}

.embla__dots {
    text-align: center;
    margin-top: 10px;
}

.embla__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--catalina-blue-50);
    border-radius: 50%;
    margin: 0 8px;
    cursor: pointer;
}

    .embla__dot.is-selected {
        background: var(--catalina-blue);
    }

    .embla__dot:is(:hover, :focus) {
        opacity: 0.75;
    }

.embla__buttons {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 1rem auto;
    max-width: 800px; 
    padding: 0 1rem;
}

    .embla__buttons button {
        background: none;
        border: 2px solid var(--catalina-blue);
        border-radius: 50%; 
        width: 3em;
        height: 3em;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }

        .embla__buttons button:hover {
            transform: scale(1.05);
        }

        .embla__buttons button:focus {
            outline: 3px solid var(--catalina-blue-50); /* accessible focus ring */
            outline-offset: 3px;
        }

.embla-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--catalina-blue)'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.embla-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--catalina-blue)'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.embla-control-prev-icon,
.embla-control-next-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


@media (min-width: 768px) {
    .embla__slide {
        flex: 0 0 50%;
    }
}

@media only screen and (min-width: 1200px) {
    .embla__slide {
        flex: 0 0 calc(100% / 3);
    }
}