/* =============================================================
   Elite Pearl Charter — long-form SEO content block

   Editorial layout: constrained reading measure for prose, with
   panel and card grids breaking it up so a long page of text
   stays scannable.
   ============================================================= */

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

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

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

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

/* --- Intro ---------------------------------------------------------- */

/*
 * Left-aligned, unlike the centred intros elsewhere on the page. This is a
 * long-form editorial block, so everything in it shares a single left edge.
 */
.epc-content__intro {
	margin-bottom: 2rem;
}

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

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

/* --- Prose ----------------------------------------------------------- */

/*
 * Capped at a comfortable measure but aligned to the LEFT edge of the section,
 * not centred. The panels and card grids below span the full container, so a
 * centred prose column would sit inset from them and every left edge in the
 * section would disagree. Left-aligning gives one shared edge throughout; the
 * copy just wraps earlier than the cards do.
 */
.epc-content__prose {
	max-width: 72ch;
	margin-inline: 0 auto;
}

.epc-content__prose p {
	margin: 0 0 1.1rem;
	font-family: var(--epc-font-sans);
	font-size: clamp(0.875rem, 1.9vw, 0.9375rem);
	line-height: 1.95;
	color: var(--epc-nav-idle);
	text-wrap: pretty;
}

.epc-content__prose p:last-child {
	margin-bottom: 0;
}

.epc-content__prose h4 {
	margin: 2rem 0 0.85rem;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--epc-white);
}

/* The "What We Offer" run of seven short paragraphs reads better split. */
@media (min-width: 1024px) {
	.epc-content__prose--cols {
		max-width: none;
		column-count: 2;
		column-gap: 3.5rem;
	}

	.epc-content__prose--cols p {
		break-inside: avoid;
	}
}

/* --- Blocks ----------------------------------------------------------- */

.epc-content__block {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--epc-line-soft);
}

@media (min-width: 768px) {
	.epc-content__block {
		margin-top: 3.5rem;
		padding-top: 3rem;
	}
}

.epc-content__sub {
	max-width: 72ch;
	/* Same left edge as the prose and the card grids. */
	margin: 0 auto 1.5rem 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.25rem, 3.2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--epc-white);
	text-wrap: balance;
}

/* --- Three stacked panels ---------------------------------------------- */

.epc-content__pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 2rem;
}

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

.epc-content__panel {
	padding: 1.5rem 1.35rem;
	background: var(--epc-gradient-surface);
	border: 1px solid rgb(141 143 142 / 32%);
	border-radius: 14px;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
	transition: border-color 520ms var(--epc-ease-soft);
}

.epc-content__panel:hover {
	border-color: rgb(255 255 255 / 50%);
}

.epc-content__panel h4 {
	margin: 0 0 0.75rem;
	font-family: var(--epc-font-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--epc-white);
}

.epc-content__panel p {
	margin: 0;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	line-height: 1.85;
	color: var(--epc-nav-idle);
	text-wrap: pretty;
}

/* --- Card grids --------------------------------------------------------- */

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

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

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

.epc-content__card {
	position: relative;
	padding: 1.6rem 1.25rem 1.4rem;
	background: var(--epc-ink-950);
	border: 1px solid var(--epc-line-soft);
	border-radius: 14px;
	transition: transform 520ms var(--epc-ease-soft),
		border-color 520ms var(--epc-ease-soft);
}

.epc-content__card:hover {
	transform: translateY(-4px);
	border-color: rgb(255 255 255 / 50%);
}

.epc-content__card h5 {
	margin: 0 0 0.55rem;
	font-family: var(--epc-font-serif);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--epc-white);
}

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

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

/* Gradient on its own layer — background-image cannot be transitioned. */
.epc-content__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-content__icon i {
	position: relative;
	z-index: 1;
}

.epc-content__card:hover .epc-content__icon {
	color: var(--epc-black);
	border-color: transparent;
}

.epc-content__card:hover .epc-content__icon::before {
	opacity: 1;
}

/* Landmark cards use a ghost index instead of an icon. */
.epc-content__index {
	display: block;
	margin-bottom: 0.6rem;
	font-family: var(--epc-font-serif);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgb(255 255 255 / 35%);
	transition: -webkit-text-stroke-color 520ms var(--epc-ease-soft);
}

.epc-content__card:hover .epc-content__index {
	-webkit-text-stroke-color: rgb(255 255 255 / 80%);
}

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

@media (prefers-reduced-motion: reduce) {
	.epc-content__panel,
	.epc-content__card,
	.epc-content__icon,
	.epc-content__icon::before,
	.epc-content__index {
		transition-duration: 0.01ms !important;
	}

	.epc-content__card:hover {
		transform: none;
	}
}

/* --- Text + image splits -------------------------------------------------- */

/*
 * Fills the empty column to the right of the 72ch prose measure. Stacks below
 * 1024px, where there is no spare width and an image beside the text would
 * squeeze both.
 */
.epc-content__split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}

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

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

/* The prose inside a split fills its own column rather than capping again. */
.epc-content__split .epc-content__prose {
	max-width: none;
}

.epc-content__figure {
	margin: 0;
	overflow: hidden;
	border: 1px solid rgb(141 143 142 / 35%);
	border-radius: 14px;
	box-shadow:
		0 12px 34px rgb(0 0 0 / 40%),
		inset 0 1px 0 rgb(255 255 255 / 6%);
}

@media (min-width: 1024px) {
	.epc-content__figure {
		/* Stays alongside the copy while the longer column scrolls past. */
		position: sticky;
		top: calc(var(--epc-header-h) + 1.5rem);
	}
}

.epc-content__figure img {
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * 16:9 matches the yacht sources (1.78, 1.78, 1.89, 1.78, 1.79), so cover
	 * crops essentially nothing and no vessel gets cut out of frame.
	 */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 760ms var(--epc-ease-soft);
}

.epc-content__figure:hover img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.epc-content__figure img {
		transition-duration: 0.01ms !important;
	}

	.epc-content__figure:hover img {
		transform: none;
	}
}

/*
 * Alternating sides: image right, left, right, left down the section.
 *
 * The flip is done with explicit grid placement, not by reordering the markup,
 * so the DOM order stays prose-then-image everywhere. Screen readers and the
 * tab order therefore always reach the copy first, and on mobile every block
 * stacks text-above-image regardless of which side it takes on desktop.
 */
@media (min-width: 1024px) {
	.epc-content__split--reverse {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}

	.epc-content__split--reverse .epc-content__figure {
		grid-column: 1;
		grid-row: 1;
	}

	.epc-content__split--reverse .epc-content__prose {
		grid-column: 2;
		grid-row: 1;
	}
}

/* Three-up variant, for card sets of three rather than four. */
@media (min-width: 1024px) {
	.epc-content__grid--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Eyebrow above a section heading. */
.epc-content__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);
}

/* Button row inside a prose column. */
.epc-nye__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

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