/*
 * patterns/staff-directory.css — "Staff Directory"
 * Markup: wp-content/themes/fcs/patterns/staff-directory.php (the section)
 *         wp-content/plugins/fcs-core/src/blocks/staff-directory/render.php
 *         (everything inside it)
 * Root:   .fcs-staff-directory
 *
 * A filter row, a grid of staff cards (Figma 8051:9786) and one shared
 * <dialog> for the pop-up (Figma 10230:8470). The <dialog> is rendered inside
 * the root, so it is styled from here even though the browser paints it in the
 * top layer.
 *
 * THE PROSE UNDERLINE IS UNSET FOR EVERY LINK HERE
 * ------------------------------------------------
 * The section lands inside .wp-block-post-content, so components/links.css
 * gives each link the prose treatment — an underline drawn as a
 * background-image gradient. `text-decoration: none` cannot remove it. The only
 * link is the email in the pop-up; it is unset once below, and its hover is
 * written at (0,3,1) to beat the prose :hover recolour at (0,2,1).
 *
 * DERIVED — there is no mobile or tablet design for either frame.
 *
 *   Grid
 *     Small   2 columns, 20px column / 32px row gap. Figma gives the card a
 *             165px minimum width, which is two across a 390px phone.
 *     Medium  3 columns, 40px gaps.
 *     Large   4 columns, 40px gaps — Figma: 4 × 280px in the 1240px container.
 *
 *   Filter row
 *     Small + Medium  one line that scrolls sideways. Five category names do
 *                     not fit a phone, and wrapping would turn the ruled
 *                     strip into a box of links.
 *     Large           as drawn; wraps if a sixth category is ever added.
 *
 *   Pop-up
 *     Small   20px from each viewport edge, 20px padding, photo stacked above
 *             the name (220px wide at most), 32px between the three rows.
 *     Medium+ as drawn: 626px, 28px padding, 40px between rows, photo right.
 *     All     never taller than the viewport less 40px; the panel scrolls.
 */

/* Section ------------------------------------------------------------- */

/*
 * Section padding is NOT declared here for Medium and Large — the editor owns
 * those from the sidebar's Dimensions panel. Small is pinned in
 * layout/spacing.css, on the root (vertical) and on __inner (the 20px gutter).
 * See CLAUDE.md § "Section padding".
 */

.fcs-staff-directory a {
	background-image: none;
	padding-bottom: 0;
}

/*
 * Every control in here is a <button> styled as text. Browsers give buttons
 * their own font, colour, padding and border; none of that is in the design.
 */
.fcs-staff-directory .fcs-staff-directory__filter,
.fcs-staff-directory .fcs-staff-directory__trigger,
.fcs-staff-directory .fcs-staff-directory__close {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* Filters ------------------------------------------------------------- */

/*
 * Printed `hidden` by render.php and revealed by view.js, so a visitor without
 * JavaScript never sees buttons that do nothing. The display rule below would
 * otherwise override the hidden attribute.
 *
 * The rule colour is Figma's "stroke" variable, #6b7280 — which is the
 * button-secondary preset, not the theme's lighter `stroke` preset.
 */
.fcs-staff-directory .fcs-staff-directory__filters {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	margin-block-end: 32px;
	padding-block: 12px;
	overflow-x: auto;
	border-block: 1px solid var( --wp--preset--color--button-secondary );
	scrollbar-width: thin;
}

.fcs-staff-directory .fcs-staff-directory__filters[hidden] {
	display: none;
}

/*
 * The editor canvas never runs view.js, so the row would stay hidden there.
 * Show it so the canvas matches the front end; the buttons are inert anyway.
 */
.editor-styles-wrapper .fcs-staff-directory .fcs-staff-directory__filters[hidden] {
	display: flex;
}

@media ( min-width: 1024px ) {
	.fcs-staff-directory .fcs-staff-directory__filters {
		flex-wrap: wrap;
		margin-block-end: 40px;
		overflow-x: visible;
	}
}

.fcs-staff-directory .fcs-staff-directory__filter {
	flex: none;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4286; /* 20px */
	color: var( --wp--preset--color--link );
	white-space: nowrap;
	text-underline-position: from-font;
}

/*
 * Hover is the site's standard sweep: each filter carries .fcs-link--animated
 * (components/links.css), whose ::after bar enters from the left.
 *
 * The active filter is bold and underlined in Figma. The underline is that
 * same bar, held at full width, rather than a text-decoration — so hovering
 * the active filter does not stack a second line under the first, and the
 * bar the visitor just hovered stays put when they click.
 */
.fcs-staff-directory .fcs-staff-directory__filter[aria-pressed="true"] {
	font-weight: 700;
}

.fcs-staff-directory .fcs-staff-directory__filter[aria-pressed="true"]::after {
	transform: scaleX( 1 );
}

/* Grid ---------------------------------------------------------------- */

/*
 * (0,2,1) to beat the prose list indent in base/typography.css.
 */
.fcs-staff-directory ul.fcs-staff-directory__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 32px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( min-width: 768px ) {
	.fcs-staff-directory ul.fcs-staff-directory__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 40px;
	}
}

