/**
 * P12 Filter chips (Figma Content Hub 184:4274, Board of Advisors 170:2626, Events 210:6377).
 *
 * Markup: inc/term-chips.php (`[lts_term_chips]`, wrapped by the lts/term-chips* patterns).
 * Behaviour: assets/js/term-chips.js. The chip itself is the foundation `.lts-chip`
 * (lts-global.css: 40px, r20, 14px caps +0.13em, Tide Dark label on Clear, Deep fill when
 * `aria-pressed="true"`, Horizon hover); nothing about the chip's look is restated here
 * except what a <button> needs.
 *
 * Drawn (1440): hub = one left-aligned row of 5, gap 12; board = centred, 5 + 4 on two rows
 * (gap 12 across, 20 down); events = one centred row of 4. Hub chips sit 73 below the hero and
 * 55 above the cards; the board / events chips sit under their section header (its own 57 gap
 * applies) and 55 above the cards (board: 14 above the first band, which owns its 45 padding).
 *
 * Derived (no tablet / mobile frames): 782 to 1280 the rows wrap (hub keeps left alignment);
 * at <= 781 each target is ONE row that scrolls sideways, bleeding to the screen edges so the
 * next chip peeks in as the cue. Chips are focusable, so keyboard focus scrolls the row; the
 * row has block padding so the focus ring is never clipped.
 *
 * Hub (H1): chips are links, always visible; the rest of this note is advisors + events.
 *
 * No JS: `.lts-term-chips` is display:none until the head script adds `lts-js` to <html>
 * (inc/term-chips.php), and visibility:hidden until the filter script sets `data-ready`, so the
 * chips hold their final size before they appear (no layout shift) and never show dead.
 *
 * Load order: partials sort by basename, so this file loads after lts-global.css and
 * lts-advisors.css; the band-stripe rules still state their specificity (the advisors
 * partial's `:nth-of-type(even)` rules are (0,4,0)).
 */

/* -- No-JS gate + reserved space ------------------------------------------------ */

.lts-term-chips {
	display: none;
}
html.lts-js .lts-term-chips {
	display: block;
	visibility: hidden;
}
html.lts-js .lts-term-chips[data-ready] {
	visibility: visible;
}
/* The hub's chips are links the server filters on (H1): visible with JS off, no reserved-space dance. (0,3,1) beats the two rules above. */
html .lts-term-chips[data-remote],
html.lts-js .lts-term-chips[data-remote] {
	display: block;
	visibility: visible;
}
/* No scope to filter: the script sets [hidden]; the author display:block above would beat the UA rule. */
html.lts-js .lts-term-chips[hidden] {
	display: none;
}

/* -- Section (the pattern's group): padding owned here --------------------------- */

.lts-term-chips-section {
	--lts-tc-top: 0;
	--lts-tc-bottom: 3.4375rem; /* 55 */
	--lts-tc-ring: 0.3125rem; /* 3px ring + room: the scroll row must not clip it */
	padding-block: var(--lts-tc-top) var(--lts-tc-bottom);
}
.lts-term-chips-section--hub {
	--lts-tc-top: 4.5625rem; /* 73 below the hero */
}
.lts-term-chips-section--advisors {
	--lts-tc-bottom: 0.875rem; /* 14: the first band owns its 45 */
}

/* The parent's page owl (.entry-content > * + *, 120) would add to the padding above and below. */
.entry-content > .lts-term-chips-section {
	margin-block-start: 0;
}
.entry-content > .lts-term-chips-section + * {
	margin-block-start: 0;
}

/* -- Chips ---------------------------------------------------------------------- */

.lts-term-chips__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem 0.75rem; /* 20 down, 12 across */
}
.lts-term-chips--hub .lts-term-chips__list {
	justify-content: flex-start;
}

