/* ==========================================================================
   Base typography & layout primitives
   ========================================================================== */

.container {
	max-width: var(--evo-container);
	margin-inline: auto;
	padding-inline: 24px;
}
.container--narrow { max-width: var(--evo-container-narrow); }

.section { padding-block: 88px; }
.section--dark {
	background: var(--evo-gradient-dark);
	color: var(--evo-text-on-dark);
}
.section--tight { padding-block: 48px; }

h1, h2, h3, h4, h5, h6 {
	font-weight: 800;
	line-height: 1.12;
	margin: 0 0 0.5em;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 1.7rem + 2vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); }

p { margin: 0 0 1.1em; color: var(--evo-text-muted); }
.section--dark p { color: var(--evo-text-on-dark-muted); }

.section-heading { max-width: 640px; margin-bottom: 40px; }
.section-heading__eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: var(--evo-tracking-wide);
	text-transform: uppercase;
	color: var(--evo-accent);
	margin-bottom: 10px;
}
.section-heading__title { margin: 0; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--evo-dark);
	color: #fff;
	padding: 12px 20px;
	z-index: 10000;
}
.skip-link:focus { left: 16px; top: 16px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var(--evo-accent);
	outline-offset: 2px;
}

/* Breadcrumbs */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 16px; font-size: 0.85rem; }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; opacity: 0.5; }
.breadcrumbs a { opacity: 0.75; }
.breadcrumbs a:hover { opacity: 1; }

/* Page banner (top-of-page dark band, see template-parts/global/page-banner.php) */
.page-banner {
	position: relative;
	padding-top: calc(var(--evo-header-height) + 64px);
	padding-bottom: 56px;
	background: var(--evo-gradient-dark);
	background-size: cover;
	background-position: center;
	color: var(--evo-text-on-dark);
}
.page-banner--image::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,22,28,0.75) 0%, rgba(20,22,28,0.55) 100%);
}
.page-banner__scrim { position: absolute; inset: 0; }
.page-banner__content { position: relative; z-index: 1; }
.page-banner__content--compact { padding-top: calc(var(--evo-header-height) + 24px); padding-bottom: 24px; }
.page-banner .breadcrumbs a,
.page-banner .breadcrumbs span { color: var(--evo-text-on-dark-muted); }
.page-banner__title { margin: 0; color: #fff; }
.page-banner__subtitle { color: var(--evo-text-on-dark-muted); max-width: 640px; margin-top: 12px; }

/* Blog / archive */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
	padding-block: 56px;
	list-style: none;
	margin: 0;
}
.post-grid--mixed { padding-block: 0 56px; }
.post-grid--mixed .product-card { list-style: none; }
.post-card { background: var(--evo-white); border-radius: var(--evo-radius-md); overflow: hidden; border: 1px solid var(--evo-border); }
.post-card__media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--evo-dark); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--evo-speed-slow) var(--evo-ease); }
.post-card__media:hover img { transform: scale(1.05); }
.post-card__body { padding: 20px; }
.post-card__title { font-size: 1.1rem; margin: 8px 0; }
.post-card__title a:hover { color: var(--evo-accent); }
.post-meta { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--evo-text-muted); display: flex; gap: 10px; }
.single-post { padding-block: 56px; }
.single-post__content :is(h2, h3) { margin-top: 1.6em; }
.single-post__tags { margin-top: 32px; display: flex; gap: 8px; flex-wrap: wrap; }
.single-post__tags a { padding: 6px 12px; border: 1px solid var(--evo-border); border-radius: 999px; font-size: 0.8rem; }

.page-content { padding-block: 56px; }
.page-content--404 { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.empty-state { padding-block: 80px; text-align: center; }

@media (max-width: 782px) {
	.section { padding-block: 56px; }
	.page-banner { padding-top: calc(var(--evo-header-height) + 32px); padding-bottom: 36px; }
}