/*
 * Noticias en móvil: todas las plantillas de cabecera (Standard, Default,
 * Overlay, Featured…) se ven igual que la Standard: categoría, título,
 * subtítulo y la foto debajo, a sangre y sin esquinas redondeadas.
 * Sin migas de pan.
 */
@media (max-width: 767.98px) {

	body.single .cs-breadcrumbs { display: none !important; }

	/* Overlay: el texto deja de ir encima de la foto y se apila.
	   18px bajo la barra. */
	.cs-entry__header-overlay { padding-top: 18px; }
	/* !important: el tema pone «.cs-entry__header .cs-entry__overlay { flex-direction: row }»
	   y «.cs-overlay-ratio:not(.cs-ratio-original) .cs-overlay-content { flex: 1 0 100% }»,
	   que pesan más; con eso la foto se salía por la derecha y la página
	   se ensanchaba, y el iPhone la mostraba alejada. */
	.cs-entry__header-overlay .cs-entry__outer {
		display: flex !important;
		flex-direction: column !important;
	}
	.cs-entry__header-overlay .cs-overlay-ratio:before { display: none !important; }
	.cs-entry__header-overlay .cs-entry__content {
		order: 1;
		flex: none !important;
		position: static;
		width: 100%;
		max-width: none;
		padding: 0 !important;
	}
	.cs-entry__header-overlay .cs-entry__thumbnail {
		order: 2;
		position: relative;
		width: 100%;
		margin-top: 20px !important;
	}
	.cs-entry__header-overlay .cs-overlay-background {
		position: relative !important;
		inset: auto;
		height: auto;
	}
	.cs-entry__header-overlay .cs-overlay-background img {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
	.cs-entry__header.cs-entry__header-overlay .cs-entry__thumbnail .cs-overlay-background:after { display: none !important; }
	/* Pesa más que «.cs-entry__header-overlay h1.cs-entry__title { margin-left: -25px !important }»
	   del CSS personalizado de la web, pensado para el título sobre la foto. */
	.cs-entry__header.cs-entry__header-overlay h1.cs-entry__title {
		margin: -3px 0 0 !important;
		padding: 0 !important;
		max-width: none !important;
		text-shadow: none !important;
		/* Mismo tamaño e interlineado que la noticia destacada de portada. */
		font-size: 36px !important;
		line-height: 35px !important;
		letter-spacing: -0.5px !important;
	}
	/* Colores de la Standard. El CSS personalizado de la web pone el
	   subtítulo de la Overlay en blanco con !important. */
	.cs-entry__header.cs-entry__header-overlay .cs-entry__subtitle { color: #38404c !important; }
	[data-scheme="dark"] .cs-entry__header.cs-entry__header-overlay .cs-entry__subtitle { color: var(--cs-color-secondary) !important; }
	.cs-entry__header.cs-entry__header-overlay .cs-meta-category a,
	.cs-entry__header.cs-entry__header-overlay .cs-meta-category:before { color: var(--cs-color-accent) !important; }
	.cs-entry__header-overlay .cs-entry__subtitle {
		display: block !important;
		margin-top: 10px !important;
		text-shadow: none !important;
		/* Como la entradilla de la destacada de portada. */
		font-size: 20px !important;
		line-height: 23px !important;
	}

	/* Featured: la foto, que el tema pone arriba, la baja movil.js. */
	.cs-entry__header-featured { padding-top: 8px; }
	.cs-entry__media-featured.officer-movida { margin-top: 0; }

	/* Espacios alrededor de la foto, iguales en todas: 20px encima y,
	   del pie de foto a la raya del autor, 44px. */
	/* Los valores compensan los márgenes que ya trae cada plantilla. */
	.cs-entry__media { margin-top: 30px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
	.cs-entry__media.cs-entry__media-featured { margin-top: 22px !important; }
	.cs-entry__header-overlay { margin-bottom: 0 !important; }
	.cs-entry__thumbnail-caption { margin-bottom: 0 !important; }
	.cs-entry__infobar { padding-top: 0 !important; margin-top: 44px !important; }
	/* En la Overlay el pie de foto queda en otro contenedor, que ya suma 24px. */
	.cs-site-primary:has(.cs-entry__header-overlay) .cs-entry__infobar { margin-top: 20px !important; }

	/* Fotos a sangre y sin curvas. */
	.cs-entry__media .cs-entry__media-wrap,
	.cs-entry__header-overlay .cs-overlay-background {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: 0 !important;
	}
	.cs-entry__media,
	.cs-entry__header-overlay { --cs-thumbnail-border-radius: 0px; }
	.cs-entry__media .cs-entry__media-wrap,
	.cs-entry__media .cs-entry__media-wrap img,
	.cs-entry__media .cs-overlay-background,
	.cs-entry__header-overlay .cs-overlay-background,
	.cs-entry__header-overlay .cs-overlay-background img { border-radius: 0 !important; }
}