/**
 * ask: 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 ---------- */
/* ---------- Ask a person -------------------------------------------------- *
 *
 * A face and a name, because "talk it over with somebody" is a weaker
 * invitation than a person you can see. The portrait is generous rather than
 * a thumbnail: the point is that this is a specific human being who has
 * agreed to sit down with you.
 * -------------------------------------------------------------------------- */

.cong-ask {
	/*
	 * --50, not --70. These blocks are not bands: a band spans the window and
	 * earns 7.5rem of air, while this one is usually dropped halfway down a
	 * program page, often inside a 300px column beside a "Meets / Register"
	 * card — where --70 put 120px of nothing above it and 120px below.
	 *
	 * The block now carries WordPress's own padding control (block.json
	 * supports.spacing), and the control writes an inline style, which beats
	 * this rule. So this is a starting point an editor can raise to band
	 * proportions on the one page that wants it, rather than a decision taken
	 * once in a stylesheet for all 116 of them.
	 */
	padding-block: var(--wp--preset--spacing--50);
	/* The side gutter lives here rather than on __inner, so that the padding
	   control replaces it instead of adding to it. Centring is unaffected:
	   __inner still has its own max width and auto margins, now inside a
	   slightly narrower box. */
	padding-inline: var(--wp--preset--spacing--40);
	/* So the rules below can ask how wide *this block* is rather than how wide
	   the window is. See the note on __inner. */
	container-type: inline-size;
}

/*
 * Flex that wraps, not a two-column grid with a viewport breakpoint.
 *
 * The grid was `15rem 1fr` until the window dropped below 40rem. But this
 * block is often not the width of the window — on a program page it sits
 * beside a "Meets / Ministry / Register" card, so its own column can be three
 * hundred pixels while the window is twelve hundred. The breakpoint never
 * fired and the text column was squeezed to one word per line, with the
 * portrait still demanding its fifteen rems.
 *
 * `flex-basis` on each side does the whole job with no query at all: the body
 * asks for 22rem and wraps underneath the moment it cannot have it, whatever
 * is deciding the width. The container query below is then only for the phone
 * refinement, not for the layout working.
 */
.cong-ask__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	max-inline-size: 52rem;
	margin-inline: auto;
}

.cong-ask__portrait {
	flex: 0 1 15rem;
	min-inline-size: 0;
}

.cong-ask__body {
	flex: 1 1 22rem;
	min-inline-size: 0;
}

.cong-ask__portrait img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
}

.cong-ask__heading {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.1;
}

.cong-ask__text {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--ink-muted);
}

.cong-ask__who {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.6rem;
	align-items: baseline;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 2px solid var(--wp--preset--color--lime);
}

.cong-ask__name {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	text-decoration: none;
}

.cong-ask__name:hover { color: var(--wp--preset--color--leaf); }

.cong-ask__role {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-ask__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--wp--preset--spacing--30) 0 0;
}

@container (max-width: 34rem) {
	.cong-ask__inner {
		gap: var(--wp--preset--spacing--30);
		align-items: flex-start;
	}

	.cong-ask__portrait { flex: 0 0 min(11rem, 45%); }
	.cong-ask__heading { font-size: var(--wp--preset--font-size--xl); }
}