/* ---- layout ---------------------------------------------------------- */

.el-section {
	padding-block: var(--el-section-y);
}
.el-section--warm { background: var(--el-color-bg-warm); }
.el-section--cool { background: var(--el-color-bg-cool); }

.el-container {
	max-width: var(--el-container);
	margin-inline: auto;
	padding-inline: var(--el-space-5);
}

/* universal wide inner — pairs with .el-section for a full-width band with a
   fluid, centred content column (max 1440). The standard section everywhere. */
.el-container--wide {
	width: 100%;
	max-width: var(--el-container-wide);
	margin-inline: auto;
	padding-inline: var(--el-gutter);
}

/* ---- full bleed ------------------------------------------------------
   Escapes any width-constrained ancestor (e.g. a theme's `.site-main`
   max-width) and reaches the viewport edge, the same way a core `alignfull`
   block does. Put `.el-bleed` on the section; cap the content on `.el-bleed__inner`.

   The margin trick assumes the element is centred in the viewport — true inside
   a centred parent. If it ever sits inside a NARROWER, non-centred wrapper (some
   ACF flexible-content rows), the bleed goes off-centre: keep those wrappers
   full-width, unpadded, and free of `overflow`/`transform`, and push all width
   control down to `__inner`.

   `100vw` includes the scrollbar on some browsers, which can add a few px of
   horizontal scroll — the `overflow-x: hidden` guard below swallows it for the
   whole site in one place. */
.el-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.el-bleed__inner {
	width: 100%;
	max-width: var(--el-container-wide);
	margin-inline: auto;
	padding-inline: var(--el-gutter);
}

/* Narrower content cap for bleed sections that want the standard 1180 column
   rather than the wide 1440 (text-led sections, not media bands). */
.el-bleed__inner--narrow {
	max-width: var(--el-container);
}

html,
body {
	overflow-x: hidden;
}

/* section header: eyebrow > heading > optional sub, with explore link inline */
.el-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--el-space-5);
	flex-wrap: wrap;
	margin-bottom: var(--el-space-6);
}

/* ---- eyebrow (the uppercase letterspaced label + hairline signature) -- */

.el-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--el-space-2);
	font-family: var(--el-font-display);
	font-size: var(--el-text-xs);
	font-weight: var(--el-weight-semibold);
	letter-spacing: var(--el-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--el-color-text-soft);
	margin: 0 0 var(--el-space-3);
}
/* the thin rule that trails the menu-style eyebrows */
.el-eyebrow--ruled::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--el-color-rule);
	min-width: var(--el-space-6);
}

/* ---- headings -------------------------------------------------------- */

.el-h1, .el-h2, .el-h3 {
	font-family: var(--el-font-display);
	color: var(--el-color-text);
	letter-spacing: var(--el-tracking-tight);
	line-height: var(--el-leading-tight);
	margin: 0;
}
.el-h1 { font-size: var(--el-text-2xl); font-weight: var(--el-weight-bold); }
.el-h2 { font-size: var(--el-text-xl);  font-weight: var(--el-weight-bold); }
.el-h3 { font-size: var(--el-text-lg);  font-weight: var(--el-weight-semibold); letter-spacing: 0; }

.el-sub {
	font-family: var(--el-font-body);
	font-size: var(--el-text-base);
	line-height: var(--el-leading-snug);
	color: var(--el-color-text-muted);
	max-width: 60ch;
	margin: var(--el-space-2) 0 0;
}

.el-prose {
	font-family: var(--el-font-body);
	font-size: var(--el-text-base);
	line-height: var(--el-leading-body);
	color: var(--el-color-text-soft);
}

/* ---- buttons --------------------------------------------------------- */

.el-btn {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--el-space-2);
	font-family: var(--el-font-display);
	font-size: var(--el-text-base);
	font-weight: var(--el-weight-semibold);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 1.5px solid transparent;
	border-radius: var(--el-radius-pill);
	padding: 0.75rem 1.5rem;
	transition: background var(--el-duration) var(--el-ease),
	            color var(--el-duration) var(--el-ease),
	            transform var(--el-duration) var(--el-ease);
}
.el-btn:focus-visible {
	outline: var(--el-focus-ring);
	outline-offset: var(--el-focus-offset);
}

/* primary — solid pine, the references' add-to-cart */
.el-btn--primary {
	background: var(--el-color-action);
	color: var(--el-color-on-action);
}
.el-btn--primary:hover { background: var(--el-color-action-hover); }

/* secondary — outlined */
.el-btn--secondary {
	background: var(--el-color-surface);
	color: var(--el-color-text);
	border-color: var(--el-color-text);
}
.el-btn--secondary:hover {
	background: var(--el-color-text);
	color: var(--el-color-bg);
}

/* ghost — for image overlays */
.el-btn--ghost {
	background: rgba(255, 255, 255, 0.92);
	color: var(--el-color-text);
}
.el-btn--ghost:hover { background: var(--el-white); }

.el-btn--sm  { padding: 0.5rem 1rem;   font-size: var(--el-text-sm); }
.el-btn--lg  { padding: 0.9rem 1.75rem; }
.el-btn--block { width: 100%; }

/* decorative button — a span styled like a button (non-interactive) */
.el-cta {
	display: inline-block;
	font-family: var(--el-font-display);
	font-size: var(--el-text-sm);
	font-weight: var(--el-weight-semibold);
	border: 1.5px solid var(--el-color-text);
	border-radius: var(--el-radius-pill);
	padding: 0.45rem 1rem;
	color: var(--el-color-text);
	background: transparent;
	transition: background var(--el-duration) var(--el-ease),
	            color var(--el-duration) var(--el-ease);
}

/* ---- surfaces -------------------------------------------------------- */

.el-card {
	background: var(--el-color-surface);
	border: var(--el-card-border);
	border-radius: var(--el-radius);
	box-shadow: var(--el-card-shadow);
	transition: transform var(--el-duration) var(--el-ease),
	            box-shadow var(--el-duration) var(--el-ease);
}
.el-card--interactive:hover {
	transform: var(--el-lift);
	box-shadow: var(--el-shadow-hover);
}

/* hairline divider */
.el-rule {
	border: 0;
	border-top: 1px solid var(--el-color-rule);
	margin: 0;
}

/* ---- utility --------------------------------------------------------- */

.el-meta {
	font-family: var(--el-font-mono);
	font-size: var(--el-text-sm);
	color: var(--el-color-text-muted);
	letter-spacing: 0.02em;
}