/**
 * JOVI — Layout y ajustes responsive.
 *
 * Migrado del "CSS adicional" del Customizer (post custom_css id 8, 3.992 bytes).
 * Ese CSS vivía solo en la base de datos, sin git y sin respaldo, igual que los snippets.
 * El original quedó archivado en docs/customizer-css-original.css.
 *
 * Dos correcciones respecto al original:
 *
 *   1. Las imágenes de producto tenían DOS bloques de reglas contradictorios: uno con
 *      alturas responsive (300/250/200/150px) y `object-fit: cover`, y otro al final con
 *      `height:200px !important; object-fit:contain !important`. El segundo ganaba siempre,
 *      así que los tres breakpoints eran código muerto. Se conserva el comportamiento real
 *      (contain sobre fondo claro, que es lo correcto para catálogo) y se le devuelve el
 *      escalado por breakpoint, esta vez funcionando.
 *
 *   2. Las reglas móviles del botón de WhatsApp apuntaban a `.jovi-whatsapp-btn`, la clase
 *      del snippet ya migrado. La intención (botón circular de 56px en móvil) se trasladó a
 *      jovi-commerce, que es donde vive el botón ahora.
 */

/* =============================================
   1. COMPONENTES DE BLOCKSY
   ============================================= */

.ct-frosted-glass {
	backdrop-filter: blur(40px) brightness(200%);
	-webkit-backdrop-filter: blur(40px) brightness(200%);
}

.ct-subscribe-form {
	--theme-form-field-height: 60px;
	--theme-form-field-padding: 0 25px;
	--theme-form-field-background-initial-color: var(--jovi-ink);
	--theme-form-field-background-focus-color: rgba(13, 13, 13, 0.4);
	--theme-form-field-border-width: 0;
	--theme-text-color: var(--jovi-white);
	--theme-button-min-height: 60px;
	--theme-button-background-initial-color: var(--jovi-red);
	--theme-button-text-initial-color: var(--jovi-white);
}

/* Mapa de la página de contacto */
.ct-map {
	height: 500px;
}

@media (max-width: 1024px) {
	.ct-map { height: 400px; }
}

@media (max-width: 768px) {
	.ct-map { height: 300px; }
}

@media (max-width: 480px) {
	.ct-map { height: 200px; }
}

/* =============================================
   2. IMÁGENES DE PRODUCTO UNIFORMES
   ============================================= */

/*
 * `contain` sobre fondo claro y no `cover`: el catálogo mezcla fotos de fabricante con
 * recortes propios, y `cover` recortaba producto. Mejor caja uniforme con el producto
 * entero dentro.
 */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
	width: 100%;
	height: 240px;
	object-fit: contain;
	background: var(--jovi-surface);
	padding: var(--jovi-space-2);
	border-radius: var(--jovi-radius);
}

@media (max-width: 1024px) {
	.woocommerce ul.products li.product a img,
	.woocommerce ul.products li.product img { height: 200px; }
}

@media (max-width: 768px) {
	.woocommerce ul.products li.product a img,
	.woocommerce ul.products li.product img { height: 160px; }
}

@media (max-width: 480px) {
	.woocommerce ul.products li.product a img,
	.woocommerce ul.products li.product img { height: 140px; }
}

/* =============================================
   3. MÓVIL
   ============================================= */

