/*
 * Agenda at /events/, list and grid views (Figma frames EVENTS LIST and EVENTS
 * CARDS on the pastel page).
 *
 * The banner is drawn by pastel.css.
 *
 * The toolbar, featured band and grid cards are drawn at real size in
 * the frames, and their figures are used as they are. The list rows are a component
 * the frame scales up by 1.4681; their figures are the frame's divided by 1.15011,
 * the factor used for the other pastel pages.
 *
 * The frames' #888 grey fails contrast on white at these sizes (3.5:1), so text
 * drawn in it uses the meta colour instead (4.9:1).
 */

[class^="ageca-ag"] {
	box-sizing: border-box;
}

.ageca-agtoolbar,
.ageca-agfeat,
.ageca-agevents {
	--ageca-ag-content: 80rem;
	--ageca-ag-inset: clamp(1rem, 0.5rem + 2vw, 2rem);
	--ageca-ag-hairline: rgba(0, 0, 0, 0.09);
}

/* ------------------------------------------------------------- colour tints */

/*
 * A space's colour, on a chip, a date block or an empty image slot. Which fill and
 * which label colour a space gets is decided in inc/pastel.php, in step with the
 * banner's index; adding a fill here without adding it there paints nothing.
 */
.ageca-agtint {
	color: var(--wp--preset--color--ink);
}

.ageca-agtint.is-light,
.ageca-agtint--none {
	color: var(--wp--preset--color--white);
}

.ageca-agtint--sky { background-color: var(--wp--preset--color--sky); }
.ageca-agtint--rose { background-color: var(--wp--preset--color--rose); }
.ageca-agtint--yellow { background-color: var(--wp--preset--color--yellow); }
.ageca-agtint--navy { background-color: var(--wp--preset--color--navy); }
.ageca-agtint--none { background-color: var(--wp--preset--color--black); }

.ageca-agchip {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ toolbar */

.ageca-agtools {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	max-width: var(--ageca-ag-content);
	margin: 0 auto;
	padding: 1.5rem var(--ageca-ag-inset);
}

/* 841px, which breaks the six chips over the two rows the frame draws. */
.ageca-agfilter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: 52.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ageca-agfilter__chip,
.ageca-agview__btn,
.ageca-agmonths__month,
.ageca-agmonths__step {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 150ms ease, color 150ms ease;
}

.ageca-agfilter__chip {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--ink);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	line-height: 1.5;
}

.ageca-agview {
	display: flex;
	flex: 0 0 auto;
	padding: 2px;
	border: 1px solid var(--wp--preset--color--ink);
}

.ageca-agview__btn {
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.025em;
	line-height: 1.33;
}

.ageca-agfilter__chip:hover,
.ageca-agfilter__chip:focus-visible,
.ageca-agview__btn:hover,
.ageca-agview__btn:focus-visible,
.ageca-agmonths__step:hover,
.ageca-agmonths__step:focus-visible,
.is-active.ageca-agfilter__chip,
.is-active.ageca-agview__btn,
.is-active.ageca-agmonths__month {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--yellow);
}

.ageca-agmonths {
	border-block: 1px solid var(--ageca-ag-hairline);
	background-color: var(--wp--preset--color--white);
}

.ageca-agmonths__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	align-items: center;
	justify-content: space-between;
	max-width: var(--ageca-ag-content);
	margin: 0 auto;
	padding: 1rem var(--ageca-ag-inset);
}

/*
 * If the months still do not fit, they scroll sideways inside the bar between the
 * arrows. min-width: 0 on both levels is what lets them shrink below their content;
 * without it the bar, and then the whole page, scrolls instead.
 */
