/*!
 * Sigue Leyendo v1.1.0 – capa de últimas noticias
 * Las variables --sl-* se sobrescriben desde los ajustes del plugin (#sl-popup{...}).
 * El diseño responde al ancho de la capa (container queries): escritorio, tablet y móvil.
 */

.sl-overlay {
	--sl-backdrop: rgba(43, 58, 92, .6);
	--sl-bg: #fff;
	--sl-heading: #1a1a1a;
	--sl-title: #111;
	--sl-text: #2b2b2b;
	--sl-meta: #111;
	--sl-hover: #0055b8;
	--sl-border: #e6e6e6;
	--sl-heading-size: 22px;
	--sl-title-size: 20px;
	--sl-text-size: 16px;
	--sl-cols: 2;
	--sl-height: 90; /* % del alto de la ventana */
	--sl-gap: 20px;
	--sl-pad: 40px;

	container: sl-popup / inline-size;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: var(--sl-backdrop);
	opacity: 0;
	transition: opacity .3s ease;
	-webkit-tap-highlight-color: transparent;
}

.sl-overlay[hidden] { display: none !important; }
.sl-overlay.is-open { opacity: 1; }

.sl-overlay *,
.sl-overlay *::before,
.sl-overlay *::after { box-sizing: border-box; }

/* Bloqueo del scroll de la página mientras la capa está abierta */
html.sl-lock,
html.sl-lock body { overflow: hidden !important; }

/* ---------- Panel ---------- */
.sl-overlay .sl-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1100px, calc(100% - 48px));
	height: calc(var(--sl-height) * 1%); /* % del alto de la capa fija = alto de la ventana */
	max-height: 100%;
	margin: 0;
	background: var(--sl-bg);
	color: var(--sl-text);
	font-family: var(--sl-font); /* sin valor = hereda la fuente del tema */
	border-radius: 24px 24px 0 0;
	box-shadow: 0 -12px 48px rgba(0, 0, 0, .28);
	transform: translateY(48px);
	transition: transform .4s cubic-bezier(.2, .8, .2, 1);
	outline: none;
}

.sl-overlay.is-open .sl-modal { transform: none; }

/* ---------- Cabecera ---------- */
.sl-overlay .sl-header {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px var(--sl-pad);
	border-bottom: 1px solid var(--sl-border);
}

.sl-overlay .sl-heading {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: var(--sl-heading-size);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sl-heading);
}

.sl-overlay .sl-close {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sl-heading);
	color: var(--sl-bg);
	opacity: .6;
	box-shadow: none;
	line-height: 1;
	cursor: pointer;
	transition: opacity .2s ease;
}

.sl-overlay .sl-close:hover { opacity: .9; }

.sl-overlay .sl-close:focus-visible {
	opacity: 1;
	outline: 2px solid var(--sl-hover);
	outline-offset: 2px;
}

.sl-overlay .sl-close svg {
	display: block;
	width: 13px;
	height: 13px;
}

/* ---------- Listado ---------- */
.sl-overlay .sl-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 4px var(--sl-pad) calc(40px + env(safe-area-inset-bottom, 0px));
}

.sl-overlay .sl-grid {
	display: grid;
	/* Tantas columnas como --sl-cols mientras quepan con 240px mínimo; si no, menos. */
	grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - (var(--sl-cols) - 1) * var(--sl-gap)) / var(--sl-cols) - 1px)), 1fr));
	column-gap: var(--sl-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-overlay .sl-item {
	margin: 0;
	padding: 20px 0;
	border-bottom: 1px solid var(--sl-border);
	list-style: none;
}

.sl-overlay .sl-item::before,
.sl-overlay .sl-item::marker { content: none; }

.sl-overlay .sl-link {
	display: block;
	color: inherit;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	border-radius: 14px;
}

.sl-overlay .sl-link:focus-visible {
	outline: 2px solid var(--sl-hover);
	outline-offset: 4px;
}

.sl-overlay .sl-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	margin: 0 0 12px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--sl-border);
}

.sl-overlay .sl-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform .5s ease;
}

.sl-overlay .sl-link:hover .sl-thumb img { transform: scale(1.03); }

.sl-overlay .sl-content {
	display: block;
	min-width: 0;
}

.sl-overlay .sl-tag {
	display: block;
	margin: 0 0 4px;
	font-size: max(11px, calc(var(--sl-text-size) * .75));
	font-weight: 700;
	line-height: 1.3;
	color: var(--sl-hover);
}

.sl-overlay .sl-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0 0 6px;
	font-size: var(--sl-title-size);
	font-weight: 500;
	line-height: 1.25;
	color: var(--sl-title);
	transition: color .2s ease;
}

.sl-overlay .sl-link:hover .sl-title,
.sl-overlay .sl-link:focus-visible .sl-title { color: var(--sl-hover); }

.sl-overlay .sl-excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0 0 8px;
	font-size: var(--sl-text-size);
	line-height: 1.35;
	color: var(--sl-text);
}

.sl-overlay .sl-cat {
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sl-meta);
}

.sl-overlay .sl-byline {
	display: block;
	font-size: max(11px, calc(var(--sl-text-size) * .75));
	font-weight: 700;
	line-height: 1.3;
	color: var(--sl-meta);
}

/* ---------- Tablet ---------- */
@container sl-popup (max-width: 900px) {
	.sl-overlay .sl-modal {
		--sl-pad: 24px;
		width: calc(100% - 32px);
	}
}

/* ---------- Móvil: hoja inferior a todo el ancho y lista compacta ---------- */
@container sl-popup (max-width: 640px) {
	.sl-overlay .sl-modal {
		width: 100%;
		border-radius: 18px 18px 0 0;
	}

	.sl-overlay .sl-header { padding: 14px 16px; }
	.sl-overlay .sl-heading { font-size: calc(var(--sl-heading-size) * .86); }

	.sl-overlay .sl-close {
		width: 32px;
		height: 32px;
	}

	.sl-overlay .sl-body { padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
	.sl-overlay .sl-grid { grid-template-columns: minmax(0, 1fr); }
	.sl-overlay .sl-item { padding: 14px 0; }

	.sl-overlay .sl-link {
		display: grid;
		grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
		gap: 12px;
		align-items: start;
		border-radius: 10px;
	}

	.sl-overlay .sl-thumb {
		aspect-ratio: 4 / 3;
		margin: 0;
		border-radius: 10px;
	}

	.sl-overlay .sl-title {
		-webkit-line-clamp: 3;
		line-clamp: 3;
		margin-bottom: 4px;
		font-size: calc(var(--sl-title-size) * .82);
	}

	.sl-overlay .sl-excerpt {
		margin-bottom: 4px;
		font-size: calc(var(--sl-text-size) * .85);
	}
}

/* ---------- Accesibilidad e impresión ---------- */
@media (prefers-reduced-motion: reduce) {
	.sl-overlay,
	.sl-overlay .sl-modal,
	.sl-overlay .sl-thumb img,
	.sl-overlay .sl-title { transition: none !important; }

	.sl-overlay .sl-modal { transform: none; }
	.sl-overlay .sl-link:hover .sl-thumb img { transform: none; }
}

@media print {
	.sl-overlay { display: none !important; }
}