/*
 * Layout: containers, sections, surfaces, Hello fallback templates, pagination.
 */

/* Containers. */
.cm-container,
.cm-container--wide,
.cm-container--text {
	inline-size: 100%;
	max-inline-size: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.cm-container--wide {
	max-inline-size: calc(var(--container-wide) + 2 * var(--gutter));
}

.cm-container--text {
	max-inline-size: calc(var(--container-text) + 2 * var(--gutter));
}

/* Sections (theme fallback markup only). Elementor containers that carry .cm-section
 * (.e-con) set their own padding per breakpoint in the editor; a plain .cm-section rule
 * loads after Elementor's CSS with equal specificity and would silently override it. */
.cm-section:not(.e-con) {
	padding-block: var(--section-y);
}

.cm-section--tight:not(.e-con) {
	padding-block: calc(var(--section-y) * .55);
}

.cm-section:not(.e-con) + .cm-section:not(.e-con):not([class*="cm-surface--"]) {
	padding-block-start: 0;
}

/* A section whose widgets all rendered nothing (e.g. a transcript block on a video without a
 * transcript) would still show as an empty coloured band with its padding. */
.e-con.cm-section:not(:has(.elementor-widget)) {
	display: none;
}

.cm-stack > * + * {
	margin-block-start: var(--stack-gap, var(--space-6));
}

/* Surfaces. */
.cm-surface--ink {
	background-color: var(--color-ink);
	color: var(--color-on-ink);
	--cm-surface-muted: var(--color-on-ink-muted);
	--cm-surface-line: var(--color-line-ink);
	--cm-surface-card: var(--color-ink-2);
}

.cm-surface--ink-2 {
	background-color: var(--color-ink-2);
	color: var(--color-on-ink);
	--cm-surface-muted: var(--color-on-ink-muted);
	--cm-surface-line: var(--color-line-ink);
	--cm-surface-card: var(--color-ink-3);
}

.cm-surface--paper {
	background-color: var(--color-paper);
	color: var(--color-text);
	--cm-surface-muted: var(--color-muted);
	--cm-surface-line: var(--color-line);
	--cm-surface-card: var(--color-white);
}

.cm-surface--white {
	background-color: var(--color-white);
	color: var(--color-text);
	--cm-surface-muted: var(--color-muted);
	--cm-surface-line: var(--color-line);
	--cm-surface-card: var(--color-paper);
}

.cm-surface--ink h1,
.cm-surface--ink h2,
.cm-surface--ink h3,
.cm-surface--ink-2 h1,
.cm-surface--ink-2 h2,
.cm-surface--ink-2 h3 {
	color: var(--color-white);
}

/* Eyebrow / lead text. */
.cm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-end: var(--space-3);
	color: var(--color-accent);
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.5;
}

/* Uppercase tracked eyebrow only for Latin-script locales (never on Arabic script). */
:lang(en) .cm-eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cm-lead {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--cm-surface-muted, var(--color-muted));
}

.cm-display {
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	font-weight: 800;
}

/* -------------------------------------------------------------------------
 * Hello Elementor fallback templates (pages not built with Elementor, Woo pages).
 * Hello caps .site-main at 500–1140px; we use the project container instead.
 * ---------------------------------------------------------------------- */
html body:not([class*="elementor-page-"]) .site-main,
html body .page-header .entry-title {
	max-inline-size: calc(var(--container) + 2 * var(--gutter));
	padding-inline: var(--gutter);
	margin-inline: auto;
	inline-size: 100%;
}

html body:not([class*="elementor-page-"]) .site-main.cm-search-page {
	max-inline-size: none;
	padding-inline: 0;
}

html body .site-main.cm-404 {
	max-inline-size: none;
	padding: var(--section-y) var(--gutter);
}

body:not([class*="elementor-page-"]) .site-main {
	padding-block: clamp(24px, 4vw, 56px) var(--section-y);
	min-block-size: 50vh;
}

body:not([class*="elementor-page-"]) .site-main.cm-search-page {
	padding-block: 0;
}

.page-header {
	margin-block-end: clamp(16px, 3vw, 32px);
}

html body .page-header .entry-title {
	padding-inline: 0;
	margin-block: 0;
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: 800;
}

