/* ==========================================================================
   Once intentionally empty — now the home of the video testimonials block.
   --------------------------------------------------------------------------
   This file used to carry the scoped CSS lifted from the Pure Marketing
   library blocks the first build was assembled from (navbar-01, header-05,
   layout-01/250, team-04/06, testimonial-08, cta-07/13, contact-08/17/22,
   timeline-17).

   The 2026 rebuild replaced every one of those layouts with purpose-built
   markup in f2c-site.css, so keeping the old block CSS around only risked
   the previous look bleeding back in through a shared class name. The
   enqueue was left in place (functions.php) so the stylesheet handle and
   dependency chain stayed stable — which is exactly why the film wall below
   lives here: the handle was already enqueued and the file was otherwise
   empty, so the block arrives without anyone having to touch a 44KB
   f2c-site.css.
   ========================================================================== */

/* ==========================================================================
   Video testimonials — the film wall (template-testimonials.php)
   --------------------------------------------------------------------------
   Every value resolves to a --pm-* token, so the section inherits whatever
   colour scheme it is dropped on and follows the palette if the brand moves.

   The grid is count-agnostic on purpose. auto-fit with a minmax floor means
   one film fills the row, two sit side by side and three go three-up, all
   without the CSS being told how many there are — which matters because the
   number of films is whatever someone has filled in.
   ========================================================================== */

.f2c-films {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--pm-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A single film should not stretch to a cinema screen on a wide monitor. */
.f2c-films:has(.f2c-film:only-child) {
	max-width: 56rem;
}

.f2c-film {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-3);
}

/* The player, the poster button and the iframe all occupy the same box, so
   swapping one for another on click cannot shift the page. */
.f2c-film__frame,
.f2c-film__play {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--pm-radius-image);
	background: var(--pm-surface-raised);
	overflow: hidden;
}

.f2c-film__play {
	position: relative;
	padding: 0;
	cursor: pointer;
	color: var(--pm-on-accent);
	transition: box-shadow var(--pm-duration-fast) var(--pm-ease);
}

.f2c-film__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The poster is decorative — the accessible name is on the button. */
	transition: transform var(--pm-duration) var(--pm-ease-out),
		filter var(--pm-duration) var(--pm-ease-out);
}

.f2c-film__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--pm-radius-full);
	background: var(--pm-accent);
	color: var(--pm-on-accent);
	box-shadow: var(--pm-shadow-lg);
	transition: transform var(--pm-duration) var(--pm-ease-out);
}

.f2c-film__icon svg {
	width: 1.75rem;
	height: 1.75rem;
	/* Optical centring: the triangle's mass sits left of its bounding box. */
	margin-left: 0.15rem;
}

.f2c-film__play:hover .f2c-film__poster,
.f2c-film__play:focus-visible .f2c-film__poster {
	transform: scale(1.03);
	filter: brightness(0.92);
}

.f2c-film__play:hover .f2c-film__icon,
.f2c-film__play:focus-visible .f2c-film__icon {
	transform: translate(-50%, -50%) scale(1.08);
}

.f2c-film__play:focus-visible {
	outline: var(--pm-border-width-thick) solid var(--pm-fg);
	outline-offset: 3px;
}

.f2c-film__name {
	font-weight: var(--pm-weight-semibold);
	font-size: var(--pm-text-md);
	line-height: var(--pm-leading-snug);
	color: var(--pm-fg);
}

@media (prefers-reduced-motion: reduce) {
	.f2c-film__poster,
	.f2c-film__icon {
		transition: none;
	}

	.f2c-film__play:hover .f2c-film__poster,
	.f2c-film__play:focus-visible .f2c-film__poster,
	.f2c-film__play:hover .f2c-film__icon,
	.f2c-film__play:focus-visible .f2c-film__icon {
		transform: none;
	}
}

/* Fallback in case the base stylesheet's version is ever dropped — the play
   button's accessible name depends on this being visually hidden, not gone. */
