/*
 * Stage B Wave 7 (2026-08-07): Directory card/gallery/media fixes that can't
 * be made via a template override (the archive card markup is generated
 * inside Directorist's own model class, not a child-theme-overridable
 * template) -- so these are CSS-only corrections layered on top of the
 * plugin's existing, unedited output. Never touches a vendor plugin file.
 */

/*
 * Wave 6 owner correction (2026-08-19): pairs with the aspect-ratio
 * detection in assets/js/directory-media-fixes.js -- see that file's own
 * doc comment for the full "why JS, why aspect ratio" reasoning. This
 * stylesheet loads after legacy-directorist.css (functions.php enqueue
 * order), so this !important rule correctly wins over that file's blanket
 * `object-fit: cover !important` on every archive/single-listing thumb.
 * Confirmed live against the real bug: Kelsey's Happy Tails (heart/paw
 * logo, top/bottom genuinely clipped) and MC Sports Therapy & Biomechanics
 * (circular logo, cropped tighter at narrow card widths). The thumb's own
 * existing white background (legacy-directorist.css) already provides a
 * clean, tasteful fill for the letterboxed space -- no extra treatment
 * needed there. Real business photography (non-square) is untouched and
 * keeps the normal cover treatment.
 *
 * Specificity note: legacy-directorist.css's own rule is
 * `.directorist-archive-grid-view .directorist-listing-single__thumb img`
 * (2 classes + 1 element). Both classes stacked on the SAME element here
 * (the JS adds hp-thumb-logo-safe directly onto the existing thumb
 * element, never a new wrapper) matches that specificity exactly; loading
 * later in the cascade is what wins the tie. padding also needs
 * !important here -- legacy-directorist.css's own rule sets its own
 * `padding: 0 !important` on the identical selector tier, so a plain
 * (non-!important) padding declaration can never win regardless of
 * specificity; confirmed live (object-fit:contain correctly applied and
 * the crop itself genuinely fixed, but padding computed as 0px until this
 * was added).
 */
.directorist-listing-single__thumb.hp-thumb-logo-safe img,
.directorist-single-listing__thumb.hp-thumb-logo-safe img {
	object-fit: contain !important;
	padding: 14px !important;
	box-sizing: border-box;
}

/*
 * Owner-caught bug (2026-08-21): the business detail/storefront page's own
 * hero gallery was never actually reached by the rule above -- its real
 * markup is `.directorist-single-listing-slider .swiper-slide`, not either
 * "...thumb" class, confirmed by reading the vendor's own
 * templates/single/slider.php directly. directorist.css's own hero rule
 * now defaults to object-fit:cover (matching this site's real Directorist
 * Builder "background-cover" setting); this is the matching per-slide
 * contain override for a genuine logo/wordmark slide, reusing the same
 * aspect-ratio heuristic already proven on the archive grid
 * (assets/js/directory-media-fixes.js). Specificity (3 classes) already
 * beats the base hero rule (2 classes + 2 elements) without needing
 * !important, but this file uses it throughout for defensive consistency.
 */
.directorist-single-listing-slider .swiper-slide.hp-thumb-logo-safe img {
	object-fit: contain !important;
	padding: 14px !important;
	box-sizing: border-box !important;
	background: var(--hp-color-primary-100);
}

/*
 * Wave 6 completion pass (2026-08-21): the archive/list grid card's own
 * default just flipped from an unconditional contain (over-protecting
 * logos, letterboxing real photography) to cover (directorist.css) --
 * this is its matching per-item exception for a genuine logo, using the
 * same aspect-ratio heuristic and the same padding/background treatment
 * already proven on the two thumb classes above, just for the real class
 * this specific card type actually uses (confirmed live via fetched
 * markup): .directorist-thumnail-card, not .directorist-listing-single__
 * thumb -- Directorist's archive card and single-listing thumb are two
 * different templates with two different class families.
 *
 * Specificity note: the base rule this overrides is
 * `body.directorist-content-active .directorist-thumnail-card img`
 * (2 classes + 2 elements). Without the same `body.directorist-content-
 * active` prefix, this override would tie on class count (2 vs 2) and
 * then LOSE on element count (1 vs 2) -- a silent no-op despite matching
 * !important, the exact failure mode this file's own specificity notes
 * above already warn about. Prefixing it here (3 classes + 2 elements)
 * beats the base rule outright on class count alone.
 */
