/* NOTA SOBRE LOS CORTES DE PANTALLA
   Tablet: hasta 1200px · Móvil: hasta 600px

   El corte de tablet es 1200 y no 1024 a propósito: los iPad actuales en
   horizontal miden más de 1024 (1080, 1112, 1180...), así que con 1024
   recibían la configuración de ESCRITORIO y parecía que los ajustes de
   tablet no servían. */

/* CEDALC Instagram Grid — estilos del front.
   Todo lo configurable llega como variables CSS desde los ajustes
   (ver CIG_Render::variables_css), por eso este archivo no cambia nunca. */

.cig-bloque {
	/* Margen lateral: separa el feed de los bordes del contenedor */
	padding-left: var(--cig-margen, 0px);
	padding-right: var(--cig-margen, 0px);

	/* Respaldos por si el shortcode se usara sin variables */
	--cig-cols: 3;
	--cig-cols-tablet: 3;
	--cig-cols-movil: 2;
	--cig-gap: 8px;
	--cig-gap-tablet: 8px;
	--cig-gap-movil: 6px;
	--cig-radio: 28px;
	--cig-radio-tablet: 24px;
	--cig-radio-movil: 18px;
	--cig-ratio: 4/5;
	--cig-velocidad: 350ms;
	--cig-borde-grosor: 1px;
	--cig-borde-color: #0d47a1;
	--cig-sombra: 0 4px 12px rgba(7, 42, 99, .14);
	--cig-boton-texto: #0d47a1;
	--cig-boton-borde: #0d47a1;
	--cig-boton-fondo: transparent;
}

/* ---------------------------------------------------------- Encabezado */
.cig-encabezado {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}
.cig-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}
.cig-encabezado-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cig-nombre { font-weight: 700; line-height: 1.2; }
.cig-usuario { text-decoration: none; color: var(--cig-boton-texto); font-size: .9rem; }
.cig-usuario:hover { text-decoration: underline; }
.cig-bio { margin: 4px 0 0; font-size: .88rem; opacity: .8; }

/* ---------------------------------------------------------- Botón */
.cig-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 24px;
	border: 1.5px solid var(--cig-boton-borde);
	border-radius: 999px;
	background: var(--cig-boton-fondo);
	color: var(--cig-boton-texto);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	transition: opacity .2s ease;
}
.cig-boton:hover { opacity: .78; color: var(--cig-boton-texto); }
.cig-bloque > .cig-boton:first-child { margin-bottom: 24px; }
.cig-bloque > .cig-boton:last-child { margin-top: 24px; }

/* ---------------------------------------------------------- Feed base */
.cig-feed {
	display: grid;
	grid-template-columns: repeat(var(--cig-cols), 1fr);
	gap: var(--cig-gap);
}

.cig-item {
	display: block;
	position: relative;
	overflow: hidden;
	/* --cig-radio-item permite el redondeo individual por publicación;
	   si esa publicación no lo define, hereda el general del dispositivo. */
	border-radius: var(--cig-radio-item, var(--cig-radio));
	line-height: 0;
	text-decoration: none;
}
.cig-item img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: var(--cig-ratio);
	transition: transform var(--cig-velocidad) ease, filter var(--cig-velocidad) ease;
}

/* Se usa el color tal cual lo eligió la usuaria (nada de color-mix, que es
   demasiado reciente y en navegadores viejos dejaría el borde sin pintar). */
.cig-con-borde .cig-item {
	border: var(--cig-borde-grosor) solid var(--cig-borde-color);
}
.cig-con-sombra .cig-item { box-shadow: var(--cig-sombra); }

/* Oculta las publicaciones más allá de la primera página (Cargar más) */
.cig-item.cig-oculta { display: none; }

/* ---------------------------------------------------------- Hover */
.cig-hover-zoom .cig-item:hover img { transform: scale(1.05); }
.cig-hover-oscurecer .cig-item:hover img { filter: brightness(.7); }

