/*
 * A-Z Listing styles for woodmart-child.
 *
 * Enqueued from woodmart-child/functions.php (handle: woodmart-child-a-z-listing).
 * Pairs with the template override woodmart-child/a-z-listing.php.
 *
 * Everything here is self-contained: no rule depends on a Woodmart class or on
 * a Woodmart CSS part, so a future theme update cannot silently remove it.
 *
 * Repairs the two regressions introduced by the Woodmart 7 -> 8.5.7 upgrade
 * on 2026-08-01:
 *
 *  1. GRID. Woodmart 8 deleted css/bootstrap-light.min.css, so the template's
 *     row / col-lg-3 / col-md-4 / col-6 classes had no definition anywhere and
 *     every card fell to full width. Replaced with CSS Grid at the same
 *     breakpoints the original design used (992px / 768px).
 *
 *  2. CARD OVERLAY. Woodmart 7 styled .wrapp-category with position:relative,
 *     which kept the invisible full-card link inside its own card. Woodmart 8
 *     moved that rule to .wd-cat-inner, a class this template does not emit,
 *     in a CSS part that is not even loaded on these pages. The overlay links
 *     therefore escaped to the Elementor widget and blanketed the whole
 *     listing, including the A-Z letter bar, swallowing every click. The
 *     overlay now uses our own .az-cat-link class inside a positioned card.
 */

/* ---------------------------------------------------------------
 * 1. Grid: 4 across desktop / 3 tablet / 2 mobile
 *    (replaces col-lg-3 col-md-4 col-6)
 * --------------------------------------------------------------- */
.az-custom-listing-warpper {
	--az-cols: 2;
	--az-gap: 20px;
	display: grid;
	grid-template-columns: repeat(var(--az-cols), minmax(0, 1fr));
	gap: var(--az-gap);
}

@media (min-width: 768px) {
	.az-custom-listing-warpper {
		--az-cols: 3;
		--az-gap: 30px;
	}
}

@media (min-width: 992px) {
	.az-custom-listing-warpper {
		--az-cols: 4;
	}
}

/* ---------------------------------------------------------------
 * 2. Keep each card's overlay link inside its own card
 * --------------------------------------------------------------- */
.az-custom-listing-warpper .category-grid-item {
	position: relative;
	min-width: 0;
}

.az-custom-listing-warpper .wrapp-category {
	position: relative;
}

.az-custom-listing-warpper .az-cat-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
}

/* ---------------------------------------------------------------
 * 3. Smooth scrolling for the letter buttons, offset so the letter
 *    heading clears the Woodmart sticky header. Replaces the inline
 *    jQuery handler that used to live in the template (which had no
 *    offset, so headings landed under the header).
 *    --wd-header-sticky-h and --wd-admin-bar-h are published on :root
 *    by Woodmart's header builder; the fallbacks cover their absence.
 * --------------------------------------------------------------- */
html:has(.az-listing) {
	scroll-behavior: smooth;
}

.az-listing,
.az-listing .letter-section {
	scroll-margin-top: calc(var(--wd-header-sticky-h, 60px) + var(--wd-admin-bar-h, 0px) + 20px);
}

@media (prefers-reduced-motion: reduce) {
	html:has(.az-listing) {
		scroll-behavior: auto;
	}
}