/**
 * Category Circles — circular avatar category browser.
 *
 * GENERATED from Figma `fleur-homepage / shop-by-occasion` (measured):
 *   section gap 48 (space.9) · head gap 8 (space.2) · grid gap 24 (space.6)
 *   item gap 16 (space.4) · circle 110px · label 20px line
 * Component owns internal layout only; section padding + bg live on the outer
 * group block attribute (buyer-editable). Consumes tokens, no raw hex/px accents.
 *
 * @package wp-design-library/components
 */

.wpdl-category-circles {
	/* section vertical rhythm between head and grid = Figma gap 48 (space.9) */
	text-align: center;
}

.wpdl-category-circles > .wpdl-category-circles__head {
	margin-block-end: var(--wp--custom--space--6);
}

/* Title stack — eyebrow (gold) + heading, gap 8 (space.2) */
.wpdl-category-circles__eyebrow {
	margin: 0 0 var(--wp--custom--space--2);
	color: var(--wp--custom--semantic--color--accent--secondary);
	font-family: var(--wp--custom--semantic--typography--eyebrow--family, var(--wp--custom--typography--family--sans));
	font-size: var(--wp--custom--typography--size--sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wpdl-category-circles__heading {
	margin: 0;
	color: var(--wp--custom--semantic--color--text--primary);
	font-family: var(--wp--custom--typography--family--serif, serif);
	font-size: var(--wp--custom--typography--size--2xl, 2rem);
	font-weight: 500;
	line-height: 1.2;
}

/* Circles grid — 8 across desktop, horizontal, gap 24 (space.6).
   flex + wrap so it reflows on narrower screens without per-breakpoint rules. */
.wpdl-category-circles__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--wp--custom--space--4);
}

/* WP `is-layout-flow` injects margin-block-start on every child after the first
   (via a :root :where() rule that beats single-class selectors); reset with
   parent-scoped + !important so the flex row aligns (else items stair-step down). */
.wpdl-category-circles .wpdl-category-circles__grid > *,
.wpdl-category-circles .wpdl-category-circles__item > * {
	margin-block: 0 !important;
}

/* One item — circle + label stacked, gap 16 (space.4) */
.wpdl-category-circles__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--custom--space--3);
	flex: 0 0 auto;
	inline-size: 6rem; /* compact circle + label */
}

/* Stretched link over the whole item (avatar + label clickable) */
.wpdl-category-circles__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.wpdl-category-circles__link:focus-visible {
	outline: var(--wp--custom--semantic--focus--width, 2px) solid var(--wp--custom--semantic--color--focus--ring);
	outline-offset: 3px;
}

/* Circle — 110px avatar, image cover, tinted fallback */
.wpdl-category-circles__circle {
	inline-size: 5.5rem; /* compact (88px) — was 110px */
	block-size: 5.5rem;
	border-radius: var(--wp--custom--radius--full);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--wp--custom--semantic--motion--duration--fast, 150ms) var(--wp--custom--semantic--motion--easing--standard, ease);
}

.wpdl-category-circles__circle img,
.wpdl-category-circles__img-el {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* Hover — lift the avatar (whole item is the hover target via the item link) */
.wpdl-category-circles__item:hover .wpdl-category-circles__circle {
	transform: translateY(-4px);
}

/* Label under the circle */
.wpdl-category-circles__label {
	margin: 0;
	color: var(--wp--custom--semantic--color--text--primary);
	font-family: var(--wp--custom--typography--family--sans);
	font-size: var(--wp--custom--typography--size--sm, 0.875rem);
	font-weight: 500;
	line-height: 1.25;
}

/* Tablet/mobile — circles shrink slightly, still centered wrap.
   Measured only at 1440; smaller sizes scale the fixed avatar down proportionally. */
@media (width < 48em) {
	.wpdl-category-circles__item {
		inline-size: 5.5rem;
	}
	.wpdl-category-circles__circle {
		inline-size: 5rem;
		block-size: 5rem;
	}
}