/** ==========================================================================
 * Componente «Rejilla» — celdas con marca, en tres variantes
 *
 *   <div class="Rejilla">                        circulo delante del titulo
 *   <ol  class="Rejilla Rejilla--numeros">       el orden: 1., 2., 3.
 *   <div class="Rejilla Rejilla--iconos">        un icono de Tabler
 *     <div class="Rejilla-celda">                (o <li> en la numerada)
 *       <h3 class="Rejilla-celdaTitulo">
 *         <span class="Rejilla-celdaMarca">      solo en iconos y numeros
 *       <p  class="Rejilla-celdaMeta">           una linea pequeña, opcional
 *       <p>                                      el texto
 *
 * Es la rejilla de los datos basicos y las preguntas frecuentes de la ficha de
 * curso, sacada aqui para que la usen tambien las landings y la home: tres
 * columnas sin borde y, delante de cada titulo, una marca que se centra en su
 * primera linea. La celda se sangra lo que ocupa esa marca mas medio espacio
 * titulo-contenido, de modo que el texto cae alineado con el titulo.
 *
 * Lo que cambia entre variantes es solo el ANCHO de la marca (--Celda-marca) y
 * que se pinte con un ::before, con un icono o con un numero. El sangrado sale
 * siempre de esa misma variable, asi que las tres cuadran sin ajustes a mano.
 *
 * La carga functions.php con las hojas de la plantilla que la usa.
 * ========================================================================== */

.Rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--Global-Espacio-TituloContenido) var(--Global-Espacio-Grupo);
  margin: 0;
  padding: 0;
  list-style: none;
}

.Rejilla-celda {
  --Celda-marca: calc(var(--Font-Size-29) / 2);
  --Celda-hueco: calc(var(--Global-Espacio-TituloContenido) / 2);

  display: flex;
  flex-direction: column;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  padding-left: calc(var(--Celda-marca) + var(--Celda-hueco));
  list-style: none;
}

.Rejilla-celdaTitulo {
  position: relative;
  margin: 0;
}

/* El circulo, la marca por defecto. */
.Rejilla-celdaTitulo::before {
  content: '';
  position: absolute;
  left: calc(-1 * (var(--Celda-marca) + var(--Celda-hueco)));
  top: 0.3em; /* por si el navegador no entiende lh */
  top: calc((1lh - var(--Celda-marca)) / 2);
  width: var(--Celda-marca);
  height: var(--Celda-marca);
  border: 1px solid var(--Global-Color-Black);
  border-radius: 50%;
}

/* Una marca escrita (icono o numero) ocupa el sitio del circulo. */
.Rejilla--iconos .Rejilla-celdaTitulo::before,
.Rejilla--numeros .Rejilla-celdaTitulo::before {
  content: none;
}

.Rejilla-celdaMarca {
  position: absolute;
  left: calc(-1 * (var(--Celda-marca) + var(--Celda-hueco)));
  top: 0.3em;
  top: calc((1lh - var(--Celda-marca)) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--Celda-marca);
  height: var(--Celda-marca);
}

/*
 * Variante con icono: la marca mide 40, como la caja de la barra resumen de una
 * ficha, pero aqui sin borde. El icono va algo mayor que dentro de esa caja
 * para pesar lo mismo sin ella.
 */
.Rejilla--iconos .Rejilla-celda {
  --Celda-marca: 40px;
}

.Rejilla-celdaMarca svg {
  display: block;
  width: 28px;
  height: 28px;
  fill: none;
}

.Rejilla-celdaMarca svg * {
  fill: none;
}

/*
 * Variante numerada: el numero es texto y pide algo mas de sitio que el
 * circulo; alineado a la derecha para que las unidades caigan en la misma
 * vertical con dos cifras.
 *
 * El ancho va en px derivados del token y NO en ch: la variable se declara en
 * la celda —Size-19— y se usa en el numero, que vive dentro del titulo en
 * Size-29, y una medida en ch se resolvia distinta en cada sitio.
 */
.Rejilla--numeros .Rejilla-celda {
  --Celda-marca: calc(var(--Font-Size-29) * 0.9);
}

.Rejilla--numeros .Rejilla-celdaMarca {
  top: 0;
  display: block;
  height: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Una linea pequeña entre el titulo y el texto: la hora de una actividad, el area de un proyecto… */
.Rejilla-celdaMeta {
  margin: 0;
  color: var(--Global-Color-Grey-Secondary);
  text-transform: uppercase;
}

/* Dos columnas en tableta y una en movil, como el resto de rejillas del sistema. */
@media (max-width: 1199.98px) {
  .Rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .Rejilla {
    grid-template-columns: minmax(0, 1fr);
  }
}