@require 'reset'
@require 'variables'
@require 'fonts'

a
    &.link
        color color-primary
        display inline
        font-style italic

body
    @extends .font-prim, .layout-col
    background-color color-bg
    overflow overlay
    overflow-x hidden
    padding-top @css{clamp(4rem, 2.84vw + 3.43rem, 5.25rem)}

    &::-webkit-scrollbar
        width 0.25rem
    
    &::-webkit-scrollbar-track
        background-color transparent
    
    &::-webkit-scrollbar-thumb
        background-color color-accent
        border-radius 0.25rem

main
    @extend .center-h, .layout-col, .full-w
    max-width 108rem
    padding 0 @css{clamp(1.5rem, 5.68vw + 0.36rem, 4rem)} 6rem @css{clamp(1.5rem, 5.68vw + 0.36rem, 4rem)}


    & .&-title
        @extend .center-h, .font-alt-bold-upper, .full-w
        color color-primary
        display inline-block
        font-size @css{clamp(2.5rem, 7.14vw + 1.07rem, 4.5rem)}
        line-height 1.2
        margin-top @css{clamp(1rem, 5vw, 2rem)}
        max-width 100rem
        overflow hidden
        text-overflow ellipsis
        white-space nowrap

p
    line-height 1.6

.news-item
    @extend .layout-col, .full-w
    margin-bottom 5.25rem
    min-height 27.25rem
    overflow hidden

    & &-body
        @extend .layout-col
        height 6.5rem
        transition all 0.3s linear

    & &-ellipsis
        line-height 1.5
        opacity 0
        transform translateY(4.5rem)
        transition opacity 0.1s linear, transform 0.3s linear 0.3s

    & &-heading
        background-color color-primary
        color color-text-alt
        font-size 0.75rem  
        height 1.75rem
        padding 0.5rem
        position absolute

    & &-link
        @extend .center-text-v
        font-size 0.875rem
        gap 1rem
        height 2.25rem
        text-decoration underline
        text-decoration-color color-accent

        &:before
            @extend .baseline-content, .center-content-h
            background-color color-accent
            color color-primary-dark
            content '+'
            display flex
            font-size 2rem
            height 2.25rem
            min-width @height
    
    & &-picture
        background-color color-primary-dark
        height 17rem
        transition all 0.3s linear

        & picture
            @extends .full-h, .full-w
        
        & ^[0..0]^[1..1]-title
            @extend .center-text-h, .font-alt-bold-upper
            color color-accent
            display inline-block
            font-size 2rem
            left 50%
            overflow hidden
            position absolute
            text-overflow ellipsis
            top 50%
            transform translate(-50%,-50%)
            white-space nowrap
            width calc(100vw - 3rem)

    & &-subtitle, & &-title
        @extend .font-alt-bold-upper
        display inline-block
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        width calc(100vw - 3rem)
    
    & &-subtitle
        color color-primary-xlight
        font-size 1.5rem
        height 2.5rem
        min-height @height

    & &-title
        color color-primary
        font-size 2rem
        height 2.75rem
        margin 0.5rem 0 0 0
        min-height @height
    
    &:hover
        & ^[0..0]-body
            height 11rem

        & ^[0..0]-ellipsis
            opacity 1
            transform translateY(0)
            transition opacity 0.3s linear 0.3s, transform 0.3s linear
        
        & ^[0..0]-picture
            height 12.5rem

.tag, .tag-accent, .tag-dark
    @extend .center-content-v
    border-radius 1rem
    color color-text-alt
    font-size @css{clamp(0.75rem, 0.625vw + 0.625rem, 0.875rem)}
    height inherit
    padding 0.5rem 1rem
    width fit-content

.tag
    background-color color-primary-xlight

    &.-is-hoverable
        &:hover
            background-color color-primary-light
            color color-text-alt

    &.-is-selected
        @extend .font-prim-bold
        background-color color-accent
        color color-primary-dark

    &-accent
        background-color color-accent
        color color-primary-dark

    &-dark
        background-color color-primary


@media (min-width 768px)
    .news-item
        width calc((100% - 1.5rem) / 2)


@media (min-width 1024px)
    body
        padding-left 6.25rem 
        padding-top 0


@media (min-width 1280px)
    .news-item
        width calc((100% - 3rem) / 3)


@require 'index'
@require 'aside'
@require 'footer'
@require 'header'
@require 'navbar'
@require 'share'
@require 'club'
@require 'news'
@require 'season'
@require 'team'
@require 'match'
@require 'legal'
@require 'sponsoring'
@require 'medias'
@require 'shop'