/* ==========================================================================
   Stravum Builder — Filter Grid (widgets/filter-grid.php)

   PART FILE. Enqueued automatically by st_builder_enqueue_parts() (it globs
   assets/parts/*.css), on the front end and inside the editor canvas.

   Structural minimum + Digital Vanguard dark defaults only. All per-instance
   styling comes from the style engine (control `selectors`), emitted in a
   later <style> element inside the block markup — so engine rules must win.

   SPECIFICITY CONTRACT (the thing to get right in this file)
   The engine emits `.st-el-{uid} .st-fg-pill` — two classes, 0-2-0 — and for
   hover states `.st-el-{uid} .st-fg-pill:hover` — 0-3-0. This stylesheet
   loads BEFORE that, so on a tie the engine wins, which is what we want.
   Therefore:
     · Base defaults here stay at ONE class (0-1-0) or two (0-2-0). Never
       three: a third class would outrank the author's own setting.
     · Hover defaults need to beat the engine's BASE rule (or an authored
       resting color would also apply on hover and the default hover would
       silently do nothing) while still losing to the engine's HOVER rule.
       They get there with an ELEMENT qualifier, not a third class:
       `a.st-fg-item:hover` is 0-2-1 — above `.st-el-x .st-fg-item` (0-2-0),
       below `.st-el-x .st-fg-item:hover` (0-3-0). Exactly the window needed.
     · `.st-fg-pill.is-active` is 0-2-0 and the engine's active-pill rule is
       0-3-0, so the engine still wins there without any trick.

   RESPONSIVE COLUMNS. The 3 / 2 / 1 steps below are a DEFAULT, not a floor:
   they live at 0-1-0, so the moment an author sets the Columns control on
   desktop (0-2-0, no media query) that value outranks these at every width.
   That is the normal style-engine cascade and the Columns control is
   responsive for exactly this reason — set it per device. The control's help
   text says so too.

   No Tailwind utilities: the compiled tailwind.css cannot be rebuilt on this
   host, so visuals are plain CSS against the same token values theme.json
   ships.
   ========================================================================== */

.st-fg {
	--st-fg-accent: #fd5b38;
	--st-fg-card: #191c23;
	--st-fg-white: #ffffff;
	--st-fg-text: #a9adc1;
	--st-fg-border: rgba(255, 255, 255, 0.08);
	min-width: 0;
}

/* ================================================================== Pills. */
.st-fg-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 32px;
}

.st-fg-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 20px;
	border: 1px solid var(--st-fg-border);
	border-radius: 999px;
	background-color: transparent;
	color: var(--st-fg-text);
	font-family: "Geist", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Element qualifier, not a third class — see the specificity contract above. */
button.st-fg-pill:hover {
	border-color: rgba(253, 91, 56, 0.45);
	color: var(--st-fg-white);
}

.st-fg-pill:focus-visible {
	outline: 2px solid var(--st-fg-accent);
	outline-offset: 2px;
}

.st-fg-pill.is-active {
	border-color: var(--st-fg-accent);
	background-color: var(--st-fg-accent);
	color: var(--st-fg-white);
}

.st-fg-pill-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.12);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* =================================================================== Grid. */
.st-fg-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

/* Class + attribute (0-2-0) beats the base `.st-fg-item` display (0-1-0), and
   no control targets `display` on a card, so nothing can fight this. */
.st-fg-item[hidden] {
	display: none;
}

/* =================================================================== Card. */
.st-fg-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 30px 28px;
	border: 1px solid var(--st-fg-border);
	border-radius: 18px;
	background-color: var(--st-fg-card);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

/* Only linked cards get the lift — a plain card is not a target. */
a.st-fg-item:hover {
	border-color: rgba(253, 91, 56, 0.45);
	transform: translateY(-4px);
}

a.st-fg-item:focus-visible {
	outline: 2px solid var(--st-fg-accent);
	outline-offset: 3px;
}

/* A card that is also an entrance-animation target must not have its reveal
   transform cancelled by the hover lift mid-flight, so the lift is suppressed
   until the reveal has landed (.st-in). */
a.st-fg-item[data-st-animate]:not(.st-in):hover {
	transform: none;
}

.st-fg-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	padding: 12px;
	border-radius: 12px;
	background-color: rgba(253, 91, 56, 0.10);
	color: var(--st-fg-accent);
}

.st-fg-icon .material-symbols-outlined {
	font-size: 26px;
	line-height: 1;
}

.st-fg-title {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--st-fg-white);
}

.st-fg-desc {
	margin: 10px 0 0;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--st-fg-text);
}

.st-fg-cue {
	margin-top: 16px;
	font-size: 20px;
	line-height: 1;
	color: var(--st-fg-accent);
	transition: transform 0.25s ease;
}

a.st-fg-item:hover .st-fg-cue {
	transform: translateX(4px);
}

/* ============================================================ Empty state. */
.st-fg-empty {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 16px;
	color: var(--st-fg-text);
}

.st-fg-empty[hidden] {
	display: none;
}

/* ============================================================= Responsive. */
@media (max-width: 1024px) {
	.st-fg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.st-fg-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.st-fg-filters {
		margin-bottom: 24px;
		gap: 8px;
	}

	.st-fg-pill {
		padding: 9px 16px;
		font-size: 13px;
	}

	.st-fg-item {
		padding: 24px 22px;
	}

	.st-fg-title {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.st-fg-item,
	.st-fg-pill,
	.st-fg-cue {
		transition: none;
	}

	a.st-fg-item:hover {
		transform: none;
	}
}