/*
 * Helena Sunday · blog.css
 *
 * El blog del tema (home.html, single.html, post-card, related-posts) con el
 * lenguaje del sitio, sin tocar el tema. Solo se carga en el listado, los
 * archivos y las entradas (helenasunday-blog.php), detrás de secciones.css y
 * tonos.css.
 *
 * Qué cambia:
 *
 * 1. Fondo único (revisión 3): la banda del listado y la de «Más artículos»
 *    pierden su fondo propio; las tarjetas llevan el suyo.
 * 2. Tarjeta de entrada: la portada va sobre un «plató» del color flúor de
 *    su categoría, entera y sin recortar. Un Short se ve como un móvil y un
 *    vídeo largo como una pantalla, así que conviven en la misma rejilla con
 *    el mismo alto de tarjeta. Botón de reproducir y etiqueta «#publi».
 * 3. Entrada: tarjeta de vídeo del sitio (vertical a su ancho de móvil,
 *    horizontal a 16:9) y la nota de colaboración. Un Short va a dos
 *    columnas (tarjeta fija a la izquierda, texto a la derecha); un vídeo
 *    largo, arriba a todo el ancho. Sin inclinación 3D: al pasar solo se
 *    acerca y desenfoca la imagen y aparece el play.
 *
 * Misma disciplina que el resto: colores, tipografía y espaciado solo con
 * las propiedades del tema. Los !important que hay están contra estilos en
 * línea del core (la imagen destacada escribe su aspect-ratio y su ancho en
 * el atributo style) o contra las clases de color, que el core ya marca
 * !important; cada uno lo dice.
 */

/* -------------------------------------------------------------------------
 * 1. Fondo único
 * ---------------------------------------------------------------------- */

/* La rejilla del listado y «Más artículos» van sobre el fondo de la página.
   !important: las clases has-*-background-color del core lo llevan. */
main > .wp-block-group.alignfull.has-surface-container-background-color:not(.helenasunday-page-header),
.helenasunday-more-articles.has-surface-container-background-color {
	background-color: transparent !important;
}

.helenasunday-more-articles {
	border-block-start: 1px solid var(--wp--preset--color--outline-variant);
}

/* -------------------------------------------------------------------------
 * 2. Tarjeta de entrada
 * ---------------------------------------------------------------------- */

/* Fondo de tarjeta: surface-container sobre la crema de la página. La
   separación la da el tono, sin sombra, como el bento. !important contra la
   clase has-surface-background-color que la tarjeta trae del pattern. */
.helenasunday-post-card.has-surface-background-color {
	--helenasunday-surface-radius: var(--helenasunday-shape-2xl);
	background-color: var(--wp--preset--color--surface-container) !important;
	color: var(--wp--preset--color--on-surface);
}

/* Titular en tinta, Poppins 600 con tracking negativo, como el resto de la
   web. Magenta solo al pasar (el subrayado ya lo pone el tema). */
