/*
 * sponsors.css -- Sponsors section for single-event_instance and single-event_series.
 * Depends on event-instance.css (tokens, .ce-section-label, .mono).
 *
 * @package car-events
 * @since   1.5.0
 */

/* ── Section wrapper ─────────────────────────────────────────────────────── */

.ce-sponsors {
	padding: var(--density-pad);
	border-top: 1px solid var(--line);
}

.ce-sponsors > .ce-section-label {
	color: var(--fg-4);
	margin-bottom: 24px;
}

/* ── Tier blocks ─────────────────────────────────────────────────────────── */

.ce-sponsors__tier {
	margin-bottom: 28px;
}

.ce-sponsors__tier:last-child {
	margin-bottom: 0;
}

.ce-sponsors__tier-label {
	color: var(--fg-3);
	margin-bottom: 14px;
}

/* ── Lists (reset) ───────────────────────────────────────────────────────── */

.ce-sponsors__row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ── Premier row: 2-3 larger cells ──────────────────────────────────────── */

.ce-sponsors__row--premier {
	gap: 16px;
}

.ce-sponsors__row--premier .ce-sponsors__item {
	flex: 1 1 calc(33% - 16px);
	min-width: 160px;
	max-width: 280px;
}

.ce-sponsors__row--premier .ce-sponsors__link {
	min-height: 120px;
	border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line));
}

.ce-sponsors__row--premier .ce-sponsors__logo {
	max-height: 80px;
}

/* ── Standard row: denser, smaller cells ────────────────────────────────── */

.ce-sponsors__row--standard .ce-sponsors__item {
	flex: 1 1 calc(20% - 12px);
	min-width: 100px;
	max-width: 180px;
}

.ce-sponsors__row--standard .ce-sponsors__link {
	min-height: 80px;
	border: 1px solid var(--line);
}

.ce-sponsors__row--standard .ce-sponsors__logo {
	max-height: 52px;
}

/* ── Shared item + link ──────────────────────────────────────────────────── */

.ce-sponsors__item {
	display: flex;
}

.ce-sponsors__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 12px;
	border-radius: 10px;
	background: var(--bg-2);
	color: inherit;
	text-decoration: none;
	width: 100%;
	transition: border-color 120ms ease, background 120ms ease;
}

a.ce-sponsors__link:hover {
	background: var(--bg-3);
	border-color: var(--fg-3);
}

a.ce-sponsors__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ── Logo image ──────────────────────────────────────────────────────────── */

.ce-sponsors__logo {
	max-width: 100%;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* ── Sponsor name text ───────────────────────────────────────────────────── */

.ce-sponsors__name {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fg-3);
	text-align: center;
	line-height: 1.3;
	word-break: break-word;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.ce-sponsors__row--premier .ce-sponsors__item {
		flex: 1 1 calc(50% - 16px);
		min-width: 120px;
	}

	.ce-sponsors__row--standard .ce-sponsors__item {
		flex: 1 1 calc(33% - 12px);
		min-width: 90px;
	}
}