/* ==========================================================================
   Episodes — card (EpisodeCard.tsx), grids, the home latest-episode card,
   the Browse-by-Theme grid, and the Listen archive (search + filters).
   ========================================================================== */

/* ---- Grid (grid gap-6 sm:grid-cols-2 lg:grid-cols-3) ---- */
.efa-ep-grid {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.efa-ep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.efa-ep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.efa-section .efa-ep-grid-block {
	margin-top: 2rem;
}

/* ---- Episode card ---- */
.efa-ep-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 2px solid var(--efa-line-15);
	border-radius: 1rem;
	background: #fff;
	transition: border-color 0.15s var(--efa-ease), box-shadow 0.15s var(--efa-ease);
}

.efa-ep-card:hover {
	border-color: var(--efa-line-40);
	box-shadow: var(--efa-shadow-card);
}

.efa-ep-card.is-current {
	border-color: var(--wp--preset--color--leaf);
	box-shadow: var(--efa-shadow-leaf);
}

.efa-ep-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--cream-deep);
}

.efa-ep-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--efa-ease);
}

.efa-ep-card__media:hover img {
	transform: scale(1.05);
}

.efa-ep-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	border-radius: 9999px;
	background: rgb(255 255 255 / 0.95);
	padding: 0.25rem 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--wp--preset--color--pine-deep);
}

.efa-ep-card__now {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: none;
	align-items: center;
	gap: 0.375rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--leaf);
	padding: 0.25rem 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 800;
	color: var(--wp--preset--color--pine-dark);
}

.efa-ep-card__now .efa-i {
	width: 0.875rem;
	height: 0.875rem;
}

.efa-ep-card.is-playing .efa-ep-card__now {
	display: inline-flex;
}

.efa-ep-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem;
}

.efa-ep-card__body > * {
	margin: 0;
}

.efa-ep-card__meta {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--efa-ink-60);
}

.efa-ep-card .efa-ep-card__title {
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	line-height: 1.375;
	font-weight: 800;
	color: var(--wp--preset--color--pine-dark);
}

.efa-ep-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s var(--efa-ease);
}

.efa-ep-card__title a:hover {
	color: var(--wp--preset--color--pine);
}

.efa-ep-card .efa-ep-card__teaser {
	flex: 1;
	margin-top: 0.5rem;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--efa-ink-75);
}

.efa-ep-card .efa-ep-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.efa-ep-card__play,
.efa-ep-card__more {
	display: inline-flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s var(--efa-ease), color 0.15s var(--efa-ease);
}

.efa-ep-card__play {
	border: 0;
	background: var(--wp--preset--color--pine);
	color: #fff;
}

.efa-ep-card__play:hover {
	background: var(--wp--preset--color--pine-deep);
}

.efa-ep-card__more {
	border: 2px solid var(--wp--preset--color--pine);
	background: transparent;
	color: var(--wp--preset--color--pine);
}

.efa-ep-card__more:hover {
	background: var(--wp--preset--color--pine);
	color: #fff;
}

/* ---- Home: latest-episode card ---- */
.efa-latest {
	border: 2px solid var(--efa-line-15);
	border-radius: 1.5rem;
	background: #fff;
	padding: 1rem;
	box-shadow: var(--efa-shadow-pine-xl);
}

.efa-latest__media {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	background: var(--wp--preset--color--cream-deep);
}

.efa-latest__media img {
	display: block;
	width: 100%;
	height: 15rem;
	object-fit: cover;
}

@media (min-width: 640px) {
	.efa-latest__media img {
		height: 18rem;
	}
}

.efa-latest__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	border-radius: 9999px;
	background: #fff;
	padding: 0.25rem 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--pine-deep);
}

.efa-latest__body {
	padding: 1rem;
}

.efa-latest__body > * {
	margin: 0;
}

.efa-latest__eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--wp--preset--color--leaf-deep);
}

.efa-latest .efa-latest__title {
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 800;
	color: var(--wp--preset--color--pine-dark);
}

.efa-latest .efa-latest__teaser {
	margin-top: 0.75rem;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--efa-ink-75);
}

.efa-latest__play,
.efa-latest__more {
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	border-radius: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s var(--efa-ease), color 0.15s var(--efa-ease);
}

.efa-latest .efa-latest__play {
	margin-top: 1.25rem;
	gap: 0.75rem;
	border: 0;
	background: var(--wp--preset--color--leaf);
	padding: 1rem 1.5rem;
	color: var(--wp--preset--color--pine-dark);
}

.efa-latest .efa-latest__play:hover {
	background: var(--wp--preset--color--leaf-deep);
	color: #fff;
}

.efa-latest .efa-latest__more {
	margin-top: 0.75rem;
	gap: 0.5rem;
	border: 2px solid var(--wp--preset--color--pine);
	padding: 0.875rem 1.5rem;
	color: var(--wp--preset--color--pine);
}

