/**
 * Wbcom Family
 *
 * Two different colour strategies, for a reason.
 *
 * The BAND does not paint its own background - it sits on whatever the footer
 * is. Themes commonly paint a dark footer with their own utility classes
 * rather than by redefining their custom properties, so asserting a token
 * here produced light-theme grey on a near-black footer at 2.54:1. It
 * therefore inherits the footer's own colour and uses opacity for hierarchy,
 * which is correct on a dark or a light footer without knowing which it is.
 *
 * The CATALOG does paint its own ground, so its surface and text tokens are
 * drawn from the same set and stay paired whatever surrounds it.
 *
 * Neither depends on the host theme's utility-class build, which would not
 * scan a plugin's markup.
 */

/* ---------- footer band ---------- */

/*
 * Chips, not a link grid. The footer this sits in already carries three
 * columns of small grey links and a legal row; a fourth column-list of
 * product names read as more of the same and made a 1.03-viewport footer
 * worse. As bordered chips the set reads as one object - a roster - which is
 * the job it is actually doing: saying these people ship real software.
 */

.wbcom-family {
	/*
	 * A full-width strip between the page content and the footer, so the
	 * footer keeps its own shape and its legal row stays last. Colour is
	 * inherited, never asserted: this now sits on the page ground rather
	 * than the footer's, and those are different in both value and theme.
	 */
	padding-block: 2rem;
	color: inherit;
	border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	background: color-mix(in srgb, currentColor 3%, transparent);
}

.wbcom-family__inner {
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.wbcom-family__kicker {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.6;
}

.wbcom-family__tagline {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	color: inherit;
	opacity: 0.55;
}

.wbcom-family__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
}

.wbcom-family__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 36px;
	padding: 0.3125rem 0.75rem 0.3125rem 0.5rem;
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 999px;
	font-size: 0.8125rem;
	line-height: 1.2;
	color: inherit;
	opacity: 0.7;
	text-decoration: none;
	white-space: nowrap;
}

.wbcom-family__link:hover,
.wbcom-family__link:focus-visible {
	opacity: 1;
	border-color: color-mix(in srgb, currentColor 35%, transparent);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.wbcom-family__link img {
	width: 16px;
	height: 16px;
	flex: none;
	opacity: 0.9;
}

.wbcom-family__sisters {
	margin: 1.25rem 0 0;
	font-size: 0.8125rem;
	color: inherit;
	opacity: 0.55;
}

.wbcom-family__sisters a {
	color: inherit;
	text-decoration: none;
}

.wbcom-family__sisters a:hover,
.wbcom-family__sisters a:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Chips are already compact; on a narrow screen let them fill the row. */
@media (max-width: 30rem) {
	.wbcom-family__link {
		font-size: 0.75rem;
		padding-inline: 0.5rem 0.625rem;
	}
}

/* ---------- sidebar catalog ---------- */

.wbcom-catalog {
	padding: 1.25rem;
	border: 1px solid var(--color-surface-tertiary, rgba(127, 127, 127, 0.25));
	border-radius: 0.75rem;
	background: var(--color-surface-secondary, rgba(127, 127, 127, 0.06));
}

.wbcom-catalog__heading {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-primary, #111827);
}

.wbcom-catalog__sub {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--color-text-tertiary, #6b7280);
}

.wbcom-catalog__list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.wbcom-catalog__link {
	display: flex;
	gap: 0.75rem;
	margin: -0.5rem;
	padding: 0.5rem;
	border-radius: 0.5rem;
	text-decoration: none;
}

.wbcom-catalog__link:hover,
.wbcom-catalog__link:focus-visible {
	background: var(--color-surface-primary, rgba(127, 127, 127, 0.08));
}

.wbcom-catalog__link img {
	width: 24px;
	height: 24px;
	flex: none;
	margin-top: 0.125rem;
	opacity: 0.8;
}

.wbcom-catalog__link:hover img,
.wbcom-catalog__link:focus-visible img {
	opacity: 1;
}

.wbcom-catalog__name {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-primary, #111827);
}

.wbcom-catalog__link:hover .wbcom-catalog__name,
.wbcom-catalog__link:focus-visible .wbcom-catalog__name {
	color: var(--color-accent, #4a154b);
}

.wbcom-catalog__pitch {
	display: block;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--color-text-tertiary, #6b7280);
}

.wbcom-catalog__more {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-accent, #4a154b);
}

@media (prefers-reduced-motion: no-preference) {
	.wbcom-family__link,
	.wbcom-family__link img,
	.wbcom-catalog__link,
	.wbcom-catalog__link img,
	.wbcom-catalog__name {
		transition: color 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
	}
}