/* INNOS Eventos Próximos — grilla de eventos (sin slider).
   Los !important son necesarios porque el shortcode vive dentro de un módulo
   de texto de Divi, que genera CSS por módulo con mayor especificidad. */

.innos-eventos {
	--innos-ev-verde: #0a3333;
	--innos-ev-verde-hover: #12876f;
	--innos-ev-gris: #c7c6c6;
	--innos-ev-gap: 30px;

	font-family: 'Lato', Helvetica, Arial, sans-serif;
	text-align: left;
}

/* --- Título de la sección ("Próximamente") --------------------------- */

.innos-eventos .innos-eventos__titulo {
	margin: 0 0 30px !important;
	padding: 0 !important;
	font-family: 'Lato', Helvetica, Arial, sans-serif !important;
	font-size: 34px !important;
	font-weight: 900 !important;
	line-height: 1.2 !important;
	color: var(--innos-ev-verde) !important;
	text-align: left !important;
}

.innos-eventos .innos-eventos__titulo span {
	display: inline-block;
	border-bottom: 3px solid var(--innos-ev-verde);
	padding-bottom: 4px;
}

.innos-eventos .innos-eventos__vacio {
	margin: 0 !important;
	font-size: 18px !important;
	color: var(--innos-ev-verde) !important;
}

/* --- Grilla ---------------------------------------------------------- */

.innos-eventos__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--innos-ev-gap);
	align-items: stretch;
}

.innos-eventos--cols-1 .innos-eventos__grid { grid-template-columns: minmax(0, 1fr); }
.innos-eventos--cols-2 .innos-eventos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.innos-eventos--cols-4 .innos-eventos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Tarjeta --------------------------------------------------------- */

.innos-eventos .innos-evento {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 250px;
	padding: 24px 26px 22px;
	background-color: var(--innos-ev-gris);
}

.innos-eventos .innos-evento__tipo {
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-family: 'Lato', Helvetica, Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 900 !important;
	line-height: 1.2 !important;
	color: var(--innos-ev-verde) !important;
}

.innos-eventos .innos-evento__titulo {
	margin: 0 0 18px !important;
	padding: 0 !important;
	font-family: 'Lato', Helvetica, Arial, sans-serif !important;
	font-size: 28px !important;
	font-weight: 900 !important;
	line-height: 1.2 !important;
	color: var(--innos-ev-verde) !important;
	text-align: left !important;
	overflow-wrap: break-word;
}

.innos-eventos .innos-evento__titulo a,
.innos-eventos .innos-evento__titulo span {
	color: inherit !important;
	font: inherit !important;
	text-decoration: none;
	border-bottom: 3px solid currentColor;
	display: inline;
	transition: color .2s ease;
}

.innos-eventos .innos-evento__titulo a:hover,
.innos-eventos .innos-evento__titulo a:focus {
	color: var(--innos-ev-verde-hover) !important;
}

/* --- Fecha ----------------------------------------------------------- */

.innos-eventos .innos-evento__fecha {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 18px;
	color: var(--innos-ev-verde);
}

.innos-eventos .innos-evento__icono {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
}

.innos-eventos .innos-evento__fecha-texto span {
	display: block;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--innos-ev-verde);
}

/* --- Botón ----------------------------------------------------------- */

.innos-eventos .innos-evento__pie {
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
}

.innos-eventos .innos-evento__boton {
	display: inline-block;
	padding: 11px 22px;
	background-color: var(--innos-ev-verde);
	border: 2px solid var(--innos-ev-verde);
	border-radius: 0;
	font-family: 'Lato', Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 900 !important;
	line-height: 1.2 !important;
	color: #fff !important;
	text-decoration: none !important;
	text-align: center;
	transition: background-color .2s ease, color .2s ease;
}

.innos-eventos .innos-evento__boton:hover,
.innos-eventos .innos-evento__boton:focus {
	background-color: transparent;
	color: var(--innos-ev-verde) !important;
}

/* --- Responsive ------------------------------------------------------ */

@media (max-width: 1100px) {
	.innos-eventos .innos-evento__titulo { font-size: 24px !important; }
}

@media (max-width: 980px) {
	.innos-eventos--cols-3 .innos-eventos__grid,
	.innos-eventos--cols-4 .innos-eventos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.innos-eventos .innos-eventos__titulo { font-size: 30px !important; }
}

@media (max-width: 767px) {
	.innos-eventos { --innos-ev-gap: 22px; }
	.innos-eventos__grid,
	.innos-eventos--cols-2 .innos-eventos__grid,
	.innos-eventos--cols-3 .innos-eventos__grid,
	.innos-eventos--cols-4 .innos-eventos__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.innos-eventos .innos-evento { min-height: 0; padding: 22px 22px 20px; }
	.innos-eventos .innos-eventos__titulo { font-size: 26px !important; }
	.innos-eventos .innos-evento__titulo { font-size: 24px !important; }
	.innos-eventos .innos-evento__pie { justify-content: flex-start; }
}