.efa-latest .efa-latest__more:hover {
	background: var(--wp--preset--color--pine);
	color: #fff;
}

/* ---- Browse-by-Theme grid ---- */
.efa-theme-grid {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.efa-section .efa-theme-grid {
	margin-top: 2rem;
}

@media (min-width: 640px) {
	.efa-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.efa-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.efa-theme-grid li {
	margin: 0;
}

.efa-theme-card {
	position: relative;
	display: flex;
	height: 13rem;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border: 2px solid var(--efa-line-15);
	border-radius: 1rem;
	text-decoration: none;
	transition: border-color 0.15s var(--efa-ease);
}

.efa-theme-card:hover,
.efa-theme-card:focus-visible {
	border-color: var(--wp--preset--color--pine);
}

.efa-theme-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--efa-ease);
}

.efa-theme-card:hover .efa-theme-card__img {
	transform: scale(1.05);
}

.efa-theme-card__shade {
	position: absolute;
	inset: 0;
	background: rgb(15 51 32 / 0.6);
}

.efa-theme-card__count {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 9999px;
	background: rgb(255 255 255 / 0.95);
	padding: 0.25rem 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--pine-deep);
}

.efa-theme-card__foot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1.25rem;
}

.efa-theme-card__label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.efa-theme-card__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--leaf);
	color: var(--wp--preset--color--pine-dark);
}

.efa-theme-card__icon .efa-i {
	width: 1.5rem;
	height: 1.5rem;
}

.efa-theme-card__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 800;
	color: #fff;
	filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
}

.efa-theme-card__arrow {
	flex-shrink: 0;
	color: #fff;
	transition: transform 0.15s var(--efa-ease);
}

.efa-theme-card:hover .efa-theme-card__arrow {
	transform: translateX(0.25rem);
}

/* ---- Archive: search + filters + results ---- */
.efa-archive > * {
	margin: 0;
}

.efa-archive__search {
	max-width: 36rem;
}

.efa-search-field--archive {
	padding-block: 0.25rem;
}

.efa-archive__results > * {
	margin: 0;
}

.efa-filters {
	margin-top: 1.5rem;
}

.efa-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.efa-filters__list li {
	margin: 0;
}

.efa-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 2px solid var(--efa-line-25);
	border-radius: 9999px;
	background: #fff;
	padding: 0.5rem 1rem 0.5rem 0.625rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--pine-dark);
	text-decoration: none;
	transition: border-color 0.15s var(--efa-ease), background-color 0.15s var(--efa-ease), color 0.15s var(--efa-ease);
}

.efa-filter:hover {
	border-color: var(--wp--preset--color--pine);
	color: var(--wp--preset--color--pine-dark);
}

.efa-filter.is-active {
	border-color: var(--wp--preset--color--pine);
	background: var(--wp--preset--color--pine);
	color: #fff;
}

.efa-filter__icon {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
	border-radius: 9999px;
	background: var(--efa-leaf-15);
	color: var(--wp--preset--color--pine);
}

.efa-filter__icon .efa-i {
	width: 1rem;
	height: 1rem;
}

.efa-filter.is-active .efa-filter__icon {
	background: rgb(255 255 255 / 0.2);
	color: #fff;
}

.efa-filter__count {
	margin-left: 0.125rem;
	border-radius: 9999px;
	background: var(--efa-pine-10);
	padding: 0.125rem 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--pine-deep);
}

.efa-filter.is-active .efa-filter__count {
	background: rgb(255 255 255 / 0.2);
	color: #fff;
}

.efa-archive .efa-archive__count {
	margin-top: 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--efa-ink-60);
}

.efa-archive .efa-archive__grid {
	margin-top: 1.5rem;
}

.efa-archive .efa-archive__empty {
	margin-top: 2rem;
	border: 2px solid var(--efa-line-15);
	border-radius: 1rem;
	background: var(--wp--preset--color--cream);
	padding: 2.5rem 1.5rem;
	text-align: center;
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: var(--efa-ink-70);
}

.efa-archive__results.is-loading {
	opacity: 0.6;
	transition: opacity 0.15s var(--efa-ease);
}

/* Pagination */
.efa-pager {
	margin-top: 2.5rem;
}

.efa-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.efa-pager__link {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	border: 2px solid var(--efa-line-25);
	border-radius: 9999px;
	padding-inline: 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: var(--wp--preset--color--pine-dark);
	text-decoration: none;
}

.efa-pager__link:hover {
	border-color: var(--wp--preset--color--pine);
}

.efa-pager__link.is-current {
	border-color: var(--wp--preset--color--pine);
	background: var(--wp--preset--color--pine);
	color: #fff;
}