/*
 * ═════════════════════════════════════════════════════════════════════════════
 * PODCAST — the listen block and the subscribe row
 *
 * Loaded on the podcast archive and on a single episode (see
 * fluent_commerce_ds_enqueue()), after blog.css, which is where the card, the
 * listing and the article column come from. The archive IS the blog index — same
 * grid, same cards, same head — and an episode IS an article, so nothing here
 * restyles any of that. This file adds two things:
 *
 *   .fc-listen       the block that stands where an article's hero image would:
 *                    the guest, and the player
 *   .fc-listenplate  the plate inside it, which is a picture of a player until
 *                    somebody presses it — see assets/ds/listen.js
 *
 * and one small thing on the archive: the subscribe row under the head.
 *
 * There is no design export for any of this — the brief was to use the blog index
 * and the blog article as the templates — so every value is the design system's
 * own: the card's 1px rules and ink ramp, the plate on ink like the video plate,
 * .fc-btn's 48/pill geometry on the play button, and the --sp scale for spacing.
 * Nothing invented but the arrangement.
 *
 * See inc/ds-podcast.php.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CARD'S PORTRAIT
 *
 * blog.css fills the card's 16/10 figure with background-size: cover, which is the
 * right call for the photograph on a blog card and the wrong one for a headshot.
 * Every one of these 36 images is a portrait about 322x370, so covering a landscape
 * box scales the width to fit and then throws away four tenths of the height —
 * which, on a photograph of a person, is their face.
 *
 * So: contain. The whole portrait, scaled down to the plate's height, matted on the
 * same --fc-ink-a06 tint the plate already draws when a post has no image at all.
 * Nothing is cropped at any width, which is the point — a rule that keeps the face
 * only as long as every future guest is framed like the last 36 is not a rule.
 *
 * The card's height, the grid and the ratio are all untouched, so an episode card
 * still lines up with a blog card beside it.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-card--portrait .fc-card__figure {
	background-size: contain;
	/*
	 * Load-bearing, not tidiness: background-repeat defaults to repeat, and it only
	 * stopped mattering above because `cover` leaves nothing to tile. Under `contain`
	 * the portrait is narrower than the plate, and without this the card would draw
	 * the same guest two and a bit times across.
	 */
	background-repeat: no-repeat;
	background-position: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE BLOCK
 *
 * Takes .fc-post__hero's margin exactly — var(--sp-72) top and bottom — because
 * it stands in the same place in the same section and the 72 below it has to
 * collapse against the 72 above .fc-post__body the same way the image's did.
 * Anything else and an episode page would have a different rhythm from every
 * other page on the site for no reason a reader could name.
 *
 * Capped at the prose measure rather than run to the section's full width. The
 * hero it replaces is an image, which reads at any width; this is a portrait, a
 * name and a control, and stretched across 1200px they end up as three things
 * marooned at opposite ends of a line.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-listen {
	max-width: 68ch;
	margin: var(--sp-72) 0;
}

/* ── The guest ───────────────────────────────────────────────────────────── */

body.fc-ds .fc-listen__guest {
	display: flex;
	align-items: center;
	gap: var(--sp-24);
	margin-bottom: var(--sp-32);
}

/*
 * Round, and cropped square from whatever shape the file is. The source images
 * are headshots at wildly different crops — some square, some 4/5, one or two
 * with a lot of ceiling — and a circle of a fixed size is the only treatment that
 * makes 36 of them sit in a row without looking like 36 different decisions.
 *
 * flex: none because a portrait that shrinks to fit a long job title is a portrait
 * that is a different size on every episode.
 */
body.fc-ds .fc-listen__portrait {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: var(--radius-pill);
	object-fit: cover;
	/* Faces are cropped from the top: the subject's eyes are near the top of a
	   headshot, and centre-cropping a tall one cuts the forehead off. */
	object-position: center top;
	background: var(--fc-ink-a06);
}

body.fc-ds .fc-listen__who {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

body.fc-ds .fc-listen__name {
	font-size: var(--type-body-18);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--fc-ink-12);
}

