/*
 * Craftis Embroidery Type Grid — frontend styles.
 * Square reference-photo tiles with the label below, not an overlay —
 * these are recognizable swatch photos (same source as the single-
 * product variation swatches), not lifestyle category shots, so the
 * image itself stays fully visible instead of being darkened under text.
 * Colors/fonts fall back to the theme's design tokens (craftis-dynamic.css)
 * via var(), matching craftis-custom-theme-design-spec.md §5 Section 2.
 */

.craftis-embroidery-type-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

@media (min-width: 600px) {
	.craftis-embroidery-type-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.craftis-embroidery-type-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
	.craftis-embroidery-type-grid--cols-5 { grid-template-columns: repeat(3, 1fr); }
	.craftis-embroidery-type-grid--cols-6 { grid-template-columns: repeat(3, 1fr); }
	.craftis-embroidery-type-grid--cols-8 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
	.craftis-embroidery-type-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.craftis-embroidery-type-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
	.craftis-embroidery-type-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
	.craftis-embroidery-type-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
	.craftis-embroidery-type-grid--cols-8 { grid-template-columns: repeat(8, 1fr); }
}

.craftis-embroidery-type-grid__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.craftis-embroidery-type-grid__image-wrap {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--color-bg-warm, #F1F0ED);
}

.craftis-embroidery-type-grid--bordered .craftis-embroidery-type-grid__image-wrap {
	border: 1px solid var(--color-line, #E2DFDA);
}

.craftis-embroidery-type-grid__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.craftis-embroidery-type-grid__image--placeholder {
	background-color: var(--color-bg-warm-2, #EDECE8);
}

.craftis-embroidery-type-grid--hover-zoom .craftis-embroidery-type-grid__tile:hover .craftis-embroidery-type-grid__image {
	transform: scale(1.08);
}

.craftis-embroidery-type-grid__label {
	font-family: var(--font-heading, 'Metropolis'), sans-serif;
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.3;
	text-align: center;
	color: var(--color-text, #1F1E1B);
	transition: color 0.2s ease;
}

.craftis-embroidery-type-grid__tile:hover .craftis-embroidery-type-grid__label {
	color: var(--color-accent-sage, #8FA089);
}

.craftis-embroidery-type-grid__notice {
	padding: 24px;
	background-color: var(--color-bg-warm, #F1F0ED);
	color: var(--color-text-muted, #6E6E6C);
	text-align: center;
}