/* ────────────────────────────────────────────────────────────
   03-text-table.css — two-column: text/list left, table right
   Section uses: .text-table
   Table base styles (header color, zebra, padding) live in
   01-base.css and apply to all wp-block-table instances.
   ──────────────────────────────────────────────────────────── */

/* ── Section wrapper ──────────────────────────────────────── */
.text-table {
	padding: var(--spacing-4xl) var(--spacing-md);
}

/* ── Row: equal columns ───────────────────────────────────── */
.text-table__row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 2fr);
	gap: var(--spacing-4xl);
	max-width: var(--container-max-width);
	margin: 0 auto;
}

/* ── Content column ───────────────────────────────────────── */
.text-table__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

/* ── Typography ───────────────────────────────────────────── */
.text-table h2 {
	font-family: var(--font-primary);
	font-size: var(--text-heading-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-heading);
	margin: 0;
}

.text-table p {
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-body);
	margin: 0;
}

.text-table .wp-block-list {
	margin: 0;
	padding-left: var(--spacing-md);
	color: var(--color-text-body);
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	line-height: var(--line-height-relaxed);
}

/* ── Override base figure margin within the layout grid ─────── */
.text-table__table figure.wp-block-table {
	margin: 0;
}

.text-table__table .wp-block-table th,
.text-table__table .wp-block-table td {
	text-align: center;
}

/* ── Dark-bg overrides ────────────────────────────────────── */
.is-style-bg-dark .text-table h2,
.is-style-bg-dark .text-table p,
.is-style-bg-dark .text-table .wp-block-list {
	color: var(--color-text-body-inverse);
}

.is-style-bg-dark .text-table__table thead tr {
	background-color: var(--color-black-soft);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
	.text-table {
		padding-top:    var(--spacing-2xl);
		padding-bottom: var(--spacing-2xl);
	}
}

@media (max-width: 768px) {
	.text-table {
		padding-left:  var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}
}

@media (max-width: 767px) {
	.text-table__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--spacing-xl);
	}
}