/*
 * Rejillas del contenido migrado.
 *
 * El constructor de YOOtheme tenía un elemento `grid` —tres o cuatro columnas,
 * a veces con una línea entre ellas— y el HTML de respaldo que dejó la
 * migración lo baja a una `<ul>` con una `<li>` por celda. Aquí se le devuelve
 * la forma, leyendo lo que el importador dejó escrito en el marcador (ver
 * lib/rejillas-legacy.ts).
 *
 * Todo es CSS, sin JavaScript: una rejilla es `display: grid` y nada más. Eso
 * la hace distinta del carrusel en algo que importa —funciona sin scripts, en
 * el primer pintado y dentro del panel— y es la razón de que no haya un
 * componente para esto.
 *
 * Lo carga la web pública (globals.css) y también el panel (gestion.css).
 */

[data-seom-rejilla] {
  /* Los mismos márgenes que tenía la `<ul>` a la que sustituye
     (`.legacy ul` en globals.css), para no mover nada de sitio. */
  display: block;
  margin: 0 0 1.15em;

  --rej-hueco: 30px;
  --rej-linea: 1px solid #e5e5e5;
}

[data-seom-rejilla][data-rejilla-separacion='pequena'] {
  --rej-hueco: 16px;
}

[data-seom-rejilla][data-rejilla-separacion='grande'] {
  --rej-hueco: 50px;
}

[data-seom-rejilla] > ul {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--rej-hueco);
  /* La `<ul>` deja de ser una lista: ni viñetas ni sangría ni el margen que
     `.legacy ul` le pone, que aquí lo lleva el contenedor. */
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-seom-rejilla] > ul > li {
  margin: 0;
  /* Sin esto una celda con una palabra muy larga —o una imagen ancha— estira su
     columna y descuadra la rejilla entera. */
  min-width: 0;
}

/* La primera cosa de una celda no arrastra el margen de arriba: si no, las
   columnas arrancan a distintas alturas según lleven título, imagen o texto. */
[data-seom-rejilla] > ul > li > :first-child {
  margin-top: 0;
}

[data-seom-rejilla] > ul > li > :last-child {
  margin-bottom: 0;
}

/**
 * Celdas centradas entre ellas (`grid_row_align` del constructor).
 *
 * Sin esto, en una fila donde un rótulo ocupa dos líneas y los otros una, los
 * cortos quedan colgando del techo y la fila se lee torcida.
 */
[data-seom-rejilla][data-rejilla-centrado='si'] > ul {
  align-items: center;
}

/**
 * El enlace de cada celda («Read more»).
 *
 * Está en el respaldo SIEMPRE, lo enseñara el original o no, así que el
 * marcador lo etiqueta siempre y aquí se decide. Se esconde en lugar de
 * borrarlo del contenido: el día que alguien quiera recuperarlo, sigue ahí.
 */
[data-seom-rejilla][data-rejilla-enlaces='no'] p[data-seom-rejilla-enlace] {
  display: none;
}


/* ------------------------------------------------------------------ columnas
 *
 * Se escribe una regla por número de columnas en vez de leer el atributo con
 * `attr()`: `attr()` en `grid-template-columns` todavía no lo entiende ningún
 * navegador. Del 1 al 6, que es lo que permitía el constructor; en el contenido
 * real solo aparecen 1, 2, 3 y 4.
 *
 * Los cortes son los de UIkit, que es donde se decidieron estas maquetas:
 * `m` = 960px y `l` = 1200px. Por debajo manda `data-rejilla-columnas`, que
 * casi siempre es 1: en un móvil una rejilla de cuatro columnas no es una
 * rejilla, es un renglón de recortes.
 */

