/**
 * Archive-v3 frontend styles.
 *
 * Ported from the design package's `styles.css` (Templates Hero v1)
 * with class names prefixed `asa-` so the rules stay scoped to the
 * archive-v3 module and never bleed into the legacy archive markup.
 * Grid cards reuse the parent plugin's `.stc-grid-item` rules so the
 * existing card visual carries straight through.
 *
 * @package Astra_Sites_Showcase
 * @subpackage Archive_V3
 * @since x.x.x
 */

/* ─── Tokens ─────────────────────────────────────────────── */
.asa-hero,
.asa-categories,
.asa-grid,
.asa-search,
.asa-filter-panel {
	--asa-ink-900: #0c073b;
	--asa-ink-700: #1d2230;
	--asa-ink-500: #4f5562;
	--asa-ink-400: #6f7587;
	--asa-ink-300: #98a0b1;
	--asa-ink-200: #c2c8d5;
	--asa-line: #e4e7ec;
	--asa-purple: #492cdd;
	--asa-purple-hover: #3919c8;
	--asa-bg-mint: #f1fbfc;
	--asa-radius: 999px;
	--asa-radius-md: 3px;
	--asa-dur: 180ms;
	--asa-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Search pill + filter panel ─────────────────────────── */
.asa-search {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 460px;
	color: var(--asa-ink-700);
}

.asa-search__form {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	background: #fff;
	border: 1px solid var(--asa-line);
	border-radius: var(--asa-radius);
	padding: 4px 6px 4px 16px;
	gap: 10px;
	transition:
		border-color var(--asa-dur),
		box-shadow var(--asa-dur);
}
.asa-search__form:focus-within {
	border-color: var(--asa-purple);
	box-shadow: 0 0 0 3px rgba(73, 44, 221, 0.12);
}

.asa-search__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--asa-ink-300);
}

.asa-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--asa-ink-900);
	padding: 9px 0;
	border: none !important;
}
.asa-search__input::placeholder {
	color: var(--asa-ink-300);
}
.asa-search__input::-webkit-search-decoration,
.asa-search__input::-webkit-search-cancel-button,
.asa-search__input::-webkit-search-results-button,
.asa-search__input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.asa-search__clear {
	display: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--asa-ink-400);
	cursor: pointer;
	transition:
		background var(--asa-dur),
		color var(--asa-dur);
}
.asa-search__clear.is-visible {
	display: inline-flex;
}
.asa-search__clear:hover {
	background: #f3f5f8;
	color: var(--asa-ink-700);
}

.asa-search__divider {
	width: 1px;
	height: 20px;
	background: var(--asa-line);
	flex-shrink: 0;
}

.asa-search__filter-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--asa-ink-500);
	cursor: pointer;
	transition:
		color var(--asa-dur),
		background var(--asa-dur);
}
.asa-search__filter-toggle:hover {
	color: var(--asa-purple);
	background: rgba(73, 44, 221, 0.08);
}
.asa-search__filter-toggle.is-open {
	color: var(--asa-purple);
	background: rgba(73, 44, 221, 0.12);
}

.asa-filter-panel {
	/* `position: fixed` so the panel paints in the viewport's root
	 * stacking context — every archive-v3 layout we ship is composed
	 * inside an Astra group / column block that creates its own
	 * `z-index: 0` stacking context, which would otherwise cap any
	 * absolute-positioned descendant below the `.asa-categories` bar
	 * (z-index: 5) further down the page. Inline top/left coordinates
	 * are written by the hydrator on open + recomputed on
	 * scroll / resize so the panel stays anchored to the filter toggle. */
	position: fixed;
	top: 0;
	left: 0;
	min-width: 520px;
	max-width: 720px;
	background: #fff;
	border: 1px solid var(--asa-line);
	border-radius: var(--asa-radius-md);
	box-shadow: 0 16px 40px -12px rgba(12, 7, 59, 0.18);
	z-index: 9999;
}
.asa-filter-panel[hidden] {
	display: none;
}

.asa-filter-panel__form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px 20px;
	padding: 16px;
	align-items: start;
}

.asa-filter-panel__group {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.asa-filter-panel__legend {
	font-size: 12px;
	font-weight: 600;
	color: var(--asa-ink-400);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0;
	margin-bottom: 4px;
}

.asa-filter-panel__option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	font-size: 13px;
	color: var(--asa-ink-700);
	border-radius: 6px;
	cursor: pointer;
	transition: background var(--asa-dur);
}
.asa-filter-panel__option:hover {
	background: #f3f5f8;
}
.asa-filter-panel__option input[type="radio"] {
	margin: 0;
	accent-color: var(--asa-purple);
}
.asa-filter-panel__option.is-active {
	color: var(--asa-purple);
	font-weight: 600;
}
.asa-filter-panel__option-label {
	flex: 1 1 auto;
}