.helenasunday-post-card__title {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

.helenasunday-post-card__title a {
	color: var(--wp--preset--color--on-surface);
}

.helenasunday-post-card:hover .helenasunday-post-card__title a,
.helenasunday-post-card:focus-within .helenasunday-post-card__title a {
	color: var(--wp--preset--color--primary);
}

/* --- El plató ------------------------------------------------------------
   Mismo alto para todas (4:3), con el flúor de la categoría. Moda rosa,
   belleza naranja, hogar amarillo y estilo de vida entre rosa y naranja. */
.helenasunday-post-card__image {
	--helenasunday-plato: var(--wp--preset--color--surface-container-high);

	position: relative;
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
	background-color: var(--helenasunday-plato);
}

.category-moda .helenasunday-post-card__image {
	--helenasunday-plato: var(--wp--preset--color--primary-container);
}

.category-belleza-y-pelo .helenasunday-post-card__image {
	--helenasunday-plato: var(--wp--preset--color--tertiary-container);
}

.category-hogar-y-gadgets .helenasunday-post-card__image {
	--helenasunday-plato: var(--wp--preset--color--secondary-container);
}

.category-estilo-de-vida-y-deporte .helenasunday-post-card__image {
	--helenasunday-plato: color-mix(in srgb, var(--wp--preset--color--primary-container) 50%, var(--wp--preset--color--tertiary-container));
}

.helenasunday-post-card__image a {
	position: absolute;
	inset: 0;
	display: block;
}

/* La portada, centrada en el plató y algo girada, como las tarjetas del
   hero. !important contra el style en línea del core (aspect-ratio 3/2,
   width 100%, border-radius 0). */
:is(.helenasunday-formato-short, .helenasunday-formato-largo) .helenasunday-post-card__image img {
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	translate: -50% -50%;
	box-shadow:
		0 2px 4px color-mix(in srgb, var(--helenasunday-shadow-ink) 10%, transparent),
		0 12px 28px color-mix(in srgb, var(--helenasunday-shadow-ink) 16%, transparent);
}

/* Short: un móvil de pie, al 84 % del alto del plató. */
.helenasunday-formato-short .helenasunday-post-card__image img {
	width: auto !important;
	height: 84% !important;
	aspect-ratio: 9 / 16 !important;
	border-radius: var(--helenasunday-shape-l) !important;
	rotate: -3deg;
}

/* Vídeo largo: una pantalla al 84 % del ancho del plató. */
.helenasunday-formato-largo .helenasunday-post-card__image img {
	width: 84% !important;
	height: auto !important;
	aspect-ratio: 16 / 9 !important;
	border-radius: var(--helenasunday-shape-m) !important;
	rotate: 2deg;
}

/* Primera tarjeta destacada del listado: el tema estira la imagen a toda
   la figura; aquí sigue siendo un objeto sobre el plató. Mismo selector que
   el del tema más la clase de formato, para ganarle sin depender del orden. */
@media (min-width: 600px) {
	body:not(.paged) .helenasunday-posts-grid.is-first-featured .wp-block-post-template > li.helenasunday-formato-short:first-child .helenasunday-post-card__image img {
		width: auto !important;
		height: 84% !important;
		aspect-ratio: 9 / 16 !important;
	}

	body:not(.paged) .helenasunday-posts-grid.is-first-featured .wp-block-post-template > li.helenasunday-formato-largo:first-child .helenasunday-post-card__image img {
		width: 84% !important;
		height: auto !important;
		aspect-ratio: 16 / 9 !important;
	}

	/* El plató ocupa su columna entera y fija el alto de la tarjeta: sin
	   esto, estirado a la altura del texto, el aspect-ratio lo estrechaba. */
	body:not(.paged) .helenasunday-posts-grid.is-first-featured .wp-block-post-template > li:first-child .helenasunday-post-card__image {
		align-self: start;
		width: 100%;
	}

	body:not(.paged) .helenasunday-posts-grid.is-first-featured .wp-block-post-template > li:first-child .helenasunday-post-card__body {
		align-self: center;
	}
}

/* --- Botón de reproducir ---------------------------------------------------
   El mismo disco con triángulo que la tarjeta de vídeo, en dos capas del
   propio enlace: no hay un elemento más que enfocar. */
:is(.helenasunday-formato-short, .helenasunday-formato-largo) .helenasunday-post-card__image a::before,
:is(.helenasunday-formato-short, .helenasunday-formato-largo) .helenasunday-post-card__image a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	translate: -50% -50%;
	scale: var(--helenasunday-play, 1);
	pointer-events: none;
}

:is(.helenasunday-formato-short, .helenasunday-formato-largo) .helenasunday-post-card__image a::before {
	width: 3.25em;
	height: 3.25em;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 90%, transparent);
	backdrop-filter: blur(6px);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--helenasunday-shadow-ink) 25%, transparent);
}

