/* ==========================================================
   COBACH 34
   CARRUSEL DE ACTIVIDADES DESTACADAS
========================================================== */

.featured-activities {
    padding: 92px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f8fb 100%
        );
}


/* ==========================================================
   ENCABEZADO
========================================================== */

.featured-heading {
    margin-bottom: 34px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 35px;
}

.featured-heading > div:first-child {
    max-width: 760px;
}

.featured-heading h2 {
    margin:
        9px 0
        13px;

    color: var(--cobach-blue);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height: 1.08;

    letter-spacing: -.035em;
}

.featured-heading p {
    margin: 0;

    max-width: 680px;

    color: var(--muted);

    line-height: 1.75;
}


/* ==========================================================
   CONTROLES
========================================================== */

.featured-controls {
    display: flex;

    gap: 9px;

    flex-shrink: 0;
}

.featured-control {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border:
        1px solid #d7e1e9;

    border-radius: 13px;

    color: var(--cobach-blue);

    background: #fff;

    cursor: pointer;

    font-size: 1.15rem;
    font-weight: 900;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.featured-control:hover {
    color: #fff;

    background:
        var(--cobach-blue);

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(8,43,84,.13);
}


/* ==========================================================
   VIEWPORT
========================================================== */

.featured-carousel {
    position: relative;
}

.featured-viewport {
    overflow: visible;
}

.featured-track {
    display: flex;

    gap: 22px;

    transform:
        translate3d(0,0,0);

    transition:
        transform .55s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );

    will-change: transform;
}


/* ==========================================================
   SLIDE
========================================================== */

.featured-slide {
    min-width:
        calc(
            66.666% - 8px
        );

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(290px, .85fr);

    overflow: hidden;

    border:
        1px solid #dce5ed;

    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 20px 50px
        rgba(8,43,84,.10);

    opacity: .72;

    transform:
        scale(.985);

    transition:
        opacity .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.featured-slide.is-active {
    opacity: 1;

    transform:
        scale(1);

    box-shadow:
        0 27px 65px
        rgba(8,43,84,.15);
}


/* ==========================================================
   IMAGEN
========================================================== */

.featured-image-wrapper {
    position: relative;

    min-height: 390px;

    overflow: hidden;

    background:
        #dfe8ef;
}

.featured-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s ease;
}

.featured-slide:hover
.featured-image {
    transform:
        scale(1.035);
}

.featured-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5,28,53,.04),
            rgba(5,28,53,.20)
        );

    pointer-events: none;
}

.featured-category {
    position: absolute;

    top: 22px;
    left: 22px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(255,255,255,.35);

    border-radius: 999px;

    color: #fff;

    background:
        rgba(5,28,53,.72);

    backdrop-filter:
        blur(8px);

    font-size: .72rem;
    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .08em;
}


/* ==========================================================
   CONTENIDO
========================================================== */

.featured-content {
    padding:
        36px 34px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}

.featured-date {
    margin-bottom: 16px;

    display: flex;
    align-items: center;

    gap: 7px;

    color:
        var(--cobach-red);

    font-size: .78rem;
    font-weight: 800;
}

.featured-content h3 {
    margin:
        0 0
        15px;

    color:
        var(--cobach-blue);

    font-size:
        clamp(
            1.5rem,
            2.3vw,
            2.15rem
        );

    line-height: 1.12;

    letter-spacing: -.025em;
}

.featured-content p {
    margin:
        0 0
        26px;

    color:
        var(--muted);

    line-height: 1.75;
}

.featured-link {
    width: fit-content;

    margin-top: auto;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    color:
        var(--cobach-blue);

    font-size: .9rem;
    font-weight: 850;
}

.featured-link span {
    transition:
        transform .2s ease;
}

.featured-link:hover span {
    transform:
        translateX(4px);
}


/* ==========================================================
   PAGINACIÓN
========================================================== */

.featured-pagination {
    margin-top: 25px;

    display: flex;
    justify-content: center;

    gap: 8px;
}

.featured-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 999px;

    background:
        #c9d5df;

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;
}

.featured-dot.is-active {
    width: 28px;

    background:
        var(--cobach-red);
}


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

@media (max-width: 1050px) {

    .featured-slide {
        min-width:
            calc(
                85% - 10px
            );

        grid-template-columns: 1fr;
    }

    .featured-image-wrapper {
        min-height: 320px;
    }

}


/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 700px) {

    .featured-activities {
        padding: 68px 0;
    }

    .featured-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 22px;
    }

    .featured-controls {
        align-self: flex-end;
    }

    .featured-slide {
        min-width: 100%;

        grid-template-columns: 1fr;

        border-radius: 19px;
    }

    .featured-image-wrapper {
        min-height: 235px;
    }

    .featured-content {
        padding:
            26px 23px
            28px;
    }

    .featured-content h3 {
        font-size: 1.5rem;
    }

}