@use '../../source/scss/theme/global/config' as *;
@use '../../source/scss/theme/functions/functions' as *;
@use '../../source/scss/theme/functions/mixins' as *;

.cards {
    overflow: hidden;

    .header-container {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: rem-calc(12);
        margin-bottom: rem-calc(24);

        @include tablet {
            flex-wrap: nowrap;
            align-items: center;
            gap: rem-calc(16);
        }

        h2 {
            flex: 1 1 auto;
            min-width: 0;
        }
    }

    .arrows {
        display: flex;
        gap: rem-calc(12);
    }

    .swiper {
        overflow: visible;
    }

    &-slider {

        
        .swiper-slide {
            height: auto;
        }
    }

    .post-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        border-radius: rem-calc(20);
        min-height: rem-calc(280);

        &.has-link {
            cursor: pointer;
        }

        &--media {
            position: relative;
            display: flex;
            flex: 1;
            flex-direction: column;
            min-height: rem-calc(320);

            &::after {
                content: "";
                position: absolute;
                z-index: 1;
                right: 0;
                bottom: 0;
                left: 0;
                height: 42%;
                pointer-events: none;
                background: linear-gradient(
                    to top,
                    rgba(173, 216, 230, 0.9) 0%,
                    rgba(173, 216, 230, 0.35) 50%,
                    transparent 100%
                );
            }
        }

        &--img-box {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            height: auto;
            margin-bottom: 0;
            aspect-ratio: unset;

            figure {
                transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
            }
        }

        &--bottom {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: rem-calc(16);
            margin-top: auto;
            padding: rem-calc(20) rem-calc(20) rem-calc(22);
        }

        &--inner {
            position: relative;
            flex: 1;
            min-width: 0;

            h3 {
                margin: 0;
                color: $color-black;
                font-size: clamp(1.25rem, 2.2vw, rem-calc(20));
                transition: color 0.35s ease;
            }

            .screen-reader-text {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(1px, 1px, 1px, 1px);
                clip-path: inset(50%);
                border: 0;
                word-wrap: normal;
            }
        }

        &--cta-icon {
            display: inline-flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            width: rem-calc(44);
            height: rem-calc(44);
            border-radius: rem-calc(8);
            background-color: $primary;
            color: $color-white;
            font-size: rem-calc(16);

            i,
            svg {
                display: inline-block;
                transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
            }
        }

        &.has-link:hover,
        &.has-link:focus-within {
            .post-card--img-box figure {
                transform: scale(1.07);
            }

            .post-card--inner h3 {
                color: $primary;
            }

            .post-card--cta-icon i,
            .post-card--cta-icon svg {
                transform: translateX(6px);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            &.has-link:hover,
            &.has-link:focus-within {
                .post-card--cta-icon i,
                .post-card--cta-icon svg {
                    transform: none;
                }

                .post-card--img-box figure {
                    transform: none;
                }
            }
        }
    }
}