/**
 * SEO Content Section Styles
 *
 * Matches Marina Casino design language:
 * - Cinzel for headings, Montserrat for body
 * - Dark background (#040505), beige (#d8c8a4) accents
 * - Layout rhythm consistent with why-marina and featured-mosaic sections
 *
 * @package Marina_Casino
 */

/* ── Section wrapper ──────────────────────────────────────────────────────── */

.seo-content-section {
	width: 100%;
	background-color: var(--color-background);
	padding: var(--spacing-4xl) var(--spacing-md);
	position: relative;
}

/* Thin top border — same decorative rule used across the theme */
.seo-content-section::before {
	content: '';
	display: block;
	width: calc(100% - var(--spacing-md) * 2);
	height: 1px;
	background-color: rgba(232, 226, 215, 0.25);
	position: absolute;
	top: 0;
	left: var(--spacing-md);
}

/* ── Container — editorial column, not full-bleed ─────────────────────────── */

.seo-content-section__container {
	width: 100%;
	max-width: 880px;
	/* Left-aligned, same feel as .why-marina-content */
}

.seo-content-section__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

/* ── Headings ─────────────────────────────────────────────────────────────── */

.seo-content-section__h2 {
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);        /* 2.5rem */
	font-weight: 400;
	color: var(--color-white);
	letter-spacing: var(--letter-spacing-tight);
	line-height: var(--line-height-tight);
	margin: 0;
	/* Beige underline accent — mirrors facilities / bar headings */
	padding-bottom: var(--spacing-sm);
	border-bottom: 1px solid rgba(216, 200, 164, 0.35);
}

.seo-content-section__h2:first-child {
	/* First H2 sits flush against the top separator */
	margin-top: 0;
}

.seo-content-section__h3 {
	font-family: var(--font-heading);
	font-size: var(--font-size-h3);        /* 1.75rem */
	font-weight: 400;
	color: var(--color-beige);             /* #d8c8a4 — accent colour */
	letter-spacing: var(--letter-spacing-tight);
	line-height: var(--line-height-tight);
	margin: 0;
}

/* ── Body paragraphs ──────────────────────────────────────────────────────── */

.seo-content-section__p {
	font-family: var(--font-body);
	font-size: var(--font-size-large);     /* 16px */
	font-weight: 400;
	color: var(--color-light-white);       /* #c1c1c1 */
	line-height: 1.75;
	margin: 0;
	max-width: 72ch;
}

/* ── Inline links inside paragraphs ──────────────────────────────────────── */

.seo-content-section__link {
	color: var(--color-beige);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(216, 200, 164, 0.45);
	transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.seo-content-section__link:hover,
.seo-content-section__link:focus-visible {
	color: var(--color-white);
	text-decoration-color: rgba(252, 252, 252, 0.65);
}

/* ── SEO image ────────────────────────────────────────────────────────────── */

.seo-content-section__figure {
	margin: 0;
	width: 100%;
	overflow: hidden;
}

.seo-content-section__image {
	width: 100%;
	height: clamp(220px, 30vw, 420px);
	object-fit: cover;
	display: block;
	/* Subtle darkening to keep the dark-room aesthetic */
	filter: brightness(0.85);
	transition: filter var(--transition-slow);
}

.seo-content-section__figure:hover .seo-content-section__image {
	filter: brightness(0.95);
}

/* ── Spacing rhythm: add extra top gap before each H2/H3 in a flow ────────── */

.seo-content-section__body > .seo-content-section__h2 + *,
.seo-content-section__body > .seo-content-section__h3 + * {
	margin-top: calc(var(--spacing-xs) * -0.5);
}

.seo-content-section__body > .seo-content-section__p + .seo-content-section__h2,
.seo-content-section__body > .seo-content-section__p + .seo-content-section__h3,
.seo-content-section__body > .seo-content-section__figure + .seo-content-section__h2,
.seo-content-section__body > .seo-content-section__figure + .seo-content-section__h3 {
	margin-top: var(--spacing-sm);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.seo-content-section {
		padding: var(--spacing-xl) var(--spacing-sm);
	}

	.seo-content-section::before {
		width: calc(100% - var(--spacing-sm) * 2);
		left: var(--spacing-sm);
	}

	.seo-content-section__h2 {
		font-size: 1.85rem;
	}

	.seo-content-section__h3 {
		font-size: 1.35rem;
	}

	.seo-content-section__p {
		font-size: var(--font-size-base);  /* 14px on mobile */
	}

	.seo-content-section__image {
		height: clamp(180px, 55vw, 300px);
	}
}