/**
 * @file
 * Correcciones del panal hexagonal.
 *
 * El marcado y el grueso del estilo los pone el tema (honeycomb.css). Aqui
 * solo se corrige lo que se rompe al sacar el panal de la vista original y
 * meterlo en una region de Page Manager.
 *
 * Todo va bajo .uazuay-panal para no tocar otras paginas que usen
 * .faculty-page con su propio marcado.
 */

/**
 * Fondo gris claro de toda la seccion.
 *
 * #f9f9f9 no es un color inventado: es el gris claro que el tema ya usa en sus
 * fondos, el mas repetido de main.css y style.css. Asi el panal encaja con el
 * resto del sitio aunque manana cambie la paleta.
 */
.uazuay-panal {
  background-color: #f9f9f9;
  padding: 2.5em 0 3em;
  /* flow-root obliga al envoltorio a contener todo lo que lleva dentro, pase
     lo que pase con margenes o flotados de los descendientes. Sin esto, su
     altura calculada puede quedarse corta y el fondo terminar antes que el
     contenido. */
  display: flow-root;
}

.uazuay-panal__acciones {
  margin-top: 1.5em;
  text-align: center;
}

/**
 * El recorte de la ultima fila.
 *
 * honeycomb.css pone "overflow: hidden" en .hex-container para esconder el
 * desbordamiento lateral de las filas desplazadas (.hex:nth-child(5n+4) lleva
 * margin-left: 108px). El efecto colateral es que tambien recorta por abajo:
 * desde el cuarto hexagono cada uno sube 60px con margin-top negativo, y la
 * ultima fila acaba fuera de la altura que el contenedor calcula.
 *
 * Un padding inferior le devuelve ese espacio. La plantilla original llevaba
 * "padding-bottom: 0px" en linea, que es justo lo contrario; ahi no molestaba
 * porque el boton del final aportaba la altura que faltaba.
 */
.uazuay-panal .hex-container {
  /* El recorte lateral se conserva, que es para lo que el tema puso el
     overflow; el vertical se libera, que es el que se lleva por delante la
     ultima fila y el boton. Las dos declaraciones van juntas: si un eje no es
     visible, el otro no puede quedarse en "visible" salvo con "clip". */
  overflow-x: clip;
  overflow-y: visible;
}

/**
 * El colchon bajo la rejilla.
 *
 * Los hexagonos son inline-blocks entrelazados: desde el cuarto, cada uno sube
 * 60px con margin-top negativo. Eso hace que la ultima fila acabe visualmente
 * mas abajo de donde el flujo calcula que termina .work, asi que cualquier
 * cosa que venga despues se monta encima. Era para tapar ese desborde que el
 * tema puso overflow:hidden, no para recortar.
 *
 * La medida se deriva de la altura del hexagono (14.32em en el tema), no de un
 * pixel elegido a ojo: hay que despejar algo menos de media pieza.
 */
.uazuay-panal .work {
  padding-bottom: 6em;
}

/* Por debajo de 735px el tema encoge el hexagono a 9.7em y reduce el solape a
   40px, asi que el colchon tiene que encoger en la misma proporcion. */
@media (max-width: 734px) {
  .uazuay-panal .work {
    padding-bottom: 4em;
  }
}

/* El titulo y la linea acompanan el ancho de la rejilla en vez de ocupar todo
   el ancho de la region, que es como se veia en la vista original. */
.uazuay-panal .contenedor-titulo,
.uazuay-panal > hr {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.uazuay-panal .contenedor-titulo {
  text-align: center;
}