/* Readable fallback content for plain singular pages/posts. */
body:not([class*="elementor-page-"]):not(.cm-woo-flow) .site-main.post .page-content,
body.single-post:not([class*="elementor-page-"]) .page-content {
	max-inline-size: var(--container-text);
	font-size: var(--fs-lead);
	line-height: 1.7;
}

.page-content > *:first-child {
	margin-block-start: 0;
}

.site-main .post-tags {
	margin-block-start: var(--space-7);
	color: var(--color-muted);
	font-size: var(--fs-small);
}

/* Hello's wide/full alignments in direction-agnostic logical form. */
.alignwide {
	margin-inline: calc(-1 * min(80px, var(--gutter)));
}

/* Pagination (core + Woo). */
.navigation.pagination,
.woocommerce-pagination {
	margin-block-start: var(--space-8);
}

.nav-links,
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}

.nav-links .page-numbers,
.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: var(--tap);
	min-block-size: var(--tap);
	padding-inline: var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background-color: var(--color-white);
	color: var(--color-text);
	font-weight: 500;
	line-height: 1;
}

.nav-links a.page-numbers:hover,
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
	border-color: var(--color-text);
}

.nav-links .page-numbers.current,
.woocommerce-pagination ul.page-numbers li .page-numbers.current {
	background-color: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-white);
}

.woocommerce-pagination ul.page-numbers li {
	border: 0 !important;
}

/* -------------------------------------------------------------------------
 * Fallback 404 (template-parts/404.php) — cinematic dark.
 * ---------------------------------------------------------------------- */
.cm-404 {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-block-size: calc(100vh - var(--header-h) - var(--wp-admin--admin-bar--height, 0px));
	min-block-size: calc(100svh - var(--header-h) - var(--wp-admin--admin-bar--height, 0px));
	overflow: hidden;
	padding: var(--section-y) var(--gutter);
	text-align: center;
}

.cm-404__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(42% 55% at 50% 8%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 72%),
		radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, #3b5bdb 22%, transparent), transparent 75%),
		linear-gradient(180deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
}

.cm-404__glow::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 3px);
}

.cm-404__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: min(100%, 640px);
}

.cm-404__code {
	margin: 0;
	background: linear-gradient(180deg, var(--color-white) 30%, color-mix(in srgb, var(--color-white) 25%, transparent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(6rem, 3rem + 14vw, 11rem);
	font-weight: 800;
	line-height: 1;
}

.cm-404__title {
	margin: var(--space-4) 0 var(--space-3);
	color: var(--color-white);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.cm-404__text {
	max-inline-size: 30em;
	margin-block-end: var(--space-7);
	color: var(--color-on-ink-muted);
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
}

.cm-404__search {
	inline-size: 100%;
	margin-block-end: var(--space-6);
}

.cm-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

/* -------------------------------------------------------------------------
 * Fallback search results (template-parts/search.php).
 * ---------------------------------------------------------------------- */
.cm-search-page__hero {
	padding-block: clamp(40px, 7vw, 88px) clamp(32px, 5vw, 56px);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.cm-search-page__title {
	margin: 0 0 var(--space-6);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
}

.cm-search-page__form {
	max-inline-size: 720px;
}

.cm-search-page__body {
	padding-block: clamp(28px, 4vw, 48px) var(--section-y);
}

.cm-search-page__count {
	margin-block-end: var(--space-4);
	color: var(--color-muted);
	font-size: var(--fs-small);
}

.cm-result-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-result__link {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-3);
	padding-inline-end: var(--space-5);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background-color: var(--color-white);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cm-result__link:hover {
	border-color: color-mix(in srgb, var(--color-muted) 40%, var(--color-line));
	box-shadow: var(--shadow-md);
}

.cm-result__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--color-paper-2);
}

.cm-result__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.cm-result__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.cm-result__type {
	color: var(--color-accent);
	font-size: var(--fs-xs);
	font-weight: 700;
}

.cm-result__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
}

.cm-result__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--color-muted);
	font-size: var(--fs-small);
	line-height: 1.7;
}

.cm-result__go {
	display: inline-grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background-color: var(--color-paper);
	color: var(--color-text);
}

@media (max-width: 599px) {
	.cm-result__link {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: var(--space-3);
		padding-inline-end: var(--space-3);
	}

	.cm-result__go {
		display: none;
	}
}