/**
 * Tag and metadata (Style Guide 06 — highlight examples)
 *
 * Mono, uppercase, quiet. Collection names, product codes, SKUs and
 * other key metadata. Tags are bordered; meta is plain text.
 *
 * Usage:
 *   <span class="tag">Summer/Spring 25</span>
 *   <a class="tag tag--interactive" href="#">Seoul 06</a>
 *
 *   <ul class="meta-list">
 *     <li class="meta">Summer/Spring 25</li>
 *     <li class="meta">SKU: THY-SE06-AS-25</li>
 *   </ul>
 */

.tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	line-height: 1.4;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--color-heading);
	background: transparent;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-none);
}

.tag--sage {
	background: var(--color-surface-strong);
	border-color: var(--color-surface-strong);
}

.tag--forest {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-inverse);
}

.tag--clay {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.tag--interactive {
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast),
		color var(--transition-fast);
}

.tag--interactive:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-inverse);
}

/* Selected filter chip with a remove affordance. */
.tag.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-inverse);
}

.tag__remove {
	font-size: var(--text-xs);
	line-height: 1;
	color: inherit;
	opacity: 0.7;
}

.tag__remove:hover {
	opacity: 1;
}

/* --- Tag list --- */

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* --- Metadata (unbordered highlights) --- */

.meta {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	line-height: var(--line-normal);
	letter-spacing: var(--tracking-wide);
	color: var(--color-muted);
}

.meta--upper {
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.meta--forest { color: var(--color-heading); }
.meta--clay { color: var(--color-accent); }

.meta-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
}

.meta-list > * {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	color: var(--color-muted);
}

/* Inline metadata separated by a thin rule. */
.meta-list--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
}