/* Single de Evento — réplica visual del single-eventos.php de iplaweb.
   Se encola solo en is_singular('eventos') (carga condicional).
   Scoped a .ipx-evt. Traducción 1:1 de las utilidades Tailwind del legacy
   a CSS con tokens de theme.json. Iconos SVG via currentColor. */

/* Trap (a): reset box-sizing scoped — el tema lienzo no trae reset global. */
.ipx-evt,
.ipx-evt *,
.ipx-evt *::before,
.ipx-evt *::after {
	box-sizing: border-box;
}

.ipx-evt {
	font-family: var(--wp--preset--font-family--montserrat);
}

/* Trap (d): figure sin margen por defecto. */
.ipx-evt figure {
	margin: 0;
}

/* Trap (c): botones/enlaces-botón heredan la tipografía. */
.ipx-evt .ipx-evt__cta,
.ipx-evt .ipx-evt__btn {
	font-family: inherit;
}

/* ---------- Hero (full-bleed, imagen de fondo + gradiente) ---------- */
/* Legacy: .relative.full.bg-cover.bg-no-repeat.bg-center.mb-4 md:mb-8 */
.ipx-evt__hero {
	position: relative;
	width: 100%;
	margin-bottom: 1rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

/* Legacy: bg-gradient-to-t from-ipla-blue to-transparent */
.ipx-evt__hero-overlay {
	width: 100%;
	background-image: linear-gradient(to top, var(--wp--preset--color--ipla-blue), transparent);
}

/* Legacy: max-w-[1420px] min-h-96 flex flex-col pt-32 md:pt-40 px-5 md:px-8 xl:px-20 */
.ipx-evt__hero-inner {
	width: 100%;
	max-width: 1420px;
	margin: 0 auto;
	min-height: 24rem;
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 8rem 1.25rem 0;
}

/* Legacy breadcrumb: text-white text-sm max-w-[1200px] mb-10 lg:mb-20 */
.ipx-evt__breadcrumbs {
	display: block;
	max-width: 1200px;
	margin-bottom: 2.5rem;
	color: var(--wp--preset--color--white);
	font-size: 0.875rem;
}

.ipx-evt__breadcrumbs a {
	color: var(--wp--preset--color--white);
}

/* Legacy: uppercase tracking-wide text-sm text-white */
.ipx-evt__hero-kicker {
	text-transform: uppercase;
	letter-spacing: 0.025em;
	font-size: 0.875rem;
	color: var(--wp--preset--color--white);
}

/* Trap (b): heading sobre gradiente azul → color blanco explícito. */
/* Legacy: font-bold text-2xl md:text-4xl mb-4 text-white */
.ipx-evt__hero-title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--wp--preset--color--white);
}

/* ---------- Main + tarjeta azul ---------- */
/* Legacy main: px-4 py-5 bg-white */
.ipx-evt__main {
	position: relative;
	z-index: 10;
	width: 100%;
	padding: 1.25rem 1rem;
	background: var(--wp--preset--color--white);
}

/* Legacy section: max-w-[1200px] bg-ipla-blue text-white rounded-3xl
   px-4 md:px-20 py-8 md:py-20 xl:py-28 */
.ipx-evt__card {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	background: var(--wp--preset--color--ipla-blue);
	color: var(--wp--preset--color--white);
	border-radius: 1.5rem;
	padding: 2rem 1rem;
}

/* Trap (b): los h2/h3 dentro de la tarjeta azul deben verse blancos. */
.ipx-evt__card h2,
.ipx-evt__card h3 {
	color: var(--wp--preset--color--white);
}

/* Legacy body: mb-8 (md:col-span-4) */
.ipx-evt__body {
	margin-bottom: 2rem;
}

/* Legacy epígrafe: text-sm font-semibold border-b-2 border-ipla-text-grayalternative
   pb-1 pr-5 mb-8 w-fit */
.ipx-evt__epigrafe {
	display: block;
	width: fit-content;
	margin-bottom: 2rem;
	padding-bottom: 0.25rem;
	padding-right: 1.25rem;
	border-bottom: 2px solid var(--wp--preset--color--ipla-text-grayalternative);
	font-size: 0.875rem;
	font-weight: 600;
}

/* Legacy título: font-bold text-2xl md:text-4xl mb-4 */
.ipx-evt__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 700;
}

/* Legacy imagen: w-full mb-4 rounded-2xl (md: absoluta top-right) */
.ipx-evt__image {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 1rem;
	border-radius: 1rem;
}

/* Legacy texto: text-base md:text-lg [&_*]:mb-4 [&_a]:underline
   [&_strong]:font-semibold min-h-40 */
.ipx-evt__text {
	font-size: 1rem;
	min-height: 10rem;
}

.ipx-evt__text * {
	margin-bottom: 1rem;
}

/* Links del texto sobre la tarjeta azul de marca: BLANCOS (si no, heredan el
   ipla-link-blue de theme.json y quedan ilegibles sobre el azul). */