@media ( min-width: 1024px ) {
	.fcs-staff-directory ul.fcs-staff-directory__grid {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

.fcs-staff-directory .fcs-staff-directory__card {
	margin: 0;
}

.fcs-staff-directory .fcs-staff-directory__card[hidden] {
	display: none;
}

/* Card ---------------------------------------------------------------- */

/*
 * The whole card is one button, so the name, title and photo are a single tab
 * stop and a single accessible name. Photo → 14px → name → 8px → title.
 */
.fcs-staff-directory .fcs-staff-directory__trigger {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	color: var( --wp--preset--color--foreground );
}

.fcs-staff-directory .fcs-staff-directory__media {
	display: block;
	margin-block-end: 6px; /* + the 8px gap = Figma's 14px */
	aspect-ratio: 14 / 17; /* 280 × 340 */
	overflow: hidden;
	border-radius: 12px;
	background-color: var( --wp--preset--color--surface-alt );
}

.fcs-staff-directory .fcs-staff-directory__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var( --fcs-transition );
}

/*
 * Name — Figma's H5 (18/28 bold, -0.2px). It is a <span> inside the button, so
 * theme.json's h5 element does not reach it; the same presets are applied.
 */
.fcs-staff-directory .fcs-staff-directory__name {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--h-5 );
	font-weight: 700;
	line-height: 1.556;
	letter-spacing: -0.2px;
	transition: color var( --fcs-transition );
}

.fcs-staff-directory .fcs-staff-directory__title {
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4286; /* 20px */
}

/* Hover — DERIVED; Figma draws no hover state for the card. */
.fcs-staff-directory .fcs-staff-directory__trigger:hover .fcs-staff-directory__name,
.fcs-staff-directory .fcs-staff-directory__trigger:focus-visible .fcs-staff-directory__name {
	color: var( --wp--preset--color--link );
}

.fcs-staff-directory .fcs-staff-directory__trigger:hover .fcs-staff-directory__image {
	transform: scale( 1.03 );
}

@media ( prefers-reduced-motion: reduce ) {
	.fcs-staff-directory .fcs-staff-directory__image {
		transition: none;
	}

	.fcs-staff-directory .fcs-staff-directory__trigger:hover .fcs-staff-directory__image {
		transform: none;
	}
}

.fcs-staff-directory .fcs-staff-directory__empty {
	margin: 0;
	color: var( --wp--preset--color--muted );
}

/* Pop-up -------------------------------------------------------------- */

/*
 * The <dialog> itself is a bare box: the white panel inside it fills it
 * exactly, so a click that lands on the dialog element (not the panel) can
 * only be on the backdrop — which is how view.js closes on an outside click.
 */
.fcs-staff-directory .fcs-staff-directory__dialog {
	width: calc( 100vw - 40px );
	max-width: 626px;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var( --wp--preset--color--foreground );
	overflow: visible;
}

.fcs-staff-directory .fcs-staff-directory__dialog::backdrop {
	background-color: rgb( 0 0 0 / 50% );
}

.fcs-staff-directory .fcs-staff-directory__dialog-panel {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-height: calc( 100dvh - 40px );
	padding: 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 12px;
	background-color: var( --wp--preset--color--background );
	box-shadow: var( --fcs-shadow-lg );
}

.fcs-staff-directory .fcs-staff-directory__dialog-body {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

@media ( min-width: 768px ) {
	.fcs-staff-directory .fcs-staff-directory__dialog-panel,
	.fcs-staff-directory .fcs-staff-directory__dialog-body {
		gap: 40px;
	}

	.fcs-staff-directory .fcs-staff-directory__dialog-panel {
		padding: 28px;
	}
}

/*
 * Close — a 24px glyph (Figma 10230:8471) in a 44px hit area. The negative
 * margin gives back the extra 10px on each side, so the glyph still sits where
 * Figma draws it, flush with the panel padding.
 */
.fcs-staff-directory .fcs-staff-directory__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	margin: -10px;
	padding: 10px;
	color: var( --wp--preset--color--link );
}

.fcs-staff-directory .fcs-staff-directory__close svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* Header: name, title and email beside the photo. */
.fcs-staff-directory .fcs-staff-directory__modal-header {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 20px;
}

@media ( min-width: 768px ) {
	.fcs-staff-directory .fcs-staff-directory__modal-header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.fcs-staff-directory .fcs-staff-directory__modal-intro {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.fcs-staff-directory .fcs-staff-directory__modal-intro > * {
	margin: 0;
}

/*
 * The name is the dialog's <h2> (its accessible name) but drawn at Figma's H5
 * — the same restatement as the card name, for the same reason.
 */
.fcs-staff-directory .fcs-staff-directory__modal-name {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--h-5 );
	font-weight: 700;
	line-height: 1.556;
	letter-spacing: -0.2px;
	color: inherit;
}

.fcs-staff-directory .fcs-staff-directory__modal-title,
.fcs-staff-directory .fcs-staff-directory__modal-email {
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5;
}

.fcs-staff-directory .fcs-staff-directory__modal-email a {
	color: var( --wp--preset--color--link );
	text-decoration: none;
	overflow-wrap: anywhere;
}

.fcs-staff-directory .fcs-staff-directory__modal-email a:hover,
.fcs-staff-directory .fcs-staff-directory__modal-email a:focus-visible {
	color: var( --wp--preset--color--link );
	text-decoration: underline;
}

.fcs-staff-directory .fcs-staff-directory__modal-media {
	flex: none;
	width: min( 100%, 220px );
	aspect-ratio: 220 / 267;
	overflow: hidden;
	border-radius: 12px;
}

.fcs-staff-directory .fcs-staff-directory__modal-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Details: bold uppercase label over its value, 24px between rows. */
.fcs-staff-directory .fcs-staff-directory__details {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5;
}

.fcs-staff-directory .fcs-staff-directory__detail dt {
	font-weight: 700;
	text-transform: uppercase;
}

.fcs-staff-directory .fcs-staff-directory__detail dd {
	margin: 0;
}

/* Education: one paragraph per degree, a blank 24px line between them. */
.fcs-staff-directory .fcs-staff-directory__detail dd p {
	margin: 0;
}

.fcs-staff-directory .fcs-staff-directory__detail dd p + p {
	margin-block-start: 24px;
}