/* --- Hero ----------------------------------------------------------------- */

.yacht-hero {
	overflow: hidden;
	aspect-ratio: 2 / 1;
	background: var(--color-navy-wash);
}

.yacht-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Name and figures ------------------------------------------------------ */

.yacht-head {
	padding-block: var(--space-xl) var(--space-lg);
	text-align: center;
}

.yacht-head__type {
	margin: 0 0 var(--space-2xs);
	max-width: none;
}

.yacht-head__name {
	margin: 0;
	font-size: var(--text-3xl);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.yacht-head__marina {
	margin: var(--space-2xs) 0 0;
	max-width: none;
	font-size: var(--text-sm);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-navy-soft);
}

.yacht-head .rule {
	margin: var(--space-md) auto var(--space-lg);
}

/* The figures under the name, each with its own quiet label. */
.yacht-specs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-lg);
	margin: 0 0 var(--space-lg);
}

.yacht-specs__item {
	min-width: 5rem;
}

.yacht-specs dt {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-light);
	color: var(--color-navy);
	letter-spacing: 0.02em;
}

.yacht-specs dd {
	margin: var(--space-3xs) 0 0;
	font-size: var(--text-xs);
	font-weight: var(--weight-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-navy-soft);
}

.yacht-head__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

/* --- Description ----------------------------------------------------------
 * Folded by default. The gradient at the foot signals that there is more
 * rather than cutting the text off mid-line with no explanation.
 */

.yacht-about {
	padding-block: var(--space-lg);
}

.yacht-about__body {
	position: relative;
	max-width: var(--width-text);
	margin-inline: auto;
	overflow: hidden;
}

.yacht-about__body[data-expanded='false'] {
	max-height: 16rem;
}

.yacht-about__body[data-expanded='false']::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 6rem;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--color-surface)
	);
	pointer-events: none;
}

.yacht-about__body h3 {
	margin-top: var(--space-lg);
	font-size: var(--text-lg);
}

.yacht-about__body ul {
	padding-left: 1.1em;
	color: var(--color-ink-soft);
}

.yacht-about__body li {
	margin-bottom: var(--space-3xs);
}

.yacht-expand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	width: 100%;
	margin-top: var(--space-md);
	padding: var(--space-2xs);
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
	color: var(--color-navy);
}

.yacht-expand__chevron {
	width: 7px;
	height: 7px;
	border-right: var(--border-hair) solid currentColor;
	border-bottom: var(--border-hair) solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--speed-fast) var(--ease);
}

.yacht-expand[data-open='true'] .yacht-expand__chevron {
	transform: rotate(-135deg) translateY(-2px);
}

/* --- Gallery ---------------------------------------------------------------
 * Two photographs, the rest behind the second one. Putting forty images on
 * the page would cost more to load than everything else combined.
 */

.yacht-gallery {
	padding-block: var(--space-lg);
}

.yacht-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--space-sm);
}

.yacht-gallery__item {
	position: relative;
	display: block;
	padding: 0;
	border: 0;
	background: var(--color-navy-wash);
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.yacht-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--speed-slow) var(--ease);
}

.yacht-gallery__item:hover img {
	transform: scale(1.04);
}

.yacht-gallery__more {
	position: absolute;
	inset: 50% var(--space-lg) auto;
	transform: translateY(-50%);
	padding: var(--space-sm);
	border: var(--border-hair) solid #fff;
	background: color-mix(in srgb, var(--color-navy) 35%, transparent);
	color: #fff;
	font-size: var(--text-sm);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
}

/* --- Rates ------------------------------------------------------------------ */

.yacht-rates {
	padding-block: var(--space-lg);
}

.yacht-rates__table {
	max-width: 34rem;
	margin-inline: auto;
}

.yacht-rates__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-sm) 0;
	border-bottom: var(--border-hair) solid var(--color-line);
}

.yacht-rates__month {
	font-size: var(--text-sm);
	font-weight: var(--weight-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-navy-soft);
}

.yacht-rates__amount {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--color-navy);
}

.yacht-rates__note {
	max-width: 34rem;
	margin: var(--space-md) auto 0;
	font-size: var(--text-sm);
	color: var(--color-ink-soft);
	text-align: center;
}

/* --- Specification ---------------------------------------------------------- */

.yacht-details {
	padding-block: var(--space-lg);
}

.yacht-details__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 0 var(--space-xl);
	max-width: 52rem;
	margin-inline: auto;
}

