/* ============================================
   RENDEMY BLOG - Dark Premium UX/UI
   ============================================ */

/* ── LISTADO BLOG ── */
.blog .site-main,
.archive .site-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}

/* Header de la pagina blog */
.blog .page-header,
.archive .page-header {
  text-align: center;
  padding: 5rem 2rem 3rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4rem;
}
.blog .page-header .page-title,
.archive .page-header .page-title {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.02em !important;
}

/* Grid de posts */
.blog #primary,
.archive #primary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.blog .entry-header,
.archive .entry-header { display: block !important; }

/* Card de post */
.blog article.post,
.archive article.post {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color .25s, transform .25s !important;
  padding: 0 !important;
}
.blog article.post:hover,
.archive article.post:hover {
  border-color: rgba(0,223,171,.3) !important;
  transform: translateY(-4px) !important;
}

/* Imagen destacada del post */
.blog .post-thumbnail,
.archive .post-thumbnail {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
  background: #1a1a1a !important;
  display: block !important;
}
.blog .post-thumbnail img,
.archive .post-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .4s ease !important;
  display: block !important;
}
.blog article.post:hover .post-thumbnail img,
.archive article.post:hover .post-thumbnail img {
  transform: scale(1.04) !important;
}

/* Placeholder si no hay imagen */
.blog .post-thumbnail-placeholder,
.archive .post-thumbnail-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: rgba(0,223,171,.15);
}

