/* Collection page (/collection): opening heading and carousel, the Coming soon list, and the closing image CTA. */

.collection-opening {
	padding: var(--header-height) 0 100px;
	background: var(--color-white);
	flex-direction: column;
	align-items: stretch;
	gap: 72px;
	display: flex;
	overflow: hidden;
}

.collection-head {
	padding: 100px var(--spacing-page) 0;
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	display: flex;
}

.collection-title {
	max-width: 865px;
}

/* No specificity, so the row rules below can still set margins. */
:where(.collection-head, .coming) :where(h1, h2, h3, p) {
	margin: 0;
}

/* Coming soon: one row per Opening Soon villa. */
.coming {
	background: var(--color-cream);
	padding: 100px var(--spacing-page) 150px;
	flex-direction: column;
	align-items: stretch;
	gap: 72px;
	display: flex;
}

.coming-lede {
	max-width: 353px;
}

.coming-list {
	flex-direction: column;
	gap: 40px;
	display: flex;
}

.coming-row {
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	display: flex;
}

/* The divider between rows, drawn on the row so the loop needs no extra element. */
.coming-row + .coming-row {
	border-top: 1px solid var(--color-divider);
	padding-top: 40px;
}

.coming-date {
	white-space: nowrap;
	flex-shrink: 0;
	width: 93px;
}

.coming-img {
	flex-shrink: 0;
	width: 141px;
	height: 188px;
}

.coming-name {
	flex-shrink: 0;
	justify-content: center;
	width: 217px;
	display: flex;
}

.coming-name h3 {
	white-space: nowrap;
}

.coming-info {
	flex-direction: column;
	flex-shrink: 1;
	gap: 16px;
	width: 406px;
	min-width: 0;
	display: flex;
}

/* One shared width; the prototype hand-set it per item (382, 340, 334px). */
.coming-info .ts14 {
	max-width: 382px;
}

.coming-link {
	flex-shrink: 0;
	align-self: center;
}

.sand {
	color: var(--color-sand);
}

/* Closing CTA. */
.collection-cta .media-box {
	left: -.2778%;
	top: -16.1963%;
	width: 100.5556%;
	height: 118.5276%;
}

.collection-cta .cover {
	object-position: 50% 54.5%;
}

.collection-cta .shade {
	background: var(--color-shade-35);
}

.image-cta.collection-cta .t72.cta-title {
	max-width: 628px;
}

@media (width<=1279px) {
	.collection-opening {
		gap: 56px;
	}

	.collection-head {
		gap: 20px;
		padding-top: 96px;
	}

	.collection-title {
		max-width: 456px;
	}

	.coming {
		padding: 50px var(--spacing-page) 125px;
		gap: 56px;
	}

	.coming .sec-head-row {
		text-align: center;
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.coming .sec-head-row > .sec-head {
		flex: none;
		align-items: center;
		width: 100%;
	}

	.coming-lede {
		max-width: 375px;
	}

	.coming-list {
		gap: 24px;
	}

	.coming-row + .coming-row {
		border-top: 0;
		padding-top: 0;
	}

	.coming-row {
		grid-template: "img date" 1fr "img name" "img info" "img link" 1fr / 200px minmax(0, 1fr);
		justify-content: stretch;
		align-items: start;
		gap: 0 32px;
		display: grid;
	}

	.coming-date {
		grid-area: date;
		align-self: end;
		width: auto;
		margin-bottom: 8px;
	}

	.coming-date br {
		display: none;
	}

	.coming-img {
		grid-area: img;
		width: 200px;
		height: 260px;
	}

	.coming-name {
		grid-area: name;
		justify-content: flex-start;
		width: auto;
	}

	.coming-name h3 {
		font-size: 32px;
	}

	.coming-info {
		grid-area: info;
		width: auto;
		max-width: 400px;
		margin-top: 16px;
	}

	.coming-link {
		grid-area: link;
		place-self: start;
		margin-top: 16px;
	}

	.image-cta.collection-cta .t72.cta-title {
		max-width: 394px;
	}
}

@media (width<=767px) {
	.collection-head {
		padding-top: 64px;
	}

	.collection-opening {
		gap: 48px;
		padding-bottom: 72px;
	}

	.coming {
		padding: 96px var(--spacing-page);
		gap: 40px;
	}

	.coming .sec-head-row {
		text-align: left;
		align-items: flex-start;
		gap: 32px;
	}

	.coming .sec-head-row > .sec-head {
		align-items: flex-start;
	}

	.coming-lede {
		max-width: none;
	}

	.coming-list {
		gap: 56px;
	}

	.coming-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		display: flex;
	}

	.coming-date {
		align-self: flex-start;
		margin: 0 0 16px;
	}

	.coming-img {
		aspect-ratio: 350 / 260;
		width: 100%;
		height: auto;
	}

	.coming-name {
		margin-top: 16px;
	}

	.coming-name h3 {
		white-space: normal;
		font-size: 26px;
	}

	.coming-info {
		margin-top: 16px;
	}

	.coming-link {
		align-self: flex-start;
		margin-top: 16px;
	}

	.image-cta.collection-cta .t72.cta-title {
		max-width: 100%;
	}
}

