/* ────────────────────────────────────────────────────────────
   03-table.css — WordPress Core Table block
   Atomic chrome: flat cyan thead, zebra tbody, no cell borders,
   navy body text. Used inside .text-table and anywhere else a
   <table> appears in the editor.
   ──────────────────────────────────────────────────────────── */

.wp-block-table {
	margin: 0;
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	line-height: var(--line-height-normal);
}

/* Zero every native border — WP Core's 1px cell border collapses
   at the thead/tbody boundary into a visible dark line we don't
   want. Header fill + zebra rows carry the row separation. */
.wp-block-table table,
.wp-block-table thead,
.wp-block-table tbody,
.wp-block-table tfoot,
.wp-block-table tr,
.wp-block-table th,
.wp-block-table td {
	border: 0 !important;
}

.wp-block-table thead {
	background-color: var(--color-blue-primary);
}

.wp-block-table thead th {
	color: var(--color-white);
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	font-size: var(--text-body-base);
	text-align: center;
	padding: var(--spacing-sm) var(--spacing-md);
}

.wp-block-table tbody td {
	color: var(--color-blue-dark);
	padding: var(--spacing-sm) var(--spacing-md);
	vertical-align: middle;
}

.wp-block-table tbody tr:nth-child(odd)  { background-color: var(--color-white); }
.wp-block-table tbody tr:nth-child(even) { background-color: var(--color-gray-soft); }

.wp-block-table figcaption {
	margin-top: var(--spacing-xs);
	font-size: var(--text-body-sm);
	color: var(--color-black-soft);
	text-align: center;
}

/* ────────────────────────────────────────────────────────────
   text-table composite — two-column: copy left, table right
   Class chain: .text-table [.is-style-bg-light | .is-style-bg-medium | .is-style-bg-dark]
   ──────────────────────────────────────────────────────────── */

.text-table {
	padding: var(--spacing-3xl) var(--spacing-md);
}

.text-table__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--spacing-3xl);
	align-items: center;
	max-width: var(--container-max-width);
	margin-inline: auto;
}

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

.text-table h2 {
	font-family: var(--font-primary);
	font-size: var(--text-heading-xl);
	line-height: var(--line-height-tight);
	color: var(--color-text-heading);
	margin: 0 0 var(--spacing-xs) 0;
}

.text-table h3 {
	font-family: var(--font-primary);
	font-size: var(--text-heading-md);
	line-height: var(--line-height-snug);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-heading);
	margin: 0 0 var(--spacing-sm) 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.is-style-bg-dark h2,
.text-table.is-style-bg-dark h3,
.text-table.is-style-bg-dark p {
	color: var(--color-text-body-inverse);
}

@media (max-width: 1024px) {
	.text-table {
		padding-top: var(--spacing-2xl);
		padding-bottom: var(--spacing-2xl);
	}
	.text-table__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--spacing-xl);
	}
}

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