/*
    Estilos para el diseño de Miradas 2025 sobre el tema Twenty Twenty-Five de Wordpress.

    Estos estilos se aplicarán a un widget de "Últimas entradas"
    si le hemos añadido la clase miradas2025-latestposts en:
    Ajustes > Avanzado > Clase(s) CSS adicional(es).

    Cambios respecto a los ajustes por defecto del widget:
    - Mostrar el nombre del autor (on)
    - Mostrar la imagen destacada (on) > Resolución (Grande)
    - Número de elementos (7)
*/

ul.wp-block-latest-posts__list.miradas2025-latestposts {
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 20px;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;

  font-family: 'Roboto', sans-serif;
  font-size: 30px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
}

@media (max-width: 500px) {
  ul.wp-block-latest-posts__list.miradas2025-latestposts {
    gap: 1em;
  }
}

ul.wp-block-latest-posts__list.miradas2025-latestposts li {
  position: relative;
  height: 300px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

@media (max-width: 500px) {
  ul.wp-block-latest-posts__list.miradas2025-latestposts li {
    gap: 0.1em;
  }
}

ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(1) {
  grid-column: span 4;
}

ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(2),
ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(3) {
  grid-column: span 2;
}

@media (max-width: 1500px) {
  ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(2),
  ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(3) {
    grid-column: span 4;
  }
}

ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(n + 4) {
  grid-column: span 1;
}

@media (max-width: 1500px) {
  ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(n + 4) {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(n + 4) {
    grid-column: span 4;
  }
}

/* FEATURED IMAGE */

ul.wp-block-latest-posts__list.miradas2025-latestposts
  li
  div.wp-block-latest-posts__featured-image {
  overflow: hidden;
  height: 300px;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
}

ul.wp-block-latest-posts__list.miradas2025-latestposts
  li
  div.wp-block-latest-posts__featured-image
  img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 10;
}

/* POST LINK */

ul.wp-block-latest-posts__list.miradas2025-latestposts li a {
  z-index: 20;
  display: flex;
  align-items: center;
  width: 100%;

  background-color: white;
  padding-left: 40px;
  margin-top: 200px;

  text-decoration: none;
  letter-spacing: -1px;
  font-size: 1em;
  font-weight: 800;
  color: #000000;
}

ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(2) a,
ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(3) a {
  font-size: 0.8em;
}

ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(n + 4) a {
  font-size: 0.6em;
}

@media (max-width: 500px) {
  ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(1) a,
  ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(2) a,
  ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(3) a,
  ul.wp-block-latest-posts__list.miradas2025-latestposts li:nth-child(n + 4) a {
    padding-top: 10px;
    font-size: 0.7em;
  }
}

/* AUTHOR */

ul.wp-block-latest-posts__list.miradas2025-latestposts
  li
  div.wp-block-latest-posts__post-author {
  z-index: 20;
  display: flex;
  align-items: center;

  background-color: white;
  padding-left: 40px;
  padding-right: 40px;
  height: 1.3em;

  font-size: 0.6em;
  font-weight: 300;
  color: #464444;
}

/* DATE */

ul.wp-block-latest-posts__list.miradas2025-latestposts
  li
  time.wp-block-latest-posts__post-date {
  z-index: 20;
  display: flex;
  align-items: center;

  background-color: white;
  padding-left: 40px;
  padding-right: 40px;
  height: 1.3em;

  font-size: 0.6em;
  font-weight: 300;
  color: #464444;
}