/*
 * Styles for the server-rendered section blocks.
 *
 * Every value here resolves to a theme.json preset. Raw lengths appear only where
 * the design specifies a value that is not on the spacing scale (the 280px card
 * floor, the 192px media band, the 48px icon), which are component dimensions
 * rather than spacing decisions.
 *
 * The 4px black border is the signature of this design system: it is what makes a
 * card read as a card. It is not a hairline that can be softened. Radius is 0
 * everywhere except the two table buttons, which the approved frame draws at 8px.
 */

/* --------------------------------------------------------------- grid */

/*
 * Figma's card dimensions are outer boxes: a 280px card is 280px including its
 * 36px padding and 4px border. WordPress does not set border-box globally, so
 * without this the cards render 80px taller than drawn.
 */
/*
 * Everything this theme draws is measured the way Figma measures it: a 48px button
 * is 48px including its padding. WordPress sets no global box-sizing, so without
 * this a min-height plus padding silently adds up (a 48px button rendered 72px).
 */
[class^="ageca-"],
[class*=" ageca-"] {
	box-sizing: border-box;
}

/* ---------------------------------------------------------- room table */

.ageca-rooms {
	/* LANDING 3 closes the section with a 2px rule rather than whitespace. */
	padding-bottom: var(--wp--preset--spacing--130);
	border-bottom: 2px solid var(--wp--preset--color--black);
}

.ageca-rooms__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	justify-content: space-between;
}

.ageca-rooms__title {
	margin: 0;
}

.ageca-table__wrap {
	margin-top: var(--wp--preset--spacing--40);
	border: 2px solid var(--wp--preset--color--black);
	padding: 2px;
}

