/**
 * Yacht rental offers page.
 *
 * Three blocks: the promotion cards, the party packages and the rate table.
 * Tokens only, so there is nothing page specific to keep in step with the
 * brand. The two recurring traps in this theme are avoided as everywhere else:
 * gradients animate through a separate opacity layer because background-image
 * cannot transition, and any card that gains shadows on hover declares the
 * same number of layers at rest.
 */

/* =============================================================
   Shared shell
   ============================================================= */

.epc-offers,
.epc-packages,
.epc-ratecard {
	background: var(--epc-black);
	color: var(--epc-silver);
	border-top: 1px solid var(--epc-line-soft);
}

.epc-offers__inner,
.epc-packages__inner,
.epc-ratecard__inner {
	width: 100%;
	max-width: var(--epc-container);
	margin-inline: auto;
	padding: 3.5rem var(--epc-gutter);
}

@media (min-width: 768px) {
	.epc-offers__inner,
	.epc-packages__inner,
	.epc-ratecard__inner {
		padding-block: 5rem;
	}
}

@media (min-width: 1200px) {
	.epc-offers__inner,
	.epc-packages__inner,
	.epc-ratecard__inner {
		padding-block: 6.5rem;
	}
}

.epc-offers__intro,
.epc-packages__intro,
.epc-ratecard__intro {
	max-width: 46rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.epc-offers__eyebrow,
.epc-packages__eyebrow,
.epc-ratecard__eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-offers__heading,
.epc-packages__heading,
.epc-ratecard__heading {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.5rem, 3.4vw, 2.125rem);
	font-weight: 400;
	line-height: 1.22;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.epc-offers__rule,
.epc-packages__rule,
.epc-ratecard__rule {
	display: block;
	width: 56px;
	height: 1px;
	margin: 1.1rem auto 1.35rem;
	background: linear-gradient(90deg, transparent, var(--epc-white), transparent);
}

.epc-offers__text,
.epc-packages__text,
.epc-ratecard__text {
	margin: 0;
	font-family: var(--epc-font-sans);
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--epc-grey);
	text-wrap: pretty;
}

.epc-offers__note,
.epc-packages__note,
.epc-ratecard__note {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	max-width: 46rem;
	margin: 1.75rem auto 0;
	padding: 0.9rem 1.1rem;
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--epc-silver);
	background: var(--epc-wash);
	border: 1px solid var(--epc-line-soft);
	border-radius: 12px;
}

.epc-offers__note i,
.epc-packages__note i,
.epc-ratecard__note i {
	margin-top: 0.2em;
	color: var(--epc-white);
}

/* =============================================================
   Promotion cards
   ============================================================= */

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

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

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

.epc-deal {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.9rem 1.5rem 1.65rem;
	overflow: hidden;
	background: var(--epc-gradient-surface);
	border: 1px solid rgb(141 143 142 / 28%);
	border-radius: 18px;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 0 0 0 rgb(0 0 0 / 0%);
	transition: transform 520ms var(--epc-ease-soft),
		border-color 520ms var(--epc-ease-soft),
		box-shadow 520ms var(--epc-ease-soft);
}

.epc-deal:hover {
	transform: translateY(-6px);
	border-color: rgb(255 255 255 / 30%);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 20px 44px rgb(0 0 0 / 52%);
}

/* The headline offer carries the brighter edge at rest. */
.epc-deal.is-featured {
	border-color: rgb(255 255 255 / 34%);
}

/* A soft light behind the card, faded in rather than swapped. */
.epc-deal__glow {
	position: absolute;
	top: -40%;
	right: -30%;
	width: 70%;
	aspect-ratio: 1;
	max-width: 100%;
	background: radial-gradient(circle, rgb(255 255 255 / 14%), transparent 70%);
	opacity: 0;
	transition: opacity 620ms var(--epc-ease-soft);
	pointer-events: none;
}

.epc-deal.is-featured .epc-deal__glow {
	opacity: 0.55;
}

.epc-deal:hover .epc-deal__glow {
	opacity: 1;
}

.epc-deal__accent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--epc-white), transparent);
	opacity: 0;
	transition: opacity 520ms var(--epc-ease-soft);
}

.epc-deal.is-featured .epc-deal__accent {
	opacity: 0.45;
}

.epc-deal:hover .epc-deal__accent {
	opacity: 0.75;
}

.epc-deal > *:not(.epc-deal__glow):not(.epc-deal__accent) {
	position: relative;
}

.epc-deal__head {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	margin-bottom: 1.15rem;
}

.epc-deal__icon {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	color: var(--epc-white);
	background: var(--epc-wash);
	border: 1px solid var(--epc-line);
	border-radius: 12px;
}

.epc-deal__icon-fill {
	position: absolute;
	inset: 0;
	background: var(--epc-gradient-title);
	opacity: 0;
	transition: opacity 520ms var(--epc-ease-soft);
}

.epc-deal:hover .epc-deal__icon-fill {
	opacity: 0.18;
}

.epc-deal__icon i {
	position: relative;
	font-size: 0.9375rem;
}

