/* Fondos de pagina.
 *
 * Los fondos son imagenes de la panaderia, no degradados: cada pagina tiene la
 * suya. Hay tres (casa, galeria, general) y cada una tiene una version para
 * movil, porque una foto de 1536x824 recortada en un movil de 360 px deja de
 * decir nada: se ve un fragmento. La version movil esta pensada para ese
 * encuadre.
 *
 * Decisiones que importan mas que el archivo:
 *
 * - `cover` + `center`: el recorte cambia con la pantalla, y el foco se queda en
 *   el centro, que es donde esta el sujeto de la foto.
 * - `no-repeat` + `background-size: 100% 100%` NO. Un fondo estirado deforma la
 *   foto; `cover` la recorta sin deformarla.
 * - El fondo va en `body`, con `background-attachment: fixed` solo en escritorio.
 *   En movil `fixed` hace que el navegador repinte la foto en cada scroll y el
 *   telefono se calienta y pierde fluidez; por eso la version movil usa `scroll`.
 * - Una capa de velo encima. Sin ella el texto compite con el detalle de la foto
 *   y la legibilidad depende de lo que haya salido en el recorte.
 *
 * DE LAS URL: van RELATIVAS a proposito, y sin carpeta.
 *
 * Propshaft sirve cada imagen con un nombre digerido: el archivo
 * `fondo_home.jpg` se publica como `fondo_home-<huella>.jpg` bajo `/assets`. Para
 * que el CSS llegue ahi, Propshaft tiene que ser quien reescribe la URL, y lo
 * hace solo si la que escribimos se puede resolver como ruta logica:
 *
 *   - nombre pelado, como el de arriba          -> se resuelve, y Propshaft
 *                                                  escribe la URL digerida.
 *   - nombre pelado con una barra delante       -> quita la barra, se resuelve.
 *   - ruta absoluta con carpetas por delante    -> busca el asset `assets/<...>`,
 *                                                  que no existe (la carpeta de
 *                                                  imagenes YA es la raiz del
 *                                                  load path), no puede
 *                                                  resolverla, y deja la URL tal
 *                                                  cual con un aviso en el log.
 *
 * El tercer caso es el que estaba: los tres fondos devolvian 404 y la pagina se
 * quedaba en negro de humo. Se comprueba en
 * `test/integracion/hojas_y_navegadores_test.rb`.
 *
 * (Ojo al escribir esta nota: el reescritor de Propshaft no se salta los
 * comentarios, asi que un ejemplo con forma de URL aqui sale tambien en la hoja
 * servida. Abajo no hay ninguno a proposito.)
 */

/* ---------------------------------------------------------------- comun
 *
 * Va ANTES de las paginas porque comparte cuatro propiedades con ellas y solo
 * pone el valor por defecto. Al reves, la regla comun llega despues y su
 * `background-attachment: fixed` pisa el `scroll` que el movil necesita.
 */

body {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  /* La foto nunca es el elemento mas alto de la pagina: si el contenido es corto
   * (una pagina de error, un aviso), el fondo tiene que seguir llenando. */
  background-color: var(--c-negro-humo);
}

/* --------------------------------------------------------- portada (casa) */

body.pagina--casa {
  background-color: var(--c-negro-humo);
  background-image:
    /* Velo: garantiza contraste sin importar la foto. */
    linear-gradient(rgb(26 26 26 / 0.72), rgb(26 26 26 / 0.88)),
    url("/assets/fondo_home-211498aa.jpg");
}

/* --------------------------------------------------------------- galeria */

body.pagina--galeria {
  background-color: var(--c-negro-humo);
  background-image:
    linear-gradient(rgb(26 26 26 / 0.78), rgb(26 26 26 / 0.92)),
    url("/assets/fondo_galeria-11f97c17.jpg");
}

/* ------------------------------------------------------- resto de paginas */