/* Carousel of Open villas. carousel.js places the slides; see its header for the markup. */
.carousel {
	flex-direction: column;
	align-items: center;
	gap: 40px;
	width: 100%;
	display: flex;
}

.carousel-stage {
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	width: 100%;
	height: 34.8611vw;
	position: relative;
}

.carousel-stage.is-dragging {
	cursor: grabbing;
}

.carousel-slide {
	will-change: transform, width, height;
	transition: transform .7s var(--ease-slide), width .7s var(--ease-slide), height .7s var(--ease-slide);
	position: absolute;
	top: 0;
	left: 0;
}

.carousel-stage.is-dragging .carousel-slide {
	transition: none;
}

.carousel-slide img {
	pointer-events: none;
	-webkit-user-drag: none;
}

.carousel-slide.is-side {
	cursor: pointer;
}

.carousel-stage.is-dragging .carousel-slide.is-side {
	cursor: grabbing;
}

.carousel-body {
	width: 448px;
	max-width: calc(100% - 2 * var(--spacing-page));
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	display: flex;
}

/* Sized by its longest item and centred, so a wide line overflows evenly on both sides. */
.carousel-swap {
	width: auto;
	max-width: none;
	display: grid;
}

.carousel-text-item {
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s var(--ease-slide), visibility 0s linear .7s;
	flex-direction: column;
	grid-area: 1 / 1;
	align-items: center;
	gap: 40px;
	display: flex;
}

.carousel-text-item.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .7s var(--ease-slide);
}

.carousel-text {
	flex-direction: column;
	align-items: center;
	gap: 12px;
	display: flex;
}

.carousel-text :where(h2, p) {
	margin: 0;
}

.carousel-text .ts24.is-name {
	line-height: 1;
}

.carousel-copy {
	white-space: nowrap;
}

.carousel-body .text-link {
	align-self: center;
}

.carousel-controls {
	color: var(--color-muted);
	align-items: center;
	gap: 32px;
	display: flex;
}

.carousel-controls button {
	color: inherit;
	cursor: pointer;
	background: none;
	border: 0;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 -14.5px;
	padding: 0;
	display: grid;
}

.carousel-controls .carousel-count.ts14 {
	letter-spacing: .01em;
	text-align: center;
	min-width: 52px;
}

.chevron {
	place-items: center;
	width: 15px;
	height: 12px;
	display: grid;
}

.chevron::before {
	content: "";
	background: url(../images/13db6.svg) center / 100% 100% no-repeat;
	width: 9.85px;
	height: 5.77px;
}

.chevron.is-next::before {
	transform: rotate(-90deg);
}

.chevron.is-prev::before {
	transform: rotate(90deg);
}

.carousel.is-single .carousel-controls {
	display: none;
}

.carousel.is-single .carousel-stage {
	cursor: auto;
}

/* Side slides fade in when the stage reveals. */
html.azuma-js [data-reveal=carousel]:not([data-revealed]) .carousel-slide:not(.is-center) {
	opacity: 0;
}

[data-reveal=carousel][data-revealed]:not([data-reveal-done]):not(.is-dragging) .carousel-slide {
	transition: transform .7s var(--ease-slide), width .7s var(--ease-slide), height .7s var(--ease-slide), opacity 1.2s var(--ease-image);
}

/* Without JavaScript (and on the builder canvas) the first slide shows centred. */
html:not(.azuma-js) .carousel-stage {
	cursor: auto;
	height: auto;
}

html:not(.azuma-js) .carousel-slide {
	aspect-ratio: 658 / 502;
	width: 45.6944%;
	margin: 0 auto;
	position: relative;
}

html:not(.azuma-js) .carousel-slide ~ .carousel-slide,
html:not(.azuma-js) .carousel-controls {
	display: none;
}

@media (width<=1279px) {
	.carousel-stage {
		height: 51.08vw;
	}

	.carousel-copy {
		white-space: normal;
		max-width: 260px;
	}

	html:not(.azuma-js) .carousel-slide {
		aspect-ratio: 500 / 426;
		width: 60%;
	}
}

@media (width<=767px) {
	.carousel {
		gap: 32px;
	}

	.carousel-stage {
		height: calc((100vw - 2 * var(--spacing-page)) * 1.25);
	}

	.carousel-body,
	.carousel-text-item {
		gap: 32px;
	}

	html:not(.azuma-js) .carousel-slide {
		aspect-ratio: 4 / 5;
		width: calc(100% - 40px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.carousel-slide,
	.carousel-text-item,
	.carousel-text-item.is-active,
	[data-reveal=carousel][data-revealed]:not([data-reveal-done]):not(.is-dragging) .carousel-slide {
		transition: none;
	}

	html.azuma-js [data-reveal=carousel]:not([data-revealed]) .carousel-slide:not(.is-center) {
		opacity: 1;
	}
}