.asa-filter-panel__actions {
	grid-column: 1 / -1;
	display: flex;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--asa-line);
	margin-top: 4px;
	justify-content: flex-end;
}
.asa-filter-panel__actions .asa-filter-panel__btn {
	flex: 0 0 auto;
	min-width: 96px;
}

.asa-filter-panel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 36px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition:
		background var(--asa-dur),
		color var(--asa-dur),
		border-color var(--asa-dur);
}
.asa-filter-panel__btn--apply {
	background: var(--asa-purple);
	color: #fff;
}
.asa-filter-panel__btn--apply:hover {
	background: var(--asa-purple-hover);
}
.asa-filter-panel__btn--cancel {
	background: #fff;
	color: var(--asa-ink-700);
	border-color: var(--asa-line);
}
.asa-filter-panel__btn--cancel:hover {
	background: #f3f5f8;
	border-color: #cfd5dd;
}

/* ─── Hero (content-only — host layout owns wrapper / bg / spacing) ── */
.asa-hero {
	color: var(--asa-ink-900);
}

.asa-hero__crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--asa-ink-400);
}
.asa-hero__crumb-link {
	color: var(--asa-purple);
	text-decoration: none;
}
.asa-hero__crumb-link:hover {
	text-decoration: underline;
}
.asa-hero__crumb-sep {
	color: var(--asa-ink-300);
}
.asa-hero__crumb-current {
	color: var(--asa-ink-900);
	font-weight: 500;
}

.asa-hero__title {
	font-weight: 700;
	font-size: 30px;
	line-height: 1.18;
	letter-spacing: -0.018em;
	color: var(--asa-ink-900);
	margin: 0 0 8px;
	max-width: 22ch;
}

.asa-hero__lede {
	font-size: 14px;
	line-height: 1.55;
	color: var(--asa-ink-500);
	max-width: 56ch;
	margin: 0;
	font-weight: 400;
}

/* ─── Category bar ───────────────────────────────────────── */
/* Two-column grid on desktop so the filter dropdowns sit aside the
 * top-level category bar; the subcategory bar (when present) spans the
 * full width as a second row. Mobile drops to natural DOM order
 * (cat → sub → filters) via `display: block`. */
.asa-categories {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"cat filters"
		"sub sub";
	/* Stretch is the default — keep it explicit so the cat-bar grid
	 * item always fills the full row height. Pairing this with the
	 * `.asa-filters { align-items: center }` rule below keeps the
	 * filter pills visually centred while the cat-bar element fills
	 * the row, so the active-chip underline sits flush against the
	 * sub-bar top edge with no white strip between the two surfaces. */
	align-items: stretch;
	background: #fff;
	position: relative;
	z-index: 5;
}

.asa-cat-bar {
	grid-area: cat;
	min-width: 0;
	position: relative;
}
.asa-cat-bar {
	height: 100%;
}
.asa-cat-bar__scroll {
	display: flex;
	gap: 0;
	/* Push chips to the bottom edge of the strip so the active
	 * underline (positioned at `bottom: 0` of the chip) sits flush
	 * against the sub-bar's top edge — without this, the cat-bar
	 * grid item stretches to the taller filter row and leaves a
	 * visible white strip between the underline and the sub-bar. */
	align-items: flex-end;
	height: 100%;
	/* `overflow-x: clip` lets the bar still constrain its horizontal
	 * width (so the scroll-nav arrows have something to act on) while
	 * `overflow-y: visible` keeps the group dropdowns escapable. Plain
	 * `overflow-x: auto` would clip BOTH axes and hide the dropdown. */
	overflow-x: clip;
	overflow-y: visible;
	scrollbar-width: none;
}
.asa-cat-bar__scroll::-webkit-scrollbar {
	display: none;
}

.asa-cat-chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 20px 22px;
	background: transparent;
	color: var(--asa-ink-500);
	border: 0;
	font-weight: 500;
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	transition: color var(--asa-dur) var(--asa-ease);
	line-height: 1;
}
.asa-cat-chip::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 2px;
	background: var(--asa-purple);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--asa-dur) var(--asa-ease);
}
.asa-cat-chip:hover {
	color: var(--asa-ink-900);
}
.asa-cat-chip.is-active {
	color: var(--asa-purple);
	font-weight: 600;
}
.asa-cat-chip.is-active::after {
	transform: scaleX(1);
}

