/*
 * About family (stage 6 family 3, docs/stage-6/30-about-people-contact.md): About 131, Our history 133, Contact 138,
 * the legal pages 135 to 137, and Our people 132. Loaded only when one of the classes listed for "about" in
 * functions.php devora_css_families() renders, and in the editor. Builds on platform.css (a declared dependency).
 * Two blocks, each owned by its build: "About pages" (AB tags) and "Our people". Every rule says what core cannot do.
 */

/* === About pages === */

/* AB1 and AB2 (the split panel) moved to platform.css PH12 on 1 October: News & Events' banner uses the panel too, and
   loaded all of this file for them (review 3 to 5). */

/*
 * AB3 Our connections tiles (patterns/partner-logos.php; 820:18206, mobile 820:28267): each tile 4:3 (171 / 120 below
 * 600, as the phone frame draws), its logo centred both ways and held to the drawn logo boxes: at most 84% of the tile's
 * width (170 of 204) and 24% of it in height (49 of 204, the tallest drawn boxes: 48 to 50; the spec's 40% of the height,
 * 60, drew the raster logos a third larger than Figma). Why CSS: Post Template items take no aspect ratio, a vertical
 * flex Group centres only across, and core Image has no maximum height; the tile is a size container so the logo's
 * limits follow the tile at every width.
 */
.devora-partner-tile {
	aspect-ratio: 4 / 3;
	justify-content: center;
	container-type: inline-size;
}

.devora-partner-tile .devora-partner-logo {
	margin: 0;
}

.devora-partner-tile .devora-partner-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 84cqw;
	max-height: 24cqw;
}

.devora-partner-logo__link {
	display: block;
}

@media (max-width: 599px) {
	.devora-partner-tile {
		aspect-ratio: 171 / 120;
	}
}

/* Two across on phones (820:28267): core's post-template sets every grid with a column count to one column up to 600
 * (`[class*=columns-]:not(.has-native-responsive-grid)`, 0,3,0), over the block's own @mobile count. */
