/**
 * Contact hub — the /contact/ chooser grid.
 *
 * Aliases the canonical token layer (css/tsf-tokens.css) with var() fallbacks,
 * per the site convention. No brand colours hardcoded.
 */

.tsf-contact-hub {
	/* Card titles want --tsf-text-strong, not --tsf-text: body grey (#CBCBCB)
	   is too quiet for a heading that has to be scannable at a glance. */
	--tsfch-fg: var(--tsf-text-strong, #f2f2f2);
	--tsfch-body: var(--tsf-text, #cbcbcb);
	--tsfch-muted: var(--tsf-text-muted, #8a8a8a);
	--tsfch-surface: var(--tsf-surface, #0f0f0f);
	--tsfch-border: var(--tsf-line-soft, #2a2a2a);
	--tsfch-accent: var(--tsf-orange, #ff6600);
	--tsfch-radius: var(--tsf-radius-lg, 13px);
	--tsfch-gap: var(--tsf-space-5, 13px);

	max-width: 62rem;
	margin-inline: auto;
	font-family: var(--tsf-font-body, inherit);
	color: var(--tsfch-fg);
	/* Cards are sized by the hub, not by whatever container it lands in. */
	container-type: inline-size;
}

/* ── disclaimer note ──────────────────────────────────────────────────────
 * One line where there used to be seven. It has to be visible enough that a
 * lost visitor reads it, and quiet enough that everyone else doesn't have to.
 */

.tsf-contact-hub__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 var(--tsf-space-8, 26px);
	padding: 11px 13px;
	background: var(--tsfch-surface);
	border: 1px solid var(--tsfch-border);
	border-radius: var(--tsf-radius-md, 10px);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--tsfch-body);
}

.tsf-contact-hub__note strong {
	color: var(--tsfch-fg);
	font-weight: 600;
}

.tsf-contact-hub__note .tsf-contact-hub__icon {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--tsfch-accent);
}

.tsf-contact-hub__note a {
	color: var(--tsfch-accent);
	text-decoration: none;
	white-space: nowrap;
}

.tsf-contact-hub__note a:hover {
	text-decoration: underline;
}

/* ── group headings ───────────────────────────────────────────────────────── */

.tsf-contact-hub__group {
	margin: var(--tsf-space-8, 26px) 0 var(--tsf-space-4, 10px);
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tsfch-muted);
}

.tsf-contact-hub__group:first-of-type {
	margin-top: 0;
}

/* ── the Elementor container-query guard ──────────────────────────────────
 *
 * MANDATORY, not optional. Any TSF component declaring container-type inside
 * an Elementor container mis-sizes below 768px, because Elementor ships
 * --flex-wrap-mobile: wrap as the default on every .e-con, and a wrapping flex
 * container must intrinsically size its items to decide line breaks — which
 * resolves our @container query against a width that isn't the final one and
 * bakes in a wrong height. Chrome keeps it. Symptom is a large hole, or
 * sibling widgets rendering short and overlapping.
 *
 * Specificity is load-bearing. Override --flex-wrap, NOT --flex-wrap-mobile:
 * per-template rules set the latter at (0,3,0) and would win. :has()
 * contributes its most specific argument, so .e-con.e-flex:has(.tsf-contact-hub)
 * is (0,3,0) and wins regardless of load order. Do not simplify to
 * .e-con:has(…) — at (0,2,0) it silently loses. Exact no-op at >=768px.
 *
 * Same guard as listing-hero.css. See the Elementor column-wrap notes.
 */
@media (max-width: 767px) {
	.e-con.e-flex:has(.tsf-contact-hub) {
		--flex-wrap: nowrap;
	}
}

/* ── grid ─────────────────────────────────────────────────────────────────
 * The grid itself needs no container query — repeat(auto-fit, minmax(...))
 * handles the column count. container-type above exists so the card internals
 * (the badge) respond to the block's own width rather than the viewport's,
 * which matters if this is ever dropped into a narrow column.
 */

.tsf-contact-hub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--tsfch-gap);
	margin-bottom: var(--tsfch-gap);
}

/* The featured card spans the row on its own. */
.tsf-contact-hub__grid--feature {
	grid-template-columns: minmax(0, 1fr);
}

/* ── cards ────────────────────────────────────────────────────────────────── */

.tsf-contact-hub__card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 15px 16px;
	background: var(--tsfch-surface);
	border: 1px solid var(--tsfch-border);
	border-radius: var(--tsfch-radius);
	/* Beats the Elementor kit's global <a> colour without !important. */
	color: var(--tsfch-fg);
	text-decoration: none;
	transition: border-color 120ms ease, transform 120ms ease;
}

.tsf-contact-hub .tsf-contact-hub__card:hover,
.tsf-contact-hub .tsf-contact-hub__card:focus-visible {
	border-color: var(--tsfch-accent);
	text-decoration: none;
	transform: translateY(-1px);
}

.tsf-contact-hub .tsf-contact-hub__card:focus-visible {
	outline: 2px solid var(--tsfch-accent);
	outline-offset: 2px;
}

/*
 * Exactly one accented card, because exactly one is the primary action. The
 * old page accented all six in rotating colours, which is the same as
 * accenting none.
 */
.tsf-contact-hub__card.is-featured {
	border-width: 2px;
	border-color: var(--tsfch-accent);
	padding: 17px 18px;
}

.tsf-contact-hub__head {
	display: flex;
	align-items: center;
	gap: 9px;
}

.tsf-contact-hub__icon {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	color: var(--tsfch-muted);
}

.tsf-contact-hub__card.is-featured .tsf-contact-hub__icon {
	color: var(--tsfch-accent);
}

.tsf-contact-hub__title {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--tsfch-fg);
}

.tsf-contact-hub__card.is-featured .tsf-contact-hub__title {
	font-size: 1.0625rem;
}

.tsf-contact-hub__badge {
	margin-left: auto;
	flex: 0 0 auto;
	padding: 1px 9px;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--tsfch-accent);
	border: 1px solid currentColor;
	border-radius: 20px;
}

.tsf-contact-hub__text {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--tsfch-muted);
}

.tsf-contact-hub__card.is-featured .tsf-contact-hub__text {
	font-size: 0.875rem;
}

/* Narrow containers: let the badge drop rather than squash the title. */
@container (max-width: 26rem) {
	.tsf-contact-hub__head {
		flex-wrap: wrap;
	}

	.tsf-contact-hub__badge {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsf-contact-hub__card {
		transition: none;
	}

	.tsf-contact-hub .tsf-contact-hub__card:hover,
	.tsf-contact-hub .tsf-contact-hub__card:focus-visible {
		transform: none;
	}
}