/* ==========================================================================
   WyoHS Find a Speaker (rendered by [wyohs_speakers])

   A four-across directory with no cards. Every other listing page on the site
   puts its content in a coloured panel; this one does the grouping with type
   and space instead, so the page reads as a printed directory rather than a
   set of tiles:

     name          Young Serif, large, navy — the only serif in the block
     programs      Special Gothic Condensed, all caps, tracked out, the same
                   treatment the section headers use
     everything    plain Special Gothic (the wide cut, NOT the condensed one)
     else
     contact       Font Awesome icons in navy, one per detail the speaker
                   actually gave; a speaker with no email simply has no
                   envelope

   The row gap is deliberately much larger than the column gap. That ratio is
   what separates one speaker from the next without drawing a box around
   either of them.

   Sizes are px on purpose: the BB theme sets html font-size to 62.5%.
   ========================================================================== */

.wyohs-speakers {
	--speakers-cols-max: 4;
	--speakers-cols: var(--speakers-cols-max);
	--speakers-col-gap: 34px;
	--speakers-row-gap: 62px;

	--spk-serif: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	--spk-display: var(--wyohs-display, 'Special Gothic Condensed One', 'Arial Narrow', sans-serif);
	--spk-sans: 'Special Gothic', 'Helvetica Neue', Arial, sans-serif;

	--spk-navy: var(--wyohs-navy, #1b3a5c);
	--spk-ink: var(--wyohs-ink, #1a1a1a);
	--spk-muted: #6b5a49;

	margin: 0;
	max-width: none;
}

.wyohs-speakers__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--speakers-cols), minmax(0, 1fr));
	column-gap: var(--speakers-col-gap);
	row-gap: var(--speakers-row-gap);
	/* start, not stretch: with no boxes there is nothing to equalise, and
	   top-aligned blocks keep the names on a line across each row. */
	align-items: start;
}

.wyohs-speakers__item {
	margin: 0;
	padding: 0;
}

.wyohs-speaker {
	display: block;
}

/* ---------- name --------------------------------------------------------- */

.wyohs-speaker .wyohs-speaker__name {
	margin: 0 0 .45em;
	padding: 0;
	border: 0;
	font-family: var(--spk-serif) !important;
	font-weight: 400 !important;
	font-size: 27px;
	line-height: 1.12;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--spk-navy) !important;
}

/* ---------- programs ----------------------------------------------------- */

.wyohs-speaker__programs {
	margin: 0 0 .85em;
	display: flex;
	flex-direction: column;
	gap: .3em;
}

.wyohs-speaker__program {
	font-family: var(--spk-display);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.22;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--spk-ink);
}

/* "Contact Terri about programs" is an instruction, not a title, so it keeps
   the condensed face but steps back in weight of colour. */
.wyohs-speaker__program--request {
	color: var(--spk-muted);
}

/* ---------- body copy ---------------------------------------------------- */

.wyohs-speaker__bio,
.wyohs-speaker__bio p,
.wyohs-speaker__availability,
.wyohs-speaker__note {
	font-family: var(--spk-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.55;
	letter-spacing: 0;
	color: var(--spk-ink);
}

.wyohs-speaker__bio { margin: 0 0 .85em; }
.wyohs-speaker__bio p { margin: 0 0 .7em; }
.wyohs-speaker__bio p:last-child { margin-bottom: 0; }

.wyohs-speaker__availability,
.wyohs-speaker__note {
	margin: 0 0 .5em;
	font-size: 13px;
	color: var(--spk-muted);
}

/* ---------- contact icons ------------------------------------------------ */

.wyohs-speaker__contact {
	margin: .7em 0 0;
	display: flex;
	align-items: center;
	gap: 16px;
}

.wyohs-speaker .wyohs-speaker__icon,
.wyohs-speaker .wyohs-speaker__icon:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1.5px solid var(--spk-navy);
	border-radius: 50%;
	color: var(--spk-navy) !important;
	font-size: 15px;
	line-height: 1;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}

.wyohs-speaker .wyohs-speaker__icon:hover,
.wyohs-speaker .wyohs-speaker__icon:focus-visible {
	background: var(--spk-navy);
	color: var(--wyohs-cream, #fff8e7) !important;
}

.wyohs-speaker__icon i { display: block; }

/* ---------- breakpoints -------------------------------------------------- */

@media (max-width: 1280px) {
	.wyohs-speakers { --speakers-cols: min(3, var(--speakers-cols-max)); }
	.wyohs-speaker .wyohs-speaker__name { font-size: 25px; }
}

@media (max-width: 900px) {
	.wyohs-speakers {
		--speakers-cols: min(2, var(--speakers-cols-max));
		--speakers-col-gap: 28px;
		--speakers-row-gap: 52px;
	}
}

@media (max-width: 560px) {
	.wyohs-speakers {
		--speakers-cols: 1;
		--speakers-row-gap: 46px;
	}
	.wyohs-speaker .wyohs-speaker__name { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.wyohs-speaker .wyohs-speaker__icon { transition: none; }
}

/* Deep link target. A redirected /speakers/<slug>/ URL arrives here as
   #speaker-<post id>, so the card needs room under the sticky header and
   something to say which one was asked for. See /inc/profile-redirects.php. */

.wyohs-speakers__item { scroll-margin-top: 120px; }

.wyohs-speakers__item:target .wyohs-speaker {
	outline: 2px solid var(--wyohs-sand, #d2a56c);
	outline-offset: 6px;
}