.yacht-details__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-xs) 0;
	border-bottom: var(--border-hair) solid var(--color-line);
}

.yacht-details__row dt {
	flex: none;
	font-size: var(--text-xs);
	font-weight: var(--weight-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-navy-soft);
}

.yacht-details__row dd {
	margin: 0;
	text-align: right;
	color: var(--color-ink);
}

/* --- Closing call ------------------------------------------------------------ */

.yacht-cta {
	margin-top: var(--space-section);
	padding-block: var(--space-xl);
	background: var(--color-navy);
	color: var(--color-surface);
	text-align: center;
}

.yacht-cta__title {
	margin: 0 0 var(--space-sm);
	font-size: var(--text-xl);
	color: var(--color-surface);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.yacht-cta__text {
	max-width: 32rem;
	margin: 0 auto var(--space-lg);
	color: color-mix(in srgb, var(--color-surface) 78%, var(--color-navy));
}

/* The footer sits directly under this block, so its own top margin would
   double the gap. */
.yacht-cta + .site-footer,
.yacht-cta ~ .site-footer {
	margin-top: 0;
}

/* --- Lightbox ----------------------------------------------------------------- */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-sheet) + 10);
	display: none;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--color-navy) 94%, #000);
}

.lightbox[data-open='true'] {
	display: flex;
}

/* The photographs in one row, one per screen width, snapping into place.
   A finger drags them; the arrows and the keyboard scroll the same row. */
.lightbox__track {
	position: absolute;
	inset: 0;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

.lightbox__track::-webkit-scrollbar {
	display: none;
}

.lightbox__slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4.5rem var(--space-md);
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.lightbox__slide img {
	max-width: min(100%, 76rem);
	max-height: 100%;
	object-fit: contain;
}

.lightbox__close {
	position: absolute;
	z-index: 1;
	top: var(--space-sm);
	right: var(--space-md);
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.lightbox__nav {
	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__nav--prev {
	left: var(--space-md);
}

.lightbox__nav--next {
	right: var(--space-md);
}

/* On a phone the finger does this; the arrows would sit on the photograph. */
@media (max-width: 40rem) {
	.lightbox__nav {
		display: none;
	}
}

.lightbox__counter {
	position: absolute;
	z-index: 1;
	bottom: var(--space-md);
	left: 0;
	right: 0;
	margin: 0;
	max-width: none;
	text-align: center;
	color: color-mix(in srgb, #fff 70%, transparent);
	font-size: var(--text-xs);
	letter-spacing: var(--track-label);
}

@media (max-width: 40rem) {
	.yacht-hero {
		aspect-ratio: 4 / 3;
	}

	.yacht-head__name {
		font-size: var(--text-2xl);
	}

	.yacht-specs {
		gap: var(--space-md);
	}

	.yacht-head__actions .btn {
		flex: 1;
		min-width: 10rem;
	}

	.yacht-gallery__more {
		inset: 50% var(--space-sm) auto;
		font-size: var(--text-xs);
	}
}

/* --- For sale -------------------------------------------------------------
 * A buyer reads a different page: the asking price is the headline, and a
 * boat that is no longer available says so on the photograph rather than
 * three sections down.
 */

.yacht-asking {
	margin: 0 0 var(--space-lg);
	max-width: none;
	text-align: center;
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-light);
	letter-spacing: 0.02em;
	color: var(--color-navy);
}

.yacht-hero {
	position: relative;
}

.yacht-stamp {
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	padding: var(--space-2xs) var(--space-md);
	background: var(--color-navy);
	color: var(--color-surface);
	font-size: var(--text-xs);
	font-weight: var(--weight-label);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
}

.yacht-highlights {
	padding-block: var(--space-lg);
}

.yacht-highlights__list {
	max-width: 44rem;
	margin-inline: auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--space-2xs) var(--space-lg);
}

.yacht-highlights__list li {
	position: relative;
	padding-left: var(--space-md);
	color: var(--color-ink-soft);
}

/* The signature red earns one more appearance here: a mark, not a bullet. */
.yacht-highlights__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 8px;
	height: 2px;
	background: var(--color-red);
}

/* On a card, a listing that is under offer or sold says so before the
   price, because the price stops mattering once it does. */
.yacht-card__state {
	display: block;
	margin-bottom: var(--space-3xs);
	font-size: var(--text-xs);
	letter-spacing: var(--track-label);
	color: var(--color-navy-soft);
}