/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */

.person-card {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 6rem 0;

    &.no-content {
        .photo-wrapper {
            pointer-events: none;
        }
        .name {
            pointer-events: none;
        }
    }

    &.placeholder {
        .photo-wrapper {
            background-color: $grey;
        }
        .content {
            align-self: stretch;
            justify-content: center;

            .name {
                margin-bottom: 1rem;
            }
        }
    }

    .photo-wrapper {
        display: block;
        position: relative;
        background-color: $primary;
        flex: 0 1 24.8rem;
        clip-path: url(#photo-clip);

        &::before {
            content: '';
            display: block;
            width: 100%;
            padding-top: 90%; 
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        margin-left: 6.7rem;

        .name {
            line-height: 1.1;

            @media only screen and (min-width:55em) {
                font-size: 2.4rem;
            }
        }

        .role,
        .job-title,
        .place-of-work {
            display: block;
            font-size: 2rem;
        }

        .role {
            margin-bottom: 1.3rem;
        }

        .job-title {
            font-weight: bold;
            line-height: 1;
        }

        .learn-more {
            display: inline-block;
            font-size: 2rem;
            font-weight: bold;
            text-decoration: none;
            margin-top: 1.5rem;

            .icon-arrow-right {
                position: relative;
                top: 0.2rem;
                margin-left: 0.75rem;
                font-size: 1.6rem;
            }
        }
    }
}

.wp-block-sno-block-snolab-person {
    max-width: 70ch;

    & + .wp-block-sno-block-snolab-person {
        border-top: 1px solid $grey;
    }
}