/* Fyrax references gallery — [fyrax_references]. Matches the fyrax design
 * tokens used by the quote form (accent #00C2D1, ink, steel, line, surface). */

.fxref-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
	margin: 1rem 0 2rem;
}
@media (max-width: 480px) {
	.fxref-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

.fxref-card {
	margin: 0;
	border: 1px solid var(--wp--preset--color--line, #e2e6eb);
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--base, #fff);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.fxref-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--accent, #00c2d1);
	box-shadow: 0 12px 30px rgba(11, 14, 20, 0.12);
}
.fxref-card__link { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.fxref-card__img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.25s ease;
}
.fxref-card:hover .fxref-card__img { transform: scale(1.04); }
.fxref-card__cap { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.85rem 1rem 1rem; }
.fxref-card__tag {
	align-self: flex-start;
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--wp--preset--color--accent-press, #00a0ad);
	background: var(--wp--preset--color--accent-soft, #e1fafc);
	border-radius: 999px; padding: 0.15rem 0.6rem;
}
.fxref-card__title { font-weight: 700; color: var(--wp--preset--color--ink, #0b0e14); }
.fxref-card__desc { font-size: 0.88rem; color: var(--wp--preset--color--steel, #6b7280); }
.fxref-empty { color: var(--wp--preset--color--steel, #6b7280); }

@media (prefers-reduced-motion: reduce) {
	.fxref-card, .fxref-card__img { transition: none; }
}