.ageca-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.ageca-table thead th {
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ageca-table tbody tr {
	border-top: 2px solid var(--wp--preset--color--black);
}

.ageca-table tbody th,
.ageca-table tbody td {
	padding: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 300;
	letter-spacing: -0.025em;
	vertical-align: middle;
}

.ageca-table tbody th {
	font-weight: 300;
}

.ageca-table__note {
	display: block;
	line-height: 1.25;
}

.ageca-chip {
	display: inline-block;
	min-width: 70px;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
}

.ageca-chip--orange { background-color: var(--wp--preset--color--orange); color: var(--wp--preset--color--white); }
.ageca-chip--lime   { background-color: var(--wp--preset--color--lime); }
.ageca-chip--blue   { background-color: var(--wp--preset--color--blue); color: var(--wp--preset--color--white); }
.ageca-chip--purple { background-color: var(--wp--preset--color--purple); color: var(--wp--preset--color--white); }
.ageca-chip--gray   { background-color: var(--wp--preset--color--gray); }
.ageca-chip--pink   { background-color: var(--wp--preset--color--pink); }

.ageca-table__actions {
	white-space: nowrap;
}

/*
 * The table buttons carry an 8px radius. That contradicts the style guide, which
 * specifies 0 everywhere, but it is what the approved LANDING 3 frame draws and it
 * is the only rounded element in the system. Do not "correct" it to 0 without
 * checking the frame first.
 */
.ageca-tbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.ageca-tbtn + .ageca-tbtn {
	margin-left: var(--wp--preset--spacing--70);
}

.ageca-tbtn--ghost {
	border: 2px solid var(--wp--preset--color--black);
	color: var(--wp--preset--color--ink);
}

.ageca-tbtn--solid {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.ageca-tbtn--lg {
	min-height: 36px;
	border-radius: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.ageca-tbtn:hover,
.ageca-tbtn:focus-visible {
	background-color: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}

/*
 * Below 700px the table stacks: the header row is hidden and each cell names itself
 * from its data-label, because a 1129px table cannot scroll comfortably on a phone.
 */
@media (max-width: 699.98px) {

	.ageca-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.ageca-table tbody th,
	.ageca-table tbody td {
		display: flex;
		gap: var(--wp--preset--spacing--40);
		align-items: baseline;
		justify-content: space-between;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.ageca-table tbody th::before,
	.ageca-table tbody td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--wp--preset--color--meta);
		font-size: var(--wp--preset--font-size--meta);
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.ageca-table tbody th {
		font-size: var(--wp--preset--font-size--heading-4);
		text-transform: uppercase;
	}
}

/* -------------------------------------------------------- article card */

.ageca-article {
	box-sizing: border-box;
	border: 4px solid var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--white);
}

.ageca-article__media img {
	display: block;
	width: 100%;
	height: 192px;
	object-fit: cover;
}

.ageca-article__cat a {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

/* --------------------------------------------------------- testimonials */

.ageca-rooms__title,
.ageca-quotes__title,
.ageca-partners__title,
.ageca-stats__title,
.ageca-timeline__title {
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

.ageca-quote {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid;
}

.ageca-quote--orange { border-color: var(--wp--preset--color--orange); }
.ageca-quote--lime   { border-color: var(--wp--preset--color--lime); }
.ageca-quote--blue   { border-color: var(--wp--preset--color--blue); }
.ageca-quote--purple { border-color: var(--wp--preset--color--purple); }
.ageca-quote--gray   { border-color: var(--wp--preset--color--gray); }
.ageca-quote--pink   { border-color: var(--wp--preset--color--pink); }

.ageca-quote blockquote {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.428;
}

.ageca-quote blockquote::before { content: "\201C"; }
.ageca-quote blockquote::after  { content: "\201D"; }

.ageca-quote figcaption {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ageca-quote__name { display: block; }

.ageca-quote__role {
	display: block;
	color: var(--wp--preset--color--meta);
}

/* -------------------------------------------------------------- partners */

.ageca-partners__grid {
	display: grid;
	/* Figma tightens the partner gutter to 16px, unlike the 24px used elsewhere. */
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) {

	.ageca-partners__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ageca-partner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 128px;
	padding: var(--wp--preset--spacing--40);
	border: 2px solid var(--wp--preset--color--black);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-small);
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.ageca-partner__logo {
	max-width: 100%;
	height: auto;
}

/* ----------------------------------------------------------- key figures */

.ageca-stats__row {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) {

	.ageca-stats__row {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ageca-stat__number {
	display: block;
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	letter-spacing: -0.025em;
}

.ageca-stat__label {
	display: block;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------- timeline */

.ageca-timeline__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ageca-step {
	/* The 4px rule sits outside the 24px text inset, giving the 28px total in Figma. */
	margin-bottom: var(--wp--preset--spacing--50);
	padding-left: var(--wp--preset--spacing--60);
	border-left: 4px solid;
}

.ageca-step--orange { border-color: var(--wp--preset--color--orange); }
.ageca-step--lime   { border-color: var(--wp--preset--color--lime); }
.ageca-step--blue   { border-color: var(--wp--preset--color--blue); }
.ageca-step--purple { border-color: var(--wp--preset--color--purple); }
.ageca-step--gray   { border-color: var(--wp--preset--color--gray); }
.ageca-step--pink   { border-color: var(--wp--preset--color--pink); }

.ageca-step__year {
	display: block;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.333;
	letter-spacing: -0.025em;
}

.ageca-step__text {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body);
}

/* ------------------------------------------------------------ hero collage */

/*
 * Three columns at the proportions LANDING 3 draws across its 1245px width:
 * 518.75 / 311.25 / 415. Expressed as percentages so the collage keeps its shape
 * at any container width. Below 700px it stacks, since none of the three panels
 * survives being a third of a phone screen.
 */
.ageca-hero {
	display: grid;
	grid-template-columns: 41.667% 25% 33.333%;
	min-height: 500px;
}

.ageca-hero > * {
	position: relative;
	overflow: hidden;
}

.ageca-hero__img,
.ageca-hero__contact-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- column 1: photograph, promo card, two loose squares */

.ageca-hero__pic {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: var(--wp--preset--spacing--100);
	background-color: var(--wp--preset--color--gray);
}

.ageca-hero__promo {
	position: relative;
	z-index: 2;
	max-width: 248px;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--ink);
}

.ageca-hero__promo-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ageca-hero__promo-text {
	margin: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.428;
}

.ageca-hero__promo-link {
	color: inherit;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.1em;
	text-decoration: underline;
	text-transform: uppercase;
}

.ageca-hero__sq {
	position: absolute;
	z-index: 1;
}

.ageca-hero__sq--lime {
	top: 0;
	right: 0;
	width: 128px;
	height: 128px;
	background-color: var(--wp--preset--color--lime);
}

.ageca-hero__sq--purple {
	bottom: 0;
	left: 0;
	width: 96px;
	height: 96px;
	background-color: var(--wp--preset--color--purple);
}

/* --- column 2: tinted grid carrying the association's full name */

.ageca-hero__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, 1fr);
	background-color: var(--wp--preset--color--green);
}

.ageca-hero__cell {
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.ageca-hero__cell.is-blue { background-color: var(--wp--preset--color--blue); }
.ageca-hero__cell.is-lime { background-color: var(--wp--preset--color--lime); }

.ageca-hero__baseline {
	position: absolute;
	right: 8%;
	bottom: 22%;
	left: 8%;
	margin: 0;
	padding: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--body-small);
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
}

/* --- column 3: contact panel over a photograph */

.ageca-hero__contact {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ageca-hero__contact-body,
.ageca-hero__social {
	position: relative;
	z-index: 1;
}

.ageca-hero__contact-body {
	padding: var(--wp--preset--spacing--70);
	background-color: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
}

.ageca-hero__tag {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ageca-hero__contact-cols {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	align-items: flex-start;
}

.ageca-hero__coords {
	flex: 1 1 auto;
	font-size: var(--wp--preset--font-size--body-small);
}

.ageca-hero__coords p {
	margin: 0 0 var(--wp--preset--spacing--30);
	line-height: 1.625;
}

.ageca-hero__coords a {
	color: inherit;
}

.ageca-hero__map {
	flex: 0 0 auto;
	display: block;
	width: 168px;
	max-width: 45%;
	border: 2px solid var(--wp--preset--color--lime);
}

.ageca-hero__map-img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * The follow strip is three equal blocks: lime, orange, lime. The outer two are
 * empty colour, which is why they carry no content.
 */
.ageca-hero__social {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	min-height: 80px;
}

.ageca-hero__social > span {
	background-color: var(--wp--preset--color--lime);
}

.ageca-hero__social-inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--ink);
}

.ageca-hero__social-label {
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ageca-hero__social-icons {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.ageca-hero__social-link {
	display: block;
	color: inherit;
}

.ageca-hero__social-link svg {
	display: block;
	width: 16px;
	height: 16px;
}

@media (max-width: 699.98px) {

	.ageca-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.ageca-hero__pic,
	.ageca-hero__grid {
		min-height: 320px;
	}
}

/* ------------------------------------------------------------- image band */

.ageca-band {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: var(--wp--preset--spacing--100);
	background-color: var(--wp--preset--color--green);
	list-style: none;
}

@media (min-width: 700px) {

	.ageca-band {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ageca-band img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

/* ---------------------------------------------------------- promo panels */

.ageca-panels {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {

	.ageca-panels {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ageca-panel {
	display: flex;
	flex-direction: column;
	min-height: 220px;
	padding: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ageca-panel.is-dark {
	color: var(--wp--preset--color--white);
}

.ageca-panel--orange { background-color: var(--wp--preset--color--orange); }
.ageca-panel--lime   { background-color: var(--wp--preset--color--lime); }
.ageca-panel--blue   { background-color: var(--wp--preset--color--blue); }
.ageca-panel--purple { background-color: var(--wp--preset--color--purple); }
.ageca-panel--gray   { background-color: var(--wp--preset--color--gray); }
.ageca-panel--pink   { background-color: var(--wp--preset--color--pink); }

.ageca-panel__tag {
	align-self: flex-start;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ageca-panel__title {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

.ageca-panel__sub {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--body-small);
	opacity: 0.9;
}

.ageca-panel__number {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 300;
	letter-spacing: -0.025em;
}

/* ------------------------------------------------------------- stat band */

.ageca-statband {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 700px) {

	.ageca-statband {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ageca-statcard {
	padding: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--ink);
}

.ageca-statcard.is-dark {
	color: var(--wp--preset--color--white);
}

.ageca-statcard--orange { background-color: var(--wp--preset--color--orange); }
.ageca-statcard--lime   { background-color: var(--wp--preset--color--lime); }
.ageca-statcard--blue   { background-color: var(--wp--preset--color--blue); }
.ageca-statcard--purple { background-color: var(--wp--preset--color--purple); }
.ageca-statcard--gray   { background-color: var(--wp--preset--color--gray); }
.ageca-statcard--pink   { background-color: var(--wp--preset--color--pink); }

.ageca-statcard__label {
	display: block;
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ageca-statcard__value {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 300;
	letter-spacing: -0.025em;
}

.ageca-statcard__note {
	display: block;
	margin-top: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--body-small);
	opacity: 0.9;
}

/* --------------------------------------------------------- interior hero */

.ageca-phero {
	display: grid;
	grid-template-columns: 1fr;
	border-bottom: 2px solid var(--wp--preset--color--black);
}

@media (min-width: 700px) {

	.ageca-phero {
		grid-template-columns: 1fr 1fr;
	}
}

.ageca-phero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--120);
	color: var(--wp--preset--color--white);
}

.ageca-phero--blue   .ageca-phero__text { background-color: var(--wp--preset--color--blue); }
.ageca-phero--orange .ageca-phero__text { background-color: var(--wp--preset--color--orange); }
.ageca-phero--purple .ageca-phero__text { background-color: var(--wp--preset--color--purple); }

.ageca-phero__title {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--heading-1);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

.ageca-phero__lede {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 1.4;
	opacity: 0.9;
}

.ageca-phero__motif {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--120);
	background-color: var(--wp--preset--color--lime);
}

.ageca-phero__squares {
	display: grid;
	grid-template-columns: repeat(2, 105px);
	gap: var(--wp--preset--spacing--40);
}

.ageca-phero__squares span {
	height: 96px;
}

.ageca-phero__squares span:nth-child(1) { background-color: var(--wp--preset--color--orange); }
.ageca-phero__squares span:nth-child(2) { background-color: var(--wp--preset--color--black); }
.ageca-phero__squares span:nth-child(3) { background-color: var(--wp--preset--color--purple); }
.ageca-phero__squares span:nth-child(4) { background-color: var(--wp--preset--color--blue); }

.ageca-phero__caption {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ------------------------------------------------- mission / support panels */

.ageca-mission,
.ageca-support {
	box-sizing: border-box;
	border: 4px solid var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.ageca-mission {
	padding: var(--wp--preset--spacing--80);
	background-color: var(--wp--preset--color--orange);
}

.ageca-support {
	padding: var(--wp--preset--spacing--110);
	background-color: var(--wp--preset--color--purple);
}

.ageca-mission__icon,
.ageca-mission__icon svg,
.ageca-support__icon,
.ageca-support__icon svg {
	display: block;
	width: 64px;
	height: 64px;
}

.ageca-mission__title,
.ageca-support__title {
	margin: var(--wp--preset--spacing--50) 0 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	line-height: 1.111;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

.ageca-mission__text {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.625;
	opacity: 0.9;
}

.ageca-support__text {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--70);
	max-width: 768px;
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 1.4;
	opacity: 0.9;
}

.ageca-support__btn {
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--90);
	background-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.ageca-support__btn:hover,
.ageca-support__btn:focus-visible {
	background-color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------- bordered boxes */

.ageca-box {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--60);
	border: 2px solid var(--wp--preset--color--black);
}

.ageca-box--lime {
	background-color: var(--wp--preset--color--lime);
}

.ageca-box__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 500;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

.ageca-box__list {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	list-style: none;
}

.ageca-box__list li {
	padding-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.428;
}

/* The bullet is decorative; a real list marker would be announced twice. */
.ageca-box__list li::before {
	content: "• ";
}

/* --------------------------------------------------------- timeline head */

.ageca-timeline__head {
	display: flex;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

.ageca-timeline__icon,
.ageca-timeline__icon svg {
	display: block;
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
}

.ageca-timeline__title {
	margin: 0;
}

.ageca-timeline__list {
	margin-top: var(--wp--preset--spacing--50);
}

/* -------------------------------------------------- association two-column */

.ageca-duo {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--100);
	align-items: start;
}

@media (min-width: 1000px) {

	.ageca-duo {
		grid-template-columns: 1fr 1fr;
	}
}

.ageca-duo__col {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

/*
 * Post Template supplies the grid; these rules only set the gap and give each card
 * its border. Overriding the display would fight core's layout classes, which win
 * on specificity.
 */
.ageca-cards {
	gap: var(--wp--preset--spacing--50);
}

.ageca-cards > li {
	margin: 0;
}

/*
 * Grid items default to min-width:auto, so a long uppercase heading stops the panel
 * shrinking and pushes it past the viewport. Border-box plus min-width:0 lets it
 * shrink; the padding drops to the page gutter on small screens.
 */
.ageca-phero__text,
.ageca-phero__motif {
	box-sizing: border-box;
	min-width: 0;
}

@media (max-width: 699.98px) {

	.ageca-phero__text,
	.ageca-phero__motif {
		padding: var(--wp--preset--spacing--120) var(--wp--preset--spacing--gutter);
	}

	.ageca-phero__squares {
		grid-template-columns: repeat(2, minmax(0, 105px));
	}
}

/*
 * Long uppercase French words ("ACCOMPAGNEMENT ASSOCIATIF") exceed a narrow column
 * at the Heading 2 size and push the page sideways. Breaking is preferable to a
 * horizontal scrollbar on every phone.
 */
.ageca-mission__title,
.ageca-support__title,
.ageca-rooms__title,
.ageca-quotes__title,
.ageca-partners__title,
.ageca-timeline__title,
.ageca-box__title,
.ageca-panel__title,
.ageca-phero__title {
	overflow-wrap: break-word;
	hyphens: auto;
}

/*
 * Very narrow phones (320px). The stacked table's action pair and the partner tiles
 * are the two places where fixed-width content still exceeds the column.
 */
.ageca-partner,
.ageca-support__text,
.ageca-quote blockquote {
	overflow-wrap: break-word;
}

@media (max-width: 479.98px) {

	.ageca-table__actions {
		flex-wrap: wrap;
		white-space: normal;
	}

	.ageca-tbtn + .ageca-tbtn {
		margin-left: var(--wp--preset--spacing--30);
	}

	.ageca-partners__grid {
		grid-template-columns: 1fr;
	}
}

/* Grid children need min-width:0 or their min-content width sets the floor. */
.ageca-duo > *,
.ageca-duo__col > *,
.ageca-panels > *,
.ageca-statband > * {
	min-width: 0;
}

@media (max-width: 479.98px) {

	/* Two stat columns inside an already-narrow bordered box leave ~70px each. */
	.ageca-stats__row {
		grid-template-columns: 1fr;
	}
}

.ageca-stats__row > * {
	min-width: 0;
}

/*
 * "Demander un accompagnement" plus 40px of padding each side is wider than a
 * 320px screen allows once the panel's own padding is taken out.
 */
.ageca-support__btn {
	max-width: 100%;
	text-align: center;
}

@media (max-width: 479.98px) {

	.ageca-support {
		padding: var(--wp--preset--spacing--70);
	}

	.ageca-support__btn {
		display: flex;
		width: 100%;
		padding-right: var(--wp--preset--spacing--40);
		padding-left: var(--wp--preset--spacing--40);
	}
}

/* ------------------------------------------------------------- blog hero */

.ageca-bhero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--100);
	padding: var(--wp--preset--spacing--120) 0 var(--wp--preset--spacing--120);
}

@media (min-width: 900px) {

	.ageca-bhero {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.ageca-bhero__text {
	min-width: 0;
}

.ageca-bhero__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--heading-1);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.ageca-bhero__lede {
	margin: var(--wp--preset--spacing--50) 0 0;
	color: rgba(0, 0, 0, 0.8);
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 1.4;
}

/* Two flat blocks, lime then black, purely decorative. */
.ageca-bhero__motif {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

.ageca-bhero__motif span {
	min-height: 192px;
}

.ageca-bhero__motif span:first-child { background-color: var(--wp--preset--color--lime); }
.ageca-bhero__motif span:last-child  { background-color: var(--wp--preset--color--black); }

/* --------------------------------------------------------- agenda panel */

.ageca-agenda {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	align-items: flex-start;
	justify-content: space-between;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--80);
	border: 4px solid var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}

.ageca-agenda__body {
	min-width: 0;
}

.ageca-agenda__icon,
.ageca-agenda__icon svg {
	display: block;
	width: 48px;
	height: 48px;
}

.ageca-agenda__title {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

.ageca-agenda__text {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--body);
	opacity: 0.9;
}

.ageca-agenda__btn,
.ageca-news__btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
	background-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
}

.ageca-agenda__btn:hover,
.ageca-agenda__btn:focus-visible {
	background-color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------- article grid title */

.ageca-latest__title {
	margin: 0 0 var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

/* ----------------------------------------------------- newsletter panel */

/*
 * Full-bleed orange band closing the blog. There is no footer after it: no frame in
 * the designs has one, so this is the last thing on the page.
 */
.ageca-news {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--100);
	/* Field and submit sit centred against the heading block, as the frame draws them. */
	align-items: center;
}

@media (min-width: 900px) {

	.ageca-news {
		grid-template-columns: 1fr 1fr;
	}
}

.ageca-news__intro {
	min-width: 0;
}

.ageca-news__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	line-height: 1.111;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.ageca-news__text {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 1.55;
}

.ageca-news__form {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	min-width: 0;
}

/* Transparent, as the frame draws it: the orange shows through the field. */
.ageca-news__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 52px;
	/* 14/18 rather than a scale step: these are the field's own dimensions, and 16px
	   of vertical padding pushes the 52px field to 56. */
	padding: 14px 18px;
	border: 2px solid var(--wp--preset--color--black);
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--black);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 300;
}

.ageca-news__input::placeholder {
	color: rgba(0, 0, 0, 0.5);
}

/*
 * The frame draws the field at 52px and the button at 48px, which reads as a slip:
 * they sit side by side and the 4px difference shows. Matched to the field.
 */
.ageca-news__btn {
	flex: 0 0 auto;
	min-height: 52px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
	border: 0;
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

.ageca-news__btn:hover,
.ageca-news__btn:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

/* ---------------------------------------------------- article grid title */

.ageca-latest__title {
	margin: 0 0 var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

/*
 * Post Template makes each <li> a grid item, but the card sits inside that li and
 * only grows to its own content, so cards in the same row end up different heights
 * whenever the excerpts differ in length. The li becomes a flex container and the
 * card fills it; the body then pushes its own content apart.
 */
.ageca-cards > li {
	display: flex;
}

.ageca-cards > li > .ageca-article {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.ageca-article__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/*
 * Core renders the read-more as a plain link inside the excerpt block. The frame
 * styles it like every other card link: uppercase, letterspaced, with a trailing
 * arrow. The arrow is generated content because core gives no hook to inject the
 * SVG the other cards use.
 */
.ageca-article .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-small);
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
}

.ageca-article .wp-block-post-excerpt__more-link::after {
	content: " \2192";
}

.ageca-article .wp-block-post-excerpt__more-link:hover,
.ageca-article .wp-block-post-excerpt__more-link:focus-visible {
	text-decoration: underline;
}

/* The excerpt grows so the read-more sits on the card's baseline. */
.ageca-article .wp-block-post-excerpt {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.ageca-article .wp-block-post-excerpt__excerpt {
	flex: 1;
}

/*
 * The card uses the default layout, not constrained: constrained caps children at
 * the global content size and centres them with auto margins, which inside a 360px
 * card inset the image and pushed the category row to the middle. Overriding it in
 * CSS does not work, core's selector carries higher specificity.
 */
.ageca-article__media,
.ageca-article__media img {
	width: 100%;
}

/*
 * WordPress prints the month lowercase in French, which is the correct convention;
 * the frame capitalises it. Matching the frame.
 */
.ageca-article .wp-block-post-date {
	text-transform: capitalize;
}