/* =============================================================
   Elite Pearl Charter — yacht detail page

   Gallery left, sticky booking panel right from 1024px.
   ============================================================= */

.epc-yd {
	background: var(--epc-black);
	color: var(--epc-silver);
}

/* --- Breadcrumb ----------------------------------------------------- */

.epc-yd__crumbs {
	border-bottom: 1px solid var(--epc-line-soft);
}

.epc-yd__crumbs-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	max-width: var(--epc-container);
	margin-inline: auto;
	padding: 1rem var(--epc-gutter);
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-yd__crumbs a {
	color: var(--epc-silver);
	text-decoration: none;
	transition: color var(--epc-speed) var(--epc-ease-soft);
}

.epc-yd__crumbs a:hover {
	color: var(--epc-white);
}

.epc-yd__crumbs [aria-current="page"] {
	color: var(--epc-white);
}

/* --- Top: gallery + panel -------------------------------------------- */

.epc-yd__top-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	width: 100%;
	max-width: var(--epc-container);
	margin-inline: auto;
	padding: 2.5rem var(--epc-gutter) 4rem;
}

@media (min-width: 768px) {
	.epc-yd__top-inner {
		padding-block: 3rem 5.5rem;
		gap: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.epc-yd__top-inner {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: start;
		gap: 3rem;
	}
}

@media (min-width: 1200px) {
	.epc-yd__top-inner {
		gap: 4rem;
		padding-block: 3.5rem 7rem;
	}
}

/* --- Gallery ---------------------------------------------------------- */

.epc-yd__stage {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--epc-ink-900);
	border: 3px solid rgb(141 143 142 / 40%);
	border-radius: 18px;
	box-shadow:
		0 14px 40px rgb(0 0 0 / 45%),
		inset 0 1px 0 rgb(255 255 255 / 6%);
}

.epc-yd__stage-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.epc-yd__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	padding: 10px;
	background: var(--epc-black);
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 50%;
	box-shadow: 0 2px 12px rgb(0 0 0 / 50%);
}

.epc-yd__badge img {
	width: 100%;
	height: auto;
}

@media (min-width: 1024px) {
	.epc-yd__badge {
		width: 78px;
		height: 78px;
		padding: 13px;
	}
}

/* --- Booking panel ----------------------------------------------------- */

.epc-yd__panel {
	padding: 1.75rem 1.5rem 2rem;
	background: var(--epc-gradient-panel);
	border: 1px solid rgb(141 143 142 / 40%);
	border-radius: 18px;
	box-shadow:
		0 10px 30px rgb(0 0 0 / 35%),
		inset 0 1px 0 rgb(255 255 255 / 6%);
}

@media (min-width: 1024px) {
	.epc-yd__panel {
		/* Follows the reader down the gallery; header height plus a gap. */
		position: sticky;
		top: calc(var(--epc-header-h) + 1.5rem);
		padding: 2rem 1.85rem 2.25rem;
	}
}

.epc-yd__eyebrow {
	margin: 0 0 0.6rem;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--epc-silver);
}

.epc-yd__title {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.5rem, 4.4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* --- Price -------------------------------------------------------------- */

.epc-yd__price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 1rem 0 0;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--epc-line-soft);
	line-height: 1;
}

.epc-yd__aed {
	width: 30px;
	height: auto;
	flex-shrink: 0;
}

.epc-yd__price-now {
	font-family: var(--epc-font-sans);
	font-size: clamp(1.5rem, 4vw, 1.875rem);
	font-weight: 700;
	color: var(--epc-white);
}

.epc-yd__price-now--request {
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--epc-silver);
}

.epc-yd__unit {
	margin-left: -0.25rem;
	font-family: var(--epc-font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--epc-silver);
}

.epc-yd__price-was {
	font-size: 1rem;
	color: var(--epc-grey);
}

/* --- Specs ---------------------------------------------------------------- */

.epc-yd__specs {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-yd__specs li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 0;
	font-family: var(--epc-font-sans);
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--epc-line-soft);
}

.epc-yd__specs li:last-child {
	border-bottom: 0;
}

.epc-yd__specs i {
	flex-shrink: 0;
	width: 18px;
	font-size: 0.875rem;
	text-align: center;
	color: var(--epc-silver);
}

