/* =====================================================
   BLOG ARCHIVE BASE - Ricardo Lozano
   Archivo: 00-blog-archive.css
   ===================================================== */

body.blog,
body.category,
body.archive,
body.single-post {
  --rl-blog-bg: #f6f8fb;
  --rl-blog-white: #ffffff;
  --rl-blog-ink: #071126;
  --rl-blog-text: #475569;
  --rl-blog-soft: #64748b;
  --rl-blog-border: #dbe4ee;
  --rl-blog-blue: #4f7cff;
  --rl-blog-blue-2: #3f73ff;
  --rl-blog-lilac: #7a6df2;
  --rl-blog-max: 1180px;
  --rl-blog-side: 48px;
  --rl-blog-width: min(calc(100vw - (var(--rl-blog-side) * 2)), var(--rl-blog-max));
  --rl-blog-radius: 30px;
  --rl-blog-pill: 999px;
}

body.blog,
body.category,
body.archive,
body.single-post,
body.blog #page,
body.category #page,
body.archive #page,
body.single-post #page,
body.blog .site-content,
body.category .site-content,
body.archive .site-content,
body.single-post .site-content {
  background:
    radial-gradient(circle at 14% 10%, rgba(79,124,255,.075), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(122,109,242,.050), transparent 34%),
    linear-gradient(180deg, #f6f8fb 0%, #ffffff 42%, #f8fbff 100%) !important;
}

body.blog .site-content,
body.category .site-content,
body.archive .site-content,
body.single-post .site-content {
  display: block !important;
  padding: 0 !important;
}

body.blog #primary,
body.category #primary,
body.archive #primary,
body.single-post #primary {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}

body.blog #main,
body.category #main,
body.archive #main {
  width: var(--rl-blog-width) !important;
  max-width: var(--rl-blog-max) !important;
  margin: 0 auto !important;
  padding: clamp(86px, 7vw, 122px) 0 clamp(110px, 8vw, 150px) !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(26px, 2.5vw, 38px) !important;
}

body.blog #main > .page-header,
body.category #main > .page-header,
body.archive #main > .page-header,
body.blog #main > .paging-navigation,
body.category #main > .paging-navigation,
body.archive #main > .paging-navigation {
  grid-column: 1 / -1 !important;
}

body.blog .page-header,
body.category .page-header,
body.archive .page-header {
  margin: 0 0 clamp(28px, 4vw, 54px) 0 !important;
  padding: 0 !important;
  text-align: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.blog .page-title,
body.category .page-title,
body.archive .page-title {
  margin: 0 !important;
  color: var(--rl-blog-ink) !important;
  font-size: clamp(44px, 5vw, 78px) !important;
  line-height: 1.04 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body.blog article.post,
body.category article.post,
body.archive article.post {
  margin: 0 !important;
}

body.blog article.post .inside-article,
body.category article.post .inside-article,
body.archive article.post .inside-article {
  height: 100% !important;
  padding: 22px 22px 28px !important;

  display: flex !important;
  flex-direction: column !important;

  border-radius: var(--rl-blog-radius) !important;
  border: 1.35px solid transparent !important;

  background:
    radial-gradient(circle at 18% 12%, rgba(79,124,255,.105), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(122,109,242,.055), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,252,255,.94)) padding-box,
    linear-gradient(145deg, rgba(79,124,255,.28), rgba(122,109,242,.12), rgba(255,255,255,.46)) border-box !important;

  box-shadow:
    0 24px 58px rgba(15,23,42,.065),
    0 16px 38px rgba(79,124,255,.085),
    inset 0 1px 0 rgba(255,255,255,.98) !important;

  overflow: hidden !important;
  transition: transform .24s ease, box-shadow .24s ease !important;
}

body.blog .post-image,
body.category .post-image,
body.archive .post-image,
body.blog .featured-image,
body.category .featured-image,
body.archive .featured-image {
  margin: 0 0 24px 0 !important;
}

body.blog .post-image img,
body.category .post-image img,
body.archive .post-image img,
body.blog .featured-image img,
body.category .featured-image img,
body.archive .featured-image img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.07) !important;
}

