@use "../common/utils" as *;
@use "../common/mixins" as *;

.single-news {
    background: #FFF;

    &__header {
        padding-block: calc-rem(15px) calc-rem(100px);
        background: rgba(var(--color-background));

        @include media-breakpoint-up(md) {
            padding-block: calc-rem(20px) calc-rem(130px);
        }

        @include media-breakpoint-up(lg) {
            padding-block: calc-rem(20px) calc-rem(150px);
        }

        .button--arrow-back {
            margin-bottom: calc-rem(30px);

            @include media-breakpoint-up(md) {
                margin-bottom: calc-rem(45px);
            }

            @include media-breakpoint-up(lg) {
                margin-bottom: calc-rem(65px);
            }
        }

        .wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: calc-rem(5px);
            margin-bottom: calc-rem(20px);
        }

        .title {
            font-size: clamp-font(18px, 25px);
        }

        .share-buttons {
            margin-top: calc-rem(30px);
        }

    }

    &__thumbnail {
        position: relative;
        z-index: 2;
        background: rgba(var(--color-white));
        padding-bottom: 0;

        .thumbnail {
            width: 100%;
            height: calc-rem(192px);
            border-radius: var(--border-radius);
            overflow: hidden;
            margin-top: calc-rem(-90px);

            @include media-breakpoint-up(md) {
                height: calc-rem(350px);
                margin-top: calc-rem(-120px);
            }

            @include media-breakpoint-up(lg) {
                margin-top: calc-rem(-150px);
                height: calc-rem(538px);
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    &__article {
        padding-block: calc-rem(40px) calc-rem(60px);
        font-size: clamp-font(12px, 14px);

        @include media-breakpoint-up(lg) {
            padding-block: calc-rem(50px) calc-rem(100px);
        }

        h2 {
            font-size: clamp-font(14px, 18px);
        }


        blockquote {
            border-left: calc-rem(2px) solid rgba(var(--color-primary));
            padding-left: calc(20px);
            font-size: clamp-font(14px, 18px);
            margin: calc-rem(35px) 0;

            @include media-breakpoint-up(lg) {
                margin-block: calc-rem(50px);
            }

        }

        a:not(.button) {
            font-size: clamp-font(12px, 14px);
            color: rgba(var(--color-primary));
            font-weight: var(--font-weight-semi-bold);
            text-decoration: underline;
            transition: color .3s ease;

            &:hover {
                color: rgba(var(--color-secondary));
            }

        }

        ul {
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: calc-rem(10px);
            margin-bottom: calc-rem(40px);


            @include media-breakpoint-up(lg) {
                margin-bottom: calc-rem(50px);
            }

            li {
                position: relative;
                padding-left: calc-rem(18px);

                &:before {
                    content: '';
                    width: calc-rem(7px);
                    height: calc-rem(7px);
                    background: rgba(var(--color-primary));
                    position: absolute;
                    left: 0;
                    top: calc-rem(5px);

                }
            }
        }
    }

}
