/*
 * Coworking (inc/coworking.php): black banner with a pink badge, the ways of
 * working on sky, prices on white with the meeting rooms on black, practical
 * information on sky.
 *
 * Same column and inset as the Pôle Numérique page (1336px, the pastel inset), so
 * the two pages read as a pair. pastel.css loads with this sheet and provides the
 * inset and the scroll reveal.
 */

[class^="ageca-cw"],
[class*=" ageca-cw"] {
	box-sizing: border-box;
}

/*
 * The sections use the older pages' column (pastel.css): 1100px including the page
 * inset, so their text starts where Nos espaces, L'association and the agenda put
 * theirs. The banner text instead starts at the page inset, as on those pages.
 */
.ageca-cw__inner {
	max-width: calc(var(--ageca-x-content, 1100px) - 2 * var(--ageca-x-inset, var(--wp--preset--spacing--gutter)));
	margin: 0 auto;
}

/* Every band sits flush under the one above it. */
.ageca-cwhero,
.ageca-cwmodes,
.ageca-cwtarifs,
.ageca-cwinfos {
	margin: 0;
	padding: clamp(4rem, 2rem + 6vw, 7rem) var(--ageca-x-inset, var(--wp--preset--spacing--gutter));
}

.ageca-cw__kicker {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Title on the left; the short text, and anything else, on the right at its foot. */
.ageca-cw__head {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--120);
	align-items: end;
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

@media (min-width: 900px) {

	.ageca-cw__head {
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem);
	}
}

.ageca-cw__title,
.ageca-cwhero__title {
	margin: 0;
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 0.95;
	text-transform: uppercase;
}

.ageca-cw__title {
	font-size: clamp(2.25rem, 1rem + 4.2vw, 4rem);
}

.ageca-cw__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 300;
	line-height: 1.7;
}

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

/* The small number set before a card's title, as drawn: "01 SALLE PARTAGÉE". */
.ageca-cw__num {
	margin-right: 0.5em;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	vertical-align: 0.15em;
}

.ageca-pole__arrow {
	margin-left: 0.75em;
}

/* Fills shared by the cards. */
.ageca-cw--rose { background-color: var(--wp--preset--color--rose); }
.ageca-cw--navy { background-color: var(--wp--preset--color--navy); }
.ageca-cw--yellow { background-color: var(--wp--preset--color--yellow); }
.ageca-cw--sky { background-color: var(--wp--preset--color--sky); }
.ageca-cw--white { background-color: var(--wp--preset--color--white); }

/* ------------------------------------------------------------------ banner */

.ageca-cwhero {
	/* The pink badge's width on wide screens, which the photo stops at. */
	--ageca-cw-badge-width: 19.5rem;
	position: relative;
	/* The same space above the title as the agenda and blog banners (pastel.css). */
	padding-top: var(--wp--preset--spacing--110);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.ageca-cwhero__grid {
	display: grid;
	max-width: none;
	gap: var(--wp--preset--spacing--90);
	align-items: center;
}

/*
 * Side by side, the banner ends close under the "Découvrir les tarifs" link, as
 * drawn: 2rem, where the other bands keep their full padding. Below 1200px the
 * photo would be a thin strip beside the text, so the banner stacks as on a phone.
 */
@media (min-width: 1200px) {

	/*
	 * A little taller than its text needs. The label and title keep their distance
	 * from the top and the link its 2rem from the bottom; the extra height goes
	 * between the text and the link.
	 */
	.ageca-cwhero {
		display: flex;
		flex-direction: column;
		min-height: 34rem;
		padding-bottom: var(--wp--preset--spacing--70);
	}

	.ageca-cwhero__grid {
		flex: 1;
		width: 100%;
		align-items: stretch;
	}

	.ageca-cwhero__intro {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.ageca-cwhero__intro .ageca-cwhero__down {
		margin-top: auto;
		padding-top: var(--wp--preset--spacing--70);
	}

	.ageca-cwhero__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	/*
	 * The photo runs the banner's full height on the right, from its top edge to its
	 * bottom edge, and stops where the pink badge begins, so its right edge meets the
	 * badge's left edge. It is placed absolutely, so the banner's height still comes
	 * from the text and ends 2rem under the "Découvrir les tarifs" link, as drawn.
	 */
	.ageca-cwhero__media {
		position: absolute;
		top: 0;
		right: var(--ageca-cw-badge-width);
		bottom: 0;
		left: 55%;
	}

	.ageca-cwhero__media .ageca-cwhero__img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}
}

.ageca-cwhero__kicker {
	/* Sized like the agenda and blog banners' label (pastel.css, .ageca-xhero__kicker). */
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--body-small);
	letter-spacing: 0.27em;
	line-height: 1.5;
	color: var(--wp--preset--color--yellow);
}

