@import '../environment';
@import '../shared/news';
@import '../shared/pagination';

main
{
    .news-item
    {
        @include for-at-least-normal-tablets
        {
            padding-right: steps(4);
        }

        @include for-desktops
        {
            padding-right: steps(6);
        }

        .decoration
        {
            @include for-at-most-small-tablets
            {
                display: flex;
                flex-direction: column;
                min-height: steps(30);
                padding-left: $gutter;
                padding-right: $gutter;
                margin: steps(-3) (-$gutter) steps(3);

                // dirty workaround for flexbox and `min-height` bug in IE10-11.
                // but since child element's text length is limited, this will not
                // cause content overflow and should work just fine.
                .ie &
                {
                    height: 1px;
                }
            }

            h1
            {
                @include for-at-most-small-tablets
                {
                    margin-top: auto;
                }
            }

            .js &
            {
                @include for-at-most-small-tablets
                {
                    @include background-overlay;
                    @include antialiasing;

                    &, h1
                    {
                        color: $color-background-lightest;
                    }
                }
            }
        }
    }

    .additional-information
    {
        margin-top: steps(4);

        h2
        {
            @include extra-large-heading;
        }

        @include for-at-least-normal-tablets
        {
            margin-top: 100vh;

            h2
            {
                margin-top: steps(-14);
            }
        }

        .decoration
        {
            z-index: -1;
            display: none;

            @include for-at-least-normal-tablets
            {
                display: block;
                position: absolute;
                top: steps(14);
                right: 0;
                bottom: 0;
                left: 50%;
                margin-left: $gutter;
                max-width: steps(70);
            }
        }
    }
}