.ageca-agmonths__nav {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

.ageca-agmonths__list {
	display: flex;
	gap: 0.25rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.ageca-agmonths__month {
	display: block;
	padding: 0.25rem 0.75rem;
	color: var(--wp--preset--color--meta);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.33;
	white-space: nowrap;
}

.ageca-agmonths__month:hover,
.ageca-agmonths__month:focus-visible {
	color: var(--wp--preset--color--ink);
}

.ageca-agmonths__step {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--wp--preset--color--ink);
	font-size: 0.875rem;
	font-weight: 700;
}

/*
 * The full bar needs about 748px. Narrower than that, only the five months around
 * the displayed one show (the ones inc/agenda.php marks is-near), tightened so the
 * five and both arrows fit a 360px phone.
 */
@media (max-width: 819px) {

	.ageca-agmonths__list > li:not(.is-near) {
		display: none;
	}

	.ageca-agmonths__month {
		padding-inline: 0.5rem;
	}
}

.ageca-agmonths__count {
	margin: 0;
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 700;
	letter-spacing: 0.025em;
}

/* ------------------------------------------------------------ featured band */

.ageca-agfeat {
	padding: 2rem var(--ageca-ag-inset);
	background-color: var(--wp--preset--color--sky);
}

.ageca-agfeat__card {
	display: grid;
	grid-template-columns: 1fr;
	max-width: var(--ageca-ag-content);
	margin: 0 auto;
	overflow: hidden;
	border-radius: 1.5rem;
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.ageca-agfeat__media {
	position: relative;
	aspect-ratio: 16 / 9;
}

.ageca-agfeat__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 420px photograph beside the card, flush, as the frame joins them. */
@media (min-width: 900px) {

	.ageca-agfeat__card {
		grid-template-columns: 26.25rem 1fr;
	}

	.ageca-agfeat__card.is-alone {
		grid-template-columns: 1fr;
	}

	/* The photograph takes the card's height instead of a ratio of its own. */
	.ageca-agfeat__media {
		aspect-ratio: auto;
	}
}

.ageca-agfeat__body {
	display: flex;
	flex-direction: column;
	padding: 2rem;
}

.ageca-agfeat__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 0;
}

.ageca-agfeat__flag {
	padding: 0.25rem 0.75rem;
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
}

.ageca-agfeat__cat {
	color: var(--wp--preset--color--rose);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 1.5;
	text-transform: uppercase;
}

.ageca-agfeat__title {
	max-width: 32.5rem;
	margin: 1.25rem 0 0;
	font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.125rem);
	font-weight: 900;
	letter-spacing: -0.015em;
	line-height: 1.25;
	text-transform: none;
}

.ageca-agfeat__title a {
	color: inherit;
	text-decoration: none;
}

.ageca-agfeat__title a:hover,
.ageca-agfeat__title a:focus-visible {
	text-decoration: underline;
}

.ageca-agfeat__excerpt {
	max-width: 32.5rem;
	margin: 1rem 0 0;
	color: var(--wp--preset--color--rose);
	font-weight: 300;
	line-height: 1.625;
}

/*
 * The foot sits at the bottom of the card, however short the text above it. The
 * element before it carries the gap, because margin-top is already spent on auto.
 */
.ageca-agfeat__body > :nth-last-child(2) {
	margin-bottom: 1.5rem;
}

.ageca-agfeat__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ageca-agfeat__when {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: var(--wp--preset--color--rose);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	line-height: 1.33;
}

.ageca-agfeat__btn {
	padding: 0.75rem 1.5rem;
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 900;
	letter-spacing: 0.167em;
	line-height: 1.33;
	text-decoration: none;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- the events */

.ageca-agevents {
	padding: 3rem var(--ageca-ag-inset) 5rem;
	background-color: var(--wp--preset--color--yellow);
}

.ageca-aglist {
	max-width: var(--ageca-ag-content);
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--ageca-ag-hairline);
	border-radius: 1.5rem;
	background-color: var(--wp--preset--color--white);
	list-style: none;
}

.ageca-aglist__item + .ageca-aglist__item {
	border-top: 1px solid var(--ageca-ag-hairline);
}

.ageca-agrow {
	display: grid;
	grid-template-columns: 6.25rem minmax(0, 1fr) auto;
	align-items: stretch;
}

.ageca-agrow__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 0.5rem;
	text-align: center;
}

.ageca-agrow__day {
	font-size: 1.875rem;
	font-weight: 900;
	line-height: 1;
}

.ageca-agrow__month {
	margin-top: 0.3rem;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.33;
	text-transform: uppercase;
}

.ageca-agrow__body {
	padding: 1.25rem 1.875rem;
}

.ageca-agrow__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	align-items: center;
	margin: 0 0 0.3rem;
}

.ageca-agrow .ageca-agchip {
	padding: 0.25rem 0.625rem;
	font-size: 0.8125rem;
}

.ageca-agrow__when {
	color: var(--wp--preset--color--meta);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1.33;
}

.ageca-agrow__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.25;
	text-transform: none;
}

.ageca-agrow__title a,
.ageca-agcard__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ageca-agrow__title a:hover,
.ageca-agrow__title a:focus-visible,
.ageca-agcard__title a:hover,
.ageca-agcard__title a:focus-visible {
	text-decoration: underline;
}

.ageca-agrow__venue {
	margin: 0.3rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.43;
}

