/**
 * FMC talent photo frame: ONE stylesheet for every talent photograph on the website.
 *
 * Markup comes from FMC_Talent_Polaroid::html() (includes/class-fmc-talent-polaroid.php); the member chat (assets/fmc-connect.js)
 * builds the same classes by hand. The photograph itself is never touched: this file only frames it.
 *
 * The frame: warm paper, one thin square edge, narrow equal top and side margins, a bottom margin about 2.75 times the top one,
 * a square photo area by default, square corners, flat (nothing lifted off the page), no texture. Black, white and grey only,
 * so the full-colour photograph is the only colour. Nothing here rotates a frame except the one named variant at the end.
 *
 * Change the look of every frame on the site by changing the variables just below.
 */

.fmc-tpol {
	--fmc-tpol-paper: #f5f4f0;
	--fmc-tpol-edge: #cfcdc5;
	--fmc-tpol-ink: #141414;
	--fmc-tpol-ink-soft: #6b6a64;
	--fmc-tpol-void: #e6e4dd;
	--fmc-tpol-void-ink: #9a988f;
	--fmc-tpol-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--fmc-tpol-m: 10px;
	--fmc-tpol-mb: calc(var(--fmc-tpol-m) * 2.75);
	--fmc-tpol-cap: 9.5px;
	--fmc-tpol-ph: 26px;
	--fmc-tpol-ratio: 1 / 1;
	--fmc-tpol-focus: 50% 24%;
	position: relative;
	display: block;
	box-sizing: border-box;
	width: var(--fmc-tpol-w, 100%);
	max-width: 100%;
	margin: 0;
	padding: var(--fmc-tpol-m) var(--fmc-tpol-m) var(--fmc-tpol-mb);
	background: var(--fmc-tpol-paper);
	border: 1px solid var(--fmc-tpol-edge);
	color: var(--fmc-tpol-ink);
	font-family: var(--fmc-tpol-font);
	text-decoration: none;
	line-height: 1;
}

.fmc-tpol *,
.fmc-tpol *::before,
.fmc-tpol *::after {
	box-sizing: border-box;
}

/* Sizes: the margins and the caption size change, the proportions do not. The widths are only defaults for the two small sizes. */
:where(.fmc-tpol--xs) {
	--fmc-tpol-w: 32px;
}

:where(.fmc-tpol--sm) {
	--fmc-tpol-w: 64px;
}

.fmc-tpol--xs {
	--fmc-tpol-m: 2px;
	--fmc-tpol-ph: 11px;
}

.fmc-tpol--sm {
	--fmc-tpol-m: 4px;
	--fmc-tpol-ph: 18px;
}

.fmc-tpol--md {
	--fmc-tpol-m: 10px;
	--fmc-tpol-cap: 9.5px;
	--fmc-tpol-ph: 26px;
}

.fmc-tpol--lg {
	--fmc-tpol-m: 12px;
	--fmc-tpol-cap: 11px;
	--fmc-tpol-ph: 40px;
}

.fmc-tpol--xl {
	--fmc-tpol-m: 16px;
	--fmc-tpol-cap: 12px;
	--fmc-tpol-ph: 56px;
}

/* The photo area. The picture is cropped to fill it (cover), never stretched, and the crop favours the upper part where faces sit. */
.fmc-tpol__photo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--fmc-tpol-ratio);
	overflow: hidden;
	background: var(--fmc-tpol-void);
	outline: 1px solid rgba(0, 0, 0, 0.14);
	outline-offset: -1px;
}

.fmc-tpol__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: var(--fmc-tpol-focus);
}

/* No photo yet: a quiet grey area with a letter, or a few words. */
.fmc-tpol__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 6%;
	color: var(--fmc-tpol-void-ink);
	font-size: var(--fmc-tpol-ph);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.fmc-tpol__ph--text {
	font-size: max(9px, calc(var(--fmc-tpol-ph) * 0.38));
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.35;
}

/* The caption lives inside the wide bottom margin and does not change the frame's size. */
.fmc-tpol__cap {
	position: absolute;
	right: var(--fmc-tpol-m);
	bottom: 0;
	left: var(--fmc-tpol-m);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.9em;
	height: var(--fmc-tpol-mb);
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: var(--fmc-tpol-cap);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-align: left;
	white-space: nowrap;
}

.fmc-tpol__name {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var(--fmc-tpol-ink);
	text-overflow: ellipsis;
	text-transform: uppercase;
}

.fmc-tpol__sub {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	color: var(--fmc-tpol-ink-soft);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-align: right;
	text-overflow: ellipsis;
}

/* A frame that is a link (or any clickable frame): the pointer and a clear keyboard focus, nothing that moves. */
a.fmc-tpol,
.fmc-tpol[role="button"] {
	cursor: pointer;
}

a.fmc-tpol:hover,
.fmc-tpol[role="button"]:hover {
	border-color: #8f8d85;
}

a.fmc-tpol:focus-visible,
.fmc-tpol[role="button"]:focus-visible {
	outline: 2px solid #8f8d85;
	outline-offset: 2px;
}

/* The photo area keeps the picture's own proportions (the Collective's Talent Watch card does this). */
.fmc-tpol--ratio-auto .fmc-tpol__photo {
	aspect-ratio: auto;
	background: none;
	outline: 0;
}

.fmc-tpol--ratio-auto .fmc-tpol__img {
	height: auto;
	object-fit: contain;
}

/* Phones and small tablets: slightly narrower margins so the photograph keeps its room. */
@media (max-width: 560px) {
	.fmc-tpol--md {
		--fmc-tpol-m: 8px;
	}

	.fmc-tpol--lg {
		--fmc-tpol-m: 10px;
	}

	.fmc-tpol--xl {
		--fmc-tpol-m: 12px;
	}
}

/* Print: keep the paper and the photograph. */
@media print {
	.fmc-tpol {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/*
 * The ONE variant: "tilt". Only the Collective's Talent Watch card uses it (the owner chose that card's slight turn).
 * Every other frame stays square to the page.
 */
.fmc-tpol--tilt {
	transform: rotate(-1.6deg);
}