body.directorist-content-active .directorist-thumnail-card.hp-thumb-logo-safe img {
	object-fit: contain !important;
	object-position: 50% 50% !important;
	padding: 14px !important;
	box-sizing: border-box;
	background: var(--hp-color-primary-100);
}

/*
 * Final Wave 6 owner acceptance: the live card showed a real 20px lavender
 * strip below supplied images. The card frame is 240px, but an older,
 * higher-specificity legacy selector still forced every descendant image to
 * 220px. Make every layer of Directorist's existing card media stack fill the
 * same 3:2 frame and make the image a block (removing inline-image baseline
 * space). Photography remains centre-cover by default; the existing
 * hp-thumb-logo-safe class above switches genuine logos/brand art to contain.
 */
body.directorist-content-active .directorist-archive-grid-view .directorist-listing-single__thumb {
	height: auto !important;
	aspect-ratio: 3 / 2;
}

body.directorist-content-active .directorist-archive-grid-view :where(
	.directorist-thumnail-card,
	.directorist-thumnail-card-front-wrap,
	.directorist-thumnail-card-front-wrap > a,
	.directorist-thumnail-card figure,
	.directorist-swiper-listing,
	.directorist-swiper-listing > .swiper-wrapper,
	.directorist-swiper-listing > .swiper-wrapper > .swiper-slide,
	.directorist-swiper-listing > .swiper-wrapper > .swiper-slide > a
) {
	display: block;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
}

body.directorist-content-active .directorist-archive-grid-view .directorist-thumnail-card img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
}

body.directorist-content-active .directorist-single-listing-slider .swiper-slide img,
body.single-at_biz_dir .directorist-single-listing-header .directorist-single-listing-slider > .swiper-wrapper > .swiper-slide > img {
	display: block;
	object-position: 50% 50%;
}

/* Post-Wave-7 QA: real Overture contact values must be readable, while an
   absent field emits no row at all. Phone/website use child-theme field
   overrides with a short label; email retains Directorist's own markup but
   is no longer collapsed into an orphan icon. */
.directorist-archive-items .directorist-listing-card-phone,
.directorist-archive-items .directorist-listing-card-email,
.directorist-archive-items .directorist-listing-card-website {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
}

.directorist-archive-items .directorist-listing-card-phone a,
.directorist-archive-items .directorist-listing-card-email a,
.directorist-archive-items .directorist-listing-card-website a {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 44px;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.35;
	border-radius: var(--hp-radius-md, 12px);
	transition: background-color var(--hp-transition-card, .2s ease);
}

.directorist-archive-items .hp-directory-contact__copy,
.directorist-archive-items .directorist-listing-card-email a {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
}