@media (max-width: 767px) {
	.devora-partner-logos .devora-partner-grid.wp-block-post-template-is-layout-grid[class] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * AB4 The "partners" anchor (the About menu's "Partners & funders", /about/#partners): 40 clear above the heading when a
 * link lands on it. Why CSS: no scroll margin control on a Group.
 */
.devora-partner-logos[id] {
	scroll-margin-top: var(--wp--preset--spacing--60);
}

/*
 * AB5 Contact cards on navy (patterns/contact-card.php; 732:7525): the 32 arrow circle before the text (the related
 * item's circled arrow as a mask, in the panel's light text colour: the circle at 40%, the arrow solid), the affiliation
 * 16/24, and "View profile" in the bright teal with the inverse underline (Figma teal/base, 5.22:1 on navy) instead of
 * the link style's colours for light bands. Why CSS: the link button style is theme.json's for light bands, and a
 * decorative icon beside bound text has no block.
 */
.devora-contact-card::before {
	content: "";
	flex: none;
	width: var(--wp--custom--resource--icon);
	height: var(--wp--custom--resource--icon);
	background-color: var(--wp--preset--color--text-inverse-muted);
	-webkit-mask: url("../icons/arrow-circle-related.svg") center / contain no-repeat;
	mask: url("../icons/arrow-circle-related.svg") center / contain no-repeat;
}

.devora-contact-card__text {
	flex: 1 1 0;
	min-width: 0;
	padding-block-start: calc(var(--wp--preset--spacing--10) / 2);
}

/* The name, affiliation and link 4 apart (732:7529), half the smallest spacing step: the Group's blockGap takes presets
 * only, and core's per-container gap rule is one class, so this doubles the class to win. */
.devora-contact-card__text.devora-contact-card__text > * + * {
	margin-block-start: calc(var(--wp--preset--spacing--10) / 2);
}

.devora-contact-card .wp-block-button.is-style-link .wp-block-button__link {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--custom--color--link-underline-inverse);
}

.devora-contact-card .wp-block-button.is-style-link .wp-block-button__link:hover,
.devora-contact-card .wp-block-button.is-style-link .wp-block-button__link:focus {
	color: var(--wp--preset--color--text-inverse);
	border-bottom-color: var(--wp--preset--color--accent);
}

/*
 * AB6 The Contact form (patterns/contact-form.php; Input Field 711:51519, Form 732:7568): Gravity Forms' Orbital
 * variables on the form's wrapper, so the fields are 56 tall with radius 8 and the overlay border, labels in the Kicker
 * style, 32 between fields, the message 216 tall and Send 48, every field full width (Figma draws them stacked; the form stores first and last name,
 * phone and email as half-width columns). Why CSS: Orbital's per-form variables beat any
 * class selector on the fields (the Value Cremations lesson), and the field widths are the form's own settings.
 */
.devora-contact-form .gform_wrapper.gravity-theme,
.devora-contact-form .gform-theme--framework {
	--gf-ctrl-size-md: var(--wp--custom--form--field);
	--gf-ctrl-size-lg: var(--wp--custom--form--field);
	--gf-ctrl-radius: var(--wp--preset--border-radius--card);
	--gf-ctrl-border-color: var(--wp--custom--color--overlay);
	--gf-ctrl-bg-color: var(--wp--preset--color--surface);
	--gf-ctrl-padding-x: var(--wp--preset--spacing--30);
	--gf-ctrl-font-size: var(--wp--preset--font-size--body);
	--gf-ctrl-label-color-primary: var(--wp--preset--color--text-body);
	--gf-ctrl-label-font-size-primary: var(--wp--preset--font-size--eyebrow);
	--gf-ctrl-label-font-weight-primary: 700;
	--gf-ctrl-label-line-height-primary: var(--wp--custom--line-height--kicker);
	--gf-ctrl-label-letter-spacing-primary: var(--wp--custom--letter-spacing--kicker);
	--gf-ctrl-placeholder-color: var(--wp--preset--color--accent-text);
	--gf-form-gap-y: var(--wp--preset--spacing--50);
	--gf-label-space-primary: var(--wp--preset--spacing--10);
	--gf-ctrl-textarea-height: calc(var(--wp--preset--spacing--70) * 4.5);
	--gf-ctrl-btn-size: var(--wp--preset--spacing--70);
	/* AB6a. Orbital's focus ring is the primary colour at 65% (the teal at 2.46:1 on the wash, under WCAG 1.4.11);
	 * the site's own ring instead (style.css A1: focus.ring, 2px, the nearest surface's ring colour, 15:1 on white). Assembly, 30 Sep. */
	--gf-ctrl-outline-color-focus: var(--devora-ring);
	--gf-ctrl-outline-width-focus: var(--wp--custom--focus--ring);
}

.devora-contact-form .gfield_label {
	text-transform: uppercase;
}

.devora-contact-form .gform_fields > .gfield {
	grid-column: 1 / -1;
}

/* === Our people === */

/*
 * Our people (30-about-people-contact 4.1; Figma 710:49041, 1314:*). Tags OP1 to OP7 (the spec's AB1, AB2, AB7 and AB9
 * for the people pieces; OP so the two builds' series never clash). The bio sheet and the video player carry their own
 * styles in devora-site (blocks/person-bio/style.css PB1 to PB7, blocks/video/style.css PV1 to PV4: the spec's AB3 and
 * AB8).
 */

/* OP1. People group columns (1314:27109): two of 636 with 12 between from 1024 (a Group grid takes one column count and
 *      no breakpoint), one below with the heading 32 to 40 above the cards (heading-content; Figma's mobile frame
 *      predates the rebuild, so inferred from the component variants, 4.1b). The doubled class outranks core's
 *      generated container rule. */
@media (width < 1024px) {
	.devora-people-group__grid.devora-people-group__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--heading-content);
	}
}

/* OP2. People group heading column (1314:27110, the spec's AB9): the text 528 of the 636 column (108 right at 1440, the
 *      feature padding token), none when stacked. Inline padding cannot change at a breakpoint (HM17 precedent). */
@media (width >= 1024px) {
	.devora-people-group__heading { padding-inline-end: var(--wp--custom--feature--pad-x); }
}

/* OP3. Person card (Member Card 732:42765, mobile 796:10387; the spec's AB1): the photo a circle of 72 (60 on phones:
 *      custom.person.avatar) with the 1px overlay border inside, never shrinking in the flex row; the text takes the
 *      rest and wraps. A Featured Image has no per-width size and shrinks in a flex row. Phones top-align the photo
 *      with a two-line name (796:10387). */