:is(.helenasunday-formato-short, .helenasunday-formato-largo) .helenasunday-post-card__image a::after {
	width: 1.05em;
	height: 1.2em;
	margin-left: 0.12em;
	background-color: var(--wp--preset--color--primary);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.helenasunday-post-card:hover,
.helenasunday-post-card:focus-within {
	--helenasunday-play: 1.14;
}

/* --- Etiqueta #publi ------------------------------------------------------
   La misma pegatina naranja que en las tarjetas de vídeo. Con un aro del
   color de la tarjeta para que se despegue también del plató naranja. */
.helenasunday-post-card__publi {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 2;
	padding: 0.3em 0.8em;
	border-radius: var(--helenasunday-shape-full);
	background-color: var(--wp--preset--color--tertiary-container);
	color: var(--wp--preset--color--on-tertiary-container);
	box-shadow: 0 0 0 2px var(--wp--preset--color--surface-container);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	:is(.helenasunday-formato-short, .helenasunday-formato-largo) .helenasunday-post-card__image img {
		transition:
			rotate 0.45s var(--helenasunday-spring),
			scale 0.45s var(--helenasunday-spring);
	}

	:is(.helenasunday-formato-short, .helenasunday-formato-largo) .helenasunday-post-card__image a::before,
	:is(.helenasunday-formato-short, .helenasunday-formato-largo) .helenasunday-post-card__image a::after {
		transition: scale 0.42s var(--helenasunday-spring);
	}

	/* Al pasar, la portada se endereza y crece un poco. */
	.helenasunday-post-card:hover .helenasunday-post-card__image img,
	.helenasunday-post-card:focus-within .helenasunday-post-card__image img {
		rotate: 0deg;
		scale: 1.04;
	}
}

/* -------------------------------------------------------------------------
 * 3. Entrada
 * ---------------------------------------------------------------------- */

/* Cabecera: la portada del vídeo, desenfocada, como ambiente. Nítida ya
   está en la tarjeta de debajo, y una portada vertical estirada a lo ancho
   se ve pixelada. */
.helenasunday-entrada-video .helenasunday-page-header .wp-block-cover__image-background {
	filter: blur(24px) saturate(1.1);
	scale: 1.15;
}

/* Titular de la entrada como los de la web: Poppins 600, tracking negativo. */
.single-post .helenasunday-page-header .wp-block-post-title {
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}

/* Tarjeta de vídeo dentro del contenido. Vertical: al ancho de un móvil.
   Horizontal: todo el ancho de lectura, a 16:9 (secciones.css las hace
   todas 9:16, que es lo que usan portada y portfolio). */
.helenasunday-prose > .helenasunday-video-card {
	margin-block: var(--wp--preset--spacing--40);
}

/* Short en móvil: la tarjeta arriba, a dos tercios del ancho y centrada. */
.helenasunday-prose > .helenasunday-video-card--vertical {
	width: min(66%, 22rem);
	margin-inline: auto !important; /* contra el margin-inline del layout constrained, que va con !important */
}

/* Short en escritorio: dos columnas. La tarjeta ocupa el tercio izquierdo
   y todas las filas (span alto: las filas vacías miden 0), y se queda fija
   bajo la cabecera mientras se lee; el resto del contenido, en los dos
   tercios de la derecha. Los márgenes !important, contra los del layout
   constrained del post-content, que también lo llevan. */
@media (min-width: 782px) {
	.helenasunday-entrada-short .helenasunday-prose {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		column-gap: var(--wp--preset--spacing--60);
		align-items: start;
		/* La rejilla, al ancho de contenido y alineada con la cabecera:
		   content-box para que el relleno lateral del post-content quede
		   fuera de ese ancho. */
		box-sizing: content-box;
		max-width: var(--wp--style--global--content-size);
		margin-inline: auto;
	}

	.helenasunday-entrada-short .helenasunday-prose > * {
		grid-column: 2;
		width: auto;
		max-width: none;
		margin-inline: 0 !important;
	}

	.helenasunday-entrada-short .helenasunday-prose > :first-child {
		margin-block-start: 0;
	}

	.helenasunday-entrada-short .helenasunday-prose > .helenasunday-video-card--vertical {
		grid-column: 1;
		grid-row: 1 / span 60;
		position: sticky;
		top: calc(var(--helenasunday-cabecera-alto, 0px) + var(--wp--preset--spacing--30));
		width: 100%;
		margin-block: 0;
	}
}

.helenasunday-video-card--horizontal {
	aspect-ratio: 16 / 9;
}

.helenasunday-video-card--horizontal::after {
	inset: 55% 0 0;
}

/* En móvil, a 16:9 no caben pegatina, play, marca y título: el título se
   quita (es el mismo que el H1 de la entrada, justo encima). */
@media (max-width: 599px) {
	.helenasunday-video-card--horizontal .helenasunday-video-card__title {
		display: none;
	}

	.helenasunday-video-card--horizontal::after {
		inset: 70% 0 0;
	}
}

/* Aire entre el final del texto y «Más artículos». */
.single-post .helenasunday-prose {
	padding-block-end: var(--wp--preset--spacing--60);
}

.helenasunday-video-card--horizontal .helenasunday-video-card__media a::before,
.helenasunday-video-card--horizontal .helenasunday-video-card__media a::after {
	top: 50%;
}

/* Nota de colaboración: identifica la publicidad antes que nada
   (obligación legal), en la pegatina naranja de #publi. */
.helenasunday-prose > .helenasunday-nota-publi {
	width: fit-content;
	padding: 0.4em 1em;
	border-radius: var(--helenasunday-shape-full);
	background-color: var(--wp--preset--color--tertiary-container);
	color: var(--wp--preset--color--on-tertiary-container);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
}

/* Tiempo de lectura y fecha: el tema los atenúa con opacidad; sobre la
   portada desenfocada se deja la tinta entera para no bajar de AA. */
.helenasunday-entrada-video .helenasunday-post-meta--inverse {
	opacity: 1;
}

/* --- Tarjeta del detalle: sin inclinación ni elevación ---------------------
   interacciones.js no la inclina (--sin-inclinacion). Al pasar o enfocar,
   el marco no se mueve: se acerca la imagen, recortada por la tarjeta, con
   un leve desenfoque, y entra el play con el muelle. Selectores de tres
   clases para ganar a los :hover de secciones.css sin depender del orden. */
.helenasunday-video-card.helenasunday-video-card--sin-inclinacion:hover,
.helenasunday-video-card.helenasunday-video-card--sin-inclinacion:focus-within {
	--helenasunday-lift: 0px;
	--helenasunday-play: 1;
	box-shadow:
		0 2px 4px color-mix(in srgb, var(--helenasunday-shadow-ink) 8%, transparent),
		0 12px 28px color-mix(in srgb, var(--helenasunday-shadow-ink) 10%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-video-card.helenasunday-video-card--sin-inclinacion .helenasunday-video-card__media img {
		transition:
			scale 0.6s var(--helenasunday-ease-effect),
			filter 0.6s var(--helenasunday-ease-effect);
	}

	.helenasunday-video-card.helenasunday-video-card--sin-inclinacion:hover .helenasunday-video-card__media img,
	.helenasunday-video-card.helenasunday-video-card--sin-inclinacion:focus-within .helenasunday-video-card__media img {
		scale: 1.05;
		filter: blur(2.5px);
	}
}

/* El play, oculto en reposo solo donde hay cursor y movimiento: en táctil
   (hover: none), con movimiento reducido y con el foco de teclado se ve
   siempre, para que quede claro que es un vídeo. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.helenasunday-video-card.helenasunday-video-card--sin-inclinacion {
		--helenasunday-play: 0.5;
	}

	.helenasunday-video-card--sin-inclinacion .helenasunday-video-card__media a::before,
	.helenasunday-video-card--sin-inclinacion .helenasunday-video-card__media a::after {
		opacity: 0;
		transition:
			scale 0.42s var(--helenasunday-spring),
			opacity 0.2s var(--helenasunday-ease-effect);
	}

	.helenasunday-video-card--sin-inclinacion:is(:hover, :focus-within) .helenasunday-video-card__media a::before,
	.helenasunday-video-card--sin-inclinacion:is(:hover, :focus-within) .helenasunday-video-card__media a::after {
		opacity: 1;
	}
}

/* Vídeo largo: la nota alineada a la izquierda de la columna de contenido,
   con el texto, en vez de centrada por el layout constrained (que fija sus
   márgenes con !important). */
.helenasunday-entrada-largo .helenasunday-prose > .helenasunday-nota-publi {
	margin-inline: max(0px, (100% - var(--wp--style--global--content-size)) / 2) auto !important;
}