body.blog article .entry-header,
body.category article .entry-header,
body.archive article .entry-header {
  margin: 0 !important;
}

body.blog article .entry-title,
body.category article .entry-title,
body.archive article .entry-title {
  margin: 0 0 14px 0 !important;
  font-size: clamp(24px, 2vw, 32px) !important;
  line-height: 1.14 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body.blog article .entry-title a,
body.category article .entry-title a,
body.archive article .entry-title a {
  color: var(--rl-blog-ink) !important;
  text-decoration: none !important;
}

body.blog .entry-meta,
body.category .entry-meta,
body.archive .entry-meta {
  margin: 0 0 18px 0 !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 750 !important;
}

body.blog .entry-summary,
body.category .entry-summary,
body.archive .entry-summary {
  margin: 0 !important;
  color: var(--rl-blog-text) !important;
  font-size: 16.5px !important;
  line-height: 1.68 !important;
}

body.blog .entry-summary p,
body.category .entry-summary p,
body.archive .entry-summary p {
  margin: 0 0 22px 0 !important;
}

body.blog .read-more,
body.category .read-more,
body.archive .read-more {
  width: fit-content !important;
  margin-top: auto !important;
  padding: 11px 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: var(--rl-blog-pill) !important;
  border: 1.2px solid rgba(79,124,255,.28) !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,249,255,.88)) !important;

  color: var(--rl-blog-blue) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

body.blog .paging-navigation,
body.category .paging-navigation,
body.archive .paging-navigation {
  margin-top: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.blog .paging-navigation .nav-links,
body.category .paging-navigation .nav-links,
body.archive .paging-navigation .nav-links {
  display: flex !important;
  justify-content: center !important;
  gap: 14px !important;
}

@media (hover: hover) {
  body.blog article.post .inside-article:hover,
  body.category article.post .inside-article:hover,
  body.archive article.post .inside-article:hover {
    transform: translateY(-7px) !important;
    box-shadow:
      0 34px 78px rgba(15,23,42,.085),
      0 22px 52px rgba(79,124,255,.13),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  body.blog article .entry-title a:hover,
  body.category article .entry-title a:hover,
  body.archive article .entry-title a:hover {
    color: var(--rl-blog-blue) !important;
  }
}

@media (max-width: 1024px) {
  body.blog #main,
  body.category #main,
  body.archive #main {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body.blog,
  body.category,
  body.archive,
  body.single-post {
    --rl-blog-side: 24px;
  }

  body.blog #main,
  body.category #main,
  body.archive #main {
    grid-template-columns: 1fr !important;
    padding: 66px 0 86px !important;
  }

  body.blog .page-title,
  body.category .page-title,
  body.archive .page-title {
    font-size: clamp(36px, 10vw, 48px) !important;
  }

  body.blog article.post .inside-article,
  body.category article.post .inside-article,
  body.archive article.post .inside-article {
    padding: 18px 18px 24px !important;
    border-radius: 26px !important;
  }
}

/* Ocultar fecha y autor en listados del blog */
body.blog .entry-meta,
body.category .entry-meta,
body.archive .entry-meta,
body.blog .posted-on,
body.category .posted-on,
body.archive .posted-on,
body.blog .byline,
body.category .byline,
body.archive .byline {
  display: none !important;
}

/* =====================================================
   BLOG - TARJETA ENTERA CLICABLE
   ===================================================== */

body.blog article.post .inside-article,
body.category article.post .inside-article,
body.archive article.post .inside-article {
  position: relative !important;
  cursor: pointer !important;
}

/* El enlace del titulo se expande sobre toda la tarjeta */
body.blog article.post .entry-title a::after,
body.category article.post .entry-title a::after,
body.archive article.post .entry-title a::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  border-radius: var(--rl-blog-radius) !important;
}

/* Mantiene el efecto visual al pasar por cualquier parte */
body.blog article.post .inside-article:hover .entry-title a,
body.category article.post .inside-article:hover .entry-title a,
body.archive article.post .inside-article:hover .entry-title a {
  color: #4f7cff !important;
}

/* Evita que otros elementos tapen la capa clicable */
body.blog article.post .entry-title,
body.category article.post .entry-title,
body.archive article.post .entry-title {
  position: static !important;
}