/**
 * News Element — Taxonomy Box block.
 * Structure only; colours, spacing and type come from the block's controls.
 * Caption-over-image templates use the shared .abs-excerpt / .has-overlay
 * rules in assets/css/common.css. Height: Layout → Height sets --ne-tax-h.
 */

.ne-tax-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.ne-tax-item {
	min-width: 0;
}

.ne-tax-item .ft-thumbwrap {
	display: block;
	height: var(--ne-tax-h, 300px);
}

.tpl-card .ft-thumbwrap {
	height: var(--ne-tax-h, 220px);
}

.tpl-reveal .ft-thumbwrap {
	height: var(--ne-tax-h, 400px);
}

.tpl-bar .ft-thumbwrap {
	height: var(--ne-tax-h, 80px);
}

/* No term image: the striped placeholder fills the image box. */
.ne-tax-item .ne-thumb-ph {
	display: block;
	height: 100%;
}

.ne-tax-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Inline-block: a Post count background wraps the text instead of spanning the
   caption, and the count still follows the caption's text alignment. */
.ne-tax-count {
	display: inline-block;
}

/* Caption templates: light text on the image. :where() keeps it below the
   Term name / Post count colour controls. */
:where(.ne-tax-grid:not(.tpl-card)) .excerpt-wrap,
:where(.ne-tax-grid:not(.tpl-card)) .ne-title {
	color: #fff;
}

/* Card ------------------------------------------------------------------- */

.tpl-card .excerpt-wrap {
	justify-content: space-between;
	gap: 16px;
}

.ne-tax-more {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.ne-tax-more:hover,
.ne-tax-more:focus-visible {
	transform: rotate(90deg);
}

/* Reveal: count + name at the top, description slides in at the bottom. */

.tpl-reveal .excerpt-wrap {
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ne-tax-desc {
	margin: 0;
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.tpl-reveal .ne-tax-item:hover .ne-tax-desc,
.tpl-reveal .ne-tax-item:focus-within .ne-tax-desc {
	opacity: 1;
	transform: none;
}

/* Bar: name left, count badge right, vertically centred on the image. */

.tpl-bar .excerpt-wrap {
	top: 0;
	justify-content: space-between;
	gap: 12px;
}

.tpl-bar .ne-tax-count {
	flex: 0 0 auto;
}

/* Card → Hover overlay / Hover text fade in. */
.ne-tax-item .ft-thumbwrap.has-overlay::after,
.ne-tax-item .ne-tax-count {
	transition: background-color 0.3s ease, color 0.3s ease;
}

.ne-tax-empty {
	margin: 0;
	padding: 20px;
	text-align: center;
	border: 1px dashed currentColor;
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	.ne-tax-more,
	.ne-tax-desc {
		transition: none;
	}

	.ne-tax-more:hover,
	.ne-tax-more:focus-visible {
		transform: none;
	}

	.ne-tax-desc {
		opacity: 1;
		transform: none;
	}
}

/* Overlay with a description (Show description, opt-in): always visible, and
   the count after it keeps its own line. */
.tpl-overlay .ne-tax-desc {
	opacity: 1;
	transform: none;
}

:where(.tpl-overlay .ne-tax-desc) + .ne-tax-count {
	margin-top: 12px;
}