/*
 * Category Navigation — Circular Icons.
 *
 * Layout: centered section → kicker + heading → horizontal row of
 *   circular photos (104/80/64px) with accent ring on hover/active.
 * Tablet/mobile: overflow-x scroll, no wrap, hidden scrollbar.
 * No scale on hover — ring only (per design ref).
 *
 * Design ref: docs/design-refs/category-tiles/category-nav-circular.tokens.json
 *
 * Tokens read:
 *   semantic.color.text.primary   — heading, label
 *   semantic.color.text.brand     — kicker (accent green)
 *   semantic.color.bg.base        — section background
 *   semantic.color.bg.accent      — hover/active ring colour
 *   semantic.color.interactive.focus — focus outline
 *   semantic.typography.display   — heading (Cormorant)
 *   semantic.typography.body      — kicker (Jost)
 *   space.4 – 8
 *   duration.base  easing.default
 */

/* ── Section — background set in block attribute (Section Ownership Rule) ── */

/* ── Header: kicker + heading ─────────────────────────────────────── */
.wpdl-category-nav__header.wp-block-group {
	gap: var(--wp--custom--space--3);
	margin-block-end: var(--wp--custom--space--8);
}

.wpdl-category-nav__kicker {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem; /* 12px */
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--brand--primary);
	margin-block: 0;
}

.wpdl-category-nav__heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.125rem, 0.8rem + 1.7vw, 2rem); /* 18 → 32px */
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

/* ── Items row ────────────────────────────────────────────────────── */
.wpdl-category-nav__row.wp-block-group {
	gap: 3.5rem; /* 56px desktop */
	align-items: flex-start;
	margin-block: 0;
}

/* ── Single item ──────────────────────────────────────────────────── */
.wpdl-category-nav__item.wp-block-group {
	gap: var(--wp--custom--space--4); /* 14px — label gap */
	align-items: center;
	flex: 0 0 auto;
	margin-block: 0;
}

/* ── Circle image ─────────────────────────────────────────────────── */

/*
 * figure gets border-radius + overflow:hidden to clip the placeholder bg.
 * Ring uses outline (not box-shadow) so it is NOT clipped by overflow:hidden.
 * outline-offset creates the 3px gap between photo and ring.
 */
.wpdl-category-nav__circle.wp-block-image {
	inline-size: 6.5rem;   /* 104px */
	block-size: 6.5rem;
	border-radius: 50%;
	overflow: hidden;
	margin-block: 0;
	flex-shrink: 0;
	outline: 0.125rem solid transparent;
	outline-offset: 0.1875rem;
	transition: outline-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-category-nav__circle.wp-block-image img,
.wpdl-category-nav__circle.wp-block-image a {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	object-fit: cover;
}


/* Circle placeholder colours — token vars, replaced by real photos at P9 */
.wpdl-category-nav__row .wpdl-category-nav__item:nth-child(1) .wpdl-category-nav__circle.wp-block-image { background-color: var(--wp--custom--semantic--color--accent--primary); }
.wpdl-category-nav__row .wpdl-category-nav__item:nth-child(2) .wpdl-category-nav__circle.wp-block-image { background-color: var(--wp--custom--semantic--color--brand--primary); }
.wpdl-category-nav__row .wpdl-category-nav__item:nth-child(3) .wpdl-category-nav__circle.wp-block-image { background-color: var(--wp--custom--semantic--color--brand--primary); }
.wpdl-category-nav__row .wpdl-category-nav__item:nth-child(4) .wpdl-category-nav__circle.wp-block-image { background-color: var(--wp--custom--semantic--color--text--muted); }
.wpdl-category-nav__row .wpdl-category-nav__item:nth-child(5) .wpdl-category-nav__circle.wp-block-image { background-color: var(--wp--custom--semantic--color--accent--primary); }

/* stylelint-disable no-descending-specificity -- focus-within follows hover by intent */

/* A11y: swap ring colour on keyboard focus — declared first */
.wpdl-category-nav__circle.wp-block-image:focus-within {
	outline-color: var(--wp--custom--semantic--color--focus--ring);
}

/* Ring fades in on hover/active */
.wpdl-category-nav__item:hover .wpdl-category-nav__circle.wp-block-image,
.wpdl-category-nav__item:focus-within .wpdl-category-nav__circle.wp-block-image {
	outline-color: var(--wp--custom--semantic--color--surface--secondary);
}

/* stylelint-enable no-descending-specificity */

/* Remove browser default on inner link */
.wpdl-category-nav__circle.wp-block-image a {
	outline: none;
}

/* ── Label ────────────────────────────────────────────────────────── */
.wpdl-category-nav__label {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: 0.9375rem; /* 15px */
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
	white-space: nowrap;
}

/* ── Tablet (< 64em / 1024px) — horizontal scroll ────────────────── */
@media (width < 64em) {
	.wpdl-category-nav__row.wp-block-group {
		gap: 2rem; /* 32px */
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;

		/* Hide scrollbar cross-browser */
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-block-end: var(--wp--custom--space--2);
	}

	.wpdl-category-nav__row.wp-block-group::-webkit-scrollbar {
		display: none;
	}

	.wpdl-category-nav__item.wp-block-group {
		scroll-snap-align: start;
	}

	.wpdl-category-nav__circle.wp-block-image {
		inline-size: 5rem;  /* 80px */
		block-size: 5rem;
	}

	.wpdl-category-nav__label {
		font-size: 0.8125rem; /* 13px */
	}
}

/* ── Mobile (< 30em / 480px) — bleed to screen edge ──────────────── */
@media (width < 30em) {
	.wpdl-category-nav .wpdl-category-nav__row.wp-block-group {
		gap: 1.125rem; /* 18px */
		margin-inline: calc(-1 * var(--wp--custom--semantic--space--layout--gutter));
		padding-inline: var(--wp--custom--semantic--space--layout--gutter) var(--wp--custom--semantic--space--layout--gutter);
	}

	.wpdl-category-nav__circle.wp-block-image {
		inline-size: 4rem;  /* 64px */
		block-size: 4rem;
	}

	.wpdl-category-nav__label {
		font-size: 0.6875rem; /* 11px */
	}
}