.epc-yd__spec-label {
	flex: 1;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-yd__spec-value {
	font-weight: 600;
	color: var(--epc-white);
}

/* --- Actions ---------------------------------------------------------------- */

/* Side by side, falling back to stacked only where the labels would not fit. */
.epc-yd__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin-top: 1.5rem;
}

.epc-yd__actions .epc-btn {
	width: 100%;
	padding-inline: 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
}

@media (max-width: 400px) {
	.epc-yd__actions {
		grid-template-columns: 1fr;
	}
}

/* --- Assurances --------------------------------------------------------------- */

/* Inline chips rather than a stacked list, so the panel stays compact. */
.epc-yd__assurances {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--epc-line-soft);
	list-style: none;
}

.epc-yd__assurances li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.65rem;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--epc-nav-idle);
	background: var(--epc-wash);
	border: 1px solid var(--epc-line-soft);
	border-radius: 999px;
}

.epc-yd__assurances i {
	flex-shrink: 0;
	margin-top: 0.2em;
	font-size: 0.8125rem;
	color: var(--epc-silver);
}

/* =============================================================
   On-board experiences
   ============================================================= */

.epc-yd__exp {
	border-top: 1px solid var(--epc-line-soft);
}

.epc-yd__exp-inner {
	width: 100%;
	max-width: var(--epc-container);
	margin-inline: auto;
	padding: 4rem var(--epc-gutter);
}

@media (min-width: 768px) {
	.epc-yd__exp-inner {
		padding-block: 5.5rem;
	}
}

@media (min-width: 1200px) {
	.epc-yd__exp-inner {
		padding-block: 7rem;
	}
}

.epc-yd__exp-intro {
	margin-bottom: 2.5rem;
	text-align: center;
}

.epc-yd__exp-heading {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.625rem, 4.6vw, 2.5rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.epc-yd__rule {
	display: block;
	width: 72px;
	height: 1px;
	margin: 1.25rem auto 0;
	background: linear-gradient(
		to right,
		transparent 0%,
		rgb(255 255 255 / 70%) 50%,
		transparent 100%
	);
}

.epc-yd__exp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.epc-yd__exp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.epc-yd__exp-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.epc-yd__exp-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
	padding: 2rem 1.5rem 1.75rem;
	background: var(--epc-gradient-panel);
	border: 1px solid rgb(141 143 142 / 35%);
	border-radius: 14px;
	box-shadow:
		0 0 0 rgb(0 0 0 / 0%),
		inset 0 1px 0 rgb(255 255 255 / 6%);
	transition: transform 520ms var(--epc-ease-soft),
		border-color 520ms var(--epc-ease-soft),
		box-shadow 520ms var(--epc-ease-soft);
}

.epc-yd__exp-item:hover {
	transform: translateY(-4px);
	border-color: rgb(255 255 255 / 55%);
	box-shadow:
		0 18px 38px rgb(0 0 0 / 45%),
		inset 0 1px 0 rgb(255 255 255 / 12%);
}

.epc-yd__exp-accent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--epc-gradient-title);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 620ms var(--epc-ease-soft);
}

.epc-yd__exp-item:hover .epc-yd__exp-accent {
	transform: scaleX(1);
}

.epc-yd__exp-index {
	position: absolute;
	top: 0.85rem;
	right: 1.1rem;
	font-family: var(--epc-font-serif);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgb(255 255 255 / 16%);
	transition: -webkit-text-stroke-color 520ms var(--epc-ease-soft);
}

.epc-yd__exp-item:hover .epc-yd__exp-index {
	-webkit-text-stroke-color: rgb(255 255 255 / 45%);
}

.epc-yd__exp-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 1.25rem;
	font-size: 1.25rem;
	color: var(--epc-white);
	background: var(--epc-ink-950);
	border: 1px solid var(--epc-line);
	border-radius: 50%;
	transition: color 520ms var(--epc-ease-soft),
		border-color 520ms var(--epc-ease-soft);
}

/* Gradient fill on its own layer, since background-image cannot transition. */
.epc-yd__exp-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--epc-gradient-title);
	opacity: 0;
	transition: opacity 520ms var(--epc-ease-soft);
}

.epc-yd__exp-icon i {
	position: relative;
	z-index: 1;
}

