/*
 * Landing page, variant 2.
 *
 * Figma draws this frame at 1563px wide against a 1280px design width, so every
 * measurement in the file is 1.198x larger than it should be. Values below are the
 * normalised ones: a 20px radius in Figma is 16px here, 35px is 29px, and so on.
 *
 * This direction has rounded corners and no black borders. It shares only the
 * typeface with the rest of the site, which still uses the original system.
 */

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

.ageca-v2hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	/* The coloured bands below meet edge to edge, so the hero carries its own gap. */
	margin-bottom: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--white);
}

@media (min-width: 900px) {

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

.ageca-v2hero__panel,
.ageca-v2hero__media {
	box-sizing: border-box;
	min-width: 0;
	border-radius: 29px;
	overflow: hidden;
}

.ageca-v2hero__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--60);
	min-height: 551px;
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--yellow);
}

/*
 * The frame's 64px sides are a desktop figure. Held at every width they leave a
 * 188px content box on a 412px phone, which is narrower than the button below can
 * draw itself, so the padding grows with the panel instead.
 */
@media (min-width: 600px) {

	.ageca-v2hero__panel {
		padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--90);
	}
}

@media (min-width: 900px) {

	.ageca-v2hero__panel {
		padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--120);
	}
}

.ageca-v2hero__media {
	min-height: 551px;
	background-color: var(--wp--preset--color--periwinkle);
}

.ageca-v2hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}

.ageca-v2hero__title {
	margin: 0;
	color: var(--wp--preset--color--black);
	font-size: clamp(2.25rem, 1.05rem + 5.12vw, 4rem);
	line-height: 1.08;
	letter-spacing: -0.008em;
	text-transform: uppercase;
	/*
	 * Left to wrap naturally. text-wrap: balance evens the line lengths and breaks
	 * the third line as "QU'IL / VOUS FAUT"; the frame breaks it "QU'IL VOUS / FAUT".
	 */
	text-wrap: pretty;
}

.ageca-v2hero__title span {
	display: block;
}

/* Only the first and third lines are Extra Light; the middle line carries the weight. */
.ageca-v2hero__l1,
.ageca-v2hero__l3 {
	font-weight: 200;
}

/*
 * The middle line is filled with a black-to-grey gradient. background-clip: text
 * needs a transparent fill, so a colour fallback is set first for browsers that
 * ignore the clip.
 */
.ageca-v2hero__l2 {
	color: var(--wp--preset--color--black);
	font-size: 1.09em;
	font-weight: 700;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {

	.ageca-v2hero__l2 {
		background-image: linear-gradient(90deg, var(--wp--preset--color--black), #666);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.ageca-v2hero__lede {
	margin: 0;
	color: rgba(0, 0, 0, 0.65);
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 300;
	line-height: 1.55;
	letter-spacing: 0;
}

.ageca-v2hero__sur {
	display: block;
	margin-top: var(--wp--preset--spacing--10);
	color: rgba(0, 0, 0, 0.45);
	font-size: var(--wp--preset--font-size--body-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/*
 * 307x50 pill. The label is centred across the whole button and the arrow is
 * positioned against the right edge rather than sitting after the text, so the
 * label stays optically centred however long it is.
 */
.ageca-v2hero__btn {
	position: relative;
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 50px;
	gap: var(--wp--preset--spacing--30);

	/*
	 * Wider on the left than the right: the arrow is a circle that nests into the
	 * pill's rounded end, while the label's first letter needs to clear the curve.
	 * 25px is half the pill's 50px height, so the label starts where the curve ends.
	 */
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) 25px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
}

/*
 * A grey wash sweeps across on hover, with the leading edge skewed so it crosses on
 * the diagonal rather than as a flat vertical wall. It is white at low opacity
 * rather than a palette grey, so it reads as the black lightening rather than as a
 * second colour arriving. Over-wide and offset left so the skewed edge still covers
 * the corners of the pill.
 */
.ageca-v2hero__btn::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -20%;
	width: 140%;
	background-color: rgba(255, 255, 255, 0.22);
	transform: skewX(-18deg) scaleX(0);
	transform-origin: left;
	transition: transform 350ms ease;
}

.ageca-v2hero__btn:hover::before,
.ageca-v2hero__btn:focus-visible::before {
	transform: skewX(-18deg) scaleX(1);
}

.ageca-v2hero__label,
.ageca-v2hero__arrow {
	position: relative;
	z-index: 1;
}

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

	.ageca-v2hero__btn::before {
		transition: none;
	}
}

.ageca-v2hero__arrow,
.ageca-v2hero__arrow svg {
	display: block;
	width: 28px;
	height: 28px;
}

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

.ageca-v2stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--100) 0;
	background-color: var(--wp--preset--color--white);
	text-align: center;
}