@media (max-width: 768px) {

	/*
	 * Aquí vivía una regla heredada del Customizer que ponía `min-height: 60vh` a
	 * `.ct-section:first-of-type`, `[data-id*="hero"]`, `.hero-section` y `.jovi-hero`. Su
	 * propio comentario decía que había que revisarla al rehacer el Home en la Fase 4.
	 *
	 * Se elimina, y no era inofensiva: **60vh son 487 px en un móvil de 812**, y esa era la
	 * franja vacía que aparecía sobre las fichas de producto y las páginas legales — donde
	 * `.hero-section` solo contiene una línea de migas de pan de 21 px. Estuve a punto de
	 * atribuirlo al Customizer de Blocksy; era CSS propio.
	 *
	 * El hero del Home ya no la necesita: tiene su propio alto en `home.css`.
	 */

	/* Catálogo en dos columnas. El !important es necesario: WooCommerce y Blocksy
	   imponen su propia grilla con alta especificidad. */
	.woocommerce ul.products,
	ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--jovi-space-3) !important;
	}

	.woocommerce ul.products li.product,
	ul.products li.product {
		width: 100% !important;
		margin: 0 !important;
	}

	/* Nombre de producto a dos líneas como máximo, para que la grilla no se descuadre. */
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product h2 {
		font-size: 0.8125rem;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.woocommerce ul.products li.product .price {
		font-size: 0.9375rem;
	}

	/* Área de toque cómoda: 44px es el mínimo recomendado. */
	.woocommerce ul.products li.product .button {
		width: 100%;
		min-height: 44px;
		padding: 10px 8px;
		font-size: 0.8125rem;
	}

	.ct-header {
		padding: var(--jovi-space-2) var(--jovi-space-4);
	}
}

/* =============================================
   PATRÓN DE BANDA
   ============================================= */

/*
 * Cada sección del Home es una banda: el <section> ocupa todo el ancho y lleva el fondo, y un
 * `.jovi-band__inner` centra el contenido. Antes las secciones dependían del ancho que les
 * imponía el layout "constrained" de WordPress, y eso traía dos problemas visibles:
 *
 *   1. WordPress mete `margin-block-start` entre cada hijo directo de .entry-content. Ese era
 *      el espacio en blanco que aparecía entre secciones, además del que ya pone cada una.
 *   2. Ninguna sección podía llevar un fondo a sangre completa, porque quedaba recortada al
 *      ancho del contenido.
 *
 * Se anula el layout para los hijos directos y cada banda se encarga de su propio ancho. La
 * clase `jovi-pagina` la pone functions.php solo donde hay secciones JOVI, así que una página
 * normal de WordPress sigue comportándose como siempre.
 */
/*
 * Hay que desarmar tres declaraciones distintas, y por eso no basta con `max-width`:
 *
 *   max-width  — del estilo en línea de WordPress (`--wp--style--global--content-size`)
 *   width      — de Blocksy, `width: var(--theme-block-width)` en main.min.css. Esta es la que
 *                de verdad encogía las bandas a 1152px: `max-width: none` la dejaba intacta.
 *   margin     — WordPress centra con `margin-inline: auto !important`, así que el único modo
 *                de ganarle es con otro !important. Es de los pocos casos donde se justifica.
 */
.jovi-pagina .entry-content > * {
	width: auto;
	max-width: none;
	margin-block: 0;
	margin-inline: 0 !important;
}

.jovi-band__inner {
	max-width: var(--jovi-container);
	margin-inline: auto;
	padding-inline: var(--jovi-gutter);
}

/* La banda vacía —la que solo existe para centrar una tarjeta, como Emma Pay o el asesor—
   no necesita relleno propio: la tarjeta ya trae el suyo. */
.jovi-band {
	display: block;
}

/* =============================================
   HERO DE MIGAS DE PAN
   ============================================= */

/*
 * Donde sí queremos las migas —fichas de producto y páginas legales— el contenedor de Blocksy
 * solo necesita el aire justo. Las migas se quedan: orientan, y llevan su `BreadcrumbList` en
 * schema.
 */
/*
 * `.is-width-constrained` calcula su propio ancho y lo centra, con un margen que no coincide con
 * el gutter del resto del sitio: las migas caían unos píxeles corridas respecto al header. Se le
 * impone el contenedor de JOVI para que todo el sitio arranque en la misma línea vertical.
 */
.hero-section,
.hero-section.is-width-constrained {
	width: auto;
	max-width: var(--jovi-container);
	margin-inline: auto;
	padding-block: var(--jovi-space-5) 0;
	padding-inline: var(--jovi-gutter);
}

.hero-section .entry-header {
	margin-bottom: 0;
}