.devora-person-card__photo.devora-person-card__photo {
	flex: none;
	width: var(--wp--custom--person--avatar);
	height: var(--wp--custom--person--avatar);
	margin: 0;
}
.devora-person-card__photo img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid var(--wp--custom--color--overlay);
	border-radius: var(--wp--preset--border-radius--pill);
}
.devora-person-card__text { flex: 1 1 0; min-width: 0; }
.devora-person-card__name { overflow-wrap: anywhere; }
@media (width < 600px) {
	.devora-person-card.devora-person-card { align-items: flex-start; }
}

/* OP3a. The bio trigger is rendered by the site plugin; core has no control for its underline border colour. */
.devora-people-group .devora-bio-open { border-bottom-color: currentColor; }

/* OP3b. The plugin-rendered bio close button has no block size controls. Below its stacked-sheet
 * breakpoint, match the mobile navigation's target and glyph tokens; fill the target with the circle. */
@media (width < 782px) {
	.devora-bio .devora-bio__close,
	.devora-bio .devora-bio__close::before {
		width: var(--wp--custom--overlay--button);
		height: var(--wp--custom--overlay--button);
	}
	.devora-bio .devora-bio__close::after {
		width: var(--wp--custom--overlay--icon);
		height: var(--wp--custom--overlay--icon);
	}
}

/* OP4. No photo (Gareth, 30 Sep): a neutral placeholder the theme draws in the photo's place, a white circle with the
 *      overlay border and a plain figure in border-strong (the SVG's fill), decorative and gone as soon as the person
 *      has a featured image. Never a stand-in image in the Media Library. The card is a flex row, so the generated box
 *      is its first item, exactly where the photo would be. */
.devora-person-card:not(:has(.devora-person-card__photo))::before {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: var(--wp--custom--person--avatar);
	height: var(--wp--custom--person--avatar);
	border: 1px solid var(--wp--custom--color--overlay);
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--surface) url("../images/person-placeholder.svg") center / 100% no-repeat;
}

/* OP5. Graduate lists (1314:27163, 1314:27174; the spec's AB2 list half): one rule above the first row, each row ruled
 *      below; the alumni heading 960 wide (1314:27171: 1284 less 324). Post Template has no border support. */
.devora-graduate-list__rows { border-top: 1px solid var(--wp--preset--color--border); }
.devora-graduate-list__heading { max-width: var(--wp--custom--width--heading); }

/* OP6. Graduate row (Graduate Row (Simple) 732:43836, mobile 796:10302; the spec's AB2): a grid of name 312, title (the
 *      rest), university 156 right aligned and year 96, 12 between, on the text baseline, 16 above and below; the
 *      current students have no year column. Each field keeps its column when another is empty (the site plugin drops
 *      an empty field's paragraph). Below 782 the row stacks: name, title, then university and year side by side, 4
 *      apart, 12 above and below. Group flex children cannot change width or order at a breakpoint. */
.devora-graduate-row {
	display: grid;
	grid-template-columns: var(--wp--custom--graduate--name) minmax(0, 1fr) var(--wp--custom--graduate--university) var(--wp--custom--graduate--year);
	column-gap: var(--wp--preset--spacing--card-row);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.devora-graduate-list--no-year .devora-graduate-row {
	grid-template-columns: var(--wp--custom--graduate--name) minmax(0, 1fr) var(--wp--custom--graduate--university);
}
/* The doubled class outranks core's flow gap (:root :where(.is-layout-flow) > *, the same specificity, printed later). */
.devora-graduate-row.devora-graduate-row > * { margin: 0; min-width: 0; }
.devora-graduate-row__name { grid-column: 1; overflow-wrap: anywhere; }
.devora-graduate-row__title { grid-column: 2; }
.devora-graduate-row__university { grid-column: 3; text-align: end; }
.devora-graduate-row__year { grid-column: 4; }
@media (width < 782px) {
	.devora-graduate-row,
	.devora-graduate-list--no-year .devora-graduate-row {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: var(--wp--custom--graduate--stack-gap);
		padding-block: var(--wp--preset--spacing--20);
	}
	.devora-graduate-row__name,
	.devora-graduate-row__title { grid-column: 1 / -1; }
	.devora-graduate-row__university { grid-column: 1; text-align: start; }
	.devora-graduate-row__year { grid-column: 2; }
}

/* OP7. Anchors (the spec's AB7, people half): a person's card or row (#person-{ID}, where a person single redirects and
 *      a bio's shared link lands) and the section anchors stop 40 short of the viewport edge. No scroll-margin
 *      control. */
.devora-person-card,
.devora-graduate-row,
.devora-people-group,
.devora-graduate-list { scroll-margin-top: var(--wp--preset--spacing--60); }