/* =========================================================
   MOSAIC IMAGE GRID
========================================================= */

.espa-mosaic-grid {
    position: relative;

    width: 100%;

    margin:
            36px
            0
            46px;

    padding:
            34px
            34px
            38px;

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--espa-border) 72%,
                    transparent
            );

    border-radius: 24px;

    background:
            var(--espa-surface);

    box-shadow:
            0
            10px
            32px
            rgba(15, 23, 42, .045);
}


/* =========================================================
   HEADER
========================================================= */

.espa-mosaic-grid__header {
    margin-bottom: 30px;

    text-align: center;
}


.espa-mosaic-grid__heading {
    margin: 0;

    color:
            var(--espa-heading);

    font-family:
            var(--font-family-heading);

    font-size:
            clamp(
                    27px,
                    2.5vw,
                    35px
            );

    font-weight: 800;

    line-height: 1.18;

    letter-spacing: -.03em;
}


/* =========================================================
   GRID
========================================================= */

.espa-mosaic-grid__grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    grid-template-rows:
        repeat(
            2,
            245px
        );

    gap: 18px;
}


/* =========================================================
   ITEM
========================================================= */

.espa-mosaic-grid__item {
    position: relative;

    min-width: 0;

    min-height: 0;

    overflow: hidden;

    border-radius: 20px;
}


/* =========================================================
   MOSAIC POSITIONS
========================================================= */

.espa-mosaic-grid__item--left-top {
    grid-column: 1;
    grid-row: 1;
}


.espa-mosaic-grid__item--left-bottom {
    grid-column: 1;
    grid-row: 2;
}


.espa-mosaic-grid__item--featured {
    grid-column: 2;

    grid-row:
            1 / span 2;
}


.espa-mosaic-grid__item--right-top {
    grid-column: 3;
    grid-row: 1;
}


.espa-mosaic-grid__item--right-bottom {
    grid-column: 3;
    grid-row: 2;
}


/* =========================================================
   EXTRA ITEMS
========================================================= */

.espa-mosaic-grid__item--extra {
    min-height: 220px;

    grid-column: auto;
    grid-row: auto;
}


/*
 * 6+ eleman geldiğinde grid yeni satırlar oluştursun.
 */

.espa-mosaic-grid__grid:has(
    .espa-mosaic-grid__item--extra
) {
    grid-auto-rows: 220px;
}


/* =========================================================
   CARD
========================================================= */

.espa-mosaic-grid__card {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;

    background:
            var(--espa-surface-secondary);

    color: #ffffff;

    text-decoration: none;

    box-shadow:
            0
            10px
            26px
            rgba(15, 23, 42, .08);

    transform:
            translateZ(0);

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


.espa-mosaic-grid__card:hover {
    color: #ffffff;

    transform:
            translateY(-4px);

    box-shadow:
            0
            20px
            42px
            rgba(15, 23, 42, .15);
}


/* =========================================================
   IMAGE
========================================================= */

.espa-mosaic-grid__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
            transform .6s
            cubic-bezier(
                    .2,
                    .75,
                    .2,
                    1
            );
}


.espa-mosaic-grid__card:hover
.espa-mosaic-grid__image {
    transform:
            scale(1.055);
}


/* =========================================================
   OVERLAY
========================================================= */

.espa-mosaic-grid__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
            linear-gradient(
                    180deg,
                    rgba(15, 23, 42, 0) 35%,
                    rgba(15, 23, 42, .04) 58%,
                    rgba(15, 23, 42, .22) 100%
            );

    transition:
            background .25s ease;
}


.espa-mosaic-grid__card:hover
.espa-mosaic-grid__overlay {
    background:
            linear-gradient(
                    180deg,
                    rgba(15, 23, 42, 0) 28%,
                    rgba(15, 23, 42, .06) 56%,
                    rgba(15, 23, 42, .31) 100%
            );
}


/* =========================================================
   CAPTION
========================================================= */

.espa-mosaic-grid__caption {
    position: absolute;

    left: 16px;
    bottom: 16px;

    z-index: 3;

    max-width:
            calc(
                    100% - 32px
            );

    min-height: 44px;

    padding:
            0
            16px;

    border-radius: 999px;

    background:
            linear-gradient(
                    135deg,
                    var(--espa-primary),
                    color-mix(
                            in srgb,
                            var(--espa-primary) 78%,
                            #7c3aed
                    )
            );

    color: #ffffff;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    box-shadow:
            0
            9px
            22px
            color-mix(
                    in srgb,
                    var(--espa-primary) 22%,
                    transparent
            );

    transition:
            padding .24s ease,
            transform .24s ease,
            box-shadow .24s ease;
}