.epc-deal__tag {
	margin: 0;
	font-family: var(--epc-font-sans);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-deal__title {
	margin: 0 0 0.7rem;
	font-family: var(--epc-font-serif);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--epc-white);
	text-wrap: balance;
}

.epc-deal__text {
	margin: 0 0 1.25rem;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var(--epc-grey);
	text-wrap: pretty;
}

.epc-deal__label {
	margin: 0 0 0.65rem;
	font-family: var(--epc-font-sans);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--epc-silver);
}

.epc-deal__terms {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.epc-deal__terms li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--epc-silver);
}

.epc-deal__terms i {
	margin-top: 0.24em;
	font-size: 0.6875rem;
	color: var(--epc-white);
}

/*
 * Side by side when the card is wide enough for two comfortable targets,
 * stacked when it is not. At four columns the inner width is about 234px, so
 * the pair stacks; at two columns it is about 410px and they sit in a row.
 * auto-fit does that without a breakpoint tied to the grid.
 */
.epc-deal__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.5rem;
	margin-top: auto;
}

.epc-deal__btn {
	justify-content: center;
	padding-inline: 0.85rem;
	text-align: center;
}

/* =============================================================
   Party packages
   ============================================================= */

.epc-packages__includes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.epc-packages__includes li {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.45rem 0.85rem;
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	color: var(--epc-silver);
	background: var(--epc-wash);
	border: 1px solid var(--epc-line-soft);
	border-radius: 999px;
}

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

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

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

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

.epc-pkg {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.9rem 1.5rem 1.7rem;
	overflow: hidden;
	background: var(--epc-gradient-surface);
	border: 1px solid rgb(141 143 142 / 28%);
	border-radius: 18px;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 0 0 0 rgb(0 0 0 / 0%);
	transition: transform 520ms var(--epc-ease-soft),
		border-color 520ms var(--epc-ease-soft),
		box-shadow 520ms var(--epc-ease-soft);
}

.epc-pkg:hover {
	transform: translateY(-5px);
	border-color: rgb(255 255 255 / 28%);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 20px 44px rgb(0 0 0 / 50%);
}

.epc-pkg__accent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--epc-white), transparent);
	opacity: 0;
	transition: opacity 520ms var(--epc-ease-soft);
}

.epc-pkg:hover .epc-pkg__accent {
	opacity: 0.6;
}

.epc-pkg__head {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	margin-bottom: 1.35rem;
}

/* The yacht's internal reference, which the client's own price list uses. */
.epc-pkg__code {
	flex: none;
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.5rem;
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--epc-black);
	background: var(--epc-white);
	border-radius: 12px;
}

.epc-pkg__title {
	margin: 0;
	font-family: var(--epc-font-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--epc-white);
}

.epc-pkg__capacity {
	display: flex;
	gap: 0.45rem;
	align-items: center;
	margin: 0.3rem 0 0;
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	color: var(--epc-grey);
}

.epc-pkg__options {
	display: grid;
	gap: 0.65rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.epc-pkg__option {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.85rem 1rem;
	background: rgb(0 0 0 / 45%);
	border: 1px solid var(--epc-line-soft);
	border-radius: 12px;
}

.epc-pkg__option.is-best {
	border-color: rgb(255 255 255 / 26%);
}

.epc-pkg__duration {
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	color: var(--epc-silver);
}

.epc-pkg__price {
	display: inline-flex;
	gap: 0.35rem;
	align-items: baseline;
	white-space: nowrap;
}

.epc-pkg__aed {
	width: 20px;
	height: auto;
	max-width: 100%;
	flex-shrink: 0;
	align-self: center;
}

.epc-pkg__amount {
	font-family: var(--epc-font-sans);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1;
	color: var(--epc-white);
}

.epc-pkg__btn {
	margin-top: auto;
	align-self: stretch;
	justify-content: center;
}

/* =============================================================
   Rate table
   ============================================================= */

/* Only the table scrolls sideways, never the page. */
.epc-ratecard__scroll {
	overflow-x: auto;
	background: var(--epc-gradient-surface);
	border: 1px solid var(--epc-line-soft);
	border-radius: 16px;
}

/*
 * The surface gradient runs corner to corner, which over seven rows left the
 * last one sitting on pale silver and dropped the price to about 2:1 against
 * its background. The gradient stays on the wrapper for the brand texture and
 * the table lays a dark scrim over it, so every row reads the same.
 */
.epc-ratetable {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	font-family: var(--epc-font-sans);
	background: rgb(0 0 0 / 62%);
}

.epc-ratetable caption {
	padding: 1rem 1.25rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
	color: var(--epc-grey);
	background: rgb(0 0 0 / 55%);
}

.epc-ratetable th,
.epc-ratetable td {
	padding: 0.95rem 1.25rem;
	font-size: 0.8125rem;
	text-align: left;
	vertical-align: middle;
	border-top: 1px solid var(--epc-line-soft);
}

.epc-ratetable thead th {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-ratetable__num {
	text-align: right;
}

.epc-ratetable tbody th {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	font-weight: 600;
	color: var(--epc-white);
}

.epc-ratetable tbody th a {
	color: inherit;
	text-decoration: none;
	transition: color 320ms var(--epc-ease-soft);
}

.epc-ratetable tbody tr:hover th a,
.epc-ratetable tbody th a:focus-visible {
	color: var(--epc-silver);
}

.epc-ratetable__code {
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	padding: 0.22rem 0.45rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--epc-silver);
	background: var(--epc-wash);
	border: 1px solid var(--epc-line);
	border-radius: 7px;
}

.epc-ratetable tbody td {
	color: var(--epc-grey);
}

.epc-ratetable tbody tr {
	transition: background-color 380ms var(--epc-ease-soft);
}

.epc-ratetable tbody tr:hover {
	background: rgb(255 255 255 / 4%);
}

.epc-ratetable__price {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--epc-white);
}

