/* ==========================================================================
   Taxonomy index pages — /categories/ and /moods/
   Colour-blocked cards on the same visual rhythm as the mood grid on the
   discovery page, so the two browse surfaces read as one system.
   ========================================================================== */

/* This page is a dense grid, so it runs the full width of the viewport rather
   than the 1280px column the rest of the site uses. */
.mst-taxidx-page .mst-container {
	max-width: none;
}

.mst-taxidx-filter {
	position:      relative;
	max-width:     420px;
	margin:        0 0 1.75rem;
}

.mst-taxidx-filter__icon {
	position:       absolute;
	left:           14px;
	top:            50%;
	transform:      translateY(-50%);
	display:        flex;
	color:          var(--mst-text-2, #8888a0);
	pointer-events: none;
}

.mst-taxidx-filter__input {
	width:            100%;
	height:           46px;
	padding:          0 16px 0 44px;
	border-radius:    999px;
	border:           1px solid var(--mst-border, rgba(255, 255, 255, .12));
	background:       var(--mst-bg-raised, #111116);
	color:            var(--mst-text-1, #f0f0f5);
	font-size:        0.9375rem;
	transition:       border-color 160ms ease, box-shadow 160ms ease;
}

.mst-taxidx-filter__input::placeholder { color: var(--mst-text-2, #8888a0); }

.mst-taxidx-filter__input:focus {
	outline:      none;
	border-color: var(--mst-accent, #5c6ef4);
	box-shadow:   0 0 0 3px rgba(92, 110, 244, .22);
}

.mst-taxidx-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap:                   16px;
}

.mst-taxidx-card {
	position:        relative;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	min-height:      158px;
	padding:         18px 16px 16px;
	border-radius:   16px;
	background:      var(--taxidx-color, #4b8ce8);
	text-decoration: none;
	overflow:        hidden;
	transition:      transform 180ms ease, box-shadow 180ms ease;
}

/* Darkens the lower half so the label stays legible on every palette colour. */
.mst-taxidx-card::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .5) 100%);
}

.mst-taxidx-card:hover,
.mst-taxidx-card:focus-visible {
	transform:  translateY(-3px) scale(1.02);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
}

.mst-taxidx-card:focus-visible {
	outline:        2px solid #fff;
	outline-offset: 2px;
}

.mst-taxidx-card__name {
	position:       relative;
	font-size:      1.0625rem;
	font-weight:    700;
	line-height:    1.25;
	color:          #fff;
	text-shadow:    0 1px 6px rgba(0, 0, 0, .45);
	/* "Happy/cheerful/energetic" is one unbroken token — a slash is not a break
	   opportunity — so without this it overflowed the card and was cropped. */
	overflow-wrap:  anywhere;
	display:            -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp:         3;
	overflow:           hidden;
}

.mst-taxidx-card__count {
	position:   relative;
	margin-top: 4px;
	font-size:  0.75rem;
	color:      rgba(255, 255, 255, .78);
}

.mst-taxidx-empty {
	padding:    2.5rem 0;
	color:      var(--mst-text-2, #8888a0);
	text-align: center;
}

.mst-taxidx-empty[hidden] { display: none; }
.mst-taxidx-card[hidden]   { display: none; }

@media (max-width: 600px) {
	.mst-taxidx-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
	.mst-taxidx-card  { border-radius: 14px; padding: 14px 13px 12px; min-height: 128px; }
	.mst-taxidx-card__name { font-size: 0.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mst-taxidx-card { transition: none; }
	.mst-taxidx-card:hover, .mst-taxidx-card:focus-visible { transform: none; }
}