/*
 * LIEG — static page layout.
 *
 * Loaded only for `is_page()` / singular pages so the styles
 * pay their way. Composes with components.css (.page-header,
 * .entry-content) for the shared primitives.
 *
 * The page is a long-form reading surface: a centred header
 * with optional featured image, followed by a narrow column
 * of content constrained to var(--measure-prose) for
 * readability on large viewports.
 */

/* ── Page-layout wrapper ────────────────────────────────── */
.page-layout {
	display: flex;
	flex-direction: column;
}

/* ── Back link (top of the header) ─────────────────────────
 * Mirrors .single-back (single.css) — pill-shaped ghost button
 * with the chevron icon. Lives at the top of the page header,
 * above the title. */
.page-back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	color: var(--color-brand-primary);
	background: transparent;
	border: 1px solid rgba(158, 42, 110, 0.22);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	align-self: flex-start;
	margin-bottom: var(--space-4);
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.page-back:hover,
.page-back:focus-visible {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
	border-color: var(--color-brand-primary);
}

.page-back__icon {
	transition: transform var(--duration-fast) var(--ease-standard);
}

.page-back:hover .page-back__icon,
.page-back:focus-visible .page-back__icon {
	transform: translateX(-3px);
}

/* The header sits on a soft background and inherits the
 * gradient underline from .page-header (components.css). We
 * only override what we want different from the archive
 * header treatment. */
.page-layout__header {
	background: var(--color-bg-alt);
	padding-block: var(--space-7) var(--space-7);
}

/* Override the bottom margin from .page-header because the
 * page-header primitive reserves space below the gradient
 * underline; on a page, the featured image / content
 * sits below and we want a tight, controlled rhythm. */
.page-layout__header.page-header {
	margin-bottom: 0;
}

/* ── Optional featured image ────────────────────────────── */
.page-layout__feature {
	margin: var(--space-7) auto var(--space-6);
	padding-inline: var(--space-4);
	max-width: 100%;
}

@media ( min-width: 1024px ) {
	.page-layout__feature {
		padding-inline: var(--space-6);
		max-width: 1440px;
	}
}

.page-layout__feature-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

/* ── Body column (constrained reading measure) ──────────── */
.page-layout__body {
	padding-block: var(--space-5) var(--space-9);
	padding-inline: var(--space-4);
	max-width: 100%;
}

@media ( min-width: 1024px ) {
	.page-layout__body {
		padding-inline: var(--space-6);
		max-width: 1440px;
		margin-inline: auto;
	}
}

@media ( min-width: 1024px ) {
	.page-layout__body > .entry-content {
		max-width: var(--measure-prose);
	}
}

/* ── <!-nextpage> pagination ─────────────────────────────── */
.page-layout__pagination {
	margin-top: var(--space-7);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.page-layout__pagination-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-brand-soft-bg);
	color: var(--color-brand-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	border: 1px solid rgba(146, 56, 138, 0.2);
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.page-layout__pagination-item:hover,
.page-layout__pagination-item:focus-visible {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

.page-layout__pagination .current > .page-layout__pagination-item,
.page-layout__pagination-item.is-current {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}