.ageca-cwhero__title {
	/* Title, text and link sized like the agenda, blog and Pôle Numérique banners (pastel.css). */
	margin-bottom: var(--wp--preset--spacing--50);
	font-size: clamp(2.5rem, 1.4rem + 4.7vw, 4.45rem);
	letter-spacing: -0.028em;
	line-height: 1.01;
}

.ageca-cwhero__accent {
	display: block;
	color: var(--wp--preset--color--yellow);
}

.ageca-cwhero__text {
	max-width: 26.25rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: 0;
}

.ageca-cwhero__down {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--70);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 800;
	letter-spacing: 0.15em;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
}

.ageca-cwhero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 692 / 410;
	object-fit: cover;
}

/*
 * The pink badge sits in the banner's bottom-right corner on wide screens. On
 * narrower ones it follows the photo instead, at the right.
 */
.ageca-cwhero__badge {
	margin: var(--wp--preset--spacing--70) 0 0 auto;
	width: max-content;
	max-width: 100%;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--ink);
}

/*
 * Side by side but narrower than 1760px, a photo stopping at the badge would be a
 * strip under 480px wide, so it runs to the banner's right edge instead and the
 * badge sits over its bottom-right corner, as when stacked.
 */
@media (min-width: 1200px) and (max-width: 1759.98px) {

	.ageca-cwhero__media {
		right: 0;
	}
}

/*
 * Stacked, below 1200px: the photo runs the banner's full width and down to its
 * bottom edge, and the pink badge sits in the banner's bottom-right corner, over
 * the photo's corner, as it sits in the corner on wide screens.
 */
@media (max-width: 1199.98px) {

	.ageca-cwhero {
		padding-bottom: 0;
	}

	.ageca-cwhero__media {
		margin: 0 calc(-1 * var(--ageca-x-inset, var(--wp--preset--spacing--gutter)));
	}

	.ageca-cwhero__badge {
		position: absolute;
		right: 0;
		bottom: 0;
		margin: 0;
	}
}

@media (min-width: 1200px) {

	.ageca-cwhero__badge {
		position: absolute;
		right: 0;
		bottom: 0;
		width: var(--ageca-cw-badge-width);
		margin: 0;
	}
}

.ageca-cwhero__badgetop,
.ageca-cwhero__badgesub {
	/* The size of the "Découvrir les tarifs" link beside it. */
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 800;
	letter-spacing: 0.15em;
	line-height: 1.5;
	text-transform: uppercase;
}

.ageca-cwhero__badgetitle {
	margin: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 900;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

/* --------------------------------------------------------- ways of working */

.ageca-cwmodes {
	background-color: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--ink);
}

.ageca-cwmodes .ageca-cw__kicker {
	color: var(--wp--preset--color--yellow);
}

/*
 * "Deux façons de travailler" stays on one line wherever the column allows: the
 * text that sits beside the other titles goes under this one, which then has the
 * column's full width.
 */
@media (min-width: 900px) {

	.ageca-cwmodes .ageca-cw__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.ageca-cwmodes .ageca-cw__lead {
		max-width: 26rem;
	}
}

