/* Portada — ver inc/portada.php */

/*
 * OJO con el selector: la home tiene DOS heros, uno por idioma, separados con
 * los parámetros de exclusión de TranslatePress. El de español es la primera
 * fila del documento y Salient le pone `top-level`; el de inglés va más abajo
 * en el contenido y no la lleva, así que con `top-level` el ajuste no le
 * llegaba y la portada salía con la altura fija de 900 px, recortada por los
 * lados. `first-section` la ponen las dos.
 */

/*
 * La portada del cliente es una composición cerrada: el rótulo "SNACK MODE", el
 * interruptor y la barrita están colocados dentro de la propia imagen. La fila
 * del hero venía con una altura fija (900 px) y la imagen entra en "cover", así
 * que en cuanto la proporción de la pantalla no coincidía con la de la foto se
 * recortaban los lados y se comía la S de SNACK y media barrita.
 *
 * Se le da a la fila la proporción exacta de cada versión de la imagen, así que
 * la composición se ve entera a cualquier ancho. Los tamaños salen de los
 * archivos que mandó el cliente: 1672 × 941 en escritorio y 941 × 1672 en móvil.
 */
/*
 * OJO 2: `first-section` NO es exclusiva del hero — la fila del footer global de la home
 * también la lleva, así que sin acotar a `.main-content` la proporción del hero se le
 * aplicaba al footer y lo estiraba a la altura de la pantalla (694-950 px en vez de 390).
 * El hero vive dentro de `.container.main-content`; el footer, en `.nectar-global-section`.
 */
body.home .main-content .wpb_row.first-section.full-width-content {
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: 1672 / 941;
}

/* Salient sirve la versión vertical a partir de 999 px (bg_image_phone). */
@media (max-width: 999px) {

	body.home .main-content .wpb_row.first-section.full-width-content {
		aspect-ratio: 941 / 1672;
	}
}

/*
 * Pantallas muy apaisadas: mejor perder un poco de foto por arriba y por abajo
 * que empujar el resto de la página fuera de la primera pantalla.
 */
@media (min-width: 1000px) {

	body.home .main-content .wpb_row.first-section.full-width-content {
		max-height: 88vh;
	}
}

/* ---------------------------------------------------------------
 * La foto de las dos barritas pisaba la primera bola en móvil.
 *
 * Es el `nectar_cascading_images` de Salient: su capa .bg-layer recibe un
 * translateY que el tema recalcula en cada evento de scroll. Cuando la foto
 * eran dos imágenes superpuestas —envoltorio y barrita— ese desplazamiento
 * era el efecto: se movían una respecto a la otra. Desde que es una sola
 * imagen (26-08) el movimiento ya no compone nada, y en cuanto las columnas
 * se apilan arrastra la foto sobre el círculo de debajo: 33 px a 500 px de
 * ancho y hasta 197 px a 768.
 *
 * Se anula solo mientras están apiladas. Por encima de 999 px las bolas van
 * a los lados de la foto, no debajo, así que ahí el movimiento no estorba y
 * se conserva. Va con !important porque el tema escribe el transform en línea.
 *
 * Reportado por el cliente el 27-08.
 * --------------------------------------------------------------- */
@media (max-width: 999px) {

	/*
	 * El marco lo fija Salient en 4:5, pero la foto es 1024 × 1536 (2:3). Con la
	 * escala a 0,75 que tenía la composición anterior cabía dentro; a escala 1
	 * sobresale 132 px por debajo, y como el desbordamiento es visible, esos
	 * píxeles caen sobre el círculo. Se le da al marco la proporción real de la
	 * foto, así que ocupa lo que mide.
	 */
	body.home .nectar_cascading_images.forced-aspect {
		aspect-ratio: 1024 / 1536;
	}

	/* El desplazamiento por scroll y el descuadre del 5% ya no componen nada
	 * con una sola imagen, y los dos vuelven a empujarla hacia abajo. */
	body.home .nectar_cascading_images .bg-layer,
	body.home .nectar_cascading_images .img-wrap {
		transform: none !important;
	}
}

/*
 * El resto del solape lo pone la propia columna: trae `bottom_margin_phone="-45%"`
 * en el shortcode, un margen negativo que se puso cuando la foto iba a escala
 * 0,75 y ocupaba menos. Con la imagen a su tamaño real ese -45% sube el primer
 * círculo por debajo del borde de la foto. Se recorta hasta dejar aire.
 *
 * Se corrige aquí y no en el contenido a propósito: un cambio de CSS viaja con
 * el tema al desplegar, mientras que uno de contenido habría que repetirlo a
 * mano en producción.
 */
@media (max-width: 690px) {

	body.home .kubari-orbit-section {
		margin-bottom: -29% !important;
	}
}