@use 'sass:color'
@use '../palettes/brushes' as hues
@use '../palettes/typewriters' as typo
// @use '../palettes/stylebook' as book

#influences
    margin: 0 auto
    font-size: clamp(11pt, 1vw, 23pt)
    text-align: justify

    & h1, & h2, & h3, & h4, & h5, & h6
        color: hues.$border-base-notification

#thinker_gallery
    display: flex
    margin: 5vh auto 0
    padding: 0 10% 3vh
    
    & > .thinker
        z-index: 0
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        height: inherit
        border: 1px outset hues.$bg-helper-highlight-color
        background-color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 66%)
        color: hues.$bg-helper-highlight-color
        cursor: zoom-in
        font-family: typo.$alt-journalistic-font
        // margin: 10px
        filter: url('/images/themes/default/textures/noise.svg#noiseFilter')
        transform: rotate(10deg) skew(0deg)
        transition: border-radius 2s, box-shadow 2s, border 1s, transform 2s, max-width 2s, background-color 2s, font-size 2s

        &::after
            position: absolute
            display: block
            content: ''
            opacity: 0.45
            background-image: url('/images/themes/default/textures/cream_paper.png')
            background-size: 100%
            top: 0
            left: 0
            right: 0
            bottom: 0
            border-top-left-radius: 40px 20px
            border-top-right-radius: 10px 20px
            border-bottom-left-radius: 10px 5px

        &:nth-child(2n)
            transform: rotate(-15deg)

        &:hover:nth-child(2n), &:active:nth-child(2n)
            transform: rotate(-5deg) skew(-5deg, 3deg)

        &:hover
            cursor: grab

        &:hover, &:active
            z-index: 1
            background-color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 75%)
            box-shadow: 0 5px 10px hues.$bg-helper-highlight-color
            border: 0 outset hues.$bg-helper-highlight-color
            border-top-left-radius: 40px 20px
            border-top-right-radius: 10px 20px
            border-bottom-left-radius: 10px 5px
            transform: rotate(3deg) skew(5deg, -3deg)

        & img
            max-width: 88%
            border-radius: 3%
            filter: grayscale(100%) contrast(1.8) brightness(1)
            opacity: 0.9
            transition: filter 2s

        &:active img
            display: none

        &:hover img, &:active img
            filter: grayscale(100%) contrast(1.6) brightness(1.3)

        & figcaption
            max-width: 88%
            margin: 0 auto
            // opacity: 0.0
            transition: opacity 2s

            & .tname
                font-weight: bold

            & .ttype
                display: none
                text-align: center
                padding: 0 0 2.5% 0

            & .concept_tags
                display: none

                & > *
                    background-color: hues.$bg-helper-highlight-color
                    color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 66%)
                    padding: 2%
                    font-style: oblique

            & .tdesc
                display: none
                padding: 2%

        &:active
            cursor: grabbing

            & .concept_tags
                display: initial

            & .tdesc
                display: initial

            & .ttype
                display: inline-block

            & figcaption
                max-height: initial

@media (orientation: landscape)
    #influences
        max-width: 33vw

    #thinker_gallery
        flex-wrap: wrap
        flex-direction: row
        justify-content: space-evenly
        align-items: baseline

        & > .thinker
            max-width: 15%
            font-size: clamp(9pt, 0.5vw, 14pt)

            &:hover, &:active
                max-width: 16%
                font-size: clamp(10pt, 0.6vw, 15pt)

@media (orientation: portrait)
    #influences
        max-width: 50vw

    #thinker_gallery
        flex-direction: column
        justify-content: center
        align-items: center

        & > .thinker
            max-width: 50%
            font-size: clamp(12pt, 2vw, 24pt)

            &:hover, &:active
                max-width: 53%
                font-size: clamp(16pt, 2.1vw, 24pt)