.cig-icono {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	opacity: 0;
	transition: opacity var(--cig-velocidad) ease;
	pointer-events: none;
}
.cig-icono svg { width: 30px; height: 30px; }
.cig-hover-icono .cig-item:hover img { filter: brightness(.55); }
.cig-hover-icono .cig-item:hover .cig-icono { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.cig-item img, .cig-icono { transition: none; }
	.cig-hover-zoom .cig-item:hover img { transform: none; }
}

/* ---------------------------------------------------------- Mosaico */
.cig-layout-mosaico {
	display: block;
	column-count: var(--cig-cols);
	column-gap: var(--cig-gap);
}
.cig-layout-mosaico .cig-item {
	break-inside: avoid;
	margin-bottom: var(--cig-gap);
}
/* En mosaico las alturas son variables a propósito: la imagen manda */
.cig-layout-mosaico .cig-item img { aspect-ratio: auto; height: auto; }

/* ---------------------------------------------------------- Destacado */
.cig-layout-destacado { grid-auto-flow: dense; }
.cig-layout-destacado .cig-item--destacada,
.cig-destacado-cada-2 .cig-item:nth-child(2n+1),
.cig-destacado-cada-3 .cig-item:nth-child(3n+1),
.cig-destacado-cada-4 .cig-item:nth-child(4n+1),
.cig-destacado-cada-5 .cig-item:nth-child(5n+1),
.cig-destacado-cada-6 .cig-item:nth-child(6n+1) {
	grid-column: span 2;
	grid-row: span 2;
}
/* Con 1 sola columna no tiene sentido que algo ocupe 2: se anula */
@media (max-width: 600px) {
	.cig-layout-destacado .cig-item { grid-column: span 1; grid-row: span 1; }
}

/* ---------------------------------------------------------- Carrusel */
.cig-layout-carrusel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: var(--cig-gap);
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.cig-layout-carrusel .cig-item {
	flex: 0 0 calc((100% - (var(--cig-cols) - 1) * var(--cig-gap)) / var(--cig-cols));
	scroll-snap-align: start;
}

/* ---------------------------------------------------------- Responsive */
@media (max-width: 1200px) {
	.cig-bloque {
		padding-left: var(--cig-margen-tablet, 0px);
		padding-right: var(--cig-margen-tablet, 0px);
	}
	.cig-feed { grid-template-columns: repeat(var(--cig-cols-tablet), 1fr); gap: var(--cig-gap-tablet); }
	.cig-item { border-radius: var(--cig-radio-item, var(--cig-radio-tablet)); }
	.cig-layout-mosaico { column-count: var(--cig-cols-tablet); column-gap: var(--cig-gap-tablet); }
	.cig-layout-mosaico .cig-item { margin-bottom: var(--cig-gap-tablet); }
	.cig-layout-carrusel .cig-item {
		flex-basis: calc((100% - (var(--cig-cols-tablet) - 1) * var(--cig-gap-tablet)) / var(--cig-cols-tablet));
	}

	/* Diseño distinto solo en tablet. Mismo patrón que el de móvil, pero
	   con las variables de tablet. */
	.cig-layout-tablet-cuadricula {
		display: grid !important;
		grid-template-columns: repeat(var(--cig-cols-tablet), 1fr) !important;
		column-count: auto !important;
		overflow: visible !important;
	}
	.cig-layout-tablet-cuadricula .cig-item {
		aspect-ratio: auto;
		margin-bottom: 0;
	}
	.cig-layout-tablet-cuadricula .cig-item img { aspect-ratio: var(--cig-ratio); height: 100%; }

	.cig-layout-tablet-mosaico {
		display: block !important;
		column-count: var(--cig-cols-tablet) !important;
		column-gap: var(--cig-gap-tablet);
		overflow: visible !important;
	}
	.cig-layout-tablet-mosaico .cig-item { break-inside: avoid; margin-bottom: var(--cig-gap-tablet); }
	.cig-layout-tablet-mosaico .cig-item img { aspect-ratio: auto; height: auto; }

	.cig-layout-tablet-carrusel {
		display: flex !important;
		column-count: auto !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory;
	}
	.cig-layout-tablet-carrusel .cig-item {
		flex: 0 0 calc((100% - (var(--cig-cols-tablet) - 1) * var(--cig-gap-tablet)) / var(--cig-cols-tablet));
		scroll-snap-align: start;
		margin-bottom: 0;
	}
}