[data-seom-rejilla][data-rejilla-columnas='1'] > ul {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
[data-seom-rejilla][data-rejilla-columnas='2'] > ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-seom-rejilla][data-rejilla-columnas='3'] > ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-seom-rejilla][data-rejilla-columnas='4'] > ul {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
[data-seom-rejilla][data-rejilla-columnas='5'] > ul {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
[data-seom-rejilla][data-rejilla-columnas='6'] > ul {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (min-width: 960px) {
  [data-seom-rejilla][data-rejilla-columnas-media='1'] > ul {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  [data-seom-rejilla][data-rejilla-columnas-media='2'] > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-seom-rejilla][data-rejilla-columnas-media='3'] > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-seom-rejilla][data-rejilla-columnas-media='4'] > ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  [data-seom-rejilla][data-rejilla-columnas-media='5'] > ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  [data-seom-rejilla][data-rejilla-columnas-media='6'] > ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  [data-seom-rejilla][data-rejilla-columnas-grande='1'] > ul {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  [data-seom-rejilla][data-rejilla-columnas-grande='2'] > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-seom-rejilla][data-rejilla-columnas-grande='3'] > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-seom-rejilla][data-rejilla-columnas-grande='4'] > ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  [data-seom-rejilla][data-rejilla-columnas-grande='5'] > ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  [data-seom-rejilla][data-rejilla-columnas-grande='6'] > ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ divisor
 *
 * La línea entre columnas. Va en el borde izquierdo de cada celda menos las de
 * la primera columna, y por eso hay que repetirla en cada corte: cuál es «la
 * primera de la fila» cambia con el número de columnas.
 *
 * Solo líneas VERTICALES. UIkit también dibujaba una horizontal entre filas,
 * pero en el contenido migrado no hay ninguna rejilla con divisor y más de una
 * fila, y las reglas para eso son otras quince que no arreglarían nada.
 */

[data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas='2'] > ul > li {
  border-left: var(--rej-linea);
  padding-left: var(--rej-hueco);
}
[data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas='2'] > ul > li:nth-child(2n + 1) {
  border-left: 0;
  padding-left: 0;
}
[data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas='3'] > ul > li {
  border-left: var(--rej-linea);
  padding-left: var(--rej-hueco);
}
[data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas='3'] > ul > li:nth-child(3n + 1) {
  border-left: 0;
  padding-left: 0;
}
[data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas='4'] > ul > li {
  border-left: var(--rej-linea);
  padding-left: var(--rej-hueco);
}
[data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas='4'] > ul > li:nth-child(4n + 1) {
  border-left: 0;
  padding-left: 0;
}
[data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas='5'] > ul > li {
  border-left: var(--rej-linea);
  padding-left: var(--rej-hueco);
}
[data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas='5'] > ul > li:nth-child(5n + 1) {
  border-left: 0;
  padding-left: 0;
}
[data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas='6'] > ul > li {
  border-left: var(--rej-linea);
  padding-left: var(--rej-hueco);
}
[data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas='6'] > ul > li:nth-child(6n + 1) {
  border-left: 0;
  padding-left: 0;
}

@media (min-width: 960px) {
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-media='2'] > ul > li {
    border-left: var(--rej-linea);
    padding-left: var(--rej-hueco);
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-media='2'] > ul > li:nth-child(2n + 1) {
    border-left: 0;
    padding-left: 0;
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-media='3'] > ul > li {
    border-left: var(--rej-linea);
    padding-left: var(--rej-hueco);
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-media='3'] > ul > li:nth-child(3n + 1) {
    border-left: 0;
    padding-left: 0;
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-media='4'] > ul > li {
    border-left: var(--rej-linea);
    padding-left: var(--rej-hueco);
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-media='4'] > ul > li:nth-child(4n + 1) {
    border-left: 0;
    padding-left: 0;
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-media='5'] > ul > li {
    border-left: var(--rej-linea);
    padding-left: var(--rej-hueco);
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-media='5'] > ul > li:nth-child(5n + 1) {
    border-left: 0;
    padding-left: 0;
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-media='6'] > ul > li {
    border-left: var(--rej-linea);
    padding-left: var(--rej-hueco);
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-media='6'] > ul > li:nth-child(6n + 1) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (min-width: 1200px) {
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-grande='2'] > ul > li {
    border-left: var(--rej-linea);
    padding-left: var(--rej-hueco);
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-grande='2'] > ul > li:nth-child(2n + 1) {
    border-left: 0;
    padding-left: 0;
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-grande='3'] > ul > li {
    border-left: var(--rej-linea);
    padding-left: var(--rej-hueco);
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-grande='3'] > ul > li:nth-child(3n + 1) {
    border-left: 0;
    padding-left: 0;
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-grande='4'] > ul > li {
    border-left: var(--rej-linea);
    padding-left: var(--rej-hueco);
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-grande='4'] > ul > li:nth-child(4n + 1) {
    border-left: 0;
    padding-left: 0;
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-grande='5'] > ul > li {
    border-left: var(--rej-linea);
    padding-left: var(--rej-hueco);
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-grande='5'] > ul > li:nth-child(5n + 1) {
    border-left: 0;
    padding-left: 0;
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-grande='6'] > ul > li {
    border-left: var(--rej-linea);
    padding-left: var(--rej-hueco);
  }
  [data-seom-rejilla][data-rejilla-divisor='si'][data-rejilla-columnas-grande='6'] > ul > li:nth-child(6n + 1) {
    border-left: 0;
    padding-left: 0;
  }
}