/**
 * sigma/deal-highlight (C13) -- a repeater of closed-deal cards, each
 * tagged with an industry category, plus an optional CSS-only filter
 * when more than one category is present in the same instance (the
 * Results page; a hub page's own instance is single-category and never
 * prints the filter -- see render.php). Loaded only where the block
 * renders (block.json "style" field).
 *
 * Card treatment matches blocks/value-prop/style.css's own .value-prop
 * card and DESIGN.md's "Card" spec: white background, 1px border, zero
 * radius, no shadow, navy text, fixed regardless of the ancestor
 * section's background -- same as that file's comment explains for its
 * own card. Not shared with value-prop/grid CSS -- CONVENTIONS.md: each
 * block owns its own style.css.
 *
 * The filter tabs sit directly on the section surface, not inside a
 * card, so unlike the cards they DO need a navy-background inverse (see
 * the .sigma-section--bg-navy rules at the bottom) -- the same reason
 * blocks/hero and blocks/cta-band invert their buttons/eyebrow but
 * blocks/value-prop's fixed-white card never has to.
 */

.deal-highlight {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* ---------------------------------------------------------------------
 * Filter -- CSS-only. Each category radio, when checked, is matched via
 * :has() on its ancestor fieldset, which then hides any card in
 * .deal-highlight__cards whose data-category does not match. No script
 * anywhere: the "All" radio is checked by default (render.php's
 * `checked` attribute) and matches none of the category rules below, so
 * every card stays visible until a specific tab is picked -- and if a
 * browser lacks :has() support, none of these rules ever match either,
 * so every card stays visible always. Either way, JS absent or present,
 * the fallback is "show everything", never "hide everything".
 * ------------------------------------------------------------------ */

.deal-highlight__filter {
	margin: 0;
	padding: 0;
	border: 0;
}

.deal-highlight__filter-legend {
	margin: 0 0 var(--space-sm);
	padding: 0;
	font-family: var(--font-sans);
	font-size: var(--text-kicker);
	font-weight: var(--weight-sans-bold);
	line-height: var(--leading-ui);
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--color-gold-deep);
}

.deal-highlight__filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

/*
 * Visually hidden but still focusable and in tab order -- unlike
 * display:none, which would drop these from keyboard navigation
 * entirely. The paired <label for> below is what a mouse/touch user
 * actually sees and clicks; native <label for> activation and native
 * radio-group arrow-key behaviour both work with the input in this
 * state, no script required.
 */
.deal-highlight__filter-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.deal-highlight__filter-label {
	box-sizing: border-box;
	display: inline-block;
	padding: var(--space-xs) var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-none);
	font-family: var(--font-sans);
	font-size: var(--text-micro);
	font-weight: var(--weight-sans-semibold);
	line-height: var(--leading-ui);
	letter-spacing: var(--tracking-nav-label);
	color: var(--color-navy);
	background-color: var(--color-white);
	cursor: pointer;
}

/* On a touch screen the tab has to be big enough to hit. Measured 52x30
   at 375 on 22 September, against the 44px minimum; the type stays at
   its comp size and the padding grows instead, so the row still reads as
   tabs rather than buttons. */
@media (hover: none) {
	.deal-highlight__filter-label {
		min-height: 44px;
		padding-block: var(--space-sm);
		display: inline-flex;
		align-items: center;
	}
}

.deal-highlight__filter-input:checked + .deal-highlight__filter-label {
	background-color: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-white);
}

.deal-highlight__filter-input:focus-visible + .deal-highlight__filter-label {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* One rule per hub -- the taxonomy is fixed at five, not open-ended, so
 * these are written out rather than generated. */
.deal-highlight__filter:has(.deal-highlight__filter-input--business-services:checked)
	~ .deal-highlight__cards
	.deal-highlight__card:not([data-category="business-services"]) {
	display: none;
}

.deal-highlight__filter:has(.deal-highlight__filter-input--manufacturing-industrial:checked)
	~ .deal-highlight__cards
	.deal-highlight__card:not([data-category="manufacturing-industrial"]) {
	display: none;
}

.deal-highlight__filter:has(.deal-highlight__filter-input--distribution-logistics:checked)
	~ .deal-highlight__cards
	.deal-highlight__card:not([data-category="distribution-logistics"]) {
	display: none;
}

.deal-highlight__filter:has(.deal-highlight__filter-input--skilled-trades-construction:checked)
	~ .deal-highlight__cards
	.deal-highlight__card:not([data-category="skilled-trades-construction"]) {
	display: none;
}

.deal-highlight__filter:has(.deal-highlight__filter-input--healthcare-consumer-services:checked)
	~ .deal-highlight__cards
	.deal-highlight__card:not([data-category="healthcare-consumer-services"]) {
	display: none;
}

/* ---------------------------------------------------------------------
 * Cards -- one column at mobile, 2 at tablet (768), the full 3 only
 * from desktop (1024) up. Same reflow rule blocks/grid/style.css and
 * blocks/value-prop/style.css both use, so a row doesn't squeeze
 * unreadable at tablet width.
 * ------------------------------------------------------------------ */

.deal-highlight__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.deal-highlight__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.deal-highlight__cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.deal-highlight__card {
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--color-white);
	color: var(--color-navy);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-none);
	box-shadow: var(--shadow-none);
	padding: var(--space-lg);
}

.deal-highlight__card-category {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-sans);
	font-size: var(--text-micro);
	font-weight: var(--weight-sans-bold);
	line-height: var(--leading-ui);
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--color-gold-deep);
}

.deal-highlight__card-business {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-serif);
	font-size: var(--text-h3);
	font-weight: var(--weight-serif-regular);
	line-height: var(--leading-heading);
	color: var(--color-navy);
}

.deal-highlight__card-meta {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-sans);
	font-size: var(--text-micro);
	font-weight: var(--weight-sans-semibold);
	line-height: var(--leading-ui);
	color: var(--color-navy);
}

.deal-highlight__card-outcome {
	margin: 0 0 var(--space-md);
	font-family: var(--font-serif);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

.deal-highlight__card-link {
	margin-top: auto;
	font-family: var(--font-sans);
	font-size: var(--text-micro);
	font-weight: var(--weight-sans-semibold);
	color: var(--color-gold-deep);
	text-decoration: underline;
}

.deal-highlight__card-link:hover,
.deal-highlight__card-link:focus-visible {
	text-decoration: none;
}

.deal-highlight__card-link:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* ---------------------------------------------------------------------
 * Navy-section inverse -- the filter only, since the cards above are a
 * fixed white surface regardless of ancestor background (same as
 * blocks/value-prop's own card). Mirrors blocks/hero/style.css's
 * .hero--bg-navy .hero__eyebrow and blocks/cta-band/style.css's
 * .sigma-section--bg-navy .sigma-button pattern.
 * ------------------------------------------------------------------ */

.sigma-section--bg-navy .deal-highlight__filter-legend {
	color: var(--color-gold);
}

.sigma-section--bg-navy .deal-highlight__filter-label {
	border-color: var(--color-white);
	color: var(--color-white);
	background-color: transparent;
}

.sigma-section--bg-navy .deal-highlight__filter-input:checked + .deal-highlight__filter-label {
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-navy);
}