/* ==========================================================================
   Alqima Urban — Layout: container + architectural grid
   4 cols (mobile) → 8 cols (tablet) → 12 cols (desktop).
   All placement uses logical properties, so RTL mirrors automatically.
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: max(var(--margin), env(safe-area-inset-left), env(safe-area-inset-right));
}

.grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	column-gap: var(--gutter);
}

/* Design QA: add the class `show-grid` to <html> (devtools) to overlay
   the column grid at the current breakpoint. */
.show-grid body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--margin);
	background:
		repeating-linear-gradient(
			to right,
			rgb(var(--rgb-burgundy) / 0.1) 0,
			rgb(var(--rgb-burgundy) / 0.1) calc((100% - (var(--grid-cols) - 1) * var(--gutter)) / var(--grid-cols)),
			transparent calc((100% - (var(--grid-cols) - 1) * var(--gutter)) / var(--grid-cols)),
			transparent calc((100% - (var(--grid-cols) - 1) * var(--gutter)) / var(--grid-cols) + var(--gutter))
		)
		content-box;
}

/* Hairline divider */
.rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--c-hairline);
}

/* Generic page shell (fallback templates) */
.page-shell {
	padding-block: calc(var(--header-h) + var(--s-9)) var(--s-section);
	min-height: 70svh;
}

.page-shell__head {
	padding-block-end: var(--s-7);
	margin-block-end: var(--s-7);
	border-block-end: 1px solid var(--c-hairline);
}

.page-shell__title {
	font-size: var(--fs-h1);
	font-weight: var(--fw-semibold);
	max-width: 18ch;
}

.page-shell .label {
	margin-block-end: var(--s-5);
}

/* 404 / empty results (Stage 08): one sentence + the main sections as an
   editorial index (hairline rows, arrow swap from interactions.css). */
.page-shell__lead {
	max-width: 46ch;
	margin-block-start: var(--s-5);
	font-size: var(--fs-lead);
	color: var(--c-text-2);
}

.page-shell__explore {
	max-width: 48rem;
}

.page-shell__links {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--c-hairline);
}

.page-shell__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	min-height: 3.5rem;
	border-block-end: 1px solid var(--c-hairline);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	color: var(--c-text);
	transition: color var(--dur-2) var(--ease-soft), padding var(--dur-3) var(--ease-out);
}

@media (hover: hover) {
	.page-shell__link:hover {
		padding-inline-start: 0.5rem;
		color: var(--c-accent);
	}
}

.entry + .entry {
	margin-block-start: var(--s-7);
	padding-block-start: var(--s-7);
	border-block-start: 1px solid var(--c-hairline);
}

.entry__title {
	font-size: var(--fs-h3);
}

.entry__excerpt,
.entry__content {
	max-width: 68ch;
	color: var(--c-text-2);
	margin-block-start: var(--s-4);
}