/* eqx/text-columns */

.eqx-text-columns__header { text-align: center; max-width: 720px; margin: 0 auto var(--spacing-lg); }
.eqx-text-columns__sub    { color: var(--eqx-text-muted); }
.eqx-text-columns--header-left .eqx-text-columns__header {
	text-align: left;
	margin-left: 0;
}

.eqx-text-columns__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	gap: var(--spacing-sm);
}
.eqx-text-columns--cols-2 .eqx-text-columns__grid { grid-template-columns: repeat(2, 1fr); }
.eqx-text-columns--cols-3 .eqx-text-columns__grid { grid-template-columns: repeat(3, 1fr); }
.eqx-text-columns--cols-4 .eqx-text-columns__grid { grid-template-columns: repeat(4, 1fr); }
/* Media queries add no specificity, so every override below has to match the
   two-class weight of the rules above it or it silently loses. The 560px rule
   used to be written as a bare `.eqx-text-columns__grid`, which is one class
   and therefore never beat `--cols-3 .eqx-text-columns__grid`. */
@media (max-width: 900px) {
	.eqx-text-columns--cols-3 .eqx-text-columns__grid,
	.eqx-text-columns--cols-4 .eqx-text-columns__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.eqx-text-columns--cols-2 .eqx-text-columns__grid,
	.eqx-text-columns--cols-3 .eqx-text-columns__grid,
	.eqx-text-columns--cols-4 .eqx-text-columns__grid { grid-template-columns: 1fr; }
}

/* A column with an icon centres its content; one without stays left-aligned.
   This was an inline `text-align:center` before. */
.eqx-text-column--has-icon { text-align: center; }

.eqx-text-column__icon {
	width: 56px; height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(var(--eqx-brand-accent-rgb),0.12);
	color: var(--eqx-brand-accent);
	border-radius: var(--radius-pill);
	margin-bottom: var(--spacing-sm);
}
.eqx-text-column__icon img { max-width: 32px; max-height: 32px; }
.eqx-text-column__heading { font-size: 1.0625rem; color: var(--eqx-brand-dark); font-weight: 700; margin: 0 0 var(--spacing-xs); }
.eqx-text-column__body    { color: var(--eqx-text-muted); font-size: 0.95rem; line-height: 1.55; }
.eqx-text-column__body p:last-child { margin-bottom: 0; }

/* Card style is the CSS default — every column gets a bordered tile.
   Only `--style-plain` opts out (used for legacy/raw content lists). */
.eqx-text-columns .eqx-text-column {
	background: var(--eqx-warm-white);
	border: 1px solid var(--eqx-border);
	border-radius: var(--radius-card);
	padding: var(--spacing-md) calc(var(--spacing-md) + 4px);
}
.eqx-text-columns .eqx-text-column__heading {
	margin-bottom: 10px;
}
.eqx-text-columns.eqx-bg--light .eqx-text-column {
	background: var(--eqx-warm-white);
}

/* Plain opt-out — no card chrome, just stacked text. */
.eqx-text-columns--style-plain .eqx-text-column {
	background: transparent;
	border: 0;
	padding: 0;
}

.eqx-bg--dark .eqx-text-column__heading { color: var(--eqx-warm-white); }
.eqx-bg--dark .eqx-text-column__body    { color: rgba(255,255,255,0.78); }