.epc-yd__exp-item:hover .epc-yd__exp-icon {
	color: var(--epc-black);
	border-color: transparent;
}

.epc-yd__exp-item:hover .epc-yd__exp-icon::before {
	opacity: 1;
}

.epc-yd__exp-title {
	margin: 0 0 0.6rem;
	font-family: var(--epc-font-serif);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--epc-white);
}

.epc-yd__exp-text {
	margin: 0;
	font-family: var(--epc-font-sans);
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--epc-nav-idle);
	text-wrap: pretty;
}

/* --- Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.epc-yd__exp-item,
	.epc-yd__exp-icon,
	.epc-yd__exp-icon::before,
	.epc-yd__exp-accent,
	.epc-yd__exp-index {
		transition-duration: 0.01ms !important;
	}

	.epc-yd__exp-item:hover {
		transform: none;
	}
}

/* =============================================================
   Gallery
   ============================================================= */

/* Slides are stacked; only the active one is shown. */
.epc-yd__stage-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	visibility: hidden;
	cursor: zoom-in;
	transition: opacity 420ms var(--epc-ease-soft),
		visibility 420ms var(--epc-ease-soft);
}

.epc-yd__stage-img.is-active {
	opacity: 1;
	visibility: visible;
}

/* --- Stage controls -------------------------------------------------- */

.epc-yd__nav,
.epc-yd__zoom {
	position: absolute;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	color: var(--epc-white);
	background: rgb(0 0 0 / 45%);
	border: 1px solid var(--epc-line);
	border-radius: 50%;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color 320ms var(--epc-ease-soft),
		border-color 320ms var(--epc-ease-soft),
		transform 320ms var(--epc-ease-soft);
}

.epc-yd__nav:hover,
.epc-yd__zoom:hover {
	background: rgb(0 0 0 / 70%);
	border-color: rgb(255 255 255 / 55%);
	transform: scale(1.06);
}

.epc-yd__nav:focus-visible,
.epc-yd__zoom:focus-visible {
	outline: 2px solid var(--epc-white);
	outline-offset: 2px;
}

.epc-yd__nav--prev { left: 0.85rem; top: 50%; transform: translateY(-50%); }
.epc-yd__nav--next { right: 0.85rem; top: 50%; transform: translateY(-50%); }

.epc-yd__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.epc-yd__nav--next:hover { transform: translateY(-50%) scale(1.06); }

.epc-yd__zoom {
	right: 0.85rem;
	bottom: 0.85rem;
	width: 38px;
	height: 38px;
	font-size: 0.8125rem;
}

.epc-yd__counter {
	position: absolute;
	left: 0.85rem;
	bottom: 0.85rem;
	z-index: 3;
	margin: 0;
	padding: 0.3rem 0.7rem;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--epc-white);
	background: rgb(0 0 0 / 55%);
	border: 1px solid var(--epc-line);
	border-radius: 999px;
	backdrop-filter: blur(6px);
}

/* --- Thumbnails -------------------------------------------------------- */

.epc-yd__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.epc-yd__thumbs {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 0.6rem;
	}
}

@media (min-width: 1024px) {
	.epc-yd__thumbs {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
}

.epc-yd__thumb {
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--epc-ink-900);
	border: 1px solid var(--epc-line-soft);
	border-radius: 8px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 420ms var(--epc-ease-soft),
		border-color 420ms var(--epc-ease-soft),
		transform 420ms var(--epc-ease-soft);
}

.epc-yd__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.epc-yd__thumb:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

.epc-yd__thumb.is-active {
	opacity: 1;
	border-color: rgb(255 255 255 / 70%);
}

.epc-yd__thumb:focus-visible {
	outline: 2px solid var(--epc-white);
	outline-offset: 2px;
}

/* =============================================================
   Lightbox
   ============================================================= */

body.epc-lb-open {
	overflow: hidden;
}

/*
 * The hidden attribute only applies display:none through the UA stylesheet, so
 * ANY author display declaration beats it. Without this rule the display:grid
 * below kept the lightbox laid out while [hidden] was set: a full-viewport,
 * opacity-0 overlay sitting above the page and swallowing every click, which
 * looks exactly like the JavaScript being dead.
 */
.epc-lb[hidden] {
	display: none;
}

