/* =========================================================================
   Osteria Condal - Estilos de movil
   =========================================================================
   Archivo aparte, cargado despues de style.css. Todo va dentro de un unico
   @media (max-width: 767px), que es donde corta el sitio, asi que el
   escritorio no se ve afectado por nada de aqui.
   ========================================================================= */

/* Los rellenos de la rejilla de movil (5 columnas) no se ven en escritorio,
   que usa los de 12. Esta regla va fuera del media query a proposito. */
.oc-relleno-movil {
  display: none;
}

@media (max-width: 767px) {

  /* ...y aqui se invierten: en movil se usan los de 5 y se ocultan los de 12 */
  .oc-relleno-desktop {
    display: none !important;
  }
  .oc-relleno-movil {
    display: block !important;
  }

  /* ---- 1. Margen lateral de 10px en los tres bloques ---- */

  .section-hero {
    --hero-margen: 10px;
  }
  .section-panots {
    --panot-margen: 10px;
    --panot-gap: 10px;
  }
  .section-bcno {
    --bcno-lados: 10px;
  }

  .section-hero {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .section-panots {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .section-bcno {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ---- 2. Hero cuadrado ----
     El espaciado se aplica al .hero-video y no al padding del contenedor,
     porque algo del sitio pisa el padding vertical de .section-hero. */

  .section-hero {
    height: auto !important;
  }
  .section-hero .hero-video {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin-top: 60px !important;
    margin-bottom: 20px !important;
  }
  /* El video es 16:9 dentro de una caja cuadrada: se escala por altura y se
     recorta el ancho sobrante, asi cubre sin deformarse. */
  .section-hero .hero-video iframe {
    width: 177.78% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
  }

  /* ---- 3. BCNO ----
     En escritorio lleva un margin-top negativo para subirlo; aqui se anula
     para que el espacio de arriba no se lo coma. */

  .section-bcno {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
  }

  /* ---- 4. Set de caracteres: 5 columnas ----
     Todos los bloques a 5 columnas, no solo el primero. Los elementos se
     quedan siempre a 1/5 del ancho, tambien en la ultima fila aunque este
     incompleta, de modo que la reticula no se descuadra nunca. */

  .section .content-section .characters-block,
  .section .content-section .characters-block:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
  }
  .section .content-section .characters-block > div {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    box-sizing: border-box !important;
  }
  /* El titulo tambien es un div, asi que hay que devolverle el ancho
     completo: la regla de arriba lo dejaba limitado al 20% */
  .section .content-section .characters-block .title-characters {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Separacion entre familias: el primer bloque ya trae la suya, los
     siguientes iban pegados al bloque anterior */
  .section .content-section .characters-block + .characters-block {
    margin-top: 22px !important;
  }

  /* ---- 5. Las dos fotos a ancho completo ----
     Siguen siendo divs con background para conservar el comportamiento del
     bloque, asi que hay que darles la proporcion: un div no sabe cuanto mide
     su imagen de fondo. La altura sale de ahi y la foto se ve entera.
       delantal    2400x1600  ->  3:2
       mel i mato  2560x1440  ->  16:9 */

  .oc-parallax .bg-parallax {
    height: auto !important;
    background-size: 100% auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #parallax-1 .bg-parallax {
    aspect-ratio: 3 / 2 !important;
  }
  #parallax-2 .bg-parallax {
    aspect-ratio: 16 / 9 !important;
  }

  /* El contenedor de cada foto, sin margen lateral ni separacion inferior,
     para que la imagen llegue de borde a borde */
  .page-proyecto #posts-rejilla .oc-parallax .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }

}