/**
 * Estilos del buscador y la página de resultados.
 * Mobile-first: 2 columnas por defecto, más columnas desde 768px.
 * Colores propios de Mercado Avícola, no heredados de HivePress/WP.
 */

/*
 * ===== Buscador del Header — v0.9.1, flexible (absorbe el espacio libre) =====
 *
 * Corrección respecto a v0.9.0: con "Inicio"/"Categorías" fuera del
 * menú, "Empresas" quedó como único ítem de navegación — muy liviano.
 * Como el buscador tenía ANCHO FIJO (280px) y `.header-navbar__end`
 * tenía `margin-left:auto` (empujando el menú a la derecha), todo el
 * espacio libre de la pantalla se acumulaba como un hueco vacío entre
 * el buscador y "Empresas" — el buscador no absorbía nada de ese
 * espacio, así que crecía la nada, no él.
 *
 * Solución: el buscador pasa a `flex-grow`, con un mínimo (300px) y un
 * máximo (560px) — es él quien reclama el espacio libre real, no un
 * margen automático en otro elemento. Se saca `margin-left:auto` de
 * `.header-navbar__end` (ya no hace falta: el buscador ocupa el lugar
 * que antes quedaba vacío) y se reemplaza por un espacio fijo y
 * moderado entre el buscador y el menú.
 */

@media ( min-width: 1200px ) {

	.ma-feed-buscador-header {
		display: flex;
		align-items: center;
		align-self: center; /* asegura centrado vertical sin depender del align-items real de .header-navbar */
		flex: 1 1 auto; /* crece para absorber el espacio libre real de la fila */
		min-width: 300px;
		max-width: 560px;
		margin-left: 32px; /* separación del logo, coherente con el padding horizontal del propio Header (1rem 2rem) */
		margin-right: 28px; /* espacio fijo y moderado respecto al menú — ya no un hueco variable */
		border-radius: 20px; /* se define UNA sola vez acá, no repartida entre label/botón — así el recorte es idéntico en ambos extremos, sin desajustes */
		overflow: hidden; /* recorta label+botón a esta misma forma — evita que el lado del botón se vea "más cuadrado" que el del campo */
		box-shadow: 0 0 8px rgba( 0, 0, 0, 0.1 ); /* CORRECCIÓN: sombra sin desplazamiento (antes 0 2px 10px, direccional — se veía más marcada abajo que arriba, leyéndose como un "marco" desalineado) */
	}

	/* Campo + botón como una sola pieza visual: el radio y el recorte los maneja el contenedor de arriba */
	.ma-feed-buscador-header__label {
		display: flex;
		align-items: center;
		flex: 1; /* el label ocupa todo el ancho que el contenedor flexible le da, el botón queda fijo al lado */
		height: 41px;
		background-color: #fff;
		cursor: text;
	}

	.ma-feed-buscador-header__input {
		flex: 1;
		min-width: 0;
		height: 100%; /* CORRECCIÓN: antes dependía del alto intrínseco del navegador para un <input> sin altura propia — inconsistente entre navegadores */
		box-sizing: border-box; /* asegura que height:100% no se vea afectado por el padding */
		padding-left: 16px; /* CORRECCIÓN: reemplaza el hueco que dejaba el ícono gris ya eliminado (ver más abajo) */
		border: none;
		outline: none;
		background: transparent;
		font-size: 13px;
		color: #1a1a1a;
		cursor: text;
	}

	.ma-feed-buscador-header__input::placeholder {
		color: #999;
	}

	.ma-feed-buscador-header__boton {
		flex-shrink: 0;
		height: 41px;
		width: 44px;
		padding: 0;
		border: none;
		background: #0E8A37; /* verde real del sitio (confirmado en el CSS del Personalizador), no el institucional que usábamos antes por error */
		color: #fff;
		line-height: 0;
		font-size: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.ma-feed-buscador-header__boton svg {
		display: block;
		flex-shrink: 0;
	}
}

/*

 * Por debajo de 1200px: sigue igual — el buscador del Header no existe
 * visualmente ahí (Opción C: en mobile vive solo en la barra inferior).
 */
@media ( max-width: 1199px ) {
	.ma-feed-buscador-header {
		display: none;
	}
}

/* ===== Página de resultados ===== */

.ma-feed-resultados {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 16px 60px;
}

.ma-feed-resultados__vacio {
	font-size: 14px;
	color: #666;
	text-align: center;
	padding: 40px 0;
}

.ma-feed-seccion {
	margin-bottom: 40px; /* v0.9.9: antes 32px — separación más clara entre el bloque de tarjetas y el siguiente encabezado */
}

.ma-feed-seccion__titulo {
	font-size: 19px; /* v0.9.9: antes 16px */
	font-weight: 700; /* v0.9.9: antes 500 */
	margin: 0 0 16px; /* v0.9.9: antes 12px — más aire respecto a la grilla de tarjetas */
	color: #164C3B; /* v0.9.9: antes #1a1a1a — verde institucional */
}

/* v0.9.11: encabezado + link "Ver todas" en la misma fila — usado por Empresas destacadas en /explorar/ */
.ma-feed-seccion__cabecera-con-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.ma-feed-seccion__cabecera-con-link .ma-feed-seccion__titulo {
	margin-bottom: 0; /* el margen ya lo maneja el contenedor de arriba */
}

.ma-empresas-destacadas__ver-todas {
	font-size: 13px;
	font-weight: 600;
	color: #0E8A37;
	text-decoration: none;
	white-space: nowrap;
}

.ma-empresas-destacadas__ver-todas:hover {
	text-decoration: underline;
}

/*
 * Grilla: columnas EXPLÍCITAS por rango de ancho, no `auto-fill`.
 * v0.9.11: antes usábamos `auto-fill` con `minmax(240px, 280px)` —
 * matemáticamente necesita ~1008px de ancho real disponible para
 * intentar una 4ª columna (4×240px + 3×16px de gap); por debajo de
 * eso, se queda en 3 y reparte el sobrante entre esas 3 hasta su
 * máximo (280px) — el hueco vacío a la derecha que veíamos. Columnas
 * fijas por breakpoint es más predecible: no depende de adivinar si
 * el ancho real de cada pantalla supera ese umbral.
 */
.ma-feed-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr ); /* mobile */
	gap: 10px;
}

