/**
 * INTERLUX — Layout
 *
 * Containers, page shell, and shared content blocks.
 * Header lives in header.css; footer in footer.css.
 */

/* -------------------------------------------------------------------------
 * Containers
 *
 * One master grid. Width-based rather than padding-based so a section can put
 * its own background full-bleed while its copy stays on the page grid.
 * ---------------------------------------------------------------------- */

.ilx-container,
.ilx-container--wide,
.ilx-container--narrow {
	width: min(calc(100% - 2 * var(--ilx-gutter)), var(--ilx-content-max));
	margin-inline: auto;
}

.ilx-container--wide {
	width: min(calc(100% - 2 * var(--ilx-gutter)), var(--ilx-page-max));
}

.ilx-container--narrow {
	width: min(calc(100% - 2 * var(--ilx-gutter)), var(--ilx-reading-max));
}

/* -------------------------------------------------------------------------
 * Bleed grid
 *
 * The page's asymmetry primitive. `--ilx-rail` is exactly the margin the
 * master container leaves, used here as a real grid track — so one column can
 * run to the viewport edge while the other stays aligned with every other
 * section. No negative margins, no `100vw`, therefore no horizontal overflow.
 *
 *   .ilx-bleed            copy on the grid, image bleeding right
 *   .ilx-bleed--start     image bleeding left, copy on the grid
 * ---------------------------------------------------------------------- */

.ilx-bleed {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ilx-space-5);
	align-items: center;
}

.ilx-bleed__body {
	min-width: 0;
	width: min(100% - 2 * var(--ilx-gutter), var(--ilx-content-max));
	margin-inline: auto;
}

.ilx-bleed__media {
	min-width: 0;
	margin: 0;
}

@media (min-width: 1000px) {
	.ilx-bleed {
		/* rail · copy · image-to-the-edge — a 42/58 split of the usable width */
		grid-template-columns: var(--ilx-rail) minmax(0, 0.82fr) minmax(0, 1.18fr);
		gap: clamp(2.5rem, 1rem + 4vw, 5.5rem);
	}

	.ilx-bleed__body {
		grid-column: 2;
		grid-row: 1;
		width: auto;
		margin-inline: 0;
	}

	.ilx-bleed__media {
		grid-column: 3;
		grid-row: 1;
	}

	.ilx-bleed--start {
		grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr) var(--ilx-rail);
	}

	/*
	 * Rows are pinned explicitly. In the mirrored variant the media sits in an
	 * earlier column than the body that precedes it in the DOM, and grid's
	 * sparse auto-placement never moves backwards — without `grid-row` it drops
	 * the image onto a second row instead of beside the text.
	 */
	.ilx-bleed--start .ilx-bleed__media {
		grid-column: 1;
		grid-row: 1;
	}

	.ilx-bleed--start .ilx-bleed__body {
		grid-column: 2;
		grid-row: 1;
	}
}

/* -------------------------------------------------------------------------
 * Page shell
 * ---------------------------------------------------------------------- */

.ilx-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.ilx-site__content {
	flex: 1 0 auto;
	padding-block: var(--ilx-section-gap-tight);
}

.ilx-page-header {
	margin-bottom: var(--ilx-space-lg);
}

.ilx-page-header__eyebrow {
	display: block;
	margin-bottom: var(--ilx-space-2xs);
	color: var(--ilx-color-muted);
	font-size: var(--ilx-label-size);
	font-weight: var(--ilx-weight-semibold);
	letter-spacing: var(--ilx-tracking-label);
	text-transform: uppercase;
}

.ilx-page-header__title {
	margin-bottom: 0;
}

/* Long-form article body */
.ilx-entry-content > * + * {
	margin-top: var(--ilx-space-sm);
}

.ilx-entry-content > h2,
.ilx-entry-content > h3 {
	margin-top: var(--ilx-space-lg);
}

/* -------------------------------------------------------------------------
 * Section title
 *
 * Also the render target for the legacy `[basel_title]` shortcode still
 * present in product descriptions — see interlux-core/inc/legacy-shortcodes.php.
 * ---------------------------------------------------------------------- */

.ilx-section-title {
	margin-block: var(--ilx-space-lg) var(--ilx-space-md);
	text-align: center;
}