/* Contenido de la card */
.blog .inside-article,
.archive .inside-article {
  padding: 1.6rem 1.8rem 2rem !important;
}
.blog .entry-header .entry-title,
.archive .entry-header .entry-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-bottom: .8rem !important;
  color: #fff !important;
}
.blog .entry-header .entry-title a,
.archive .entry-header .entry-title a {
  color: #fff !important;
  text-decoration: none !important;
}
.blog .entry-header .entry-title a:hover,
.archive .entry-header .entry-title a:hover {
  color: #00dfab !important;
}
.blog .entry-meta,
.archive .entry-meta {
  font-size: .75rem !important;
  color: #555 !important;
  margin-bottom: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
.blog .entry-meta a,
.archive .entry-meta a { color: #555 !important; }
.blog .entry-summary,
.archive .entry-summary {
  font-size: .88rem !important;
  color: #777 !important;
  line-height: 1.65 !important;
  margin-bottom: 1.4rem !important;
}
.blog .entry-summary p,
.archive .entry-summary p {
  color: #777 !important;
  font-size: .88rem !important;
}
.blog .read-more,
.archive .read-more {
  display: inline-block !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: #00dfab !important;
  text-decoration: none !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.blog .read-more:hover,
.archive .read-more:hover { color: #00c49a !important; }

/* Paginacion */
.blog .navigation.pagination,
.archive .navigation.pagination {
  grid-column: 1/-1;
  text-align: center;
  padding: 3rem 0 0;
}
.blog .page-numbers,
.archive .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #888 !important;
  text-decoration: none !important;
  font-size: .88rem !important;
  margin: 0 .2rem !important;
  transition: all .2s !important;
}
.blog .page-numbers:hover,
.archive .page-numbers:hover {
  border-color: #00dfab !important;
  color: #00dfab !important;
}
.blog .page-numbers.current,
.archive .page-numbers.current {
  background: #00dfab !important;
  border-color: #00dfab !important;
  color: #0a0a0a !important;
  font-weight: 700 !important;
}

/* ── ARTICULO INDIVIDUAL ── */
.single .site-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 5rem 2rem 7rem;
}
.single article.post {
  background: transparent !important;
  border: none !important;
}
.single .entry-header {
  text-align: center !important;
  margin-bottom: 3rem !important;
  padding-bottom: 2.5rem !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.single .entry-header .entry-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 1.2rem !important;
}
.single .entry-meta {
  font-size: .78rem !important;
  color: #555 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  justify-content: center !important;
  display: flex !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
}
.single .entry-meta a { color: #555 !important; }

/* Imagen destacada del articulo */
.single .post-thumbnail {
  width: 100% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 3rem !important;
}
.single .post-thumbnail img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Contenido del articulo - CENTRADO Y LEGIBLE */
.single .entry-content {
  text-align: left !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: #c0c0c0 !important;
}
.single .entry-content p {
  color: #b8b8b8 !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  margin-bottom: 1.6rem !important;
}
.single .entry-content h2 {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 3rem 0 1rem !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
}
.single .entry-content h3 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 2.5rem 0 .8rem !important;
  text-align: center !important;
}
.single .entry-content h4 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #00dfab !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin: 2rem 0 .6rem !important;
  text-align: center !important;
}
.single .entry-content a {
  color: #00dfab !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0,223,171,.3) !important;
}
.single .entry-content a:hover { color: #00c49a !important; }
.single .entry-content ul,
.single .entry-content ol {
  padding-left: 1.5rem !important;
  margin-bottom: 1.6rem !important;
  color: #b8b8b8 !important;
}
.single .entry-content li { margin-bottom: .5rem !important; line-height: 1.7 !important; }
.single .entry-content blockquote {
  border-left: 3px solid #00dfab !important;
  padding: 1.2rem 1.5rem !important;
  margin: 2rem 0 !important;
  background: rgba(0,223,171,.06) !important;
  border-radius: 0 8px 8px 0 !important;
  font-style: italic !important;
  color: #aaa !important;
}
.single .entry-content img {
  border-radius: 8px !important;
  margin: 1.5rem auto !important;
  display: block !important;
  max-width: 100% !important;
}
.single .entry-content strong { color: #fff !important; }
.single .entry-content code {
  background: #1a1a1a !important;
  padding: .2em .5em !important;
  border-radius: 4px !important;
  font-size: .9em !important;
  color: #00dfab !important;
}

/* CTA al final del articulo */
.single .entry-footer {
  margin-top: 4rem !important;
  padding-top: 3rem !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  text-align: center !important;
}
.single .entry-footer .cat-links,
.single .entry-footer .tags-links {
  font-size: .78rem !important;
  color: #555 !important;
  display: block !important;
  margin-bottom: .5rem !important;
}
.single .entry-footer a { color: #00dfab !important; }

/* CTA banner post individual */
.rdm-post-cta {
  background: linear-gradient(135deg, rgba(0,223,171,.08), rgba(0,223,171,.03));
  border: 1px solid rgba(0,223,171,.2);
  border-radius: 12px;
  padding: 2.5rem;
  text-align: center;
  margin: 4rem auto 0;
  max-width: 600px;
}
.rdm-post-cta h4 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: .6rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.rdm-post-cta p { font-size: .9rem; color: #777; margin-bottom: 1.5rem; }
.rdm-post-cta a {
  display: inline-block;
  background: #00dfab;
  color: #0a0a0a;
  font-weight: 700;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .85rem 2rem;
  border-radius: 6px;
  text-decoration: none !important;
  transition: all .25s;
}
.rdm-post-cta a:hover {
  background: #00c49a !important;
  color: #0a0a0a !important;
  box-shadow: 0 6px 20px rgba(0,223,171,.3);
}

/* Posts relacionados */
.single .post-navigation {
  max-width: 760px;
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0 2rem;
}
.single .nav-previous,
.single .nav-next {
  background: #111;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 1.4rem;
  transition: border-color .2s;
}
.single .nav-previous:hover,
.single .nav-next:hover { border-color: rgba(0,223,171,.3); }
.single .nav-previous a,
.single .nav-next a {
  color: #ccc !important;
  text-decoration: none !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.single .nav-previous a:hover,
.single .nav-next a:hover { color: #00dfab !important; }
.single .nav-label {
  font-size: .7rem !important;
  color: #555 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  display: block !important;
  margin-bottom: .4rem !important;
}
@media(max-width:640px){
  .blog #primary, .archive #primary { grid-template-columns: 1fr; }
  .single .post-navigation { grid-template-columns: 1fr; }
  .single .site-main { padding: 3rem 1.5rem 5rem; }
}