/**
 * XSHIELD1 — Shop feature-block shared styles
 * ---------------------------------------------------------------------------
 * Extracted from page-custom-shop-consumer.php and page-custom-shop-
 * motorsports.php, where this exact CSS was previously duplicated verbatim
 * in each page's own inline <style> block. Verified byte-identical between
 * the two before moving here — only rules confirmed identical were pulled
 * out; anything that differs between the two pages (base .xs-feature-block
 * padding/border, the motorsports-only .xs-feature-group wrapper and its
 * hover tinting, the features-title/features list, and each page's own
 * mobile breakpoint) stays in its own page template, untouched.
 *
 * Enqueued only on shop page templates (see xshield1_shop_enqueue_assets()
 * in inc/shop/attribute-helpers.php) — same scoping as shop.css.
 */

/* ---------- Feature block header / subheader / reveal / description ---------- */
.xs-feature-block__header {
	margin: 0;
	text-transform: uppercase;
	font-family: var(--xs-font-display, var(--xs-font-sans));
	font-weight: 800;
	letter-spacing: 0.02em;
	font-size: clamp(20px, 2.2vw, 28px);
	color: var(--xs-color-text, #171717);
	transition: color 0.25s var(--xs-ease-standard, ease);
}
.xs-feature-block__subheader {
	margin: 6px 0 0;
	text-transform: uppercase;
	font-family: var(--xs-font-sans);
	font-size: clamp(11px, 1vw, 13px);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--xs-color-brand, #cd181d);
}
.xs-feature-block__reveal {
	width: 100%;
	max-width: 34ch;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.35s var(--xs-ease-standard, ease), opacity 0.3s var(--xs-ease-standard, ease), margin-top 0.35s var(--xs-ease-standard, ease);
}
.xs-feature-block.is-hover .xs-feature-block__reveal,
.xs-feature-block.is-open .xs-feature-block__reveal,
.xs-feature-block:focus-visible .xs-feature-block__reveal {
	max-height: 420px;
	opacity: 1;
	margin-top: 16px;
}
.xs-feature-block__desc {
	margin: 0;
	font-family: var(--xs-font-sans);
	font-size: clamp(12px, 1vw, 13px);
	line-height: 1.6;
	color: var(--xs-color-text-muted, #595959);
}

/* ---------- "Tap to reveal" chevron cue (mobile/touch affordance) ---------- */
.xs-feature-block::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 14px;
	width: 8px;
	height: 8px;
	margin-left: -5px;
	border-right: 2px solid #b3b3b3;
	border-bottom: 2px solid #b3b3b3;
	transform: rotate(45deg);
	transition: transform 0.25s var(--xs-ease-standard, ease);
	pointer-events: none;
}
.xs-feature-block.is-hover::after,
.xs-feature-block.is-open::after {
	transform: rotate(225deg);
}
@media (prefers-reduced-motion: reduce) {
	.xs-feature-block::after {
		transition: none;
	}
}