/* =============================================================
   Elite Pearl Charter — call-to-action band

   Spans the same width as the fleet grid above, so the panel's
   left and right edges line up with the yacht cards.
   Copy on the left, actions on the right from 1024px.
   ============================================================= */

.epc-cta {
	background: var(--epc-black);
}

/*
 * Identical max-width and inline padding to .epc-fleet__inner, which is what
 * makes the panel edges align with the cards above it.
 */
.epc-cta__inner {
	width: 100%;
	max-width: var(--epc-container);
	margin-inline: auto;
	padding: 0 var(--epc-gutter) 4rem;
}

@media (min-width: 768px) {
	.epc-cta__inner {
		padding-bottom: 5.5rem;
	}
}

@media (min-width: 1200px) {
	.epc-cta__inner {
		padding-bottom: 7rem;
	}
}

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

.epc-cta__panel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	overflow: hidden;
	padding: 2.25rem 1.5rem 2.5rem;
	background: var(--epc-gradient-surface);
	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: 768px) {
	.epc-cta__panel {
		padding: 3rem;
	}
}

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

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

/* Brand texture, same motif as the filler tile, faded out behind the copy. */
.epc-cta__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'%3E%3Ccircle cx='32' cy='32' r='21'/%3E%3Cpath d='M32 0v64M0 32h64'/%3E%3C/g%3E%3Cpath d='M32 16 Q33.4 30.6 48 32 Q33.4 33.4 32 48 Q30.6 33.4 16 32 Q30.6 30.6 32 16 Z' fill='%23ffffff' fill-opacity='0.10'/%3E%3C/svg%3E");
	background-size: 64px 64px;
	-webkit-mask-image: linear-gradient(to left, rgb(0 0 0) 0%, rgb(0 0 0 / 0%) 62%);
	mask-image: linear-gradient(to left, rgb(0 0 0) 0%, rgb(0 0 0 / 0%) 62%);
	pointer-events: none;
}

.epc-cta__copy,
.epc-cta__actions {
	position: relative;
	z-index: 1;
}

/* --- Copy --------------------------------------------------------- */

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

.epc-cta__heading {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.375rem, 4vw, 2.125rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.epc-cta__lede {
	max-width: 60ch;
	margin: 0.9rem 0 0;
	font-family: var(--epc-font-sans);
	font-size: clamp(0.9375rem, 2vw, 1.0625rem);
	font-weight: 500;
	line-height: 1.8;
	color: var(--epc-nav-idle);
}

.epc-cta__text {
	max-width: 68ch;
	margin: 0.9rem 0 0;
	font-family: var(--epc-font-sans);
	font-size: clamp(0.8125rem, 1.9vw, 0.9375rem);
	line-height: 1.9;
	color: var(--epc-grey);
	text-wrap: pretty;
}

/* --- Tick points ---------------------------------------------------- */

.epc-cta__points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.epc-cta__points li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--epc-font-sans);
	font-size: clamp(0.75rem, 1.7vw, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--epc-white);
}

.epc-cta__points i {
	font-size: 0.8125rem;
	color: var(--epc-silver);
}

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

.epc-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
	background: rgb(0 0 0 / 45%);
	border: 1px solid var(--epc-line);
	border-radius: 14px;
	backdrop-filter: blur(4px);
}

@media (min-width: 1200px) {
	.epc-cta__actions {
		padding: 1.75rem;
	}
}

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

/* Buttons fill the panel so both are equally weighted targets. */
.epc-cta__btn {
	width: 100%;
}

.epc-cta__note {
	margin: 0.35rem 0 0;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--epc-grey);
	text-wrap: balance;
}