@media (max-width: 600px) {
	.cig-bloque {
		padding-left: var(--cig-margen-movil, 0px);
		padding-right: var(--cig-margen-movil, 0px);
	}
	.cig-feed { grid-template-columns: repeat(var(--cig-cols-movil), 1fr); gap: var(--cig-gap-movil); }
	.cig-item { border-radius: var(--cig-radio-item, var(--cig-radio-movil)); }
	.cig-layout-mosaico { column-count: var(--cig-cols-movil); column-gap: var(--cig-gap-movil); }
	.cig-layout-mosaico .cig-item { margin-bottom: var(--cig-gap-movil); }
	.cig-layout-carrusel .cig-item {
		flex-basis: calc((100% - (var(--cig-cols-movil) - 1) * var(--cig-gap-movil)) / var(--cig-cols-movil));
	}

	/* Diseño distinto solo en móvil (nativo, sin trucos de CSS a mano) */
	.cig-layout-movil-cuadricula {
		display: grid !important;
		grid-template-columns: repeat(var(--cig-cols-movil), 1fr) !important;
		column-count: auto !important;
		overflow: visible !important;
	}
	.cig-layout-movil-cuadricula .cig-item img { aspect-ratio: var(--cig-ratio); height: 100%; }

	.cig-layout-movil-mosaico {
		display: block !important;
		column-count: var(--cig-cols-movil) !important;
		column-gap: var(--cig-gap-movil);
		overflow: visible !important;
	}
	.cig-layout-movil-mosaico .cig-item { break-inside: avoid; margin-bottom: var(--cig-gap-movil); }
	.cig-layout-movil-mosaico .cig-item img { aspect-ratio: auto; height: auto; }

	.cig-layout-movil-carrusel {
		display: flex !important;
		column-count: auto !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory;
	}
	.cig-layout-movil-carrusel .cig-item {
		flex: 0 0 calc((100% - (var(--cig-cols-movil) - 1) * var(--cig-gap-movil)) / var(--cig-cols-movil));
		scroll-snap-align: start;
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------- Cargar más */
.cig-cargar-mas {
	display: block;
	margin: 22px auto 0;
	padding: 11px 24px;
	border: 1.5px solid var(--cig-boton-borde);
	border-radius: 999px;
	background: var(--cig-boton-fondo);
	color: var(--cig-boton-texto);
	font-weight: 600;
	font-size: .95rem;
	font-family: inherit;
	cursor: pointer;
	transition: opacity .2s ease;
}
.cig-cargar-mas:hover { opacity: .78; }

/* ---------------------------------------------------------- Lightbox */
.cig-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(7, 42, 99, .88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 99999;
}
.cig-lightbox[hidden] { display: none; }
.cig-lightbox-caja {
	max-width: min(900px, 92vw);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cig-lightbox img {
	max-width: 100%;
	max-height: 74vh;
	object-fit: contain;
	border-radius: 12px;
	display: block;
	margin: 0 auto;
}
.cig-lightbox-pie {
	color: #fff;
	font-size: .9rem;
	text-align: center;
	line-height: 1.5;
}
.cig-lightbox-pie a { color: #fff; text-decoration: underline; }
.cig-lightbox-cerrar,
.cig-lightbox-nav {
	position: absolute;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cig-lightbox-cerrar { top: 20px; right: 20px; }
.cig-lightbox-nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.cig-lightbox-nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.cig-lightbox-cerrar:hover,
.cig-lightbox-nav:hover { background: rgba(255, 255, 255, .3); }

/* ---------------------------------------------------------- Aviso admin */
.cig-vacio {
	padding: 16px 18px;
	background: #eef3fc;
	border-radius: 12px;
	color: #072a63;
	font-size: .9rem;
}

/* ---------------------------------------------------------- Límite de filas
   Las reglas viven aquí (y no en un <style> inyectado por el shortcode)
   porque WordPress y Elementor pueden filtrar las etiquetas <style> dentro
   del contenido, y entonces el límite no se aplicaría.

   El feed lleva data-cig-max-d / -t / -m con el número de fotos visibles ya
   calculado (filas x columnas) para cada dispositivo. */

.cig-feed[data-cig-max-d="1"] .cig-item:nth-child(n+2){display:none}
.cig-feed[data-cig-max-d="2"] .cig-item:nth-child(n+3){display:none}
.cig-feed[data-cig-max-d="3"] .cig-item:nth-child(n+4){display:none}
.cig-feed[data-cig-max-d="4"] .cig-item:nth-child(n+5){display:none}
.cig-feed[data-cig-max-d="5"] .cig-item:nth-child(n+6){display:none}
.cig-feed[data-cig-max-d="6"] .cig-item:nth-child(n+7){display:none}
.cig-feed[data-cig-max-d="7"] .cig-item:nth-child(n+8){display:none}
.cig-feed[data-cig-max-d="8"] .cig-item:nth-child(n+9){display:none}
.cig-feed[data-cig-max-d="9"] .cig-item:nth-child(n+10){display:none}
.cig-feed[data-cig-max-d="10"] .cig-item:nth-child(n+11){display:none}
.cig-feed[data-cig-max-d="11"] .cig-item:nth-child(n+12){display:none}
.cig-feed[data-cig-max-d="12"] .cig-item:nth-child(n+13){display:none}
.cig-feed[data-cig-max-d="13"] .cig-item:nth-child(n+14){display:none}
.cig-feed[data-cig-max-d="14"] .cig-item:nth-child(n+15){display:none}
.cig-feed[data-cig-max-d="15"] .cig-item:nth-child(n+16){display:none}
.cig-feed[data-cig-max-d="16"] .cig-item:nth-child(n+17){display:none}
.cig-feed[data-cig-max-d="17"] .cig-item:nth-child(n+18){display:none}
.cig-feed[data-cig-max-d="18"] .cig-item:nth-child(n+19){display:none}
.cig-feed[data-cig-max-d="19"] .cig-item:nth-child(n+20){display:none}
.cig-feed[data-cig-max-d="20"] .cig-item:nth-child(n+21){display:none}
.cig-feed[data-cig-max-d="21"] .cig-item:nth-child(n+22){display:none}
.cig-feed[data-cig-max-d="22"] .cig-item:nth-child(n+23){display:none}
.cig-feed[data-cig-max-d="23"] .cig-item:nth-child(n+24){display:none}
.cig-feed[data-cig-max-d="24"] .cig-item:nth-child(n+25){display:none}
.cig-feed[data-cig-max-d="25"] .cig-item:nth-child(n+26){display:none}
.cig-feed[data-cig-max-d="26"] .cig-item:nth-child(n+27){display:none}
.cig-feed[data-cig-max-d="27"] .cig-item:nth-child(n+28){display:none}
.cig-feed[data-cig-max-d="28"] .cig-item:nth-child(n+29){display:none}
.cig-feed[data-cig-max-d="29"] .cig-item:nth-child(n+30){display:none}
.cig-feed[data-cig-max-d="30"] .cig-item:nth-child(n+31){display:none}
.cig-feed[data-cig-max-d="31"] .cig-item:nth-child(n+32){display:none}
.cig-feed[data-cig-max-d="32"] .cig-item:nth-child(n+33){display:none}
.cig-feed[data-cig-max-d="33"] .cig-item:nth-child(n+34){display:none}
.cig-feed[data-cig-max-d="34"] .cig-item:nth-child(n+35){display:none}
.cig-feed[data-cig-max-d="35"] .cig-item:nth-child(n+36){display:none}
.cig-feed[data-cig-max-d="36"] .cig-item:nth-child(n+37){display:none}

@media (max-width: 1200px) {
.cig-feed[data-cig-max-t] .cig-item:nth-child(n){display:block}
.cig-feed[data-cig-max-t="1"] .cig-item:nth-child(n+2){display:none}
.cig-feed[data-cig-max-t="2"] .cig-item:nth-child(n+3){display:none}
.cig-feed[data-cig-max-t="3"] .cig-item:nth-child(n+4){display:none}
.cig-feed[data-cig-max-t="4"] .cig-item:nth-child(n+5){display:none}
.cig-feed[data-cig-max-t="5"] .cig-item:nth-child(n+6){display:none}
.cig-feed[data-cig-max-t="6"] .cig-item:nth-child(n+7){display:none}
.cig-feed[data-cig-max-t="7"] .cig-item:nth-child(n+8){display:none}
.cig-feed[data-cig-max-t="8"] .cig-item:nth-child(n+9){display:none}
.cig-feed[data-cig-max-t="9"] .cig-item:nth-child(n+10){display:none}
.cig-feed[data-cig-max-t="10"] .cig-item:nth-child(n+11){display:none}
.cig-feed[data-cig-max-t="11"] .cig-item:nth-child(n+12){display:none}
.cig-feed[data-cig-max-t="12"] .cig-item:nth-child(n+13){display:none}
.cig-feed[data-cig-max-t="13"] .cig-item:nth-child(n+14){display:none}
.cig-feed[data-cig-max-t="14"] .cig-item:nth-child(n+15){display:none}
.cig-feed[data-cig-max-t="15"] .cig-item:nth-child(n+16){display:none}
.cig-feed[data-cig-max-t="16"] .cig-item:nth-child(n+17){display:none}
.cig-feed[data-cig-max-t="17"] .cig-item:nth-child(n+18){display:none}
.cig-feed[data-cig-max-t="18"] .cig-item:nth-child(n+19){display:none}
.cig-feed[data-cig-max-t="19"] .cig-item:nth-child(n+20){display:none}
.cig-feed[data-cig-max-t="20"] .cig-item:nth-child(n+21){display:none}
.cig-feed[data-cig-max-t="21"] .cig-item:nth-child(n+22){display:none}
.cig-feed[data-cig-max-t="22"] .cig-item:nth-child(n+23){display:none}
.cig-feed[data-cig-max-t="23"] .cig-item:nth-child(n+24){display:none}
.cig-feed[data-cig-max-t="24"] .cig-item:nth-child(n+25){display:none}
.cig-feed[data-cig-max-t="25"] .cig-item:nth-child(n+26){display:none}
.cig-feed[data-cig-max-t="26"] .cig-item:nth-child(n+27){display:none}
.cig-feed[data-cig-max-t="27"] .cig-item:nth-child(n+28){display:none}
.cig-feed[data-cig-max-t="28"] .cig-item:nth-child(n+29){display:none}
.cig-feed[data-cig-max-t="29"] .cig-item:nth-child(n+30){display:none}
.cig-feed[data-cig-max-t="30"] .cig-item:nth-child(n+31){display:none}
.cig-feed[data-cig-max-t="31"] .cig-item:nth-child(n+32){display:none}
.cig-feed[data-cig-max-t="32"] .cig-item:nth-child(n+33){display:none}
.cig-feed[data-cig-max-t="33"] .cig-item:nth-child(n+34){display:none}
.cig-feed[data-cig-max-t="34"] .cig-item:nth-child(n+35){display:none}
.cig-feed[data-cig-max-t="35"] .cig-item:nth-child(n+36){display:none}
.cig-feed[data-cig-max-t="36"] .cig-item:nth-child(n+37){display:none}
}

@media (max-width: 600px) {
.cig-feed[data-cig-max-m] .cig-item:nth-child(n){display:block}
.cig-feed[data-cig-max-m="1"] .cig-item:nth-child(n+2){display:none}
.cig-feed[data-cig-max-m="2"] .cig-item:nth-child(n+3){display:none}
.cig-feed[data-cig-max-m="3"] .cig-item:nth-child(n+4){display:none}
.cig-feed[data-cig-max-m="4"] .cig-item:nth-child(n+5){display:none}
.cig-feed[data-cig-max-m="5"] .cig-item:nth-child(n+6){display:none}
.cig-feed[data-cig-max-m="6"] .cig-item:nth-child(n+7){display:none}
.cig-feed[data-cig-max-m="7"] .cig-item:nth-child(n+8){display:none}
.cig-feed[data-cig-max-m="8"] .cig-item:nth-child(n+9){display:none}
.cig-feed[data-cig-max-m="9"] .cig-item:nth-child(n+10){display:none}
.cig-feed[data-cig-max-m="10"] .cig-item:nth-child(n+11){display:none}
.cig-feed[data-cig-max-m="11"] .cig-item:nth-child(n+12){display:none}
.cig-feed[data-cig-max-m="12"] .cig-item:nth-child(n+13){display:none}
.cig-feed[data-cig-max-m="13"] .cig-item:nth-child(n+14){display:none}
.cig-feed[data-cig-max-m="14"] .cig-item:nth-child(n+15){display:none}
.cig-feed[data-cig-max-m="15"] .cig-item:nth-child(n+16){display:none}
.cig-feed[data-cig-max-m="16"] .cig-item:nth-child(n+17){display:none}
.cig-feed[data-cig-max-m="17"] .cig-item:nth-child(n+18){display:none}
.cig-feed[data-cig-max-m="18"] .cig-item:nth-child(n+19){display:none}
.cig-feed[data-cig-max-m="19"] .cig-item:nth-child(n+20){display:none}
.cig-feed[data-cig-max-m="20"] .cig-item:nth-child(n+21){display:none}
.cig-feed[data-cig-max-m="21"] .cig-item:nth-child(n+22){display:none}
.cig-feed[data-cig-max-m="22"] .cig-item:nth-child(n+23){display:none}
.cig-feed[data-cig-max-m="23"] .cig-item:nth-child(n+24){display:none}
.cig-feed[data-cig-max-m="24"] .cig-item:nth-child(n+25){display:none}
.cig-feed[data-cig-max-m="25"] .cig-item:nth-child(n+26){display:none}
.cig-feed[data-cig-max-m="26"] .cig-item:nth-child(n+27){display:none}
.cig-feed[data-cig-max-m="27"] .cig-item:nth-child(n+28){display:none}
.cig-feed[data-cig-max-m="28"] .cig-item:nth-child(n+29){display:none}
.cig-feed[data-cig-max-m="29"] .cig-item:nth-child(n+30){display:none}
.cig-feed[data-cig-max-m="30"] .cig-item:nth-child(n+31){display:none}
.cig-feed[data-cig-max-m="31"] .cig-item:nth-child(n+32){display:none}
.cig-feed[data-cig-max-m="32"] .cig-item:nth-child(n+33){display:none}
.cig-feed[data-cig-max-m="33"] .cig-item:nth-child(n+34){display:none}
.cig-feed[data-cig-max-m="34"] .cig-item:nth-child(n+35){display:none}
.cig-feed[data-cig-max-m="35"] .cig-item:nth-child(n+36){display:none}
.cig-feed[data-cig-max-m="36"] .cig-item:nth-child(n+37){display:none}
}

/* El "Cargar más" manda por encima del límite de filas */
.cig-item.cig-oculta { display: none !important; }
