/**
 * Bloque iplacex/common-careers (Home carreras). Sección con hasta 3 tarjetas
 * de modalidad. Dos variantes: con imagen (tarjeta azul + foto) y sin imagen
 * (tarjeta gris). Grid 1 → 2/3 → 4 columnas. Tokens theme.json.
 *
 * Traducción de Tailwind del legacy commonCareers.php (paridad 1:1).
 */

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

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

/* ---------- Encabezado ---------- */
.ipx-ccar__heading {
	margin: 0 0 1.25rem;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--ipla-blue);
}
@media (min-width: 768px) {
	.ipx-ccar__heading { font-size: 2.25rem; margin-bottom: 3rem; }
}
.ipx-ccar__intro {
	margin: 0 0 2rem;
	color: var(--wp--preset--color--ipla-black);
	line-height: 1.5;
}
.ipx-ccar__intro > * { margin: 0 0 0.75rem; }
.ipx-ccar__intro > *:last-child { margin-bottom: 0; }
.ipx-ccar__intro h1 { font-size: 1.875rem; }
.ipx-ccar__intro h2 { font-size: 1.5rem; font-weight: 700; }
.ipx-ccar__intro h3 { font-weight: 700; }

/* ---------- Grid ---------- */
.ipx-ccar__grid {
	width: 100%;
	display: flex;
	flex-direction: column;
}
@media (min-width: 768px) {
	.ipx-ccar__grid { display: grid; column-gap: 2rem; }
	.ipx-ccar__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ipx-ccar__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ipx-ccar__grid--two,
	.ipx-ccar__grid--three { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ipx-ccar__card--wide-left { grid-column: span 2 / span 2; }
	.ipx-ccar__card--wide-right { grid-column: 3 / span 2; }
}

/* ---------- Tarjeta (base) ---------- */
.ipx-ccar__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 1.25rem;
	border-radius: 1rem;
	transition: transform 0.2s ease-in, box-shadow 0.2s ease-in, background-color 0.2s ease-in, color 0.2s ease-in;
}

.ipx-ccar__media { position: relative; flex: 1 1 auto; margin: 0; line-height: 0; }
.ipx-ccar__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 250px;
	object-fit: cover;
	object-position: center;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	transition: object-position 0.2s ease-in;
}
@media (min-width: 1024px) { .ipx-ccar__img { min-height: 150px; } }

.ipx-ccar__body { flex: 1 1 auto; padding: 3rem 2rem; }
.ipx-ccar__head {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}
.ipx-ccar__title-link { text-decoration: none; color: inherit; }
.ipx-ccar__title {
	margin: 0;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}
@media (min-width: 768px) { .ipx-ccar__title { font-size: 1.5rem; } }
@media (min-width: 1024px) { .ipx-ccar__title { font-size: 2.25rem; } }
.ipx-ccar__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	object-fit: contain;
	transition: transform 0.2s ease-in;
}
.ipx-ccar__text {
	margin-bottom: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.5;
}
.ipx-ccar__text > * { margin: 0 0 0.5rem; }
.ipx-ccar__text > *:last-child { margin-bottom: 0; }
.ipx-ccar__text ul { list-style: disc; padding-left: 1rem; margin: 0 0 0.5rem; }
.ipx-ccar__text li { margin-bottom: 0.5rem; }

.ipx-ccar__cta {
	display: block;
	width: fit-content;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0.25rem;
	transition: background-color 0.3s ease-in, color 0.3s ease-in;
}

/* ---------- Variante con imagen (tarjeta azul) ---------- */
.ipx-ccar__card--has-image {
	background: var(--wp--preset--color--ipla-blue);
	border-bottom: 6px solid var(--wp--preset--color--ipla-lightblue);
}
.ipx-ccar__card--has-image .ipx-ccar__body {
	background: var(--wp--preset--color--ipla-blue);
	color: var(--wp--preset--color--white);
	min-height: 270px;
	border-bottom-left-radius: 0.75rem;
	border-bottom-right-radius: 0.75rem;
}
@media (min-width: 768px) { .ipx-ccar__card--has-image .ipx-ccar__body { min-height: 150px; } }
/* Headings sobre fondo azul: forzar blanco (theme.json los pinta ipla-blue). */
.ipx-ccar__card--has-image .ipx-ccar__title,
.ipx-ccar__card--has-image .ipx-ccar__body :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white);
}
.ipx-ccar__card--has-image .ipx-ccar__cta {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ipla-blue);
}
/* Hover: la tarjeta se vuelve blanca con texto azul y se eleva. */
.ipx-ccar__card--has-image:hover {
	transform: translateY(-0.5rem);
	box-shadow: 0 25px 50px -12px rgba(6, 6, 49, 0.25);
}
.ipx-ccar__card--has-image:hover .ipx-ccar__body {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ipla-blue);
}
.ipx-ccar__card--has-image:hover .ipx-ccar__title,
.ipx-ccar__card--has-image:hover .ipx-ccar__body :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--ipla-blue);
}
.ipx-ccar__card--has-image:hover .ipx-ccar__img { object-position: center 40%; }
.ipx-ccar__card--has-image:hover .ipx-ccar__icon { transform: scale(3) translateX(1.25rem); }
.ipx-ccar__card--has-image:hover .ipx-ccar__cta {
	background: var(--wp--preset--color--ipla-blue);
	color: var(--wp--preset--color--white);
}

/* ---------- Variante sin imagen (tarjeta gris) ---------- */
.ipx-ccar__card--plain {
	background: var(--wp--preset--color--ipla-gray);
	color: var(--wp--preset--color--ipla-black);
	min-height: 270px;
}
.ipx-ccar__card--plain .ipx-ccar__title {
	color: var(--wp--preset--color--ipla-black);
}
@media (min-width: 768px) {
	.ipx-ccar__card--plain { min-height: 550px; }
	.ipx-ccar__card--plain .ipx-ccar__body { padding-top: 8rem; }
}
.ipx-ccar__card--plain .ipx-ccar__cta {
	background: var(--wp--preset--color--ipla-blue);
	color: var(--wp--preset--color--white);
}
.ipx-ccar__card--plain .ipx-ccar__cta:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ipla-blue);
}

/* ---------- Énfasis de columna ancha (título mayor en desktop) ---------- */
@media (min-width: 1024px) {
	.ipx-ccar__card--wide-left .ipx-ccar__title,
	.ipx-ccar__card--wide-right .ipx-ccar__title { font-size: 3rem; }
	.ipx-ccar__card--wide-left.ipx-ccar__card--has-image .ipx-ccar__text,
	.ipx-ccar__card--wide-right.ipx-ccar__card--has-image .ipx-ccar__text { font-size: 1rem; }
}
@media (min-width: 768px) {
	.ipx-ccar__card--wide-left.ipx-ccar__card--plain .ipx-ccar__text { font-size: 1rem; }
}