@media ( min-width: 768px ) {
	.ma-feed-grid {
		grid-template-columns: repeat( 3, 1fr ); /* tablet */
		gap: 16px;
	}
}

@media ( min-width: 1024px ) {
	.ma-feed-grid {
		grid-template-columns: repeat( 4, 1fr ); /* desktop */
	}
}

/* ===== Tarjetas ===== */

.ma-feed-card {
	display: block;
	background: #fff;
	border: 0.5px solid #e2e2e2;
	border-radius: 12px;
	padding: 12px; /* v0.9.9: antes 10px — un poco más de aire, coordinado entre Empresa y Producto/Publicación (regla compartida) */
	text-decoration: none;
	color: inherit;
	overflow: hidden; /* recorta la franja de Empresa a las esquinas redondeadas de la propia tarjeta */
	transition: border-color 0.15s ease;
}

.ma-feed-card:hover {
	border-color: #164C3B;
}

/* ===== Empresa: franja + cabecera con badge junto al nombre ===== */

.ma-feed-card__franja {
	position: relative; /* v0.9.10: necesario para que la portada (si existe) se posicione detrás del logo */
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	margin: -12px -12px 12px; /* se sigue escapando hasta el borde */
	background: #E1F5EE; /* queda como fallback institucional cuando no hay portada */
	overflow: hidden;
}

.ma-feed-card__portada {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.ma-feed-card__logo {
	position: relative; /* v0.9.10: asegura que quede por encima de la portada */
	z-index: 1;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	overflow: hidden;
	border: 2px solid #fff; /* separa el logo del fondo de la franja o de la portada */
}

.ma-feed-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ma-feed-card__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}

.ma-feed-card__cabecera .ma-feed-card__titulo {
	margin: 0;
	flex: 1;
	min-width: 0;
}

.ma-feed-card__cabecera .ma-feed-badge--verificada {
	flex-shrink: 0;
}

/* ===== Producto/Publicación: área de imagen 4:3 (antes 16:9) ===== */

.ma-feed-card__imagen {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #f2f2f2;
	border-radius: 10px; /* v0.9.9: antes 8px — más cerca del radio de la tarjeta (12px), se siente más parte del mismo sistema */
	margin-bottom: 8px;
	position: relative;
	overflow: hidden;
}

.ma-feed-card__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.ma-feed-card__titulo {
	font-size: 13.5px; /* v0.9.9: antes 13px — regla compartida por las 3 tarjetas, coordina el ajuste automáticamente */
	font-weight: 600; /* v0.9.9: antes 500 — un poco más de presencia */
	margin: 0 0 4px;
	color: #1a1a1a;
	line-height: 1.3;
}

.ma-feed-card__marca {
	display: block;
	font-size: 11px;
	color: #666;
	margin-bottom: 4px;
}

.ma-feed-card__empresa {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #666;
	margin-top: 6px;
}

.ma-feed-card__empresa-logo {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #E1F5EE;
	overflow: hidden;
	flex-shrink: 0;
}

.ma-feed-card__empresa-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ===== Badges de nivel comercial — mismo lenguaje visual en las 3 tarjetas ===== */

.ma-feed-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 500;
	padding: 3px 9px;
	border-radius: 20px;
	line-height: 1.4;
}

.ma-feed-badge--verificada {
	background: #E1F5EE;
	color: #085041;
}

.ma-feed-badge--destacada {
	position: absolute;
	top: 6px;
	left: 6px;
	background: #FAC775;
	color: #412402;
}

/* ===== Empresa exacta — bloque destacado, ancho completo ===== */

.ma-feed-empresa-exacta {
	background: #FAFAFA;
	border-radius: 14px;
	padding: 18px 22px;
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ma-feed-empresa-exacta__logo {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: #E1F5EE;
	flex-shrink: 0;
}

.ma-feed-empresa-exacta__info {
	flex: 1;
	min-width: 180px;
}

.ma-feed-empresa-exacta__eyebrow {
	display: block;
	font-size: 11px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 2px;
}

.ma-feed-empresa-exacta__nombre {
	font-size: 17px;
	font-weight: 500;
	margin: 0 0 4px;
	color: #1a1a1a;
}

.ma-feed-empresa-exacta__resumen {
	font-size: 12px;
	color: #666;
	margin: 0;
}

.ma-feed-boton {
	display: inline-block;
	background: #164C3B;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	padding: 9px 18px;
	border-radius: 20px;
	text-decoration: none;
	white-space: nowrap;
}

/* ===== Sugerencias (Nivel 2) — ancho completo, siempre distintas de una tarjeta real ===== */

.ma-feed-sugerencia {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #FAFAFA;
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 32px;
	text-decoration: none;
	color: inherit;
}

.ma-feed-sugerencia__eyebrow {
	display: block;
	font-size: 11px;
	color: #888;
	margin-bottom: 2px;
}

.ma-feed-sugerencia__nombre {
	font-size: 14px;
	font-weight: 500;
	color: #1a1a1a;
}

.ma-feed-sugerencia__cta {
	font-size: 12px;
	color: #164C3B;
	font-weight: 500;
	white-space: nowrap;
}