.ipx-evt__text a {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.ipx-evt__text strong {
	font-weight: 600;
}

/* ---------- Columna de ficha (fecha / hora / lugar) ---------- */
/* Legacy aside col: md:col-span-2 md:col-start-5 md:flex md:flex-col md:justify-end */
.ipx-evt__aside {
	display: flex;
	flex-direction: column;
}

/* Legacy ul: mb-8 */
.ipx-evt__facts {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

/* Legacy li: flex flex-row justify-start items-center gap-x-4 */
.ipx-evt__fact {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

/* La fila de lugar usa items-start en el legacy. */
.ipx-evt__fact--top {
	align-items: flex-start;
}

/* Legacy figure icono: h-[30px] w-[30px] */
.ipx-evt__icon {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
}

.ipx-evt__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	/* Legacy fill-ipla-gray (sobre fondo azul de la tarjeta). */
	fill: var(--wp--preset--color--ipla-gray);
}

/* Legacy span de fecha/hora: text-lg font-semibold */
.ipx-evt__fact-strong {
	font-size: 1.125rem;
	font-weight: 600;
}

/* Legacy span de lugar: text-lg leading-tight */
.ipx-evt__place {
	font-size: 1.125rem;
	line-height: 1.25;
}

/* Legacy: capitalize font-semibold */
.ipx-evt__place-type {
	text-transform: capitalize;
	font-weight: 600;
}

/* Legacy: underline text-sm */
.ipx-evt__place-link {
	font-size: 0.875rem;
	text-decoration: underline;
	color: var(--wp--preset--color--white);
}

/* Legacy CTA: rounded w-fit py-2 px-4 text-ipla-lightblue font-semibold bg-white
   inline-flex items-center gap-1 text-xs border border-ipla-lightblue
   hover:bg-ipla-lightblue hover:text-white transition */
.ipx-evt__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	width: fit-content;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--ipla-lightblue);
	border-radius: 0.25rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ipla-lightblue);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease-in, color 0.15s ease-in;
}

.ipx-evt__cta:hover,
.ipx-evt__cta:focus-visible {
	background: var(--wp--preset--color--ipla-lightblue);
	color: var(--wp--preset--color--white);
}

/* ---------- Aside "Próximos Eventos" ---------- */
/* Legacy aside: bg-white text-ipla-blue */
.ipx-evt__related {
	width: 100%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ipla-blue);
}

/* Legacy: px-4 py-10 md:py-20 max-w-[1200px] mx-auto */
.ipx-evt__related-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.5rem 1rem;
}

/* Legacy título: text-ipla-lightblue text-3xl md:text-4xl font-bold mb-8 md:mb-10 */
.ipx-evt__related-title {
	margin: 0 0 2rem;
	color: var(--wp--preset--color--ipla-lightblue);
	font-size: 1.875rem;
	line-height: 1.2;
	font-weight: 700;
}

/* Legacy grid: md:grid md:grid-cols-12 gap-8 */
.ipx-evt__grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Legacy li: group rounded-3xl md:col-span-3 mb-8 md:mb-0 */
.ipx-evt__grid-item {
	margin-bottom: 2rem;
	border-radius: 1.5rem;
}

.ipx-evt__grid-item:last-child {
	margin-bottom: 0;
}

/* Legacy article: rounded-3xl px-5 md:px-4 py-8 md:py-10 bg-ipla-textgray/30
   text-ipla-black flex flex-col-reverse justify-between
   group-hover:bg-white group-hover:shadow-lg group-hover:-translate-y-1 transition */
.ipx-evt__cardlet {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	padding: 2rem 1.25rem;
	border-radius: 1.5rem;
	/* bg-ipla-textgray bg-opacity-30 → token con alpha. */
	background: rgba(227, 225, 224, 0.3);
	color: var(--wp--preset--color--ipla-black);
	transition: background-color 0.1s ease-in, box-shadow 0.1s ease-in, transform 0.1s ease-in;
}

.ipx-evt__grid-item:hover .ipx-evt__cardlet {
	background: var(--wp--preset--color--white);
	box-shadow: 0 10px 15px -3px rgba(6, 6, 49, 0.1), 0 4px 6px -4px rgba(6, 6, 49, 0.1);
	transform: translateY(-0.25rem);
}

/* Legacy head: mb-8 md:mb-0 */
.ipx-evt__cardlet-head {
	margin-bottom: 2rem;
}

/* Solo el enlace-título (hijo directo): NO debe alcanzar los .ipx-evt__btn
   anidados en .ipx-evt__cardlet-actions, o su color:inherit (→ ipla-black)
   ganaría por especificidad al color blanco del botón sobre fondo azul. */
.ipx-evt__cardlet-head > a {
	text-decoration: none;
	color: inherit;
}

/* Trap (b): el h3 vive sobre fondo claro → debe ser ipla-blue (no blanco). */
/* Legacy: font-bold text-xl md:text-2xl mb-14 */
.ipx-evt__cardlet-title {
	margin: 0 0 3.5rem;
	color: var(--wp--preset--color--ipla-blue);
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 700;
}

