/* ==========================================================================
   Advisory Council page (UI-20)
   No Figma frame exists for this page. Every value comes from the
   --loa-council-* block in tokens.css, which aliases the Programs,
   Properties and About tokens, so all standalone pages retune together.
   Enqueued only on /advisory-council/, gated with is_page().

   Reading measure: the 768px cap goes on the CONTENT (.loa-council__prose)
   inside a full-width inner, never on a narrower centered container, so
   the masthead, prose, lists, photo and timeline share one left edge
   with the Programs and Properties mastheads.

   Mobile: every multi-column block collapses to one column at the
   site's existing 1024px breakpoint (UI-20 TN 17); the timeline stacks
   below 768px (TN 11).
   ========================================================================== */

.loa-council {
	background: var(--loa-council-bg);
}

.loa-council__inner {
	max-width: var(--loa-council-max);
	margin: 0 auto;
	padding-inline: var(--loa-council-pad-x);
	/* v0.23.0: the inner is a size container so a figure can measure the
	   empty margin to the right of the 768px text column (100cqw minus
	   the column). */
	container-type: inline-size;
}

.loa-council__prose {
	--loa-council-overhang: clamp(0px, calc(100cqw - var(--loa-council-narrow-max)), var(--loa-council-overhang-max));
	max-width: var(--loa-council-narrow-max);
	/* Contains the floated figures, so each section's rule and padding
	   stay below its photo even when the text is shorter. */
	display: flow-root;
}

.loa-council__section {
	padding-block: var(--loa-council-section-pad-y);
	border-top: 1px solid var(--loa-council-rule);
}

.loa-council__section--first {
	border-top: 0;
}

/* ---- Masthead (mirrors .loa-programs__masthead) ---- */

.loa-council__masthead {
	padding-top: var(--loa-council-masthead-pad-top);
	padding-bottom: var(--loa-council-masthead-pad-bottom);
}

.loa-council__eyebrow {
	margin: 0 0 var(--loa-council-eyebrow-gap);
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-council-eyebrow-size);
	letter-spacing: var(--loa-council-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--loa-council-eyebrow-color);
}

.loa-council__title {
	margin: 0;
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-council-title-size);
	line-height: var(--loa-council-title-line);
	color: var(--loa-council-title-color);
}

.loa-council__lede {
	max-width: var(--loa-council-narrow-max);
	margin: var(--loa-council-lede-gap) 0 0;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-council-lede-size);
	line-height: var(--loa-council-lede-line);
	color: var(--loa-council-lede-color);
}

/* ---- Prose ---- */

.loa-council__h2 {
	margin: 0 0 var(--loa-council-h2-gap);
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-council-h2-size);
	color: var(--loa-council-h2-color);
}

.loa-council__p {
	margin: 0 0 var(--loa-council-p-gap);
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-council-p-size);
	line-height: var(--loa-council-p-line);
	color: var(--loa-council-p-color);
}

.loa-council__prose > .loa-council__p:last-child {
	margin-bottom: 0;
}

/* Small uppercase gold label above a list ("Council members",
   "Partners who have hosted the Council"). */
.loa-council__label {
	margin: var(--loa-council-block-gap) 0 var(--loa-council-label-gap);
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-council-label-size);
	letter-spacing: var(--loa-council-label-tracking);
	text-transform: uppercase;
	color: var(--loa-council-label-color);
}

/* ---- Member list (UI-20 TN 7): 2 columns at >= 1024px ---- */

.loa-council__members {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--loa-council-list-gap);
	row-gap: calc(var(--loa-council-p-gap) / 2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loa-council__member {
	padding-left: var(--loa-council-p-gap);
	border-left: 1px solid var(--loa-council-label-color);
	font-family: var(--loa-font-body);
	font-weight: 400;
	font-size: var(--loa-council-p-size);
	line-height: var(--loa-council-p-line);
	color: var(--loa-council-strong-color);
}

/* ---- Council week (UI-20 TN 8): 2-column grid, 48px gap ---- */

/* v0.23.0: one column (was a 2-column grid, UI-20 TN 8) so the items
   wrap around the floated photo like article text. A grid would form
   its own block and squeeze beside the float instead of wrapping. */
.loa-council__week {
	margin: var(--loa-council-h2-gap) 0 0;
	padding: 0;
	list-style: none;
}

.loa-council__step + .loa-council__step {
	margin-top: var(--loa-council-h2-gap);
}

.loa-council__step-label {
	margin: 0 0 calc(var(--loa-council-p-gap) / 2);
	font-family: var(--loa-font-body);
	font-weight: 600;
	font-size: var(--loa-council-p-size);
	line-height: var(--loa-council-p-line);
	color: var(--loa-council-item-label-color);
}

.loa-council__step-text {
	margin: 0;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-council-p-size);
	line-height: var(--loa-council-p-line);
	color: var(--loa-council-p-color);
}

/* ---- Hero banner (v0.23.0) ---- */

.loa-council__hero {
	margin: 0;
}

.loa-council__hero-img {
	display: block;
	width: 100%;
	height: var(--loa-council-hero-h);
	object-fit: cover;
	object-position: var(--loa-council-hero-focus);
	background: var(--loa-council-hero-bg);
}

.loa-council__hero-caption {
	display: block;
}

/* The banner already separates the masthead from the header. */
.loa-council__hero + .loa-council__masthead {
	padding-top: var(--loa-council-hero-masthead-pad-top);
}