.f2c-film .screen-reader-text,
.f2c-staff .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Our Team — staff profile cards (template-team.php)
   --------------------------------------------------------------------------
   Directors and the advisory council are photo + name + role only; staff
   carry a written profile, so they get a wider card: photo beside the copy,
   a short intro always visible and the rest behind a native <details>
   "Read more", which needs no script and works with the keyboard.
   Two cards sit side by side on desktop and stack on phones; the grid is
   count-agnostic, so a third or fourth person needs no CSS change.
   ========================================================================== */

.f2c-staff {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
	gap: var(--pm-space-8);
	align-items: start;
}

.f2c-staff__card {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: var(--pm-space-6);
	padding: var(--pm-space-6);
	background: var(--pm-color-surface, #fff);
	border-radius: var(--pm-radius-card);
	box-shadow: var(--pm-shadow-sm);
}

.f2c-staff__photo {
	aspect-ratio: 1 / 1.1;
	border-radius: var(--pm-radius-image);
	overflow: hidden;
	background: var(--pm-surface-raised);
}

.f2c-staff__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

/* Shown in place of a photo until one is supplied, so the card keeps its
   shape rather than leaving an empty box. */
.f2c-staff__initials {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--pm-accent);
	color: var(--pm-on-accent);
	font-size: var(--pm-text-3xl, 2.5rem);
	font-weight: var(--pm-weight-bold);
	letter-spacing: 0.04em;
}

.f2c-staff__body {
	min-width: 0;
}

.f2c-staff__name {
	margin: 0;
	font-size: var(--pm-text-lg);
	font-weight: var(--pm-weight-bold);
	line-height: var(--pm-leading-snug);
	color: var(--pm-fg);
	text-wrap: balance;
}

.f2c-staff__role {
	margin: var(--pm-space-1) 0 var(--pm-space-4);
	text-align: left;
}

.f2c-staff__intro p,
.f2c-staff__bio p {
	margin: 0 0 var(--pm-space-3);
	font-size: var(--pm-text-base);
	line-height: 1.65;
	color: var(--pm-fg-muted);
	text-wrap: pretty;
}

.f2c-staff__more summary {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-space-2);
	cursor: pointer;
	list-style: none;
	font-weight: var(--pm-weight-semibold);
	font-size: var(--pm-text-sm);
	color: var(--pm-accent);
}

.f2c-staff__more summary::-webkit-details-marker {
	display: none;
}

/* A chevron drawn in CSS, so no icon font or emoji is needed. */
.f2c-staff__more summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--pm-duration-fast) var(--pm-ease);
}

.f2c-staff__more[open] summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.f2c-staff__more[open] summary {
	margin-bottom: var(--pm-space-3);
}

.f2c-staff__more summary:focus-visible {
	outline: var(--pm-border-width-thick) solid var(--pm-fg);
	outline-offset: 3px;
	border-radius: var(--pm-radius-xs);
}

@media (max-width: 40rem) {
	.f2c-staff__card {
		grid-template-columns: 1fr;
		padding: var(--pm-space-5);
	}

	.f2c-staff__photo {
		max-width: 14rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.f2c-staff__more summary::after {
		transition: none;
	}
}

/* ==========================================================================
   Advisory council — optional "Read more" bio (template-team.php)
   --------------------------------------------------------------------------
   Council cards stay photo + name + role; a member with a written bio (slot 8,
   Dionne, from Nov 2026) gets the same native <details> toggle as the staff
   cards, centred under the role, with the bio itself left-aligned so long
   paragraphs stay readable.
   ========================================================================== */

.f2c-person__more {
	margin-top: var(--pm-space-3);
}

.f2c-person__more .f2c-staff__bio {
	text-align: left;
}

.f2c-person__more .f2c-staff__bio p {
	font-size: var(--pm-text-sm);
}

.f2c-person__more .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}