/* ─── Group toggle + dropdown ────────────────────────────── */
/* Each group renders as a chip with a caret. Hovering the chip (on
 * desktop) or toggling it via JS exposes a dropdown that lists every
 * parent category bundled into the group. The dropdown reuses the same
 * positioning + visual language as `.asa-filter__menu` so the strip
 * reads as one navigation surface. */
.asa-group {
	position: relative;
	flex-shrink: 0;
	display: inline-flex;
}
.asa-group__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 20px 22px;
	background: transparent;
	color: var(--asa-ink-500);
	border: 0;
	font-family: inherit;
	font-weight: 500;
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	transition: color var(--asa-dur) var(--asa-ease);
	/* Reset Astra theme's global `button` chrome — the inherited
	 * appearance + faint drop shadow render as a subtle border on the
	 * left, right, and bottom of every group chip. !important is
	 * required because the theme's `button:hover, button:focus` rule
	 * carries `(0,0,2)` specificity and ships later in the cascade. */
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
}
.asa-group__toggle::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 2px;
	background: var(--asa-purple);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--asa-dur) var(--asa-ease);
}
.asa-group__toggle:hover {
	color: var(--asa-ink-900);
	background: transparent;
	box-shadow: none !important;
}
.asa-group__toggle:focus,
.asa-group__toggle:focus-visible {
	color: var(--asa-ink-900);
	background: transparent;
	outline: 0;
	box-shadow: none !important;
	border-color: transparent;
}
.asa-group.is-active .asa-group__toggle {
	color: var(--asa-purple);
	font-weight: 600;
}
.asa-group.is-active .asa-group__toggle::after {
	transform: scaleX(1);
}
.asa-group__caret {
	display: inline-flex;
	align-items: center;
	color: var(--asa-ink-400);
	transition: transform var(--asa-dur);
}
.asa-group:hover .asa-group__caret,
.asa-group.is-open .asa-group__caret {
	transform: rotate(180deg);
}
.asa-group.is-active .asa-group__caret {
	color: var(--asa-purple);
}

.asa-group__menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--asa-line);
	border-radius: var(--asa-radius-md);
	box-shadow: 0 12px 32px -12px rgba(12, 7, 59, 0.18);
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition:
		opacity var(--asa-dur),
		transform var(--asa-dur);
	z-index: 60;
}
.asa-group:hover .asa-group__menu,
.asa-group.is-open .asa-group__menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.asa-group__option {
	display: block;
	padding: 8px 12px;
	font-size: 13px;
	color: var(--asa-ink-700);
	text-decoration: none;
	border-radius: 3px;
	cursor: pointer;
	transition:
		background var(--asa-dur),
		color var(--asa-dur);
}
.asa-group__option:hover,
.asa-group__option:focus,
.asa-group__option:focus-visible {
	background: rgba(73, 44, 221, 0.08);
	color: var(--asa-purple);
	outline: 0;
}
.asa-group__option.is-active {
	color: var(--asa-purple);
	font-weight: 600;
}
/* ─── Subcategory bar ────────────────────────────────────── */
/* Subcategory strip sits on a slightly tinted background so the two
 * navigation rows read as separate surfaces (top: groups; bottom:
 * subs) without needing a hard divider line. */
.asa-sub-bar {
	grid-area: sub;
	background: #f7f8fa;
	position: relative;
	padding: 8px 12px;
}
.asa-sub-bar__scroll {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}
.asa-sub-bar__scroll::-webkit-scrollbar {
	display: none;
}

/* Subcategory chips render as outlined pills. Default state is a
 * borderless transparent pill so the strip reads as a list of choices
 * rather than a bag of buttons; the active chip lights up with a
 * purple border + tinted background + purple text. Hover hints at the
 * active treatment without committing the full border. */
.asa-sub-chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: transparent;
	color: var(--asa-ink-700);
	border: 1px solid transparent;
	border-radius: 999px;
	font-weight: 500;
	font-size: 12px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--asa-dur),
		background var(--asa-dur),
		border-color var(--asa-dur);
}
.asa-sub-chip:hover {
	color: var(--asa-purple);
	background: rgba(73, 44, 221, 0.05);
}
.asa-sub-chip.is-active {
	color: var(--asa-purple);
	background: rgba(73, 44, 221, 0.06);
	border-color: var(--asa-purple);
	font-weight: 600;
}

