/* =================================================================
   search.css — search.php (plantilla nativa de búsqueda de WP, Figma
   30-Search-Results-Desktop, node-id=4508-18215, archivo BdUd1g6K6cuVm4036Z5p6p).

   Filtros/resumen/paginación/estado vacío reusan TAL CUAL .news-filters/.news-pill/
   .news-filter-dropdown/.news-filter-summary/.news-pagination/.news-empty* de news.css (pedido
   explícito del usuario: basar los filtros de Search en los de Noticias) — ESTE archivo solo
   agrega lo que News no tiene: el wrap de página/hero de término buscado, el conteo por pill, y
   el layout "row" nuevo de card-search-result.php (ningún card existente del sitio es una fila
   horizontal chica, todos son cards verticales/grid).
   ================================================================= */

@layer views {

	/* ---- Wrap de página: mismo patrón que .news-page/.news-page__inner (news.css, §12.41). ---- */
	.search-page {
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}
	@media (width >= 80rem) {
		.search-page { padding-inline: 0; }
	}
	.search-page__inner {
		max-width: var(--container);
		margin-inline: auto;
	}

	/* ---- Dimming global mientras carga (body.is-loading, app.js). El spinner en sí (#search-
	   spinner) reusa TAL CUAL .news-spinner/.news-spinner__ring de news.css (2 elementos: outer
	   fixed+reposicionado por search-spinner.js, inner que gira — separados a propósito, ver el
	   comentario de .news-spinner en news.css sobre el bug real de mezclar translate+rotate en un
	   solo elemento). Nada que agregar acá. ---- */
	body.is-loading .search-page #results {
		opacity: .6;
		transition: opacity .2s;
	}

	/* ---- Hero: label + término buscado (grande, bold) + ícono de lupa + conteo de resultados. ---- */
	.search-hero {
		padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.25rem, 1rem + 1vw, 2rem);
		border-bottom: 1px solid var(--dia-color-border-subtle, #e5e5e5);
	}
	/* DIA DS/Body/Body Medium — mismo clamp de .hero-desc (base.css): 16px → 20px desktop. */
	.search-hero__label {
		margin: 0 0 8px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1rem, .875rem + .5vw, 1.25rem);
		line-height: 1.6; /* 32/20 */
		color: var(--dia-color-text-secondary, #767778);
	}
	.search-hero__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-m);
	}
	.search-hero__term-wrap {
		margin: 0;
		flex: 1;
		min-width: 0;
	}
	.search-hero__form {
		display: flex;
		align-items: center;
		gap: var(--space-m);
	}
	/* DIA DS/Heading Sections/H1 Sans L — mismo clamp de .hero-title (base.css): 60px desktop.
	   Antes texto estático, ahora <input> real (pedido explícito del usuario — el propio Figma ya
	   nombraba esta zona "input", nodo 4508:18219): sin borde/fondo propio para seguir viéndose
	   como el H1 de antes, con un foco visible para no perder accesibilidad de teclado. */
	.search-hero__term {
		flex: 1;
		min-width: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		/* Sin esto, WebKit aplica su chrome nativo de type="search" (padding/redondeo propio) por
		   encima del reset de arriba. */
		-webkit-appearance: none;
		appearance: none;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(2rem, 1.4rem + 2.4vw, 3.75rem);
		line-height: 1.167; /* 70/60 */
		letter-spacing: -2px;
		color: var(--dia-color-text-primary, #121212);
	}
	.search-hero__term:focus-visible {
		outline: 2px solid var(--dia-color-brand-primary, #2d5480);
		outline-offset: 4px;
	}
	.search-hero__icon {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--dia-color-text-secondary, #767778);
		cursor: pointer;
	}
	.search-hero__icon:hover { color: var(--dia-color-brand-primary, #2d5480); }
	.search-hero__icon:focus-visible {
		outline: 2px solid var(--dia-color-brand-primary, #2d5480);
		outline-offset: 2px;
	}
	.search-hero__icon svg { width: 100%; height: 100%; }
	/* DIA DS/Label/Labels */
	.search-hero__count {
		margin: 12px 0 0;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px; /* 153.846% */
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-secondary, #767778);
	}

	/* ---- Conteo "(N)" de cada pill (filter-bar-search.php) — único agregado real sobre
	   .news-pill/.news-filters de news.css, reusadas sin ningún otro cambio. ---- */
	/* Bug real reportado: .news-pill es inline-flex+align-items:center, y el label/el conteo
	   quedan como 2 "flex items" con cajas de línea de alto distinto (24px el label, 18px el
	   conteo) — centrar cada uno en su propia caja los deja ópticamente desalineados aunque cada
	   uno esté matemáticamente centrado. `baseline` los alinea por la línea de base del texto en
	   vez del centro de la caja — caso de uso clásico de flexbox para texto grande+chico en una
	   misma fila. Acotado a Search (News no tiene este conteo). */
	.search-filters .news-pill {
		align-items: baseline;
	}
	/* MISMO bug/fix de arriba, pero dentro del "…" de overflow (news-filters-overflow.js reparenta
	   el MISMO botón ahí, con `.news-filter-dropdown__item` en vez de `.news-pill` — el conteo
	   viaja con él): `.news-filter-dropdown__item` es flex + align-items:flex-start (news.css,
	   por el check ✓ del ítem activo), no `center`, pero el problema de fondo es el mismo — label y
	   conteo son 2 flex items con cajas de línea de alto distinto. El check ✓ (::after) SÍ necesita
	   seguir en flex-start (su margin-top:4px está calibrado contra eso, ver news.css) — se fija
	   con su propio align-self para no heredar el baseline nuevo del contenedor. */
	.search-filters .news-filter-dropdown__item {
		align-items: baseline;
	}
	.search-filters .news-filter-dropdown__item[aria-current="true"]::after {
		align-self: flex-start;
	}
	.search-filters__count {
		margin-left: 2px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 12px;
		line-height: 1.5; /* 18/12 */
		text-transform: uppercase;
		color: var(--dia-color-brand-primary, #2d5480);
	}
	/* Pedido explícito del usuario: 48px de padding-top acá (News usa 32px, .news-filters
	   padding-block:2rem 3rem) — clamp mismo criterio que .post-page (single-news.css): 48px
	   desktop, ~30px mobile, en vez de un salto brusco. Selector de 1 sola clase + search.css
	   cargado DESPUÉS de news.css (inc/enqueue.php) alcanza para pisar el padding-block-start de
	   .news-filters sin !important. */
	.search-filters {
		padding-top: clamp(1.875rem, 1.5rem + 1vw, 3rem);
	}
	/* Pedido explícito del usuario: 48px de padding-bottom en el resumen de filtro activo — News
	   no le pone ninguno (se apoya en el gap de .news-grid, ver comentario de .news-filter-summary
	   en news.css). Ámbito acotado a .search-page (el ancestro NO se reemplaza en los swaps HTMX,
	   solo sus hijos) para no tocar el comportamiento de News. */
	.search-page .news-filter-summary {
		padding-bottom: clamp(1.875rem, 1.5rem + 1vw, 3rem);
	}

	/* ---- Lista de resultados mixtos + divisor entre grupos de tipo distinto (Figma: NUNCA entre
	   cards del mismo tipo, ver search-results.php sobre cómo se decide). ---- */
	.search-results {
		display: flex;
		flex-direction: column;
	}
	/* Bug real reportado: con 1 sola página (sin pagination-search.php, que sí trae su propio
	   padding-block-end generoso vía .news-pagination) la última card quedaba pegada directo al
	   footer, sin los 48px de aire que pide el resto de la página. `:last-child` (sibling directo
	   de .search-results dentro de .search-grid, ver search-results.php) hace que este padding
	   SOLO aplique cuando no hay paginación después — con paginación, ese espacio ya lo da
	   .news-pagination y sumar los dos habría quedado excesivo. Mismo clamp 48px-desktop de
	   siempre. */
	.search-results:last-child {
		padding-bottom: clamp(1.875rem, 1.5rem + 1vw, 3rem);
	}
	.search-divider {
		width: 100%;
		height: 1px;
		margin: 24px 0;
		border: 0;
		background: var(--dia-color-border-subtle, #e5e5e5);
	}

	/* ---- Card de resultado: thumb 175×110 a la izquierda + texto a la derecha (Figma "Article
	   Container"). Toda la fila clickeable vía el <a> del título Y el <a> de la miniatura — sin
	   stretched-link porque el badge/autor también llevan su propio <a> (categoría/departamento),
	   que necesita quedar clickeable por separado. ---- */
	.search-result {
		display: flex;
		align-items: flex-start;
		gap: 30px;
		padding-block: 24px;
	}
	.search-result:first-child { padding-top: 0; }
	.search-result__media {
		flex-shrink: 0;
		display: block;
		width: 175px;
		height: 110px;
		border-radius: 8px;
		overflow: hidden;
		background: var(--dia-color-border-subtle, #f3f4f6);
	}
	.search-result__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.search-result__body {
		min-width: 0;
		flex: 1;
		width: 100%;
	}
	@media (width >= 48rem) {
		.search-result__body { max-width: 482px; }
	}
	/* DIA DS/Label/Section */
	.search-result__type {
		display: block;
		margin-bottom: 8px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 16px;
		line-height: 1.5; /* 24/16 */
		letter-spacing: 5.12px;
		text-transform: uppercase;
		color: var(--dia-color-brand-primary, #2d5480);
	}
	.search-result__badge { margin-bottom: 0; }
	.search-result__title { /* H3 News — Noto Serif Condensed SemiBold 20/28 */
		margin: 0 0 4px;
		font-family: var(--font-serif);
		font-stretch: 75%;
		font-weight: 600;
		font-size: 20px;
		line-height: 28px;
		color: #111;
		/* Trim a 2 líneas con "…" — mismo patrón que .news-card__title--lg (news.css)/
		   archive-perspective.css, ver esos archivos para el porqué de cada propiedad. */
		display: -webkit-box;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.search-result__title a {
		color: inherit;
		text-decoration: none;
	}
	.search-result__title a:hover { text-decoration: underline; }
	/* Espaciados SIEMPRE vía margin-bottom del elemento que va ANTES (nunca margin-top del que
	   sigue, pedido explícito del usuario) — así el gap correcto aplica sin importar qué
	   combinación de bloques opcionales (badge/author/meta) termine renderizando cada tipo. */
	.search-result__author {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 8px;
	}
	.search-result__avatar {
		flex-shrink: 0;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		object-fit: cover;
	}
	.search-result__avatar--fallback {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 700;
		color: #fff;
		background: var(--dia-color-brand-primary, #2d5480);
	}
	.search-result__author-info {
		display: flex;
		flex-direction: column;
		font-family: var(--font-sans);
		font-size: 12px;
		line-height: 18px;
	}
	.search-result__author-name {
		font-weight: 700;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.search-result__author-sub {
		color: var(--dia-color-text-secondary, #767778);
		text-transform: uppercase;
	}
	.search-result__meta { margin: 0; }

	@media (width < 48rem) {
		.search-result { gap: var(--space-m); }
		.search-result__media { width: 120px; height: 80px; }
		.search-result__title { font-size: 16px; }
	}
}