/* Legacy: flex flex-row gap-x-4 items-center justify-between */
.ipx-evt__cardlet-actions {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

/* Legacy btn: rounded w-fit py-2 px-4 text-white font-semibold bg-ipla-lightblue
   inline-flex items-center gap-1 text-xs border border-ipla-lightblue
   hover:bg-white hover:text-ipla-lightblue transition */
.ipx-evt__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	width: fit-content;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--ipla-lightblue);
	border-radius: 0.25rem;
	background: var(--wp--preset--color--ipla-lightblue);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease-in, color 0.15s ease-in;
}

.ipx-evt__btn:hover,
.ipx-evt__btn:focus-visible {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ipla-lightblue);
}

/* Legacy ficha: mb-8 */
.ipx-evt__cardlet-ficha {
	margin-bottom: 2rem;
}

/* Legacy row: flex flex-row gap-x-4 items-center mb-4 (último mb-0) */
.ipx-evt__cardlet-row {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}

.ipx-evt__cardlet-row:last-child {
	margin-bottom: 0;
}

/* Legacy figure icono cardlet: h-[35px] w-[35px] */
.ipx-evt__icon--dark {
	flex: 0 0 35px;
	width: 35px;
	height: 35px;
}

.ipx-evt__icon--dark svg {
	/* Legacy fill-ipla-blue (sobre fondo claro de la cardlet). */
	fill: var(--wp--preset--color--ipla-blue);
}

/* Legacy stack: flex flex-col */
.ipx-evt__cardlet-stack {
	display: flex;
	flex-direction: column;
}

/* Legacy: text-sm font-semibold */
.ipx-evt__cardlet-date {
	font-size: 0.875rem;
	font-weight: 600;
}

/* Legacy: text-base font-semibold */
.ipx-evt__cardlet-time {
	font-size: 1rem;
	font-weight: 600;
}

/* Legacy: capitalize text-sm md:text-xs font-semibold */
.ipx-evt__cardlet-type {
	text-transform: capitalize;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Legacy: text-xs */
.ipx-evt__cardlet-place {
	font-size: 0.75rem;
}

.ipx-evt__empty {
	margin: 0;
}

/* ===================== Breakpoints ===================== */

/* md: 768px */
@media (min-width: 768px) {
	.ipx-evt__hero {
		margin-bottom: 2rem;
	}

	.ipx-evt__hero-inner {
		padding: 10rem 2rem 0;
	}

	.ipx-evt__hero-title {
		font-size: 2.25rem;
	}

	/* Legacy: md:px-20 md:py-20 + md:grid md:grid-cols-6 md:gap-x-10 */
	.ipx-evt__card {
		padding: 5rem;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		column-gap: 2.5rem;
	}

	/* md:col-span-4 */
	.ipx-evt__body {
		grid-column: span 4 / span 4;
		margin-bottom: 0;
	}

	.ipx-evt__title {
		font-size: 2.25rem;
	}

	/* Legacy body md:text-lg — sin este override el texto queda en text-base,
	   la columna izquierda es más baja y el aside (justify-end) sube dejando
	   un vacío en la mitad inferior de la tarjeta. Con md:text-lg el párrafo
	   ocupa las mismas líneas que prod y el aside baja a su posición correcta. */
	.ipx-evt__text {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	/* Legacy imagen md: absolute top-0 right-0 w-auto h-[180px]
	   rounded-none rounded-tr-2xl */
	.ipx-evt__image {
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
		height: 180px;
		margin-bottom: 0;
		border-radius: 0 1rem 0 0;
	}

	/* md:col-span-2 md:col-start-5 md:flex md:flex-col md:justify-end */
	.ipx-evt__aside {
		grid-column: 5 / span 2;
		justify-content: flex-end;
	}

	/* Legacy related: md:py-20 */
	.ipx-evt__related-inner {
		padding: 5rem 1rem;
	}

	.ipx-evt__related-title {
		margin-bottom: 2.5rem;
		font-size: 2.25rem;
	}

	/* Legacy grid 12 cols, cada item span 3 → 4 columnas */
	.ipx-evt__grid {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 2rem;
	}

	.ipx-evt__grid-item {
		grid-column: span 3 / span 3;
		margin-bottom: 0;
	}

	.ipx-evt__cardlet {
		padding: 2.5rem 1rem;
	}

	.ipx-evt__cardlet-head {
		margin-bottom: 0;
	}

	.ipx-evt__cardlet-row {
		margin-bottom: 1rem;
	}

	/* Legacy: md:text-xs en el tipo de evento de la cardlet. */
	.ipx-evt__cardlet-type {
		font-size: 0.75rem;
	}
}

/* xl: 1280px */
@media (min-width: 1280px) {
	.ipx-evt__hero-inner {
		padding-left: 5rem;
		padding-right: 5rem;
	}

	/* Legacy: xl:py-28 */
	.ipx-evt__card {
		padding-top: 7rem;
		padding-bottom: 7rem;
	}

	/* Legacy: xl:h-[220px] */
	.ipx-evt__image {
		height: 220px;
	}
}