/* =====================================================================
   Kalos Planes — grid del shortcode [kalos_planes].
   Reutiliza .plan-card del tema Kalos; sólo maneja las columnas según la
   cantidad de planes (1 a 5+), con override por --kp-cols y colapso responsive.
   El nº de columnas se conduce por la variable --kp-cols:
     · auto  → la fija data-count (abajo)
     · forzado → el shortcode setea style="--kp-cols:N" inline (gana al auto)
     · responsive → los @media la pisan con !important (colapsan hasta forzado)
   ===================================================================== */
.kalos-planes.plans-grid {
	grid-template-columns: repeat(var(--kp-cols, 3), minmax(0, 1fr));
	align-items: stretch;
}

/* Auto por cantidad */
.kalos-planes[data-plans-count="1"] { --kp-cols: 1; max-width: 440px; margin-inline: auto; }
.kalos-planes[data-plans-count="2"] { --kp-cols: 2; max-width: 780px; margin-inline: auto; }
.kalos-planes[data-plans-count="3"] { --kp-cols: 3; }
.kalos-planes[data-plans-count="4"] { --kp-cols: 4; }
.kalos-planes[data-plans-count="5"] { --kp-cols: 5; }

/* Con 4–5 planes las tarjetas quedan angostas: a partir de acá bajamos a 3 col */
@media (max-width: 1280px) {
	.kalos-planes[data-plans-count="4"],
	.kalos-planes[data-plans-count="5"] { --kp-cols: 3 !important; max-width: none; }
}
/* Tablet: máximo 2 columnas, cualquiera sea el pedido */
@media (max-width: 980px) {
	.kalos-planes { --kp-cols: 2 !important; max-width: 720px; margin-inline: auto; }
	.kalos-planes[data-plans-count="1"] { --kp-cols: 1 !important; max-width: 440px; }
}
/* Móvil: una sola columna */
@media (max-width: 640px) {
	.kalos-planes { --kp-cols: 1 !important; max-width: 440px; }
}

/* Nota de facturación (por si el tema no la trae estilada) */
.kalos-planes .plan-billing {
	display: block;
	margin-top: -.4rem;
	font-family: var(--font-mono, monospace);
	font-size: .72rem;
	color: var(--muted, #86867e);
}