@import "../_common"

.blog-secA
    padding: 70px 0
    display: flex
    align-items: center
    background: var(--gray)

    @include media(1366)
        padding: 40px 0

    @include media(1024)
        padding: 35px 0

    .heading
        display: flex
        justify-content: space-between
        align-items: flex-start
        margin-bottom: 45px

        @include media(1366)
            margin-bottom: 30px

        @include media(1024)
            margin-bottom: 25px

        @include media(540)
            margin-bottom: 20px
            justify-content: center

        h2
            margin: 0

        .swiper-group
            display: flex
            align-items: center
            gap: 12px
            flex-shrink: 0

            @include media(675)
                display: none

            button
                width: 42px
                height: 42px
                border-radius: 50%
                display: flex
                justify-content: center
                align-items: center
                transition: background .3s ease
                cursor: pointer
                box-shadow: 0px 3px 8px 0px #0000003D
                background: var(--white)
                color: #000

                &.blogSlider-prev
                    transform: rotate(180deg)

                &:hover:not(.swiper-button-disabled)
                    background: #f0f0f0

                &.swiper-button-disabled
                    opacity: .35
                    cursor: not-allowed

                @include media(991)
                    width: 35px
                    height: 35px

                svg
                    width: 20px
                    height: 20px

                    @include media(991)
                        width: 16px
                        height: 16px

                    path
                        fill: #333
                        transition: fill .3s ease


    .blogSlider

        .swiper-wrapper
            height: 400px
            padding-left: 20px
            align-items: stretch

            @include media(1366)
                height: 370px
                padding-left: 12px

            @include media(991)
                height: 320px
                padding-left: 0

            @include media(767)
                height: 260px

            @include media(540)
                height: 220px


        .swiper-slide
            flex-shrink: 0
            transition: width .6s cubic-bezier(0.4,0,0.2,1)
            overflow: hidden

            // accordion only desktop
            @media (min-width: 992px)
                width: 284px !important
                @include media(1460)
                    width: 274px !important

                @include media(1366)
                    width: 290px !important

                &.swiper-slide-active
                    width: 660px !important

                    @include media(1460)
                        width: 665px !important 
                    @include media(1366)
                        width: 645px !important


            // active content reveal
            &.swiper-slide-active

                .item

                    &::before
                        backdrop-filter: blur(0)
                        -webkit-backdrop-filter: blur(0)
                        background: linear-gradient(270deg, rgba(0,0,0,0) 3.31%, rgba(0,0,0,.7) 49.93%)

                    &::after
                        opacity: 1

                    .item-content
                        opacity: 1

            // ── Item ─────────────────────────────────────────────────
            .item
                height: 100%
                border-radius: 10px
                overflow: hidden
                position: relative
                cursor: pointer
                display: block

                @include media(540)
                    border-radius: 6px

                &::before
                    content: ""
                    position: absolute
                    inset: 0
                    width: 100%
                    height: 100%
                    z-index: 1
                    backdrop-filter: blur(3px)
                    -webkit-backdrop-filter: blur(3px)
                    background: rgba(0, 0, 0, 0.25)
                    transition: backdrop-filter 0.6s ease, background 0.6s ease

                &::after
                    content: ""
                    position: absolute
                    inset: 0
                    width: 100%
                    height: 100%
                    z-index: 1
                    opacity: 0
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 29.69%, rgb(0 0 0 / 30%) 67.01%)
                    transition: opacity 0.4s ease

                .item-img
                    position: absolute
                    inset: 0
                    width: 100%
                    height: 100%

                    img
                        display: block
                        width: 100%
                        height: 100%
                        object-fit: cover

                .item-content
                    position: absolute
                    bottom: 0
                    left: 50%
                    transform: translateX(-50%)
                    width: 100%
                    z-index: 2
                    padding: 30px
                    opacity: 0
                    transition: opacity 0.4s ease 0.2s

                    @include media(991)
                        padding: 20px

                

                    p
                        color: var(--white)
                        font-size: 20px
                        width: 100%
                        max-width: 450px

                        @include media(991)
                            max-width: 100%
                            font-size: 16px

                        @include media(540)
                            font-size: 14px

                    .btns
                        display: flex
                        justify-content: space-between
                        align-items: center
                        margin-top: 30px

                        @include media(991)
                            margin-top: 15px

                        @include media(767)
                            margin-top: 10px
                            flex-direction: column
                            align-items: flex-start
                            gap: 10px

                        @include media(540)
                            margin-top: 8px
                            gap: 8px

                        span
                            color: var(--white)
                            font-weight: 400
                            font-size: 16px

                            @include media(540)
                                font-size: 13px

                        .btn-outline
                            font-size: 16px
                            color: var(--white)
                            border: 1px solid var(--white)
                            display: flex
                            align-items: center
                            justify-content: center
                            gap: 10px
                            padding: 7px 20px
                            border-radius: 5px
                            transition: all 0.3s ease-in

                            @include media(767)
                                padding: 5px 14px

                            @include media(540)
                                font-size: 13px
                                padding: 5px 12px

                            &:hover
                                background: var(--primary)
                                color: var(--white)
                                border-color: var(--primary)


.blog-secB
    padding: 70px 0

    @include media(991)
        padding: 50px 0

    @include media(540)
        padding: 35px 0

    .grid
        display: grid
        grid-template-columns: repeat(3, 1fr)
        gap: 20px

        @include media(991)
            grid-template-columns: repeat(2, 1fr)

        @include media(540)
            grid-template-columns: 1fr
        

        .card
            border-radius: 10px
            overflow: hidden
            box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.2)
            display: block
            text-decoration: none
            transition: transform 0.3s ease, box-shadow 0.3s ease

            @include media(540)
                border-radius: 8px

            &:hover
                transform: translateY(-4px)
                box-shadow: 0px 12px 36px 0px rgba(100, 100, 111, 0.28)

                .card-img img
                    transform: scale(1.04)

            .card-img
                overflow: hidden
                height: 250px
                @include media(540)
                  height: 220px


                img
                    width: 100%
                    display: block
                    object-fit: cover
                    transition: transform 0.5s ease


            .card-content
                padding: 20px

                @include media(767)
                    padding: 15px

                @include media(540)
                    padding: 12px

                p:not(:last-child)
                    margin-bottom: 20px
                    font-weight: 600

                    @include media(767)
                        margin-bottom: 10px

                p:last-child
                    color: rgba(102, 102, 102, 1)
                    font-weight: 500