.ilx-section-title__text {
	margin-bottom: var(--ilx-space-3xs);
	font-size: var(--ilx-text-h2);
	font-weight: var(--ilx-weight-light);
}

.ilx-section-title__subtitle {
	margin: 0;
	color: var(--ilx-color-muted);
	font-size: var(--ilx-text-xs);
	letter-spacing: var(--ilx-tracking-label);
	text-transform: uppercase;
}

.ilx-section-title--small .ilx-section-title__text {
	font-size: var(--ilx-text-h3);
	font-weight: var(--ilx-weight-medium);
}

/* -------------------------------------------------------------------------
 * Notices / placeholders used during the rebuild
 * ---------------------------------------------------------------------- */

.ilx-notice {
	padding: var(--ilx-space-sm) var(--ilx-space-md);
	border-left: 2px solid var(--ilx-color-accent);
	background-color: var(--ilx-color-surface-alt);
	color: var(--ilx-color-text);
	font-size: var(--ilx-text-small);
}

/* -------------------------------------------------------------------------
 * Posts — plain list, redesigned later
 * ---------------------------------------------------------------------- */

.ilx-post-list {
	display: grid;
	gap: var(--ilx-space-lg);
}

.ilx-post-card__title {
	margin-bottom: var(--ilx-space-3xs);
	font-size: var(--ilx-text-h3);
}

.ilx-post-card__title a {
	text-decoration: none;
}

.ilx-post-card__meta {
	color: var(--ilx-color-muted);
	font-size: var(--ilx-text-xs);
	letter-spacing: var(--ilx-tracking-nav);
	text-transform: uppercase;
}

.ilx-pagination {
	margin-top: var(--ilx-space-xl);
}

.ilx-pagination .page-numbers {
	display: inline-block;
	padding: var(--ilx-space-3xs) var(--ilx-space-2xs);
	text-decoration: none;
}

.ilx-pagination .current {
	color: var(--ilx-color-accent-strong);
	font-weight: var(--ilx-weight-semibold);
}

/* -------------------------------------------------------------------------
 * Breadcrumbs
 *
 * Shared by the theme breadcrumb and WooCommerce's, which is filtered to emit
 * the same markup.
 * ---------------------------------------------------------------------- */

.ilx-breadcrumbs {
	margin-bottom: var(--ilx-space-sm);
}

.ilx-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilx-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	color: var(--ilx-color-muted);
	font-size: var(--ilx-text-xs);
	letter-spacing: var(--ilx-tracking-nav);
}

.ilx-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.35rem;
	color: var(--ilx-color-line-strong);
}

.ilx-breadcrumbs a {
	color: var(--ilx-color-muted);
	text-decoration: none;
	transition: color var(--ilx-transition);
}

.ilx-breadcrumbs a:hover {
	color: var(--ilx-color-ink);
}

.ilx-breadcrumbs [aria-current="page"] {
	color: var(--ilx-color-ink);
}

/* -------------------------------------------------------------------------
 * Page header
 * ---------------------------------------------------------------------- */

.ilx-page-header__lead {
	max-width: 58ch;
	margin-top: var(--ilx-space-sm);
	color: var(--ilx-color-muted);
	font-size: var(--ilx-text-lead);
	font-weight: var(--ilx-weight-light);
	line-height: var(--ilx-leading-normal);
}

/* -------------------------------------------------------------------------
 * Empty state
 * ---------------------------------------------------------------------- */

.ilx-empty {
	max-width: var(--ilx-container-narrow);
	margin-inline: auto;
	padding-block: var(--ilx-space-xl);
	text-align: center;
}

.ilx-empty__title {
	margin-bottom: var(--ilx-space-2xs);
	font-size: var(--ilx-text-h3);
}

.ilx-empty__text {
	margin-bottom: var(--ilx-space-md);
	color: var(--ilx-color-muted);
}

/* -------------------------------------------------------------------------
 * Eyebrow — the small tracked label above a heading
 * ---------------------------------------------------------------------- */

.ilx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	color: var(--ilx-color-muted);
	font-size: var(--ilx-label-size);
	font-weight: var(--ilx-weight-semibold);
	letter-spacing: var(--ilx-tracking-label);
	text-transform: uppercase;
}

.ilx-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background-color: var(--ilx-color-accent);
}

.ilx-eyebrow--plain::before {
	display: none;
}