@use '../icons';
@use 'sass:math';
@use '../mixins';
@use '../variables' as vars;

.avecnous-people-lists-archive-wrapper{
    text-align: center;
    .avecnous-people-lists-list{
        margin: auto;
    }
}

.avecnous-people-lists-list{
    list-style:none;
    margin:0;
    padding: 0;
    text-align:center;
    display: flex;
    flex-wrap: wrap;
    @include mixins.gap-col(1rem);
    /* Globals */
    .wp-person{
        display: inline-block;
        position:relative;
        text-align: left;
    }
    .wp-person-frame{
        position:relative;
        width: 100%;
    }
    .wp-person-rank{
        border: vars.$color_dark 1px solid;
        @include mixins.border-radius(math.div(vars.$icon_size, 2));
        color: vars.$color_dark;
        display: inline-block;
        font-size: math.div(vars.$icon_size, 2);
        text-align: center;
        line-height: vars.$icon_size;
        height: vars.$icon_size;
        width: vars.$icon_size;
    }
    .wp-person-rank-2{
        font-size: math.div(vars.$icon_size, 2.5);
    }
    .wp-person-rank-3{
        font-size: math.div(vars.$icon_size, 3);
    }
    .wp-person-link{
        display: block;
        // height: 100%;
        position: relative;
        width: 100%;
        // margin: 2.5em 0 0;
        h4{
            font-size: 1.1em;
            margin: 0;
        }
    }
    .wp-person-social-list{
        display:inline-block;
        margin-left: math.div(vars.$box_paddings, 2);
        width: auto;
            &wp-person-social-list-icon{
            line-height: vars.$icon_size;  
        }
        .wp-person-social-item{
            display:inline-block;
            margin: 0 math.div(vars.$box_paddings, 2);
            white-space:nowrap;
            .wpci{
                font-size: 1.5rem;
            }
        }
    }

    /* Templates */
    &.wp-person-portrait, &.wp-person-large{
        .wp-person{
            background-color: rgba(0, 0, 0, 0.7);
        }
        .wp-person-photo{
            height: 100%;
            overflow: hidden;
            position: relative;
            width: 100%;
            &:after{
                position: absolute;
                width: 100%;
                height: 100%;
                content:" ";
                display: block;
                box-shadow: 0px -110px 70px -50px rgba(0, 0, 0, 0.7) inset;
                z-index: 1;
                top:0;
                left:0;
            }
            img{
                height: auto;
                width: 100%;
            }
        }        
        .wp-person-metas{
            bottom: vars.$box_paddings;
            left: vars.$box_paddings;
            top: vars.$box_paddings;
            position: absolute;
            z-index: 2;
            display: flex;
            // flex-direction: column;
            flex-wrap: wrap;
            align-content: space-between;
            gap: 0.5rem;
            a{
                color: vars.$color_light;
                text-decoration: none;
            }
            .wp-person-rank{
                border-color:vars.$color_light;
                color: vars.$color_light;
            }
            h4{
                font-size: vars.$size_portrait_h4;
            }
            .wp-person-content {
                margin: 1.5em 0;
            }
        }

    }
    &.wp-person-portrait{
        .wp-person-frame {
            height: 20rem;
        }
    }
    &.wp-person-large{
        .wp-person-frame{
            height: 15em;
        }
    }
    &.wp-person-small, &.wp-person-tiny{
        font-size:0.85em;
        .wp-person-frame {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        a{
            color: vars.$color_dark;
        }
        .wp-person-photo {
            margin: 0;
            img{
                @include mixins.border-radius(6rem);
            }
        }
        .wp-person-metas{
            
            .wp-person-social-list-after{
                margin: 0 0 0 0.5em;
            }
            .wp-person-content,
            .wp-person-content p{
                margin: 0;
            }
            .wp-person-rank{
                line-height: math.div(vars.$icon_size, 1.2);
                height: math.div(vars.$icon_size, 1.2);
                width: math.div(vars.$icon_size, 1.2);
            }
        }
    }
    &.wp-person-small{
        img{
            width: auto;
            height: 7rem;
        }
    }
    &.wp-person-tiny{
        img{
            width: auto;
            height: 3rem;
        }
    }
}