@media (min-width: 700px) {

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

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

.ageca-v2stat__value {
	display: block;
	font-size: clamp(2rem, 1.4rem + 2.56vw, 3.25rem);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.ageca-v2stat__label {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	color: rgba(0, 0, 0, 0.55);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ rooms */

.ageca-v2rooms {
	padding: var(--wp--preset--spacing--130) 0;
}

.ageca-v2rooms__kicker {
	margin: 0;
	font-size: clamp(2.25rem, 1.35rem + 3.84vw, 4.175rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.028em;
}

.ageca-v2rooms__title {
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--100);
	font-size: clamp(1.5rem, 0.9rem + 2.56vw, 2.875rem);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: 0.026em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- carousel */

.ageca-carousel {
	position: relative;
}

/*
 * The track scrolls natively with scroll-snap. overscroll-behavior-inline stops a
 * horizontal swipe at the end of the row from triggering browser back-navigation.
 */
/*
 * The vertical padding is what the cards scale up into on hover. Setting overflow-x
 * to auto forces overflow-y to auto as well, and overflow past the start edge of a
 * scroll container is clipped and unreachable, so without room here the top of a
 * hovered card is cut off.
 *
 * A card grows half its height times 0.07 upwards, which is 12.6px at the current
 * 359px. 24px keeps the headroom ahead of a card grown tall by a room name that
 * wraps; the clipping point is a card around 685px tall.
 */
.ageca-carousel__track {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	margin-block: 0;
	/*
	 * The horizontal padding does the same job as the vertical: a card scaling up on
	 * hover grows past the scroll-start edge, and overflow there is clipped and
	 * unreachable. The matching negative margin cancels the visual shift, so the
	 * first card still lines up with the heading above it.
	 */
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin-inline: calc(var(--wp--preset--spacing--40) * -1);
	list-style: none;
	overflow-x: auto;
	scroll-padding-inline: var(--wp--preset--spacing--40);
	scroll-snap-type: x mandatory;
	overscroll-behavior-inline: contain;
	scrollbar-width: thin;
}

.ageca-carousel__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 4px;
}

.ageca-carousel__track > li {
	flex: 0 0 auto;
	width: min(356px, 78vw);
	scroll-snap-align: start;
}

.ageca-carousel__nav {
	display: none;
	gap: var(--wp--preset--spacing--30);
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--40);
}

/* Buttons appear only once the script confirms the track actually overflows. */
.ageca-carousel.is-ready .ageca-carousel__nav {
	display: flex;
}

.ageca-carousel__btn {
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

/*
 * These stay black. Turning them navy read as a state change rather than a hover,
 * and the colour belongs to links elsewhere on the page.
 */
.ageca-carousel__btn:hover:not([disabled]),
.ageca-carousel__btn:focus-visible:not([disabled]) {
	transform: scale(1.09);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.ageca-carousel__btn:active:not([disabled]) {
	transform: scale(1);
	box-shadow: none;
}

.ageca-carousel__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* -------------------------------------------------------------- room card */

.ageca-v2card {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background-color: var(--wp--preset--color--white);
	transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

/*
 * Hover state authored on the RoomCard component set in Figma: ON_HOVER, smart
 * animate, 150ms, ease out. The target variant is the same card at a uniform
 * 1.0708 scale, so scale carries the corner radius and padding growth with it and
 * nothing here needs to restate those.
 *
 * The row gap is 24px and the card grows 12.5px on each side, so neighbours would
 * overlap by a pixel without the raised stacking.
 *
 * focus-within matches, so reaching the Réserver link by keyboard gets the same
 * affordance as pointing at the card.
 */
.ageca-v2card:hover,
.ageca-v2card:focus-within {
	transform: scale(1.07);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	z-index: 1;
}

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

	/* The shadow still marks the state; only the movement goes. */
	.ageca-v2card {
		transition: box-shadow 150ms ease-out;
	}

	.ageca-v2card:hover,
	.ageca-v2card:focus-within {
		transform: none;
	}
}

.ageca-v2card__media {
	overflow: hidden;
	background-color: var(--wp--preset--color--periwinkle);
}

/*
 * The ratio sits on the image, not the wrapper. As a flex item the wrapper keeps
 * min-height: auto, so the image's intrinsic height wins over any aspect-ratio set
 * on the wrapper and the cards end up with media bands of different depths.
 */
.ageca-v2card__media img,
.ageca-v2card__placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ageca-v2card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
}

.ageca-v2card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.ageca-v2card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.ageca-v2chip {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

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

.ageca-v2chip--yellow {
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--black);
}

.ageca-v2card__btn {
	margin-top: auto;
	padding: var(--wp--preset--spacing--30);
	border-radius: 8px;
	background-color: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--yellow);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}



/* --------------------------------------------------------------- discover */

.ageca-v2discover {
	padding-bottom: var(--wp--preset--spacing--130);
}

.ageca-v2discover__title {
	margin: 0 0 var(--wp--preset--spacing--120);
	font-size: clamp(1.5rem, 1rem + 2.13vw, 2.625rem);
	font-weight: 200;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.ageca-v2discover__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--100);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {

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

@media (min-width: 1000px) {

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

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

/*
 * height: auto is what lets aspect-ratio apply at all. wp_get_attachment_image
 * writes the attachment's real pixel size into width/height attributes, and the
 * height attribute is a presentational hint, so without this the image renders at
 * its intrinsic height and the ratio below is silently ignored.
 */
.ageca-v2svc__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	object-fit: cover;
}

.ageca-v2svc__title {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.ageca-v2svc__text {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: rgba(0, 0, 0, 0.6);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 300;
	line-height: 1.55;
	letter-spacing: 0;
}

.ageca-v2svc__link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

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

.ageca-v2quotes {
	padding: var(--wp--preset--spacing--130) 0;
}

.ageca-v2quotes__title {
	margin: 0 0 var(--wp--preset--spacing--90);
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.092em;
	text-transform: uppercase;
}

/*
 * The outline is not uniform: 6px down the left edge and 2px on the other three.
 * The box has no fill; the wash behind it shows through.
 */
.ageca-v2quote {
	margin: 0 0 var(--wp--preset--spacing--90);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-style: solid;
	border-width: 2px 2px 2px 6px;
}

.ageca-v2quote--rose { border-color: var(--wp--preset--color--rose); }
.ageca-v2quote--navy { border-color: var(--wp--preset--color--navy); }
.ageca-v2quote--sky  { border-color: var(--wp--preset--color--sky); }

.ageca-v2quote blockquote {
	margin: 0;
	color: rgba(10, 10, 10, 0.8);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 300;
	line-height: 1.62;
	letter-spacing: 0;
}

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

.ageca-v2quote__name {
	display: block;
}

.ageca-v2quote--rose .ageca-v2quote__name { color: var(--wp--preset--color--rose); }
.ageca-v2quote--navy .ageca-v2quote__name { color: var(--wp--preset--color--navy); }
.ageca-v2quote--sky  .ageca-v2quote__name { color: var(--wp--preset--color--sky); }

.ageca-v2quote__role {
	display: block;
	color: rgba(10, 10, 10, 0.5);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.05em;
}