/* ============================================================
   Featured Categories — Luxury Commerce Card (Concept 3)
   Full-bleed image + gradient scrim + title overlay bottom-left.
   4 col desktop · 2 col tablet · CSS scroll-snap mobile.
   No JS — hover effects are CSS-only.
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────────── */
.wpdl-featured-cat {
	margin-block: 0 !important;
}

/* ── Section header: heading (left) + View All (right) ──────── */
.wpdl-featured-cat__header {
	margin-block: 0 var(--wp--custom--space--5);
}

.wpdl-featured-cat__header > * {
	margin-block: 0;
}

.wpdl-featured-cat__heading.wp-block-heading {
	font-family: var(--wp--custom--font--family--display);
	font-size: var(--wp--custom--font--size--xl);
	font-weight: var(--wp--custom--font--weight--medium);
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

.wpdl-featured-cat__view-all {
	margin: 0;
}

.wpdl-featured-cat__view-all a {
	font-family: var(--wp--custom--font--family--body);
	font-size: var(--wp--custom--font--size--xs);
	font-weight: var(--wp--custom--font--weight--medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
	text-decoration-thickness: 0.0938rem;
	white-space: nowrap;
}

.wpdl-featured-cat__view-all a:hover {
	color: var(--wp--custom--semantic--color--brand--strong);
}

/* ── Card grid ──────────────────────────────────────────────── */

/* Default 4 columns — buyer changes data-columns="4" to 3 or 5 */
.wpdl-featured-cat__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--custom--space--7);
}

.wpdl-featured-cat[data-columns="3"] .wpdl-featured-cat__grid {
	grid-template-columns: repeat(3, 1fr);
}

.wpdl-featured-cat[data-columns="5"] .wpdl-featured-cat__grid {
	grid-template-columns: repeat(5, 1fr);
}

.wpdl-featured-cat[data-columns="6"] .wpdl-featured-cat__grid {
	grid-template-columns: repeat(6, 1fr);
}

/* Reset WP flow margin on grid items.
   (0,3,0) beats :root :where(.is-layout-flow) > * + * which is (0,1,0)
   — equal specificity to (0,2,0) but WP stylesheet loads later, so we need one more class */
.wpdl-featured-cat .wpdl-featured-cat__grid > * {
	margin-block: 0;
}

/* ── Card wrapper ───────────────────────────────────────────── */

/* Height reads --wpdl-feat-cat-h set on the outer wrapper (default 13rem) */
.wpdl-featured-cat__card {
	position: relative;
	overflow: hidden;
	height: var(--wpdl-feat-cat-h, 13rem);
	cursor: pointer;
}

/* Reset WP flow margin on absolute children */
/* stylelint-disable-next-line no-descending-specificity */
.wpdl-featured-cat__card > * {
	margin-block: 0;
}

/* ── Image wrap (fills card via absolute) ───────────────────── */
.wpdl-featured-cat__img-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.wpdl-featured-cat__img-el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}

/* Gradient scrim — dark at bottom for text legibility */
.wpdl-featured-cat__img-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(20 22 16 / 45%) 0%, rgb(20 22 16 / 0%) 45%);
	pointer-events: none;
}

/* Hover / focus: subtle image zoom */
.wpdl-featured-cat__card:hover .wpdl-featured-cat__img-el,
.wpdl-featured-cat__card:focus-within .wpdl-featured-cat__img-el {
	transform: scale(1.03);
}

/* ── Overlay (title + arrow, anchored bottom-left) ──────────── */
.wpdl-featured-cat__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--wp--custom--space--5);
	z-index: 1;
}

.wpdl-featured-cat__title {
	margin: 0;
}

.wpdl-featured-cat__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--space--3);
	font-family: var(--wp--custom--font--family--display);
	font-size: var(--wpdl-feat-cat-title-fs, 1.3125rem);
	font-weight: var(--wp--custom--font--weight--medium);
	color: var(--wp--custom--semantic--color--background--canvas);
	text-decoration: none;
}

/* Hover / focus: underline title */
.wpdl-featured-cat__card:hover .wpdl-featured-cat__link,
.wpdl-featured-cat__card:focus-within .wpdl-featured-cat__link {
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
	text-decoration-color: var(--wp--custom--semantic--color--background--canvas);
}

/* Arrow: slides right on hover */
.wpdl-featured-cat__arrow {
	display: inline-block;
	transition: transform 220ms ease;
	font-style: normal;
}

.wpdl-featured-cat__card:hover .wpdl-featured-cat__arrow,
.wpdl-featured-cat__card:focus-within .wpdl-featured-cat__arrow {
	transform: translateX(0.25rem);
}

/* Focus ring for keyboard users */
/* stylelint-disable-next-line no-descending-specificity */
.wpdl-featured-cat__link:focus-visible {
	outline: 0.125rem solid var(--wp--custom--semantic--color--background--canvas);
	outline-offset: 0.125rem;
	border-radius: 0.125rem;
	text-decoration: none;
}

/* Reduced motion — disable transitions, show hover state instantly */
@media (prefers-reduced-motion: reduce) {
	.wpdl-featured-cat__img-el,
	.wpdl-featured-cat__arrow {
		transition: none;
	}
}

/* ── Tablet 768 — 2 columns ─────────────────────────────────── */
@media (width <= 47.9375rem) {
	/* data-columns="N" rules are (0,3,0); !important ensures breakpoint always wins */
	.wpdl-featured-cat .wpdl-featured-cat__grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.wpdl-featured-cat__card {
		height: calc(var(--wpdl-feat-cat-h, 13rem) * 0.85);
	}

	.wpdl-featured-cat__link {
		font-size: 1.125rem;
	}
}

/* ── Mobile 375 — horizontal scroll-snap ────────────────────── */
@media (width <= 29.9375rem) {
	/* Break out of constrained layout to bleed to edges */

	/* !important ensures display:flex overrides data-columns grid rule (0,3,0) */
	.wpdl-featured-cat .wpdl-featured-cat__grid {
		display: flex !important;
		flex-wrap: nowrap;
		overflow: auto hidden;
		scroll-snap-type: x mandatory;
		gap: var(--wp--custom--space--4);
		scrollbar-width: none;
		padding-inline: var(--wp--custom--space--5);

		/* Negative margin pulls grid flush with viewport edges */
		margin-inline: calc(-1 * var(--wp--custom--space--5));
	}

	.wpdl-featured-cat__grid::-webkit-scrollbar {
		display: none;
	}

	/* ~1.6 cards visible — next card peeks ~40% to signal scrollability */
	.wpdl-featured-cat__card {
		flex: 0 0 calc(62.5% - var(--wp--custom--space--2));
		scroll-snap-align: start;
		height: 11rem;
	}

	.wpdl-featured-cat__link {
		font-size: 1rem;
	}
}