body.pagina--general {
  background-color: var(--c-negro-humo);
  background-image:
    linear-gradient(rgb(26 26 26 / 0.80), rgb(26 26 26 / 0.93)),
    url("/assets/fondo_general-fd24b833.jpg");
}

/* ------------------------------------------------------------------ movil
 *
 * 768px no es "el movil": es el el punto en que la version de escritorio empieza
 * a fallar. En un telefono real (360-430 px) la foto de escritorio ya se ve como
 * un recorte arbitrario, y ademas pesa cuatro veces mas.
 *
 * NOTA sobre la portada: no hay foto movil de inicio porque no se entrego una.
 * Se conserva `fondo_home.jpg` y la deja `cover`, que en vertical recorta los
 * laterales y conserva el centro, que es donde esta el sujeto. Cuando llegue el
 * archivo, es una linea: cambiar la URL de abajo.
 */

@media (max-width: 768px) {
  body.pagina--casa {
    background-image:
      linear-gradient(rgb(26 26 26 / 0.74), rgb(26 26 26 / 0.90)),
      url("/assets/fondo_home-211498aa.jpg");
    /* `scroll` en vez de `fixed`: ver nota de arriba. */
    background-attachment: scroll;
    background-position: center top;
  }

  body.pagina--galeria {
    background-image:
      linear-gradient(rgb(26 26 26 / 0.78), rgb(26 26 26 / 0.93)),
      url("/assets/fondo_galeria_mobil-ee44647c.jpg");
    background-attachment: scroll;
  }

  body.pagina--general {
    background-image:
      linear-gradient(rgb(26 26 26 / 0.80), rgb(26 26 26 / 0.94)),
      url("/assets/fondo_general_mobil-4f4cd33f.jpg");
    background-attachment: scroll;
  }
}

/* ------------------------------------------------------ telefono en landscape
 *
 * Un iPhone girado mide 932 px de ancho, asi que la regla de movil de arriba
 * (768px) NO le aplica y este telefono se queda con la foto de escritorio. Y es
 * lo correcto: a 932 px de ancho la foto grande se ve bien recortada con
 * `cover`, y cambiar a la version vertical de 900x1600 solo la estiraria.
 *
 * Lo que si hay que arreglar aqui es el rendimiento: `fixed` en un telefono hace
 * que el navegador repinte la foto en cada scroll. Por eso esta regla baja a
 * `scroll` y no toca la imagen.
 *
 * El corte combina ancho Y orientacion a proposito: `(orientation: landscape)`
 * alcanza para desktop, asi que sin el `max-width` una tablet en horizontal se
 * veria afectada.
 */
@media (max-width: 932px) and (orientation: landscape) {
  body.pagina--casa,
  body.pagina--galeria,
  body.pagina--general {
    background-attachment: scroll;
    /* El header fijo se come 60-68px de los ~430px de alto: sin compensate, el
     * contenido util se queda en una franja y la foto no se ve. */
    background-position: center 30%;
  }
}

/* ---------------------------------------------------------------- reducido
 *
 * En pantallas muy bajas (iPhone SE, 320x568) la foto tiene que ceder todavia
 * mas terreno: el texto es lo que importa y la foto es decoracion.
 */
@media (max-width: 380px) {
  body.pagina--casa,
  body.pagina--galeria,
  body.pagina--general {
    background-attachment: scroll;
  }

  body.pagina--casa    { background-image: linear-gradient(rgb(26 26 26 / 0.80), rgb(26 26 26 / 0.94)), url("/assets/fondo_home-211498aa.jpg"); }
  body.pagina--galeria { background-image: linear-gradient(rgb(26 26 26 / 0.82), rgb(26 26 26 / 0.95)), url("/assets/fondo_galeria_mobil-ee44647c.jpg"); }
  body.pagina--general  { background-image: linear-gradient(rgb(26 26 26 / 0.84), rgb(26 26 26 / 0.95)), url("/assets/fondo_general_mobil-4f4cd33f.jpg"); }
}