/**
 * Concatenador de Contenido Semanal – Frontend 2.1.1
 * Sistema de diseño de Voz Católica («Una sola voz, muchas estancias»).
 *
 * Todo cuelga de `.wcc-ds` (la raíz de la sección) para ganar al Kit de Elementor, que estiliza
 * `h2`, `a` y `summary` a 0,1,1 y sus :hover/:focus a 0,2,1. Los colores leen primero las variables
 * globales del sitio (el Kit define --azul, --pergamino, --tinta…) y caen al valor del sistema.
 *
 * Fuentes: no se autoalojan. La sección vive dentro de una entrada, donde el sitio ya carga Cormorant
 * Garamond e Inter; aquí solo se nombran con su reserva (Georgia / Segoe UI) para otros sitios.
 *
 * Reglas aplicadas: controles 4 px; contenedores 8 px; insignias 2 px; el oro es puntuación (los
 * números de las entregas van en oro-texto); sin cursivas; foco visible 3 px azul separado 2 px;
 * objetivos táctiles ≥ 44 px; sin animación con prefers-reduced-motion.
 *
 * Las variables antiguas --wcc-entry-* / --wcc-index-* siguen funcionando: la pantalla de ajustes las
 * imprime en :root cuando se eligen colores personalizados y aquí se leen con su valor del sistema
 * como reserva.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */

.wcc-ds {
	--wcc-azul: var(--azul, #046cbd);
	--wcc-azul-hover: var(--azul-hover, #035a9e);
	--wcc-azul-suave: var(--azul-suave, #e5eff8);
	--wcc-tinta: var(--tinta, #1b2029);
	--wcc-tinta-2: var(--tinta-2, #525966);
	--wcc-papel: var(--papel, #fff);
	--wcc-pergamino: var(--pergamino, #f7f3ec);
	--wcc-papel-hundido: var(--papel-hundido, #f2ede4);
	--wcc-linea: var(--linea, #e2dacb);
	--wcc-linea-fuerte: var(--linea-fuerte, #857b6c);
	--wcc-oro: var(--oro, #b08d4f);
	--wcc-oro-texto: var(--oro-texto, #76571c);
	--wcc-oro-suave: var(--oro-suave, #f5eddc);
	--wcc-foco: var(--foco, #046cbd);
	--wcc-tit: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--wcc-ui: "Inter", "Segoe UI", system-ui, sans-serif;
	--wcc-duracion: 120ms;
	/* Separación de los anclajes respecto del borde superior (cabecera fija, barra de admin). */
	--wcc-scroll-margin: 96px;
}

/* ── 2. Sección ────────────────────────────────────────────────────────────── */

.wcc-weekly-content.wcc-ds {
	box-sizing: border-box;
	margin: 48px 0 0;
	padding: 32px 0 0;
	border-top: 1px solid var(--wcc-linea);
	color: var(--wcc-tinta);
	font-family: var(--wcc-ui);
}

.wcc-ds *,
.wcc-ds *::before,
.wcc-ds *::after {
	box-sizing: border-box;
}

.wcc-ds .wcc-weekly-content__head {
	margin: 0 0 24px;
}

/* Antetítulo y metadato son <p>: tres clases (0,3,0) para ganar a los `p` del cuerpo de la entrada
   (la plantilla los pone a 19 px, justificados y con 22 px de margen a 0,2,1). */
.wcc-ds .wcc-weekly-content__head .wcc-weekly-content__ante {
	margin: 0 0 8px;
	font: 600 13px/16px var(--wcc-ui);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	hyphens: manual;
	color: var(--wcc-azul);
}

/* Tres clases (0,3,0) para ganar a los márgenes que la plantilla de entrada pone a los h2 del cuerpo. */
.wcc-ds .wcc-weekly-content__head .wcc-weekly-content__title {
	margin: 0;
	padding: 0;
	font: 600 34px/40px var(--wcc-tit);
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--wcc-tinta);
	text-wrap: balance;
}

.wcc-ds .wcc-weekly-content__head .wcc-weekly-content__meta {
	margin: 8px 0 0;
	font: 400 14px/20px var(--wcc-ui);
	color: var(--wcc-tinta-2);
	text-align: left;
	hyphens: manual;
}

/* ── 3. Piezas comunes: chevron, foco, marcador de <summary> ───────────────── */

.wcc-ds summary {
	list-style: none;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.wcc-ds summary::-webkit-details-marker {
	display: none;
}

.wcc-ds summary::marker {
	content: "";
}

.wcc-ds .wcc-chevron {
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	position: relative;
	color: var(--wcc-tinta-2);
	transition: transform var(--wcc-duracion) ease-out;
}

.wcc-ds .wcc-chevron::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 3px;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.wcc-ds details[open] > summary .wcc-chevron {
	transform: rotate(180deg);
}

/* Foco visible siempre (WCAG 2.4.7). `body` + :is() suben a 0,3,2 para ganar a los a:focus del Kit. */
body .wcc-ds :is(a, summary):focus-visible {
	outline: 3px solid var(--wcc-foco);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ── 4. Índice ─────────────────────────────────────────────────────────────── */

.wcc-ds .wcc-weekly-content__index {
	margin: 0 0 24px;
}

.wcc-ds .wcc-index-toggle {
	border: 1px solid var(--wcc-index-border-color, var(--wcc-linea));
	border-left: 1px solid var(--wcc-index-left-border-color, var(--wcc-linea));
	border-radius: 8px;
	background: var(--wcc-index-bg, var(--wcc-pergamino));
}

.wcc-ds .wcc-index-toggle__summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 16px 12px 20px;
	border-radius: 8px;
	font: 600 16px/24px var(--wcc-ui);
	color: var(--wcc-tinta);
}

.wcc-ds .wcc-index-toggle[open] > .wcc-index-toggle__summary {
	border-radius: 8px 8px 0 0;
}

.wcc-ds .wcc-index-toggle__summary:hover {
	background: var(--wcc-index-hover-bg, var(--wcc-papel-hundido));
}

.wcc-ds .wcc-index-toggle__n {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid var(--wcc-linea);
	border-radius: 2px;
	background: var(--wcc-papel);
	font: 600 13px/18px var(--wcc-ui);
	font-variant-numeric: tabular-nums;
	color: var(--wcc-tinta-2);
}

.wcc-ds .wcc-index-toggle__summary .wcc-chevron {
	margin-left: auto;
}

.wcc-ds .wcc-index-toggle__list {
	margin: 0;
	padding: 4px 20px 16px;
	list-style: none;
	counter-reset: none;
}

/* `li` y `a` a 0,3,1: la plantilla de entrada estiliza `li` (justificado, guiones) y `a` (azul,
   subrayado) del cuerpo a 0,2,1, y el Kit `a` a 0,1,1 y `a:hover` a 0,2,1. */
.wcc-ds .wcc-index-toggle .wcc-index-toggle__list li {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wcc-linea);
	text-align: left;
	hyphens: manual;
	break-inside: avoid;
}

.wcc-ds .wcc-index-toggle .wcc-index-toggle__list a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-height: 44px;
	padding: 10px 0;
	font: 400 16px/24px var(--wcc-ui);
	color: var(--wcc-tinta);
	text-decoration: none;
}

.wcc-ds .wcc-index-toggle .wcc-index-toggle__list a:hover,
.wcc-ds .wcc-index-toggle .wcc-index-toggle__list a:focus,
.wcc-ds .wcc-index-toggle .wcc-index-toggle__list a:active {
	color: var(--wcc-azul-hover);
	text-decoration: none;
}

.wcc-ds .wcc-index-toggle .wcc-index-toggle__list a:hover .wcc-index-toggle__txt {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wcc-ds .wcc-index-toggle__num {
	flex: 0 0 auto;
	min-width: 2ch;
	font: 600 13px/24px var(--wcc-ui);
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--wcc-tinta-2);
}

/* Índices largos (más de 10 entregas): plegados por defecto y a dos columnas en pantallas anchas. */
@media (min-width: 720px) {
	.wcc-ds .wcc-index-toggle--larga .wcc-index-toggle__list {
		columns: 2;
		column-gap: 32px;
	}
}

/* ── 5. Entregas ───────────────────────────────────────────────────────────── */

.wcc-ds .wcc-weekly-content__entries {
	border-top: 1px solid var(--wcc-entry-border-color, var(--wcc-linea));
}

.wcc-ds .wcc-weekly-entry {
	margin: 0;
	border-bottom: 1px solid var(--wcc-entry-border-color, var(--wcc-linea));
	scroll-margin-top: var(--wcc-scroll-margin);
}

.wcc-ds .wcc-weekly-entry__summary {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto 20px;
	grid-template-areas: "num titulo fecha chevron";
	align-items: center;
	column-gap: 12px;
	min-height: 56px;
	padding: 14px 4px 14px 0;
	background: var(--wcc-entry-header-bg, transparent);
	color: var(--wcc-entry-header-color, var(--wcc-tinta));
	transition: background-color var(--wcc-duracion) ease-out;
}

.wcc-ds .wcc-weekly-entry__summary:hover {
	background: var(--wcc-entry-hover-bg, var(--wcc-pergamino));
}

.wcc-ds .wcc-weekly-entry[open] > .wcc-weekly-entry__summary {
	background: var(--wcc-entry-hover-bg, var(--wcc-pergamino));
}

.wcc-ds .wcc-weekly-entry[open] > .wcc-weekly-entry__summary:hover {
	background: var(--wcc-entry-hover-bg, var(--wcc-papel-hundido));
}

.wcc-ds .wcc-weekly-entry__num {
	grid-area: num;
	font: 600 22px/24px var(--wcc-tit);
	font-variant-numeric: lining-nums tabular-nums;
	text-align: center;
	color: var(--wcc-oro-texto);
}

.wcc-ds .wcc-weekly-entry__summary-title {
	grid-area: titulo;
	font: 500 17px/24px var(--wcc-ui);
	text-align: left;
	overflow-wrap: anywhere;
}

.wcc-ds .wcc-weekly-entry[open] > .wcc-weekly-entry__summary .wcc-weekly-entry__summary-title {
	font-weight: 600;
}

.wcc-ds .wcc-weekly-entry__badge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 6px;
	border-radius: 2px;
	background: var(--wcc-oro-suave);
	font: 600 11px/16px var(--wcc-ui);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wcc-oro-texto);
	vertical-align: 2px;
}

.wcc-ds .wcc-weekly-entry__summary-date {
	grid-area: fecha;
	font: 400 14px/20px var(--wcc-ui);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--wcc-tinta-2);
}

.wcc-ds .wcc-weekly-entry__summary .wcc-chevron {
	grid-area: chevron;
}

/* El contenido ocupa todo el ancho de la columna (sin sangría bajo el numeral): los vídeos
   necesitan el ancho completo y una sangría de 56 px dejaba el texto «tirado a la derecha». */
.wcc-ds .wcc-weekly-entry__content {
	padding: 8px 0 32px;
	background: var(--wcc-entry-content-bg, transparent);
	animation: wcc-open var(--wcc-duracion) ease-out;
}

.wcc-ds .wcc-weekly-entry__content > :first-child {
	margin-top: 0;
}

.wcc-ds .wcc-weekly-entry__content > :last-child {
	margin-bottom: 0;
}

/* Vídeos y embeds a lo ancho de la entrega. El iframe de oEmbed llega con width="800" height="450":
   se fuerza al ancho de la columna y, si es un vídeo (YouTube, Vimeo), se mantiene 16:9 para que no
   quede recortado ni con bandas. Spotify/SoundCloud conservan su alto propio. */
.wcc-ds .wcc-weekly-entry__content iframe,
.wcc-ds .wcc-weekly-entry__content video,
.wcc-ds .wcc-weekly-entry__content img,
.wcc-ds .wcc-weekly-entry__content figure {
	max-width: 100%;
}

.wcc-ds .wcc-weekly-entry__content iframe {
	display: block;
	width: 100%;
}

.wcc-ds .wcc-weekly-entry__content iframe[src*="youtu"],
.wcc-ds .wcc-weekly-entry__content iframe[data-src*="youtu"],
.wcc-ds .wcc-weekly-entry__content iframe[src*="vimeo"],
.wcc-ds .wcc-weekly-entry__content iframe[data-src*="vimeo"],
.wcc-ds .wcc-weekly-entry__content video {
	aspect-ratio: 16 / 9;
	height: auto;
}

.wcc-ds .wcc-weekly-entry__content .wp-video,
.wcc-ds .wcc-weekly-entry__content .wp-embed-responsive .wp-block-embed__wrapper,
.wcc-ds .wcc-weekly-entry__content .wp-block-embed {
	max-width: 100%;
}

@keyframes wcc-open {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── 6. Móvil (≤ 600 px) ───────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.wcc-weekly-content.wcc-ds {
		margin-top: 40px;
		padding-top: 24px;
	}

	.wcc-ds .wcc-weekly-content__head .wcc-weekly-content__title {
		font-size: 28px;
		line-height: 33px;
	}

	.wcc-ds .wcc-index-toggle__summary {
		padding-left: 16px;
	}

	.wcc-ds .wcc-index-toggle__list {
		padding: 4px 16px 12px;
	}

	.wcc-ds .wcc-weekly-entry__summary {
		grid-template-columns: 32px minmax(0, 1fr) 20px;
		grid-template-areas:
			"num titulo chevron"
			"num fecha chevron";
		row-gap: 2px;
		padding: 12px 4px 12px 0;
	}

	.wcc-ds .wcc-weekly-entry__num {
		font-size: 20px;
		line-height: 24px;
		align-self: start;
	}

	.wcc-ds .wcc-weekly-entry__summary-title {
		font-size: 16px;
		line-height: 22px;
	}

	.wcc-ds .wcc-weekly-entry__summary-date {
		font-size: 13px;
		line-height: 18px;
		white-space: normal;
	}

	.wcc-ds .wcc-weekly-entry__content {
		padding: 8px 0 24px;
	}

	.wcc-ds .wcc-weekly-entry__badge {
		display: block;
		width: max-content;
		margin: 4px 0 0;
	}
}

/* ── 7. Preferencias del lector e impresión ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.wcc-ds *,
	.wcc-ds *::before,
	.wcc-ds *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

@media print {
	.wcc-ds .wcc-weekly-entry__content {
		display: block;
	}

	.wcc-ds .wcc-chevron {
		display: none;
	}
}