body.fc-ds .fc-listen__role {
	font-size: var(--type-body-15);
	line-height: var(--lh-body);
	color: var(--fc-ink-a60);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE PLATE
 *
 * 175px because that is the height Apple's compact episode embed draws at, and
 * the whole point of the facade is that pressing it changes nothing about the
 * page except what is inside this box. A plate of a different height would hand
 * the reader a layout shift as their reward for clicking.
 *
 * On ink, like the video plate, and for the same reason: it is a player, it has
 * a light control on it, and the page it sits on is bone.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-listenplate {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 175px;
	border-radius: var(--radius-16);
	background: var(--fc-ink-12);
	overflow: hidden;
}

/*
 * Once the iframe is in, the plate stops drawing anything of its own. Apple's
 * player brings its own white card with its own rounded corners, so an ink
 * background behind it would show as a dark hairline down the sides.
 */
body.fc-ds .fc-listenplate.is-playing {
	background: transparent;
}

body.fc-ds .fc-listenplate__frame {
	display: block;
	width: 100%;
	height: 175px;
	border: 0;
}

/*
 * The button, not the plate, is the target. The video plate makes the whole still
 * clickable because there the still is a picture of the thing you are asking for;
 * here the plate is empty, and a 175px expanse of dark with one hit area
 * everywhere on it gives a visitor nothing to aim at and no idea what is a
 * control.
 */
body.fc-ds .fc-listenplate__play {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	height: 48px;
	padding: 0 24px;
	border: var(--stroke-1) solid var(--fc-bone-a40);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--fc-bone);
	font: inherit;
	font-size: var(--type-body-15);
	font-weight: var(--fw-medium);
	line-height: var(--lh-flush);
	cursor: pointer;
	transition:
		background var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

body.fc-ds .fc-listenplate__play:hover {
	background: var(--fc-violet);
	border-color: var(--fc-violet);
}

body.fc-ds .fc-listenplate__play:focus-visible {
	outline: 2px solid var(--fc-bone);
	outline-offset: 3px;
}

body.fc-ds .fc-listenplate__glyph {
	display: inline-flex;
	/* The triangle's optical centre sits left of its box; 1px right of true
	   centre is what makes it look centred. Same fudge as the video badge. */
	margin-left: 1px;
}

/* The colour still moves on hover, it just arrives rather than easing. */
@media ( prefers-reduced-motion: reduce ) {

	body.fc-ds .fc-listenplate__play {
		transition: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE LINKS
 *
 * Under the plate on an episode, under the head on the archive. Underlined text
 * and not buttons: the plate is the one thing on this block that should look like
 * a control, and two more filled pills beside it would compete with it for the
 * click it is asking for.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-listen__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-24);
	margin: var(--sp-24) 0 0;
	font-size: var(--type-body-15);
	line-height: var(--lh-body);
}

body.fc-ds .fc-listen__link {
	color: var(--fc-ink-a80);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--dur-fast) var(--ease-out);
}

body.fc-ds .fc-listen__link:hover {
	color: var(--fc-violet);
}

/*
 * On the archive the row sits between the head's split and the card grid, so it
 * takes the block gap above it rather than the tighter 24 it uses inside the
 * listen block.
 */
body.fc-ds .fc-listen__links--archive {
	margin-top: var(--sp-32);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * NARROW
 *
 * The guest row stacks and the portrait comes down to 72px. Nothing else changes:
 * the plate is fluid, the links already wrap, and the 175px player is the same
 * height on a phone because Apple's embed is.
 *
 * A container query and not a media query, to match the rest of the design system
 * — the page is the container, so this responds to the column the block is in
 * rather than to the size of the device holding it.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 640px) {

	body.fc-ds .fc-listen__guest {
		align-items: flex-start;
		gap: var(--sp-16);
	}

	body.fc-ds .fc-listen__portrait {
		width: 72px;
		height: 72px;
	}

	/*
	 * The links go to a column. Side by side at this width they wrap mid-phrase,
	 * and "Listen on Apple" / "Podcasts" on two lines reads as three links.
	 */
	body.fc-ds .fc-listen__links {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-8);
	}
}