/**
 * "Our Supporters" page — a two-column wall of sponsor logos.
 *
 * Gutters are ~420px at the 1920px design width, expressed in vw so they close
 * up on narrower screens rather than starving the content.
 */

/* #content is a flex row and GeneratePress leaves <main> at flex 0 1 auto, so
   without this it shrink-wraps its widest child instead of filling the page. */
.rth-supporters {
	flex: 1;
	min-width: 0;
}

.supporters {
	margin-inline: clamp(20px, 21.9vw, 420px); /* 420 / 1920 */
	padding-block: var(--space-xl) var(--space-2xl);
}

.supporters__title {
	margin-bottom: clamp(2.5rem, 5vw, 5.5rem);
}

.supporters__wall {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(2.5rem, 5vw, 5rem) var(--space-xl);
	align-items: start;
	justify-items: center;
}

/* The two logos that stand alone, top and bottom of the wall. */
.supporters__item--wide {
	grid-column: 1 / -1;
}

.supporters__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	text-align: center;
}

.supporters__logo {
	display: block;
	line-height: 0;
}

/* The whole card is the click target. Stretched from the existing link rather
   than wrapping the card in one, because the note may itself contain a link and
   anchors cannot nest. Only when there is a URL — .supporters__logo is a <span>
   otherwise, and an overlay there would just block the text. */
a.supporters__logo::after {
	content: '';
	position: absolute;
	inset: 0;
}

a.supporters__logo:focus-visible::after {
	outline: 2px solid var(--color-olive);
	outline-offset: 4px;
}

/* Logos are supplied at wildly different aspect ratios, so cap the height and
   let each keep its own width rather than forcing a uniform box. */
.supporters__img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 120px;
	object-fit: contain;
}

.supporters__item--wide .supporters__img {
	max-height: 200px;
}

/* Figma: JetBrains Mono Regular 17, line height 27.2, letter spacing 0px. */
.supporters__note {
	margin: 0;
	max-width: 42ch;
	font-family: var(--font-mono); /* JetBrains Mono */
	font-weight: 400;
	font-size: calc(1.0625rem * var(--fs-scale)); /* 17px */
	line-height: 1.6; /* 27.2 / 17 */
	letter-spacing: 0;
	color: var(--color-olive);
}

/* Lifted above the stretched overlay so it stays clickable in its own right. */
.supporters__note a {
	position: relative;
	z-index: 1;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	/* Long URLs must wrap rather than push the column wider. */
	overflow-wrap: anywhere;
}

@media (max-width: 700px) {
	.supporters__wall {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 395px) {
	.supporters__title {
		font-size: calc(2rem * var(--fs-scale)); /* 32px */
	}
}