/**
 * Bloque iplacex/cards-accordion-color. Grid de tarjetas con variante de color
 * por tarjeta (light/blue/bluelight). En mobile cada tarjeta es un acordeón
 * colapsable (animación grid 0fr->1fr); en desktop (>=768px) los paneles quedan
 * abiertos y el botón deja de ser interactivo. Tokens theme.json.
 * Paridad con cards_accordion_color de iplacex24.
 *
 * Nota: el fondo de la variante "light" usa el literal #F0F0F7 (valor arbitrario
 * hardcodeado en el legacy `bg-[#F0F0F7]`, sin token equivalente en theme.json);
 * se replica tal cual por paridad 1:1.
 */

.ipx-cac,
.ipx-cac *,
.ipx-cac *::before,
.ipx-cac *::after {
	box-sizing: border-box;
}

.ipx-cac {
	width: 100%;
	font-family: var(--wp--preset--font-family--montserrat);
}
.ipx-cac__inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem 1.25rem;
}
@media (min-width: 768px) { .ipx-cac__inner { padding: 5rem 2rem; } }
@media (min-width: 1024px) { .ipx-cac__inner { padding: 5rem 2.5rem; } }

/* ---------- Cabecera ---------- */
.ipx-cac__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--ipla-blue);
}
.ipx-cac__intro {
	margin-bottom: 2rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ipla-black);
}
@media (min-width: 768px) { .ipx-cac__intro { font-size: 1rem; } }
.ipx-cac__intro > * { margin: 0 0 0.75rem; }
.ipx-cac__intro > *:last-child { margin-bottom: 0; }
.ipx-cac__intro a {
	color: var(--wp--preset--color--ipla-lightblue);
	text-decoration: underline;
}

/* ---------- Grid ---------- */
.ipx-cac__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
@media (min-width: 768px) {
	.ipx-cac__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}
@media (min-width: 1024px) {
	.ipx-cac__grid { grid-template-columns: repeat(3, 1fr); }
}
.ipx-cac__item { margin: 0; }
@media (min-width: 768px) { .ipx-cac__item { height: 100%; } }

/* ---------- Tarjeta ---------- */
.ipx-cac__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 1rem;
	overflow: hidden;
}

/* Variantes de color */
.ipx-cac__card--light {
	background: #F0F0F7;
	color: var(--wp--preset--color--ipla-black);
}
.ipx-cac__card--blue {
	background: var(--wp--preset--color--ipla-blue);
	color: var(--wp--preset--color--white);
}
.ipx-cac__card--bluelight {
	background: var(--wp--preset--color--ipla-lightblue);
	color: var(--wp--preset--color--white);
}

/* ---------- Botón / cabecera de la tarjeta ---------- */
.ipx-cac__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.25rem;
	text-align: left;
	font-family: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
@media (min-width: 768px) { .ipx-cac__trigger { padding: 1.25rem 1.5rem; } }
.ipx-cac__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--ipla-lightblue);
	outline-offset: -2px;
}

.ipx-cac__card-title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: inherit;
}
@media (min-width: 768px) { .ipx-cac__card-title { font-size: 1.125rem; } }

.ipx-cac__icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	transform: rotate(0deg);
	transition: transform 0.3s ease;
}
.ipx-cac__trigger[aria-expanded="true"] .ipx-cac__icon { transform: rotate(180deg); }

/* ---------- Panel (animación grid) ---------- */
.ipx-cac__panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	overflow: hidden;
	padding: 0 1.25rem;
	flex-grow: 1;
	transition: grid-template-rows 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
@media (min-width: 768px) { .ipx-cac__panel { padding: 0 1.5rem; } }
.ipx-cac__panel.is-open { grid-template-rows: 1fr; opacity: 1; }
/* IMPORTANTE: este es el item de la grilla que colapsa (grid-template-rows
   0fr->1fr). No debe llevar padding/borde propios: aunque `min-height:0` anula
   la contribución de CONTENIDO al mínimo del track, el padding se suma igual al
   border-box mínimo del item y deja al track "atascado" en ~padding (el panel
   no colapsa a 0 y queda un remanente bajo el trigger que empuja el título
   arriba). El espacio inferior se aplica dentro, en .ipx-cac__card-body. */
.ipx-cac__panel-inner {
	min-height: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ipx-cac__separator {
	display: block;
	width: 5rem;
	height: 1.8px;
	margin-bottom: 1rem;
	border-radius: 9999px;
	flex-shrink: 0;
}
.ipx-cac__card--light .ipx-cac__separator { background: var(--wp--preset--color--ipla-lightblue); }
.ipx-cac__card--blue .ipx-cac__separator,
.ipx-cac__card--bluelight .ipx-cac__separator { background: var(--wp--preset--color--white); }

/* ---------- Cuerpo (rich text) ---------- */
.ipx-cac__card-body {
	font-size: 0.875rem;
	line-height: 1.5;
	color: inherit;
	flex-grow: 1;
	/* Espacio inferior del panel: va aquí (contenido) y NO en .ipx-cac__panel-inner
	   (item de la grilla) para que el panel colapse a 0 al cerrar. */
	padding-bottom: 1.5rem;
}
@media (min-width: 768px) { .ipx-cac__card-body { font-size: 1rem; } }
.ipx-cac__card-body > * { margin: 0 0 0.75rem; }
.ipx-cac__card-body > *:last-child { margin-bottom: 0; }
.ipx-cac__card-body ul,
.ipx-cac__card-body ol { padding-left: 1.25rem; }
.ipx-cac__card-body ul { list-style: disc; }
.ipx-cac__card-body ol { list-style: decimal; }
.ipx-cac__card-body li { margin-bottom: 0.35rem; }
.ipx-cac__card-body a {
	text-decoration: underline;
}
.ipx-cac__card--light .ipx-cac__card-body a { color: var(--wp--preset--color--ipla-lightblue); }
.ipx-cac__card--blue .ipx-cac__card-body a,
.ipx-cac__card--bluelight .ipx-cac__card-body a { color: var(--wp--preset--color--white); }

/* ---------- Desktop: paneles siempre abiertos, botón no interactivo ---------- */
@media (min-width: 768px) {
	.ipx-cac__trigger {
		cursor: default;
		pointer-events: none;
	}
	.ipx-cac__icon { display: none; }
	/* Paridad con el original (md:max-h-none): en desktop el panel queda en flujo
	   natural (block), NO como grid 1fr. El track grid introduce posicionamiento
	   subpixel que adelgaza la línea separadora del primer ítem al compararlos en
	   la grilla; en flujo normal todas las líneas renderizan igual. */
	.ipx-cac__panel {
		display: block;
		opacity: 1;
	}
}