/* =============================================================
   Elite Pearl Charter — promotional modal
   A horizontal card: yacht photograph one side, offer the other.
   ============================================================= */

/*
 * [hidden] is only a style in the user agent sheet, and any author display wins
 * over it. .epc-promo is a flex container, so without this pair the modal would
 * be on screen from the moment the page loads.
 */
.epc-promo[hidden] {
	display: none;
}

.epc-promo {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

/* --- Scrim ------------------------------------------------------------ */

.epc-promo__scrim {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 80%);
	opacity: 0;
	transition: opacity 400ms var(--epc-ease-soft);
}

.epc-promo.is-open .epc-promo__scrim {
	opacity: 1;
}

@supports (backdrop-filter: blur(4px)) {
	.epc-promo__scrim {
		backdrop-filter: blur(5px);
	}
}

/* --- Panel ------------------------------------------------------------- */

.epc-promo__panel {
	position: relative;
	display: grid;
	width: 100%;
	max-width: 27rem;
	max-height: calc(100dvh - 2rem);
	overflow: hidden auto;
	background: var(--epc-gradient-panel);
	border: 1px solid var(--epc-line);
	border-radius: 18px;
	box-shadow: 0 30px 70px rgb(0 0 0 / 70%);
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 400ms var(--epc-ease-soft),
		transform 400ms var(--epc-ease-soft);
}

.epc-promo.is-open .epc-promo__panel {
	opacity: 1;
	transform: none;
}

/*
 * The horizontal card. Below this the two halves stack, because a photograph
 * beside a paragraph in 380px leaves neither enough room to be worth having.
 */
/*
 * The column is deliberately wider than the photograph's own 0.875:1 crop.
 * object-fit: cover crops on whichever axis has the surplus, so a column
 * NARROWER than the crop would trim the sides — and the yacht fills that crop
 * bow to stern, with 29px of margin in the whole 3133px frame. At 0.85fr the
 * column lands near 0.94:1, so the surplus moves to the vertical, where there is
 * sky and water to give away. Narrow this and the bow goes first.
 */
@media (min-width: 780px) {
	.epc-promo__panel {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
		align-items: stretch;
		max-width: 64rem;
	}
}

/* --- Photograph --------------------------------------------------------- */

.epc-promo__media {
	position: relative;
	overflow: hidden;
	background: var(--epc-ink-950);
}

.epc-promo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Stacked layout: a band across the top rather than a tall photograph, so the
 * card does not push its buttons off a short phone screen. aspect-ratio with a
 * max-height rather than a fixed height, so it still scales on a wide phone.
 */
@media (max-width: 779.98px) {
	.epc-promo__img {
		aspect-ratio: 16 / 9;
		max-height: 168px;
	}
}

@media (max-width: 779.98px) and (max-height: 680px) {
	.epc-promo__img {
		max-height: 120px;
	}
}

/*
 * Fades the photograph into the panel where the two meet: down the seam on the
 * horizontal card, along the bottom edge when it is stacked. A gradient cannot
 * be transitioned, but this one never animates, so a plain overlay is fine.
 */
.epc-promo__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgb(0 0 0 / 0%) 55%, rgb(11 12 16 / 92%) 100%);
}

@media (min-width: 780px) {
	.epc-promo__media::after {
		background: linear-gradient(90deg, rgb(0 0 0 / 0%) 60%, rgb(11 12 16 / 80%) 100%);
	}
}

/* --- Corner ribbon --------------------------------------------------------- */

/*
 * The wrapper is a square clipped to the corner of the photograph; the band
 * inside is rotated 45 degrees and deliberately wider than that square, so its
 * ends run out under the clip. That is what makes it read as wrapped round the
 * corner rather than as a rectangle sitting on top of it.
 */
.epc-promo__ribbon {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 116px;
	height: 116px;
	overflow: hidden;
	pointer-events: none;
}

/*
 * Three things make it read as a solid strip rather than a white triangle:
 * a gradient across its width so the surface curves, both ends darkened so they
 * turn away from the light, and a hard dark line along the lower edge for
 * thickness. The cast shadow underneath sits it above the photograph.
 */
.epc-promo__ribbon-band {
	position: absolute;
	top: 17px;
	left: -40px;
	display: block;
	width: 170px;
	padding: 0.42rem 0;
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: #14161a;
	text-shadow: 0 1px 0 rgb(255 255 255 / 55%);
	background:
		linear-gradient(90deg, rgb(0 0 0 / 34%) 0%, rgb(0 0 0 / 0%) 17%, rgb(0 0 0 / 0%) 83%, rgb(0 0 0 / 34%) 100%),
		linear-gradient(180deg, #ffffff 0%, #f6f6f6 42%, #d2d4d6 100%);
	transform: rotate(-45deg);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 95%),
		inset 0 -1px 0 rgb(0 0 0 / 22%),
		0 9px 20px rgb(0 0 0 / 55%);
}

@media (min-width: 780px) {
	.epc-promo__ribbon {
		width: 132px;
		height: 132px;
	}

	.epc-promo__ribbon-band {
		top: 22px;
		left: -44px;
		width: 190px;
		font-size: 0.8125rem;
	}
}