.epc-lb {
	position: fixed;
	inset: 0;
	z-index: calc(var(--epc-z-header) + 50);
	display: grid;
	place-items: center;
	padding: 1rem;
	opacity: 0;
	transition: opacity 260ms var(--epc-ease-soft);
}

.epc-lb.is-open {
	opacity: 1;
}

.epc-lb__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 92%);
	backdrop-filter: blur(8px);
	cursor: zoom-out;
}

.epc-lb__dialog {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 1400px;
	max-height: 100%;
}

.epc-lb__figure {
	margin: 0;
	display: grid;
	justify-items: center;
	gap: 1rem;
}

.epc-lb__img {
	display: block;
	max-width: 100%;
	/* Leaves room for the caption and the close button. */
	max-height: calc(100svh - 9rem);
	max-height: calc(100vh - 9rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 24px 70px rgb(0 0 0 / 70%);
	transform: scale(0.97);
	transition: transform 320ms var(--epc-ease-soft);
}

.epc-lb.is-open .epc-lb__img {
	transform: scale(1);
}

.epc-lb__caption {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epc-silver);
}

.epc-lb__name {
	color: var(--epc-white);
	font-weight: 600;
}

.epc-lb__close,
.epc-lb__nav {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--epc-white);
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 320ms var(--epc-ease-soft),
		border-color 320ms var(--epc-ease-soft);
}

.epc-lb__close:hover,
.epc-lb__nav:hover {
	background: rgb(255 255 255 / 20%);
	border-color: rgb(255 255 255 / 60%);
}

.epc-lb__close:focus-visible,
.epc-lb__nav:focus-visible {
	outline: 2px solid var(--epc-white);
	outline-offset: 3px;
}

.epc-lb__close {
	top: -0.25rem;
	right: 0;
	font-size: 1.125rem;
}

@media (min-width: 768px) {
	.epc-lb__close {
		top: 0;
		right: 0;
	}
}

.epc-lb__nav {
	top: 50%;
	transform: translateY(-50%);
}

.epc-lb__nav--prev { left: 0; }
.epc-lb__nav--next { right: 0; }

@media (min-width: 768px) {
	.epc-lb__nav--prev { left: -0.5rem; }
	.epc-lb__nav--next { right: -0.5rem; }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.epc-yd__stage-img,
	.epc-yd__thumb,
	.epc-yd__nav,
	.epc-yd__zoom,
	.epc-lb,
	.epc-lb__img {
		transition-duration: 0.01ms !important;
	}

	.epc-lb__img {
		transform: none;
	}
}

/* =============================================================
   Similar yachts — closes the page with alternatives before the
   FAQ and the reviews. The cards themselves are .epc-yacht from
   yachts.css; this only lays them out and heads the block.
   ============================================================= */

.epc-yd__also {
	background: var(--epc-black);
	border-top: 1px solid var(--epc-line-soft);
}

.epc-yd__also-inner {
	width: 100%;
	max-width: var(--epc-container);
	margin-inline: auto;
	padding: 3.5rem var(--epc-gutter);
}

@media (min-width: 768px) {
	.epc-yd__also-inner {
		padding-block: 5rem;
	}
}

.epc-yd__also-intro {
	max-width: 56rem;
	margin: 0 auto 2.25rem;
	text-align: center;
}

.epc-yd__also-eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--epc-font-sans);
	font-size: clamp(0.6875rem, 1.6vw, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--epc-silver);
}

.epc-yd__also-heading {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.5rem, 4.2vw, 2.5rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.epc-yd__also-text {
	max-width: 56ch;
	margin: 1.25rem auto 0;
	font-size: clamp(0.8125rem, 1.9vw, 0.9375rem);
	line-height: 1.85;
	color: var(--epc-grey);
	text-wrap: pretty;
}

/*
 * Always three across on a wide screen and never any filler: this block is
 * exactly three cards by construction, so it does not need the ragged-row
 * arithmetic the main fleet grid does.
 */
.epc-yd__also-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
	.epc-yd__also-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.epc-yd__also-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.epc-yd__also-more {
	display: flex;
	justify-content: center;
	margin-top: 2.25rem;
}

@media (max-width: 479.98px) {
	.epc-yd__also-more .epc-btn {
		width: 100%;
	}
}