/* -------------------------------------------------------------------------
   Tablet en vertical

   El tema tenía un único punto de ruptura, en 768px: por encima de ahí todo
   era la versión de escritorio. Una tablet en vertical (810–1024px) caía en
   esa franja y salía peor parada que un móvil:

   · la barra lateral se volvía fija y se llevaba unos 340px, así que a la foto
     del proyecto le quedaba un hueco de 470×1080 —proporción 0,43—. Con
     object-fit: cover, una foto apaisada de 2:1 ahí dentro enseña un 22 % de
     su anchura: una tira vertical recortada del centro.
   · la rejilla del listado mantenía sus 3 columnas dentro de un contenedor de
     454px, dejando tarjetas de 141×84 para 24 proyectos de arquitectura.

   Aquí se recuperan, solo para ese rango, las reglas apiladas que el tema ya
   usaba en móvil. La condición de orientación es a propósito: una tablet
   apaisada tiene ancho de sobra y se queda con el escritorio.

   Va en un archivo aparte, y no ensanchando el @media de 768 de mycss.css,
   porque aquel bloque toca también cabecera, portada y pie: ahí el radio de
   daño sería todo el sitio en vez de la sección de proyectos.
   ------------------------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {

  /* ---------------------------- ficha ---------------------------- */

  main#single_proyectos {
    display: flex;
    flex-flow: column;
  }

  /* Con el selector de etiqueta delante a proposito: la regla de escritorio es
     «section.main-wrap-single { width: calc(100% - 340px) }», y sin el
     «section» esta perdia por especificidad y la foto se quedaba en 470px
     aunque la barra lateral ya estuviera apilada. El listado usa el mismo
     nombre de clase pero sobre un div, asi que van los dos. */
  section.main-wrap-single,
  div.main-wrap-single {
    width: 100%;
  }

  .main-wrap {
    display: block;
  }

  sidebar.sidebar_proyectos {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: visible;
    /* Menos que en movil: aqui el bloque del logo ya se lleva 140px por si
       solo, y entre una cosa y otra la foto empezaba a 557px del borde. */
    padding: 4rem 4vw 0.5rem;
  }

  /* La rejilla de tres filas que mantiene las flechas a altura fija es de la
     versión de escritorio: apilado no hay alto que repartir. */
  .sidebar_proyectos .sidebar-inner {
    display: block;
    height: auto;
  }

  /* ------------------------- listado ------------------------- */

  /* Dos columnas, no tres: con el ancho completo recuperado son tarjetas de
     unos 360px en vez de 141. Y no una sola, que en una tablet desaprovecha
     media pantalla. */
  .c-proyectos_home.grid-3,
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  header.page-header {
    padding-top: 8rem;
  }

  /* ------------------------ galería ------------------------ */

  /* Las miniaturas sí se quedan: aquí hay ancho para ellas y el dedo acierta
     de sobra. En el móvil se ocultan porque serían imposibles de pulsar. */
  .p-galeria_thumbs {
    display: block;
  }

  .p-galeria {
    --galeria-alto: 58svh;
  }

  body.admin-bar .p-galeria {
    --galeria-alto: calc(58svh - 32px);
  }
}