/**
 * stories: loaded only on pages that show it.
 *
 * Split out of the shared stylesheets by bin/split-css.py; loaded by
 * inc/feature-styles.php when something on the page has the class.
 */

/* ---------- From blocks.css ---------- */
/* ---------- Stories ------------------------------------------------------ */

.cong-story__quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.4;
}

.cong-story__who {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-story__who strong {
	display: block;
	color: var(--wp--preset--color--ink);
}

/*
 * The attribution with a face beside it.
 *
 * The name goes left of centre once there is a portrait to sit next to —
 * a centred name with a circle bolted to its left reads as misaligned
 * rather than as a pair.
 */
.cong-story__who.has-portrait {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	text-align: start;
}

.cong-story__face {
	flex: 0 0 auto;
}

/* block-size spelled out because the attachment carries a height attribute,
   which otherwise wins over the square the circle needs. */
.cong-story__face img {
	display: block;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: 50%;
	object-fit: cover;
}

/* A story with no photo: a mark that looks chosen, not a missing picture. */
.cong-story__badge {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sky-soft);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
}

.cong-story__badge.is-anonymous {
	font-size: 2rem;
	padding-block-start: 0.6rem;
}

.cong-story__more {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

.cong-story__more a {
	text-decoration: none;
}

.cong-story__place {
	display: block;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 0.2em;
}

/* Cards end with the person, whatever the length of their quote. */
.cong-stories .cong-story {
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

.cong-stories .cong-story__who {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
}

/* One person first, told at length. */
.cong-story-lead {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	margin-block-end: var(--wp--preset--spacing--70);
}

@media (min-width: 52rem) {
	.cong-story-lead {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--wp--preset--spacing--60);
	}
}

.cong-story-lead__photo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	border-radius: 20px;
	object-fit: cover;
}

.cong-story-lead__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxxl);
	line-height: 1.05;
}

.cong-story-lead__context {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--lg);
}

.cong-story-lead__words {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
}

.cong-story-lead__words p {
	margin: 0 0 1em;
}

.cong-story-lead__go,
.cong-stories__all {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.cong-stories__all {
	text-align: center;
}

.cong-stories__heading {
	margin: 0 0 var(--wp--preset--spacing--50);
	text-align: center;
}