/* ─── Scroll-nav arrows (cat-bar + sub-bar) ──────────────── */
/* Absolute-positioned arrow buttons overlay the left / right edges of
 * each scroll strip. The hydrator removes the `hidden` attribute when
 * the strip overflows in that direction and re-adds it once the user
 * has scrolled to that boundary. The buttons carry an opaque gradient
 * background that fades into the strip so chips passing under the
 * button visually fade out instead of disappearing under a hard edge.
 *
 * Astra's global `button:hover, button:focus { background-color:
 * var(--ast-global-color-1); color: #fff }` rule would otherwise paint
 * the arrows full-purple on hover; the `:hover` / `:focus` overrides
 * below restore the gradient background and switch the icon colour to
 * the brand purple instead. */
.asa-cat-bar__nav,
.asa-sub-bar__nav {
	position: absolute;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--asa-line);
	border-radius: 50%;
	background: #fff;
	color: var(--asa-ink-700);
	cursor: pointer;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%);
	box-shadow: 0 4px 12px -2px rgba(12, 7, 59, 0.12);
	transition:
		opacity var(--asa-dur) var(--asa-ease),
		color var(--asa-dur),
		border-color var(--asa-dur),
		box-shadow var(--asa-dur);
}
.asa-cat-bar__nav[hidden],
.asa-sub-bar__nav[hidden] {
	display: none;
}
.asa-cat-bar__nav--prev,
.asa-sub-bar__nav--prev {
	left: 4px;
}
.asa-cat-bar__nav--next,
.asa-sub-bar__nav--next {
	right: 4px;
}
/* Reveal the round buttons only while the user is interacting with
 * the surrounding bar — hover on the strip itself or keyboard focus
 * on the button. This keeps the nav surface from competing with the
 * tab strip in the rest state while still being there the moment the
 * user reaches for it. */
.asa-cat-bar:hover .asa-cat-bar__nav:not([hidden]),
.asa-cat-bar:focus-within .asa-cat-bar__nav:not([hidden]),
.asa-sub-bar:hover .asa-sub-bar__nav:not([hidden]),
.asa-sub-bar:focus-within .asa-sub-bar__nav:not([hidden]) {
	opacity: 1;
	pointer-events: auto;
}
.asa-cat-bar__nav:hover,
.asa-cat-bar__nav:focus,
.asa-cat-bar__nav:focus-visible,
.asa-sub-bar__nav:hover,
.asa-sub-bar__nav:focus,
.asa-sub-bar__nav:focus-visible {
	background: #fff;
	color: var(--asa-purple);
	border-color: var(--asa-purple);
	outline: 0;
	box-shadow: 0 6px 16px -2px rgba(73, 44, 221, 0.25);
}

/* ─── Filter pills ───────────────────────────────────────── */
.asa-filters {
	grid-area: filters;
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: flex-end;
	padding: 12px 10px;
}

.asa-filter {
	position: relative;
}
.asa-filter__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid var(--asa-line);
	color: var(--asa-ink-700);
	font-weight: 500;
	font-size: 13px;
	cursor: pointer;
	transition:
		border-color var(--asa-dur),
		box-shadow var(--asa-dur);
}
/* `background-color` is explicit because the Astra theme ships a global
 * `button:hover, button:focus { background-color: var(--ast-global-color-1);
 * color: #fff }` rule that fills any unstyled `<button>` with the theme
 * accent on hover / focus and would otherwise drown out the subtle
 * purple-tint we want here. The `:focus` override also neutralizes the
 * theme's white-text-on-purple state the toggle picks up after a click. */
.asa-filter__toggle:hover {
	background-color: rgba(73, 44, 221, 0.08);
	border-color: var(--asa-purple);
	color: var(--asa-purple);
}
.asa-filter__toggle:hover .asa-filter__caret {
	color: var(--asa-purple);
}
.asa-filter__toggle:focus,
.asa-filter__toggle:focus-visible {
	background-color: #fff;
	color: var(--asa-ink-700);
	border-color: var(--asa-purple);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(73, 44, 221, 0.1);
}
.asa-filter__toggle:focus:hover,
.asa-filter__toggle:focus-visible:hover {
	background-color: rgba(73, 44, 221, 0.08);
	color: var(--asa-purple);
}
.asa-filter.is-open > .asa-filter__toggle {
	border-color: var(--asa-purple);
	box-shadow: 0 0 0 3px rgba(73, 44, 221, 0.1);
}
.asa-filter__caret {
	display: inline-flex;
	align-items: center;
	color: var(--asa-ink-400);
	transition: transform var(--asa-dur);
}
.asa-filter.is-open .asa-filter__caret {
	transform: rotate(180deg);
}

