/**
 * Styles for staff custom post type
 */

/**
 * staff page and category template (staff grid)
 */
#staff-container {
    display: block;
    position: relative;
    overflow: visible;
    align-self: flex-start;
}
#staff-container .ffs-btn-toggle-layout {
	display: block;
}
#staff-grid-outer {
	padding-block: var(--ffs-posts-gap);
}
.staff-grid, #staff-container .posts-filter-container {
    --min-staff-width: 218px;
    box-sizing: border-box;
    display: none;
    grid-template-columns: minmax(var(--min-staff-width), 1fr);
	gap: var(--ffs-posts-gap);
}
.staff-grid.active, #staff-container .posts-filter-container {
	display: grid;
    align-content: start;
}
.staff-member-post-item a {
    text-decoration: none;
}
.staff-member-image-link {
    display: block;
    position: relative;
    border-radius: var(--ffs-img-border-radius);
    width: 100%;
    overflow: hidden;
}
.staff-member-image-link::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--ffs-tint-colour);
    opacity: 0;
    transition: opacity 500ms ease;
}
.staff-member-image-link:hover::before {
    opacity: 1;
}
.staff-member-post-text {
    padding-top: calc(var(--ffs-posts-gap) / 2);
}
.staff-member-post-text, .staff-member-post-text a,
.staff-member-post-text h3, .staff-member-post-text h4 {
    margin: 0;
}
.staff-member-post-text h3 {
    color: var(--ffs-header-colour);
    line-height: var(--ffs-header-line-height);
}
.staff-member-post-text, .staff-member-post-text a, .staff-member-post-text h4 {
    color: var(--ffs-paragraph-text-colour);
    line-height: 1.5;
}
.staff-member-title-grid {
    font-size: var(--ffs-item-title-size);
    letter-spacing: var(--ffs-item-title-letter-spacing);
}
.staff-member-positions {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}
.staff-member-positions h4 {
    font-size: var(--ffs-item-text-content-size);
    font-weight: var(--ffs-font-wt-normal);
}
.staff-member-primary-position {
    display: flex;
    flex-direction: row;
    column-gap: 12px;
    justify-content: space-between;
}
.staff-member-post-text a:hover, .staff-member-post-text a:hover h3,
.staff-member-post-text h3:hover, .staff-member-post-text h4:hover {
    color: var(--ffs-text-rollover-colour);
}
.toggle-secondary-position {
    font-size: var(--ffs-item-text-content-size);
    align-self: flex-start;
}
.staff-member-secondary-position {
    display: none;
    border-top: 1px solid var(--ffs-border-colour);
    padding-top: 12px;
}
.staff-member-positions.show-all .staff-member-secondary-position {
    display: block;
}



/**
 * single staff post template
 */
.single-staff-member-image img {
    aspect-ratio: 1/1;
    border-radius: var(--ffs-img-border-radius);
}
.single-staff-member-title, .single-staff-member-primary-position {
    color: var(--ffs-fg-text-colour);
    margin: 0;
    line-height: 1.5;
}
.single-staff-member-title {
    font-size: var(--ffs-sub-title-size);
    letter-spacing: var(--ffs-sub-title-letter-spacing);
    line-height: var(--ffs-title-line-height);
}
.single-staff-member-primary-position {
    font-size: var(--ffs-item-title-size);
    font-weight: var(--ffs-font-wt-normal);
    letter-spacing: var(--ffs-item-title-letter-spacing);
}
.single-staff-member-links {
    margin-top: 15px;
}
.single-staff-member-secondary-positions ul,
.single-staff-member-secondary-positions.post-main-content ul {
    list-style-type: none;
    padding: 0;
    font-weight: var(--ffs-font-wt-bold);
}
.single-staff-member-links > a:nth-of-type(1) {
    margin-left: 0;
    justify-content: flex-start;
}
#staff-member-project-news-list {
    padding-top: var(--ffs-posts-row-gap);
}


/**
 * Media queries
 */
@media (min-width: 536px) {
    .staff-grid, #staff-container .posts-filter-container {
        grid-template-columns: repeat(2, minmax(var(--min-staff-width), 1fr));
    }
}
@media (min-width: 1200px) {
    .staff-grid, #staff-container .posts-filter-container {
        grid-template-columns: repeat(3, minmax(var(--min-staff-width), 1fr));
    }
}
@media (min-width: 1400px) {
    .staff-grid, #staff-container .posts-filter-container {
        grid-template-columns: repeat(4, minmax(var(--min-staff-width), 1fr));
    }
}
@media (min-width: 2000px) {
    .staff-grid, #staff-container .posts-filter-container {
        grid-template-columns: repeat(6, minmax(var(--min-staff-width), 1fr));
    }
}
@media (orientation: landscape) {
    .single-staff-member-main {
        padding-bottom: calc(var(--ffs-posts-gap) * 4);
    }
}