.directorist-archive-items .hp-directory-contact__label,
.directorist-archive-items .directorist-listing-card-email a::before {
	color: var(--hp-color-body, #575061);
	font-size: .72rem;
	font-weight: 650;
	letter-spacing: .04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.directorist-archive-items .directorist-listing-card-email a::before {
	content: 'Email';
}

.directorist-archive-items .directorist-listing-card-phone a:hover,
.directorist-archive-items .directorist-listing-card-phone a:focus-visible,
.directorist-archive-items .directorist-listing-card-email a:hover,
.directorist-archive-items .directorist-listing-card-email a:focus-visible,
.directorist-archive-items .directorist-listing-card-website a:hover,
.directorist-archive-items .directorist-listing-card-website a:focus-visible {
	background-color: var(--hp-color-primary-100, #f2ebff);
}

/* !important alone wasn't enough, and a first specificity-inflation attempt
   (5 repeats -> 7 classes total) still tied Elementor's rule at exactly 7
   classes (its selector is 7, not 6 -- ".elementor-element" and
   ".elementor-element-41fd43e" are two separate classes on one node, easy
   to undercount) and lost on source order. Bumped to 8 repeats (10 classes
   total) to unambiguously exceed it -- confirmed against the exact live
   selector via document.styleSheets, not guessed twice in a row. */
.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items .directorist-listing-card-phone .directorist-icon-mask:after,
.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items .directorist-listing-card-email .directorist-icon-mask:after,
.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items.directorist-archive-items .directorist-listing-card-website .directorist-icon-mask:after {
	background-color: var(--hp-color-primary-700, #6d28d9) !important;
}

/* V30: once assets/js/directory-media-fixes.js destroys loop mode on a
   card gallery that doesn't have enough real slides to loop, hide the now-
   redundant nav arrows/pagination dots so a single-image gallery reads as
   a plain static photo rather than a broken-looking carousel control. */
.hp-swiper-single-item .swiper-button-next,
.hp-swiper-single-item .swiper-button-prev,
.hp-swiper-single-item .swiper-pagination {
	display: none !important;
}

/* Wave 6 completion: Directorist already renders a second Swiper containing
   the genuine gallery thumbnails. It was being stretched to the hero's
   30rem height by an over-broad selector, which made the profile 1,000px
   taller and disguised the existing control as another giant carousel.
   Keep that native source/control and present it as the intended grid. */
.hp-storefront-gallery--multi .directorist-single-listing-slider-thumb {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin-top: var(--hp-space-3, .75rem) !important;
	overflow: visible;
}

.hp-storefront-gallery--multi .directorist-single-listing-slider-thumb > .swiper-wrapper {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--hp-space-2, .5rem);
	width: 100% !important;
	height: auto !important;
	transform: none !important;
}

.hp-storefront-gallery--multi .directorist-single-listing-slider-thumb .swiper-slide {
	width: auto !important;
	height: auto !important;
	aspect-ratio: 1;
	margin: 0 !important;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--hp-radius-lg, 16px);
	background: var(--hp-color-primary-100, #f2ebff);
	cursor: pointer;
	opacity: .74;
	transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.hp-storefront-gallery--multi .directorist-single-listing-slider-thumb .swiper-slide img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.hp-storefront-gallery--multi .directorist-single-listing-slider-thumb .swiper-slide:hover,
.hp-storefront-gallery--multi .directorist-single-listing-slider-thumb .swiper-slide:focus-visible,
.hp-storefront-gallery--multi .directorist-single-listing-slider-thumb .swiper-slide-thumb-active {
	border-color: var(--hp-color-primary-600, #7c3aed);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
	opacity: 1;
}

.hp-storefront-gallery--multi .directorist-single-listing-slider-thumb .swiper-slide:focus-visible {
	outline: 3px solid var(--hp-color-primary-300, #c4b5fd);
	outline-offset: 2px;
}

.hp-storefront-gallery--multi .directorist-single-listing-slider-thumb .directorist-swiper__navigation,
.hp-storefront-gallery--multi .directorist-single-listing-slider-thumb .directorist-swiper__pagination {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.hp-storefront-gallery--multi .directorist-single-listing-slider-thumb .swiper-slide {
		transition: none;
	}
}

/* V31: the single-listing gallery wrapper gets a fixed pixel height from
   Directorist's own JS (element.style.height = <gallery_crop_height>px,
   670px by default) with no responsive breakpoint -- on a narrow mobile
   viewport the container's width shrinks while its height stays fixed, so
   object-fit:cover crops a normal landscape photo into a narrow vertical
   strip (confirmed against the real "Cozy Corner" 1200x900 listing image).
   A stylesheet !important rule is the one thing that can override a plain
   (non-!important) inline style set by JS.

   V32 correction (2026-08-22): the outer #...-slider-wrap section holds TWO
   stacked children -- the hero slider AND (when hp-storefront-gallery--multi
   is active) the thumbnail grid beneath it. The original rule put
   aspect-ratio:3/2 on the wrap itself, capping its box to the hero's own
   ratio regardless of the thumbnail row's height. Since the wrap allows
   overflow:visible, the thumb grid still rendered, but outside its parent's
   box -- invisible to the flex ancestor's height, so the next section
   started on top of it (confirmed live: "About" heading sat under the
   thumbnails). The wrap now only gets height:auto (sizes to its real
   content); the 3:2 ratio applies to the hero slider alone. */
@media (max-width: 767px) {
	#directorist-single-listing-slider-wrap {
		height: auto !important;
	}

	#directorist-single-listing-slider-wrap .directorist-single-listing-slider,
	#directorist-single-listing-slider-wrap .directorist-single-listing-slider > .swiper-wrapper,
	#directorist-single-listing-slider-wrap .directorist-single-listing-slider > .swiper-wrapper > .swiper-slide {
		height: auto !important;
		aspect-ratio: 3 / 2;
	}

	#directorist-single-listing-slider-wrap .directorist-single-listing-slider > .swiper-wrapper > .swiper-slide > img {
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover;
	}
}