/*
 * Blog Cards - estilos persistentes del bloque de posts
 *
 * CLASES QUE DEBES ANIADIR EN EL EDITOR DE SITIO
 * (bloque -> "Configuracion avanzada" -> "Clases CSS adicionales"):
 *
 *   - Bloque Group del card (contenedor raiz)  ->  blog-card
 *   - Bloque Group interior (textos + boton)   ->  blog-card__body
 *   - Bloque Post Terms (categoria)            ->  blog-card__cat
 *   - Bloque Post Excerpt (extracto)           ->  blog-card__excerpt
 *   - Bloque Read More (boton)                 ->  blog-card__btn
 *   - Lista del Post Template                  ->  blog-cards-grid
 *   - Bloque Query Loop                        ->  blog-cards-query
 */

/* Card contenedor */
.blog-card {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  min-height: 384px !important;
  background: #9500ff !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
}

/* Cards 1a y 4a de cada grupo de 4 (full-width, mas altas) */
ul.blog-cards-grid > li:nth-child(4n+1) .blog-card,
ul.blog-cards-grid > li:nth-child(4n+4) .blog-card {
  min-height: 401px !important;
}

/* Imagen destacada absoluta de fondo */
.blog-card .wp-block-post-featured-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 0 !important;
}

.blog-card .wp-block-post-featured-image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.blog-card .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: grayscale(100%) !important;
}

/* Overlay morado semitransparente */
.blog-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(149, 0, 255, 0.7) !important;
  border-radius: 20px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Cuerpo del card (texto + boton) */
.blog-card .blog-card__body {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 40px 87px 69px !important;
  z-index: 2 !important;
}


/* Titulo del post: oculto */
.blog-card .wp-block-post-title,
.blog-card .blog-card__title {
  display: none !important;
}

/* Categoria */
.blog-card .blog-card__cat {
  font-weight: 450 !important;
  font-size: 32px !important;
  line-height: 40px !important;
  letter-spacing: 0.064px !important;
  color: #dbdace !important;
  margin: 0 0 20px !important;
}

.blog-card .blog-card__cat a {
  color: #dbdace !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Extracto */
.blog-card .blog-card__excerpt,
.blog-card .wp-block-post-excerpt {
  margin: 0 0 40px !important;
}

@media (min-width: 768px) {
  .blog-card .blog-card__excerpt,
  .blog-card .wp-block-post-excerpt {
    width: 50% !important;
  }
}

.blog-card .blog-card__excerpt p,
.blog-card .wp-block-post-excerpt__excerpt {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 17px !important;
  letter-spacing: -0.056px !important;
  color: #dbdace !important;
  margin: 0 !important;
}

/* Boton "VER MAS" */
.blog-card .blog-card__btn {
  display: inline-flex !important;
  padding: 9px 25px !important;
  border-radius: 20px !important;
  background: #000000 !important;
  color: #dbdace !important;
  font-size: 14px !important;
  text-decoration: none !important;
  margin-top: 12px !important;
  width: fit-content !important;
}

.blog-card .blog-card__btn:hover {
  background: #dbdace !important;
  color: #9500ff !important;
}

/* ============================================
   MÓVIL — solo hasta 600px
   ============================================ */
@media (max-width: 767px) {

  /* Una sola columna */
  .blog-cards-grid.is-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Altura reducida en móvil */
  .blog-card {
    min-height: 254px !important;
  }

  /* Anular las alturas especiales de nth-child en móvil */
  ul.blog-cards-grid > li:nth-child(4n+1) .blog-card,
  ul.blog-cards-grid > li:nth-child(4n+4) .blog-card {
    min-height: 254px !important;
  }

  /* Body: cubre todo el card, columna flex */
  .blog-card .blog-card__body {
    inset: 0 !important;
    padding: 72px 24px 38px 82px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }

  /* Categoría: 24px en móvil (era 32px) */
  .blog-card .blog-card__cat {
    font-size: 24px !important;
    line-height: 30px !important;
    margin: 0 !important;
  }

  /* Mostrar título en móvil (oculto en desktop) */
  .blog-card .wp-block-post-title,
  .blog-card .blog-card__title {
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 17px !important;
    letter-spacing: -0.056px !important;
    color: #dbdace !important;
    margin: 20px 0 0 !important;
  }

  /* Ocultar extracto en móvil (el título ya cumple esa función) */
  .blog-card .blog-card__excerpt {
    display: none !important;
  }

  /* Botón: separación fija del texto */
  .blog-card .blog-card__btn {
    margin-top: 40px !important;
  }
}