/* A <button> needs its font and spacing stated; the look is .lts-chip's. Side padding 18 (foundation 22): the Figma chips
   (Content Hub 202:4641: 67 / 269 / 332 / 224 / 276, gap 12 = exactly the 1216 column, tracking 1.82, 14px) are hand-sized,
   their padding around the label works out at 14-25 and averages ~19.5, 18 keeps a safety margin on one row; 22 made the five real hub labels 1241 wide
   (2 rows). At 18 they are ~1201 (one row, ~15 spare). F2b. */
.lts-term-chips .lts-term-chips__chip {
	padding-inline: 1.125rem;
	margin: 0;
	text-align: center;
	white-space: nowrap;
}

/* -- Empty state ---------------------------------------------------------------- */

.lts-term-chips__empty {
	margin: 1.5rem 0 0;
	text-align: center;
	color: var(--wp--preset--color--body-ink);
}
.lts-term-chips__empty[hidden] {
	display: none;
}
.lts-term-chips__empty .lts-term-chips__reset {
	margin: 0;
	padding: 0.25rem 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm, 4px);
	background: transparent;
	color: var(--wp--custom--color--small-text);
	font: inherit;
	font-weight: var(--wp--custom--typography--weight-medium);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
.lts-term-chips__empty .lts-term-chips__reset:hover {
	text-decoration-thickness: 2px;
}

/* -- Hidden cards and bands (set by the script) ----------------------------------- */
/* The cards, grid cells and bands carry `display` rules of their own, which beat the UA [hidden]
   (the hub cell's is `.lts-hub-cards.kd-card-grid-query .wp-block-post-template > li`, 0,4,1;
   the advisor card's is `.lts-advisors .kd-team-grid .kd-team-card.lts-advisor-card` flex, 0,4,0). */

.lts-hub-cards.kd-card-grid-query .wp-block-post-template > li[hidden],
.lts-advisors .kd-team-card[hidden],
.lts-advisors .kd-team-grid .kd-team-card.lts-advisor-card[hidden],
.lts-advisors .kd-team-archive__group[hidden],
.lts-events-list [hidden] {
	display: none;
}

/* -- Advisor band stripes after filtering ----------------------------------------- */
/* lts-advisors.css tints every EVEN band by :nth-of-type, which counts hidden bands too.
   Once the script has run it re-marks the visible bands (.is-tint): undo the positional
   tint, then state the tint on the marked ones. Same values as lts-advisors.css. */

.lts-advisors.has-chip-stripes
	.kd-team-archive__group.lts-advisors__band:nth-of-type(even):not(.is-tint) {
	padding-block: var(--lts-adv-pad);
	background: none;
	box-shadow: none;
	clip-path: none;
}
.lts-advisors.has-chip-stripes
	.kd-team-archive__group.lts-advisors__band.is-tint:nth-of-type(n) {
	padding-block: var(--lts-adv-pad-tint);
	background: var(--wp--preset--color--tint);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--tint);
	clip-path: inset(0 -100vmax);
}

/* -- Tablet: wrap; mobile: one row that scrolls -------------------------------------- */

@media (max-width: 781.98px) {
	.lts-term-chips-section--hub {
		--lts-tc-top: 2.5rem;
		--lts-tc-bottom: 2rem;
	}
	.lts-term-chips-section {
		--lts-tc-bottom: 2rem;
	}
	.lts-term-chips-section--advisors {
		--lts-tc-bottom: 0.5rem;
	}
	.lts-term-chips__list,
	.lts-term-chips--hub .lts-term-chips__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0.75rem;
		/* Bleed to the screen edges and scroll inside them; the padding keeps the ring and gives the first chip the page gutter. */
		margin-inline: calc(-1 * var(--wp--custom--layout--gutter));
		padding: var(--lts-tc-ring) var(--wp--custom--layout--gutter);
		scroll-padding-inline: var(--wp--custom--layout--gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
	}
	.lts-term-chips__list > .lts-chip {
		flex: 0 0 auto;
	}
	.lts-term-chips__empty {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lts-term-chips__list {
		scroll-behavior: auto;
	}
}