.ageca-agrow__more {
	align-self: center;
	padding: 0 1.875rem;
	color: var(--wp--preset--color--navy);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.ageca-agrow__arrow,
.ageca-agcard__arrow {
	display: inline-block;
	transition: transform 150ms ease;
}

.ageca-agrow__more:hover .ageca-agrow__arrow,
.ageca-agcard__more:hover .ageca-agcard__arrow {
	transform: translateX(3px);
}

/*
 * On a phone "Détails" goes: the title is the row's link, and the space it frees
 * is what keeps the title from wrapping a word per line.
 */
@media (max-width: 599px) {

	.ageca-agrow {
		grid-template-columns: 4.5rem minmax(0, 1fr);
	}

	.ageca-agrow__body {
		padding: 1rem 1.25rem;
	}

	.ageca-agrow__more {
		display: none;
	}
}

.ageca-aggrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	max-width: var(--ageca-ag-content);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {

	.ageca-aggrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {

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

@media (min-width: 1200px) {

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

.ageca-agcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ageca-ag-hairline);
	border-radius: 1.25rem;
	background-color: var(--wp--preset--color--white);
	transition: transform 250ms ease;
}

.ageca-agcard:hover {
	transform: translateY(-4px);
}

.ageca-agcard__media {
	position: relative;
	aspect-ratio: 321 / 192;
}

.ageca-agcard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ageca-agchips {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

/* On a card the badges sit over the photograph, clear of the "À la une" flag. */
.ageca-agcard__media .ageca-agchips {
	position: absolute;
	top: 0.75rem;
	right: 6.5rem;
	left: 0.75rem;
}

.ageca-agcard__flag {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	padding: 0.25rem 0.75rem;
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
}

.ageca-agcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem;
}

.ageca-agcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	align-items: center;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1.33;
}

.ageca-agcard__dot {
	opacity: 0.5;
}

.ageca-agcard__title {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.375;
	text-transform: none;
}

.ageca-agcard__excerpt {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 300;
	line-height: 1.625;
}

.ageca-agcard__foot {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ageca-ag-hairline);
}

.ageca-agcard__venue {
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	line-height: 1.33;
}

.ageca-agcard__more {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	letter-spacing: 0.025em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.ageca-agempty {
	max-width: var(--ageca-ag-content);
	margin: 0 auto;
	padding: 3rem 2rem;
	border-radius: 1.5rem;
	background-color: var(--wp--preset--color--white);
	text-align: center;
}

.ageca-agempty__text {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
}

.ageca-agempty__link {
	display: inline-block;
	margin-top: 1rem;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- programme */

/* Every event in full, on the "Programme des événements" page. */
.ageca-agprog {
	--ageca-ag-content: 64rem;
	--ageca-ag-inset: clamp(1rem, 0.5rem + 2vw, 2rem);
	--ageca-ag-hairline: rgba(0, 0, 0, 0.09);

	padding: 3rem var(--ageca-ag-inset) 5rem;
	background-color: var(--wp--preset--color--yellow);
}

.ageca-agprog__section {
	max-width: var(--ageca-ag-content);
	margin: 0 auto;
}

.ageca-agprog__section + .ageca-agprog__section {
	margin-top: 4rem;
}

.ageca-agprog__heading {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

.ageca-agprog__list {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The header is sticky, so an entry reached through an anchor would scroll under
 * it; the margin stops the jump short of the header's height.
 */
.ageca-agdetail {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	scroll-margin-top: 8rem;
	border: 1px solid var(--ageca-ag-hairline);
	border-radius: 1.25rem;
	background-color: var(--wp--preset--color--white);
}

/*
 * The entry a link just jumped to is outlined in navy for a moment, long enough
 * for the eye to find it among the others, then the outline fades away. Navy, not
 * the site's yellow, because the page behind the entries is yellow. A colour change
 * rather than movement, so it runs under reduced motion too.
 */
.ageca-agdetail:target {
	outline: 4px solid transparent;
	outline-offset: -4px;
	animation: ageca-target 2.4s ease-out;
}

@keyframes ageca-target {
	0%, 40% { outline-color: var(--wp--preset--color--navy); }
	100% { outline-color: transparent; }
}

@media (min-width: 800px) {

	.ageca-agdetail {
		grid-template-columns: 18rem minmax(0, 1fr);
	}
}

.ageca-agdetail__media {
	position: relative;
	min-height: 12rem;
}

.ageca-agdetail__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ageca-agdetail__body {
	padding: 1.5rem;
}

.ageca-agdetail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	align-items: center;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	letter-spacing: 0.025em;
}

.ageca-agdetail__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 900;
	line-height: 1.3;
	text-transform: none;
}

.ageca-agdetail__venue {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--muted);
	font-weight: 300;
}

.ageca-agdetail__content {
	margin-top: 1rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.7;
}

.ageca-agdetail__content > * {
	margin-block: 0 0.75rem;
}

.ageca-agdetail__content > :last-child {
	margin-block-end: 0;
}

.ageca-agdetail__back {
	display: inline-block;
	margin-top: 1rem;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {

	.ageca-agfilter__chip,
	.ageca-agview__btn,
	.ageca-agmonths__month,
	.ageca-agmonths__step,
	.ageca-agcard,
	.ageca-agrow__arrow,
	.ageca-agcard__arrow {
		transition: none;
	}
}