.ageca-cwmodes__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 800px) {

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

.ageca-cwmode {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(18rem, 14rem + 8vw, 24rem);
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	border: 1px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

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

.ageca-cwmode__num {
	position: absolute;
	top: var(--wp--preset--spacing--50);
	right: var(--wp--preset--spacing--50);
	font-size: 0.6875rem;
	font-weight: 700;
}

.ageca-cwmode__kicker {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--30);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.ageca-cwmode__title {
	margin: 0;
	font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1;
	text-transform: uppercase;
}

.ageca-cwmode__text {
	max-width: 32rem;
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 300;
	line-height: 1.6;
}

.ageca-cwmode__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	margin: auto 0 0;
	padding: var(--wp--preset--spacing--50) 0 0;
	border-top: 1px solid currentColor;
	list-style: none;
}

.ageca-cwmode__text + .ageca-cwmode__list,
.ageca-cwmode__title + .ageca-cwmode__list {
	margin-top: auto;
}

.ageca-cwmode__list li {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ageca-cwmode__list li::before {
	content: "— ";
}

/* ------------------------------------------------------------------- prices */

.ageca-cwtarifs {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.ageca-cwtarifs .ageca-cw__kicker {
	color: var(--wp--preset--color--navy);
}

.ageca-cwmember {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--yellow);
}

.ageca-cwmember__label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ageca-cwmember__price {
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 900;
	white-space: nowrap;
}

.ageca-cwtarifs__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
}

@media (min-width: 800px) {

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

.ageca-cwformula {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	border: 1px solid var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
}

.ageca-cwformula.ageca-cw--yellow {
	background-color: var(--wp--preset--color--yellow);
}

.ageca-cwformula__title,
.ageca-cwrooms__title {
	margin: 0;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid currentColor;
	font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

.ageca-cwformula__rows {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--70);
	padding: 0;
	list-style: none;
}

.ageca-cwformula__rows li {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 300;
}

.ageca-cwformula__rows strong {
	font-weight: 900;
	white-space: nowrap;
}

.ageca-cwformula__note {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid currentColor;
	font-size: 0.6875rem;
}

.ageca-cwrooms {
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.ageca-cwrooms__title {
	border-bottom-color: rgba(255, 255, 255, 0.6);
}

.ageca-cwrooms__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {

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

.ageca-cwrooms__item {
	padding: var(--wp--preset--spacing--50) 0 0;
}

@media (min-width: 700px) {

	.ageca-cwrooms__item {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
	}

	.ageca-cwrooms__item:first-child {
		padding-left: 0;
	}

	.ageca-cwrooms__item + .ageca-cwrooms__item {
		border-left: 1px solid rgba(255, 255, 255, 0.25);
	}
}

.ageca-cwrooms__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 700;
}

.ageca-cwrooms__seats {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.6875rem;
}

.ageca-cwrooms__price {
	margin: var(--wp--preset--spacing--50) 0 0;
	color: var(--wp--preset--color--yellow);
	font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.02em;
}

/* ------------------------------------------------------- practical information */

.ageca-cwinfos {
	/* The pale blue of the home page's "Bienvenue" section. */
	background-color: var(--wp--preset--color--periwinkle);
	color: var(--wp--preset--color--ink);
}

.ageca-cwinfos .ageca-cw__kicker {
	/* Yellow would not read on periwinkle. */
	color: var(--wp--preset--color--navy);
}

/*
 * Tiles share their borders: the list draws the outer top and left edges, each
 * tile its right and bottom, so no line is doubled between two tiles.
 */
.ageca-cwinfos__grid {
	display: grid;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--ink);
	border-left: 1px solid var(--wp--preset--color--ink);
	list-style: none;
}

@media (min-width: 600px) {

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

@media (min-width: 1000px) {

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

.ageca-cwinfo {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-right: 1px solid var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.ageca-cwinfo__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--70);
}

.ageca-cwinfo__icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.ageca-cwinfo__icon svg {
	width: 100%;
	height: 100%;
}

.ageca-cwinfo__title {
	margin: 0;
	font-size: clamp(1.125rem, 0.9rem + 0.6vw, 1.5rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

.ageca-cwinfo__text {
	margin: var(--wp--preset--spacing--70) 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
}