.asa-filter__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 160px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--asa-line);
	border-radius: var(--asa-radius-md);
	box-shadow: 0 12px 32px -12px rgba(12, 7, 59, 0.18);
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition:
		opacity var(--asa-dur),
		transform var(--asa-dur);
	z-index: 50;
}
.asa-filter.is-open .asa-filter__menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.asa-filter__option {
	padding: 8px 12px;
	font-size: 13px;
	color: var(--asa-ink-700);
	border-radius: 6px;
	cursor: pointer;
}
.asa-filter__option:hover {
	background: rgba(73, 44, 221, 0.08);
	color: var(--asa-purple);
}
.asa-filter__option.is-active {
	color: var(--asa-purple);
	font-weight: 600;
}

/* ─── Grid ───────────────────────────────────────────────── */
.asa-grid {
	padding-top: 24px;
	padding-bottom: 40px;
	transition: opacity var(--asa-dur);
}
.asa-grid.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.asa-grid__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--asa-ink-500);
}
.asa-grid__count b {
	color: var(--asa-ink-900);
	font-weight: 600;
}

.asa-grid__empty {
	padding: 40px 0;
	text-align: center;
	color: var(--asa-ink-400);
}

.asa-grid__foot {
	margin-top: 24px;
}

/* Corner badges on cards. The card markup itself reuses the parent
 * plugin's `.stc-grid-item` styling — these rules just position the
 * archive-v3 specific badges on top. */
.asa-card {
	position: relative;
}
.asa-card__corner-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 4px;
	color: #1a1a1a;
	box-shadow: 0 2px 6px -2px rgba(12, 7, 59, 0.25);
}
.asa-card__corner-badge--new {
	background: #f1b500;
	top: 0;
	right: 0;
	padding: 5px 10px;
	font-size: 12px;
	letter-spacing: 0;
	line-height: 1;
	border-radius: 3px;
}
.asa-card__corner-badge--popular {
	background: var(--asa-purple);
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	top: 0;
	right: 0;
	padding: 5px 10px;
	font-size: 12px;
	letter-spacing: 0;
	line-height: 1;
	border-radius: 3px;
}
.asa-card__corner-badge-icon {
	display: inline-flex;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.asa-card__corner-badge-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Card footer layout — title left, builder icons right, excerpt below.
 * Overrides the legacy `.stc-grid-new-item .stc-grid-item-header` rules
 * which stack everything via `display: grid` and centre the title. */
.asa-card .stc-grid-item-header {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	text-align: left;
}
.asa-card-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}
.asa-card .stc-grid-item-title {
	text-align: left;
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--asa-ink-900);
	margin: 0;
}
.asa-card .stc-page-builders {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.asa-card .stc-page-builders img {
	width: 18px;
	height: 18px;
	display: block;
}
.asa-card .stc-grid-item-desc {
	font-size: 12px;
	line-height: 1.4;
	color: var(--asa-ink-500);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── Pagination ─────────────────────────────────────────── */
.asa-pager {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: center;
}
.asa-pager__list {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.asa-pager__num,
.asa-pager__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 12px;
	border-radius: var(--asa-radius);
	background: #fff;
	border: 1px solid var(--asa-line);
	color: var(--asa-ink-700);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition:
		border-color var(--asa-dur),
		color var(--asa-dur),
		background var(--asa-dur);
}
.asa-pager__num:hover,
.asa-pager__nav:hover {
	border-color: #cfd5dd;
	color: var(--asa-ink-900);
}
.asa-pager__num.is-active {
	background: var(--asa-purple);
	border-color: var(--asa-purple);
	color: #fff;
}
.asa-pager__nav.is-disabled {
	opacity: 0.45;
	pointer-events: none;
}
.asa-pager__gap {
	display: inline-flex;
	align-items: center;
	color: var(--asa-ink-400);
	padding: 0 4px;
}

/* ─── Mobile breakpoints ─────────────────────────────────── */
@media (max-width: 768px) {
	/* Collapse the grid layout so the filter row stacks BELOW the
	 * subcategory bar instead of squeezing the cat-bar at the top.
	 * Natural DOM order (cat → sub → filters) becomes visual order. */
	.asa-categories {
		display: block;
	}
	.asa-hero__title {
		font-size: 24px;
	}
	.asa-filters {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.asa-filter-panel {
		min-width: 0;
		max-width: calc(100vw - 32px);
		right: 16px;
	}
	.asa-filter-panel__form {
		grid-template-columns: 1fr;
	}
}