/* ---- Section photos (v0.23.0) ----
   Editorial layout on desktop: a float figure sits right of the text and
   reaches across the empty right margin to the content edge, with the
   text wrapping beside it; a wide figure spans the text column plus that
   margin. Below 1024px both are plain full-width images in the flow. */

.loa-council__figure {
	margin: var(--loa-council-block-gap) 0 0;
}

.loa-council__figure--float {
	float: right;
	width: calc(var(--loa-council-float-w) + var(--loa-council-overhang));
	margin: 0 calc(-1 * var(--loa-council-overhang)) var(--loa-council-float-below) var(--loa-council-float-gap);
}

.loa-council__figure--wide {
	clear: both;
	width: calc(100% + var(--loa-council-overhang));
}

.loa-council__figure-img {
	display: block;
	width: 100%;
	height: auto;
}

.loa-council__figcaption {
	margin-top: var(--loa-council-figcaption-gap);
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-council-figcaption-size);
	line-height: var(--loa-council-figcaption-line);
	color: var(--loa-council-figcaption-color);
}

/* ---- Partner lists (UI-20 TN 10): 3 columns at >= 1024px ---- */

.loa-council__partners {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--loa-council-list-gap);
}

.loa-council__partner-label {
	margin: 0 0 calc(var(--loa-council-p-gap) / 2);
	font-family: var(--loa-font-body);
	font-weight: 600;
	font-size: var(--loa-council-p-size);
	line-height: var(--loa-council-p-line);
	color: var(--loa-council-strong-color);
}

.loa-council__partner-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-council-p-size);
	line-height: var(--loa-council-p-line);
	color: var(--loa-council-p-color);
}

/* ---- Timeline (UI-20 TN 11): year / place, stacked below 768px ---- */

.loa-council__timeline {
	margin: 0;
}

.loa-council__timeline-row {
	display: grid;
	grid-template-columns: var(--loa-council-year-w) minmax(0, 1fr);
	padding-block: var(--loa-council-p-gap);
	border-top: 1px solid var(--loa-council-rule);
}

.loa-council__timeline-row:last-child {
	border-bottom: 1px solid var(--loa-council-rule);
}

.loa-council__year {
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-council-p-size);
	line-height: var(--loa-council-p-line);
	color: var(--loa-council-year-color);
}

.loa-council__place {
	margin: 0;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-council-p-size);
	line-height: var(--loa-council-p-line);
	color: var(--loa-council-p-color);
}

.loa-council__place a,
.loa-council__all-link {
	color: var(--loa-council-link-color);
	text-decoration: underline;
	text-decoration-color: var(--loa-council-link-underline);
	text-underline-offset: var(--loa-council-link-offset);
}

.loa-council__all {
	margin: var(--loa-council-h2-gap) 0 0;
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-council-label-size);
	letter-spacing: var(--loa-council-label-tracking);
	text-transform: uppercase;
}

/* ---- Testimonial (UI-20 TN 12): About's quote styling, static ---- */

.loa-council__quote {
	padding-block: var(--loa-council-section-pad-y);
	border-top: 1px solid var(--loa-council-rule);
}

.loa-council__quote-inner {
	max-width: var(--loa-council-quote-max);
	margin: 0 auto;
	text-align: center;
}

.loa-council__quote-mark {
	height: 0.5em;
	margin: 0 0 var(--loa-council-quote-mark-gap);
	font-family: var(--loa-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--loa-council-quote-mark-size);
	line-height: 1;
	color: var(--loa-council-quote-mark-color);
	user-select: none;
}

.loa-council__quote-text {
	margin: 0;
}

.loa-council__quote-text p {
	margin: 0;
	font-family: var(--loa-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--loa-council-quote-size);
	line-height: var(--loa-council-quote-line);
	color: var(--loa-council-quote-color);
}

.loa-council__quote-cite {
	margin: var(--loa-council-quote-cite-gap) 0 0;
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-council-quote-cite-size);
	letter-spacing: var(--loa-council-quote-cite-tracking);
	text-transform: uppercase;
	color: var(--loa-council-quote-cite-color);
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 1024px) {
	.loa-council__inner {
		padding-inline: var(--loa-council-m-pad-x);
	}

	.loa-council__section,
	.loa-council__quote {
		padding-block: var(--loa-council-m-section-pad-y);
	}

	.loa-council__masthead {
		padding-top: var(--loa-council-m-masthead-pad-top);
	}

	.loa-council__title {
		font-size: var(--loa-council-m-title-size);
		line-height: var(--loa-council-m-title-line);
	}

	.loa-council__lede {
		font-size: var(--loa-council-m-lede-size);
		line-height: var(--loa-council-m-lede-line);
	}

	.loa-council__h2 {
		font-size: var(--loa-council-m-h2-size);
	}

	/* Acceptance criterion 9: every multi-column block collapses. */
	.loa-council__members,
	.loa-council__partners {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Photos stop floating and stay inside the text column. */
	.loa-council__figure--float,
	.loa-council__figure--wide {
		float: none;
		width: auto;
		margin: 0 0 var(--loa-council-h2-gap);
	}

	.loa-council__figure--wide {
		margin: var(--loa-council-block-gap) 0 0;
	}

	.loa-council__quote-mark {
		font-size: var(--loa-council-m-quote-mark-size);
	}

	.loa-council__quote-text p {
		font-size: var(--loa-council-m-quote-size);
		line-height: var(--loa-council-m-quote-line);
	}
}

@media (max-width: 767px) {
	.loa-council__timeline-row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: calc(var(--loa-council-p-gap) / 4);
	}
}