.epia-section-heading {
	margin: 3rem auto 1.5rem;
	max-width: 1200px;
	padding-inline: 1.5rem;
	font-size: 1.375rem;
}

.epia-section-more {
	max-width: 1200px;
	margin: 0.75rem auto 0;
	padding-inline: 1.5rem;
}

.epia-section-more a {
	font-weight: 600;
	text-decoration: none;
}

/* Hero */
.epia-hero-band {
	padding: 4rem 1.5rem 3rem;
	text-align: center;
	background: linear-gradient(135deg, var(--epia-primary), var(--epia-accent));
	color: #ffffff;
}

.epia-hero-band h1,
.epia-hero-band p {
	color: #ffffff;
}

.epia-hero-band h1 {
	max-width: 20ch;
	margin-inline: auto;
}

.epia-hero-band > p {
	max-width: 60ch;
	margin: 0.75rem auto 2rem;
	opacity: 0.92;
}

.epia-hero-search {
	display: flex;
	gap: 0.5rem;
	max-width: 560px;
	margin: 0 auto 1.75rem;
}

.epia-hero-search input[type="search"] {
	flex: 1;
	padding: 0.85rem 1.1rem;
	border-radius: var(--epia-radius-md);
	border: none;
	font-size: 1rem;
}

.epia-hero-search button {
	padding: 0.85rem 1.5rem;
	border: none;
	border-radius: var(--epia-radius-md);
	background-color: #ffffff;
	color: var(--epia-primary);
	font-weight: 700;
	cursor: pointer;
}

.epia-hero-band .wp-block-button__link {
	background-color: #ffffff;
	color: var(--epia-primary);
}

.epia-hero-band .is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: #ffffff;
	border: 1px solid #ffffff;
}

/* Popular categories */
.epia-category-tiles {
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: 1.5rem;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

@media (max-width: 782px) {
	.epia-category-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

.epia-category-tile {
	padding: 1.25rem;
	text-align: center;
}

.epia-category-tile a {
	text-decoration: none;
	font-weight: 600;
	color: var(--epia-text);
}

.epia-category-tile a:hover {
	color: var(--epia-primary);
}

/* Featured grid. Core's .is-flex-container.columns-N system (see
   wp-includes/blocks/post-template/style.css) uses fixed per-item
   widths with flex-wrap and no flex-grow, so it doesn't redistribute
   leftover row space — at viewport widths where 3 fixed-width items
   don't fit but 2 do, you get 2 cards + a gap with the 3rd orphaned
   on its own row. A real CSS grid is the correct tool here; the
   !important on the <li> width is a deliberate, targeted override of
   that one specific core rule (chosen for certainty over trying to
   out-specificity a selector chain that caused an unrelated layout
   collapse last time), not a general pattern used elsewhere. */
.epia-featured-grid .wp-block-post-template.is-flex-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.epia-featured-grid .wp-block-post-template.is-flex-container > li {
	width: auto !important;
	margin: 0;
}

@media (max-width: 782px) {
	.epia-featured-grid .wp-block-post-template.is-flex-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.epia-featured-grid .wp-block-post-template.is-flex-container {
		grid-template-columns: 1fr;
	}
}

.epia-featured-card {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.epia-featured-card img {
	border-radius: var(--epia-radius-md);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.epia-card__category {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--epia-primary);
}

/* Trending list */
.epia-trending-list .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.epia-trending-item {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--epia-border);
	gap: 0.75rem;
	align-items: baseline;
}

/* Category rails + popular this week (shared card grid) — same
   reasoning as .epia-featured-grid above. */
.epia-category-grid .wp-block-post-template.is-flex-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.epia-category-grid .wp-block-post-template.is-flex-container > li {
	width: auto !important;
	margin: 0;
}

@media (max-width: 960px) {
	.epia-category-grid .wp-block-post-template.is-flex-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 782px) {
	.epia-category-grid .wp-block-post-template.is-flex-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.epia-category-grid .wp-block-post-template.is-flex-container {
		grid-template-columns: 1fr;
	}
}

.epia-category-grid .epia-card {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.epia-category-grid .epia-card img {
	border-radius: var(--epia-radius-md);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@media (max-width: 480px) {
	.epia-hero-card {
		min-height: 320px;
	}
}

/* Featured tools */
.epia-tool-card {
	padding: 1.5rem;
}

/* Newsletter band */
.epia-homepage-newsletter {
	background-color: var(--epia-surface);
	border-top: 1px solid var(--epia-border);
	border-bottom: 1px solid var(--epia-border);
	padding: 3.5rem 1.5rem;
	margin-top: 3rem;
	text-align: center;
}

.epia-homepage-newsletter .epia-newsletter-form {
	max-width: 420px;
	margin: 1.5rem auto 0;
}