/* --- Body ---------------------------------------------------------------- */

.epc-promo__body {
	padding: 1.5rem 1.35rem 1.35rem;
	text-align: center;
}

@media (min-width: 480px) {
	.epc-promo__body {
		padding: 1.75rem 1.75rem 1.5rem;
	}
}

/*
 * Left aligned on the horizontal card. Centred text works under a photograph
 * but reads as an afterthought beside one.
 */
@media (min-width: 780px) {
	.epc-promo__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 2.25rem 2.25rem 2rem;
		text-align: left;
	}
}

.epc-promo__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	font-family: var(--epc-font-sans);
	font-size: clamp(0.625rem, 1.5vw, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--epc-silver);
}

.epc-promo__tag i {
	font-size: 0.6875rem;
	color: var(--epc-white);
}

@media (min-width: 780px) {
	.epc-promo__tag {
		justify-content: flex-start;
	}
}

.epc-promo__title {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.625rem, 5vw, 2.375rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

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

@media (min-width: 780px) {
	.epc-promo__rule {
		margin-inline: 0;
		background: linear-gradient(to right, rgb(255 255 255 / 70%), transparent);
	}
}

.epc-promo__text {
	max-width: 42ch;
	margin: 0 auto;
	font-size: clamp(0.8125rem, 1.9vw, 0.9375rem);
	line-height: 1.75;
	color: var(--epc-silver);
	text-wrap: pretty;
}

@media (min-width: 780px) {
	.epc-promo__text {
		margin-inline: 0;
	}
}

/* --- Conditions ---------------------------------------------------------- */

.epc-promo__terms {
	margin-top: 1.15rem;
	padding: 0.9rem 1rem;
	text-align: left;
	background: rgb(0 0 0 / 45%);
	border: 1px solid var(--epc-line-soft);
	border-radius: 12px;
}

.epc-promo__terms-title {
	margin: 0 0 0.6rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-promo__terms ul {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-promo__terms li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: clamp(0.75rem, 1.8vw, 0.8125rem);
	line-height: 1.55;
	color: var(--epc-silver);
}

.epc-promo__terms i {
	flex-shrink: 0;
	margin-top: 0.3em;
	font-size: 0.625rem;
	color: var(--epc-white);
}

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

.epc-promo__actions {
	display: grid;
	gap: 0.55rem;
	margin-top: 1.25rem;
}

/*
 * Side by side on the horizontal card. The body column is about 430px, so each
 * button gets roughly 210px — which is why the labels below drop a size and lose
 * their letter-spacing here. At --lg they wrapped to two lines. Below 780px the
 * card is stacked and narrow, so the buttons stack too and stay thumb-sized.
 */
@media (min-width: 780px) {
	.epc-promo__actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
	}

	.epc-promo__actions .epc-btn {
		padding-inline: 0.9rem;
	}

	.epc-promo__actions .epc-btn__label {
		font-size: 0.75rem;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.epc-promo__actions .epc-btn__icon {
		font-size: 0.8125rem;
	}
}

.epc-promo__actions .epc-btn {
	width: 100%;
}

.epc-promo__dismiss {
	display: block;
	width: 100%;
	margin-top: 0.85rem;
	padding: 0.3rem;
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--epc-grey);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	transition: color 320ms var(--epc-ease-soft);
}

.epc-promo__dismiss:hover,
.epc-promo__dismiss:focus-visible {
	color: var(--epc-white);
}

/* --- Close ---------------------------------------------------------------- */

/*
 * Over the photograph when stacked, over the body when side by side, so it
 * never lands on the bow of the yacht or on the discount badge.
 */
.epc-promo__close {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--epc-white);
	background: rgb(0 0 0 / 55%);
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: 999px;
	cursor: pointer;
	transition: color 320ms var(--epc-ease-soft),
		border-color 320ms var(--epc-ease-soft),
		background-color 320ms var(--epc-ease-soft);
}

.epc-promo__close:hover,
.epc-promo__close:focus-visible {
	background: rgb(255 255 255 / 18%);
	border-color: rgb(255 255 255 / 55%);
}

@media (min-width: 780px) {
	.epc-promo__close {
		top: 0.85rem;
		right: 0.85rem;
		background: var(--epc-wash);
		border-color: var(--epc-line-soft);
	}
}

/* The X, drawn from one element so there is no icon font dependency here. */
.epc-promo__close span,
.epc-promo__close span::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
}

.epc-promo__close span {
	transform: translate(-50%, -50%) rotate(45deg);
}

.epc-promo__close span::before {
	content: "";
	top: 0;
	left: 0;
	transform: rotate(90deg);
}

/* --- Scroll lock ----------------------------------------------------------- */

/*
 * Set on <html> while the modal is open. Fixing the body and restoring the
 * offset in JS is what stops iOS scrolling the page behind the panel.
 */
.epc-promo-lock body {
	position: fixed;
	inset-inline: 0;
	overflow: hidden;
}

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

@media (prefers-reduced-motion: reduce) {
	.epc-promo__scrim,
	.epc-promo__panel,
	.epc-promo__close,
	.epc-promo__dismiss {
		transition-duration: 0.01ms !important;
	}

	.epc-promo__panel {
		transform: none;
	}
}