/**
 * Picture and text rows: `mt-12 lg:mt-16` under the header, `space-y-16
 * lg:space-y-24` between the rows; a row `grid items-center gap-8
 * lg:grid-cols-12 lg:gap-16`, picture and text in 6 each, every second row
 * with the picture on the right. The tile `mb-4 h-11 w-11`, the heading
 * `text-2xl md:text-3xl font-bold leading-snug` (from 768px text-3xl's own
 * 36px line height wins over leading-snug), the text `mt-4 text-lg`,
 * the table `mt-6 divide-y border-y`, a row `py-2.5 text-sm`, the first
 * column 3.5rem, as the prototype's three-cell rows; since October 24,
 * 2026 a table with column heads, a note
 * under its row (SBD board, card 129). The link `mt-6`.
 */

.sba-c-media-rows .sba-c-section-header + .sba-c-media-rows-list {
	margin-top: 48px;
}

.sba-c-media-rows .sba-c-media-rows-list {
	display: grid;
	gap: 64px;
}

.sba-c-media-rows .sba-c-media-rows-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 32px;
	scroll-margin-top: 96px;
}

.sba-c-media-rows .sba-c-media-rows-tile {
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
}

.sba-c-media-rows .sba-c-media-rows-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 24px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.375;
}

.sba-c-media-rows .sba-c-media-rows-copy .sba-c-prose {
	margin-top: 16px;
}

.sba-c-media-rows .sba-c-media-rows-copy .sba-c-prose > * + * {
	margin-top: 16px;
}

.sba-c-media-rows .sba-c-media-rows-table {
	width: 100%;
	margin: 24px 0 0;
	border: 0;
	border-top: 1px solid var(--sba-border);
	border-bottom: 1px solid var(--sba-border);
	border-collapse: collapse;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-media-rows .sba-c-media-rows-table th,
.sba-c-media-rows .sba-c-media-rows-table td {
	padding: 10px 0 10px 12px;
	border: 0;
	background: none;
	font-variant-numeric: tabular-nums;
	text-align: left;
	vertical-align: baseline;
	white-space: nowrap;
}

.sba-c-media-rows .sba-c-media-rows-table :is(th, td):first-child {
	width: 3.5rem;
	padding-left: 0;
}

.sba-c-media-rows .sba-c-media-rows-table thead th {
	color: var(--sba-slate);
	font-weight: 600;
}

.sba-c-media-rows .sba-c-media-rows-table tbody {
	border-top: 1px solid var(--sba-border);
}

.sba-c-media-rows .sba-c-media-rows-table tbody th {
	color: var(--sba-red-dark);
	font-weight: 500;
}

.sba-c-media-rows .sba-c-media-rows-table tbody td {
	color: var(--sba-charcoal);
	font-weight: 600;
}

/* The note: under the values, from the second column, in the muted text. */
.sba-c-media-rows .sba-c-media-rows-table .sba-c-media-rows-note td {
	padding-top: 0;
	color: var(--sba-slate);
	font-weight: 400;
	white-space: normal;
}

.sba-c-media-rows .sba-c-media-rows-table tr:has(+ .sba-c-media-rows-note) > * {
	padding-bottom: 2px;
}

.sba-c-media-rows .sba-c-media-rows-link {
	display: block;
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 24px;
}

/* Five columns in a phone's width: the heads a size smaller, the gaps 8px. */
@media (max-width: 479px) {
	.sba-c-media-rows .sba-c-media-rows-table th,
	.sba-c-media-rows .sba-c-media-rows-table td {
		padding-left: 8px;
	}

	.sba-c-media-rows .sba-c-media-rows-table thead th {
		font-size: 12px;
	}
}

@media (min-width: 768px) {
	.sba-c-media-rows .sba-c-media-rows-title {
		font-size: 30px;
		line-height: 36px;
	}
}

@media (min-width: 1024px) {
	.sba-c-media-rows .sba-c-section-header + .sba-c-media-rows-list {
		margin-top: 64px;
	}

	.sba-c-media-rows .sba-c-media-rows-list {
		gap: 96px;
	}

	.sba-c-media-rows .sba-c-media-rows-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 64px;
	}

	.sba-c-media-rows .sba-c-media-rows-flip .sba-c-media-rows-figure {
		order: 2;
	}
}