.epc-ratetable__unit {
	margin-left: 0.3rem;
	font-size: 0.6875rem;
	color: var(--epc-grey);
}

/* =============================================================
   Reduced motion
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
	.epc-deal,
	.epc-deal__glow,
	.epc-deal__accent,
	.epc-deal__icon-fill,
	.epc-pkg,
	.epc-pkg__accent,
	.epc-ratetable tbody tr {
		transition-duration: 0.01ms !important;
	}

	.epc-deal:hover,
	.epc-pkg:hover {
		transform: none;
	}
}

/* =============================================================
   Rate panel inside the fleet grid

   Seven cards leave two slots empty on the last row at three
   columns. The price list takes them, so the rates sit beside the
   vessels rather than in a band of their own further down.
   ============================================================= */

.epc-rates-panel {
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.5rem 1.5rem;
	overflow: hidden;
	/*
	 * Not --epc-gradient-surface. That runs corner to corner into #8D8F8E,
	 * which is fine across a 376px card but lands its silver end inside a
	 * panel this wide: the bottom right measured rgb(132,134,134) and the
	 * note sitting on it came out at 1.00:1, invisible. Same ink ramp, kept
	 * dark the whole way across.
	 */
	background: linear-gradient(150deg, var(--epc-ink-850) 0%, var(--epc-ink-950) 55%, var(--epc-black) 100%);
	/* Matches the yacht card's 3px frame so the row reads as one set. */
	border: 3px solid rgb(141 143 142 / 45%);
	border-radius: 18px;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

/* Two columns wide wherever the grid has two to give. */
@media (min-width: 560px) {
	.epc-rates-panel {
		grid-column: span 2;
	}
}

.epc-rates-panel__head {
	margin-bottom: 1.25rem;
	text-align: center;
}

.epc-rates-panel__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--epc-font-sans);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-rates-panel__title {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.epc-rates-panel__rule {
	display: block;
	width: 56px;
	height: 1px;
	margin: 0.85rem auto 0;
	background: linear-gradient(90deg, transparent, var(--epc-white), transparent);
}

/* Only the table scrolls sideways, never the page. */
.epc-rates-panel__scroll {
	flex: 1;
	overflow-x: auto;
	border: 1px solid var(--epc-line-soft);
	border-radius: 12px;
}

/*
 * Wide enough that every row stays on one line and the container scrolls
 * instead. At 20rem it very nearly fitted a phone, so rows half wrapped: the
 * code badge on one line and the yacht name under it, which reads worse than
 * an honest sideways scroll.
 */
.epc-rates-panel .epc-ratetable {
	min-width: 26rem;
	background: rgb(0 0 0 / 45%);
}

/*
 * On a phone all three columns fit once the panel padding comes in, the cell
 * padding tightens and "guests" is dropped. Scrolling the table sideways would
 * have hidden the price, which is the one column somebody came for.
 */
@media (max-width: 559.98px) {
	.epc-rates-panel {
		padding-inline: 1rem;
	}

	.epc-rates-panel .epc-ratetable {
		min-width: 0;
	}

	.epc-rates-panel .epc-ratetable :is(th, td) {
		padding: 0.6rem 0.5rem;
	}

	.epc-rates-panel .epc-ratetable__paxword {
		display: none;
	}

	.epc-rates-panel .epc-ratetable__code {
		min-width: 30px;
		padding-inline: 0.3rem;
	}

	/* The rate is the point of the table; never break it across two lines. */
	.epc-rates-panel .epc-ratetable__price,
	.epc-rates-panel .epc-ratetable thead th {
		white-space: nowrap;
	}
}

.epc-rates-panel .epc-ratetable :is(th, td) {
	padding: 0.7rem 0.9rem;
	font-size: 0.75rem;
}

/* --epc-grey measured 4.40:1 on this ground, just under AA. */
.epc-rates-panel .epc-ratetable tbody td {
	color: var(--epc-silver);
}

.epc-rates-panel .epc-ratetable thead th {
	font-size: 0.5625rem;
}

.epc-rates-panel .epc-ratetable__price {
	font-size: 0.8125rem;
}

.epc-rates-panel__note {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 1.1rem 0 0;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	line-height: 1.6;
	color: var(--epc-silver);
}

.epc-rates-panel__note i {
	margin-top: 0.2em;
	color: var(--epc-silver);
}