/**
 * Larger mobile devices.
 */
@media only screen and (min-width: 480px) {
	.employee-list-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}



/**
 * Breakpoint specifically to handle wp-admin bar.
 */
@media only screen and (min-width: 601px) {
    .standout-employees {
        & .employee-filter-container {
            top: 0;
            /* transform: translateY(80px); */
        }

        & .employee-highlight-container {
            & .employee-item {
                top: calc(var(--header-actual-height, 0px) + var(--wp-admin--admin-bar--height, 0px) + (1.5 * var(--gap-s)));
                height: calc(100% - (1.5 * var(--gap-s)) - var(--wp-admin--admin-bar--height, 0px));
            }
        }
    }

    body:has(#masthead.scroll-down) {
        & .standout-employees {
            & .employee-filter-container {
                transform: translateY(0);
            }
        }
    }
}



/**
 * Tablet devices.
 */
@media only screen and (min-width: 768px) {

}



/**
 * Smaller screen devices.
 */
@media only screen and (min-width: 960px) {
    .standout-employees {
        & .employee-filter-container {
            top: calc(var(--header-actual-height, 0px) + var(--wp-admin--admin-bar--height, 0px));
            transform: none;
        }

        &.wide-padding-left {
            & .employee-filter-container {
                margin-left: calc(-2 * var(--content-margin));
                padding-left: calc(2 * var(--content-margin));
            }
        }

        & .employee-highlight-container {
            width: calc(100% - (var(--content-margin) * 2) - var(--header-width));
			display: grid;
			grid-template-columns: 100%;
			align-items: start;
			position: fixed;
			bottom: 0;
			height: 100%;

            & .employee-item {
				position: sticky;
				top: calc((1.5 * var(--gap-s)));
				grid-column: 1 / -1;
				grid-row: 1 / -1;
				height: calc(100% - (1.5 * var(--gap-s)));
                padding: var(--gap-m);

                & .employee-item-overlay {
                    text-align: left;
                }
            }
        }

        & .employee-list-container {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
}



/**
 * Smaller laptops.
 */
@media only screen and (min-width: 1100px) {
	.standout-employees {
        & .employee-inner-container {
            & .employee-list-container {
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }
        }
    }
}



/**
 * Laptops.
 */
@media only screen and (min-width: 1240px) {
	.standout-employees {
        & .employee-filter-container {
            position: relative;
        }

        & .employee-inner-container {
			display: grid;
			gap: calc(1.5 * var(--gap-s));
			align-items: start;
            grid-template-columns: 2fr 1fr;

            & .employee-list-container {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        & .employee-highlight-container {
            position: relative;
            width: auto;
            min-width: 500px;
            transform: none;
            height: 100%;

            & .employee-item {
                height: calc(100vh - (2 * (1.5 * var(--gap-s))) - var(--wp-admin--admin-bar--height, 0px));

				& .employee-item-close {
					display: none;
				}
            }
        }
    }
}



/**
 * Large screen devices.
 */
@media only screen and (min-width: 1600px) {
	.standout-employees {
        & .employee-inner-container {
            & .employee-list-container {
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }
        }
    }
}