/**
 * Event staff panel.
 *
 * Rendered as an event section (hooked block at the end of event content), so
 * it inherits the section rhythm and is reachable from the event section nav.
 */

.mayo-event-staff-panel {
	padding: var(--wp--preset--spacing--40, 2rem);
	border: 1px solid var(--wp--preset--color--gray, #e6e6e6);
	border-radius: 4px;
	background: var(--wp--preset--color--off-white, #fafafa);
	scroll-margin-top: 2rem;
}

.mayo-event-staff-panel__heading {
	margin: 0;
}

.mayo-event-staff-panel__links {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.mayo-event-staff-panel__item {
	margin: 0;
	padding: 0;
}

.mayo-event-staff-panel__item::before {
	content: none;
}

.mayo-event-staff-panel__link {
	display: block;
	height: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var(--wp--preset--color--mayo-blue, #0057b8);
	border-radius: 2px;
	background: var(--wp--preset--color--white, #ffffff);
	color: inherit;
	/*
	 * !important is deliberate. The theme underlines content links with
	 * `a:not(.wp-block-button__link, ...)` in _typography.scss, which computes
	 * to (0,1,1), and its :hover variant to (0,2,1). Winning on specificity
	 * alone would need a three-class selector for the hover state.
	 */
	text-decoration: none !important;
	transition: color 0.4s, background-color 0.4s, border-color 0.4s;
}

/* Hover/focus mirrors mayo-blocks/linked-card: fill with mayo-blue, flip text. */
.mayo-event-staff-panel__link:hover,
.mayo-event-staff-panel__link:focus-visible {
	border-color: var(--wp--preset--color--mayo-blue, #0057b8);
	background-color: var(--wp--preset--color--mayo-blue, #0057b8);
	/*
	 * !important for the same reason as text-decoration above: the theme's
	 * `a:not(...):hover` rule in _typography.scss is (0,2,1) and would
	 * otherwise win over this (0,2,0) selector.
	 */
	color: var(--wp--preset--color--white, #ffffff) !important;
	text-decoration: none !important;
}

/*
 * Keep the focus ring visible once the card fills with mayo-blue, matching the
 * linked-card treatment.
 */
.mayo-event-staff-panel__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--white, #ffffff);
	outline-offset: 2px;
}

/* Descendants follow the link colour rather than restating it. */
.mayo-event-staff-panel__link:hover .mayo-event-staff-panel__label,
.mayo-event-staff-panel__link:focus-visible .mayo-event-staff-panel__label,
.mayo-event-staff-panel__link:hover .mayo-event-staff-panel__description,
.mayo-event-staff-panel__link:focus-visible .mayo-event-staff-panel__description {
	color: currentColor;
}

.mayo-event-staff-panel__label {
	display: block;
	color: var(--wp--preset--color--mayo-blue, #0057b8);
	font-weight: 700;
}

.mayo-event-staff-panel__description {
	display: block;
	margin-top: 0.25rem;
	color: #4a4a4a;
	font-size: 0.8125rem;
	line-height: 1.4;
}