.espa-mosaic-grid__card:hover
.espa-mosaic-grid__caption {
    padding-right: 19px;

    transform:
            translateY(-2px);

    box-shadow:
            0
            13px
            28px
            color-mix(
                    in srgb,
                    var(--espa-primary) 30%,
                    transparent
            );
}


/* =========================================================
   TITLE
========================================================= */

.espa-mosaic-grid__title {
    min-width: 0;

    max-width: 260px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #ffffff;

    font-family:
            var(--font-family-heading);

    font-size: 12px;

    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   ARROW
========================================================= */

.espa-mosaic-grid__arrow {
    flex: 0 0 auto;

    width: 0;

    overflow: hidden;

    opacity: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
            translateX(-5px);

    transition:
            width .2s ease,
            opacity .2s ease,
            transform .2s ease;
}


.espa-mosaic-grid__arrow iconify-icon {
    font-size: 13px;
}


.espa-mosaic-grid__card:hover
.espa-mosaic-grid__arrow {
    width: 14px;

    opacity: 1;

    transform:
            translateX(0);
}


/* =========================================================
   FEATURED CARD
========================================================= */

.espa-mosaic-grid__item--featured
.espa-mosaic-grid__caption {
    min-height: 48px;

    padding:
            0
            18px;
}


.espa-mosaic-grid__item--featured
.espa-mosaic-grid__title {
    font-size: 13px;
}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 1199.98px) {

    .espa-mosaic-grid {
        padding:
                30px
                28px
                32px;
    }


    .espa-mosaic-grid__grid {
        grid-template-rows:
            repeat(
                2,
                220px
            );

        gap: 15px;
    }


    .espa-mosaic-grid__grid:has(
        .espa-mosaic-grid__item--extra
    ) {
        grid-auto-rows: 200px;
    }

}


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

@media (max-width: 991.98px) {

    .espa-mosaic-grid__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        grid-template-rows: none;

        grid-auto-rows: 210px;
    }


    .espa-mosaic-grid__item--left-top,
    .espa-mosaic-grid__item--left-bottom,
    .espa-mosaic-grid__item--right-top,
    .espa-mosaic-grid__item--right-bottom,
    .espa-mosaic-grid__item--extra {
        grid-column: auto;
        grid-row: auto;
    }


    .espa-mosaic-grid__item--featured {
        grid-column:
                1 / span 2;

        grid-row: auto;

        min-height: 360px;
    }

}


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

@media (max-width: 767.98px) {

    .espa-mosaic-grid {
        margin:
                24px
                0
                30px;

        padding:
                22px
                14px
                24px;

        border-radius: 18px;
    }


    .espa-mosaic-grid__header {
        margin-bottom: 18px;

        text-align: left;
    }


    .espa-mosaic-grid__heading {
        font-size: 23px;
    }


    .espa-mosaic-grid__grid {
        grid-template-columns: 1fr;

        grid-auto-rows: auto;

        gap: 12px;
    }


    .espa-mosaic-grid__item,
    .espa-mosaic-grid__item--left-top,
    .espa-mosaic-grid__item--left-bottom,
    .espa-mosaic-grid__item--featured,
    .espa-mosaic-grid__item--right-top,
    .espa-mosaic-grid__item--right-bottom,
    .espa-mosaic-grid__item--extra {
        grid-column: auto;
        grid-row: auto;

        width: 100%;

        min-height: 0;

        aspect-ratio:
                16 / 9;

        border-radius: 16px;
    }


    /*
     * Mobilde featured kartı biraz daha büyük bırakalım.
     */

    .espa-mosaic-grid__item--featured {
        aspect-ratio:
                4 / 3;
    }


    .espa-mosaic-grid__caption,
    .espa-mosaic-grid__item--featured
    .espa-mosaic-grid__caption {
        left: 12px;
        bottom: 12px;

        max-width:
                calc(
                        100% - 24px
                );

        min-height: 40px;

        padding:
                0
                14px;
    }


    .espa-mosaic-grid__title,
    .espa-mosaic-grid__item--featured
    .espa-mosaic-grid__title {
        max-width: 220px;

        font-size: 11px;
    }


    .espa-mosaic-grid__arrow {
        width: 13px;

        opacity: 1;

        transform: none;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 419.98px) {

    .espa-mosaic-grid__item--featured {
        aspect-ratio:
                1 / 1;
    }

}