/* =========================================================
   STAMPIA — BLOG
   Estilos para archive-blog.php (listado) y single-blog.php
   (artículo individual). Usa los tokens actualizados del cliente:
   --background:#fff6f6 / --primary:#e29caf / --accent:#d4af37
   Se enqueue condicionalmente solo en páginas de blog.
   ========================================================= */

/* ---- hero del blog (archive) ---- */
.blog-hero{
  padding:100px 0 64px; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, transparent) 0%, transparent 100%);
}
.blog-hero .blog-tag{
  display: inline-block;
  background: #fff0f2;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.blog-hero h1{
  font-family: var(--font-serif, serif);
  color: #0D1B2A;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.2;
  margin: 0 0 16px 0;
}
.blog-hero p{
  margin:16px auto 0; max-width:48ch; font-size:1.05rem;
  line-height:1.6; color:var(--muted-foreground);
}

/* ---- filtros de categoría ---- */
.blog-filters{
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:36px;
}
.blog-filters a{
  padding:8px 18px; border-radius:999px; font-size:0.85rem; font-weight:500;
  border:1px solid var(--border); background:var(--card); color:var(--muted-foreground);
  transition:all .2s ease;
}
.blog-filters a:hover,
.blog-filters a.active{
  background:var(--primary); color:var(--primary-foreground); border-color:var(--primary);
}

/* ---- grid de cards del archive ---- */
.blog-section{padding:64px 0 80px;}
.blog-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}

/* card destacada (primera entrada) */
.blog-card-featured{
  grid-column:1 / -1;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--border); border-radius:24px; overflow:hidden;
  background:var(--card); transition:box-shadow .25s ease;
}
.blog-card-featured:hover{
  box-shadow:0 16px 40px -16px color-mix(in srgb, var(--primary) 25%, transparent);
}
.blog-card-featured .bc-photo{
  position:relative; aspect-ratio:unset; min-height:320px; overflow:hidden;
}
.blog-card-featured .bc-photo img{
  width:100%; height:100%; object-fit:cover; transition:transform .5s ease;
}
.blog-card-featured:hover .bc-photo img{transform:scale(1.04);}
.blog-card-featured .bc-body{
  padding:40px 36px; display:flex; flex-direction:column; justify-content:center;
}

/* cards normales */
.blog-card{
  border:1px solid var(--border); border-radius:24px; overflow:hidden;
  background:var(--card); display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px -16px color-mix(in srgb, var(--primary) 20%, transparent);
}
.bc-photo{position:relative; aspect-ratio:16/10; overflow:hidden;}
.bc-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.blog-card:hover .bc-photo img{transform:scale(1.06);}

/* badge de categoría sobre la foto */
.bc-cat{
  position:absolute; top:14px; left:14px; z-index:1;
  background:color-mix(in srgb, var(--background) 90%, transparent);
  backdrop-filter:blur(4px); padding:4px 12px; border-radius:999px;
  font-size:0.72rem; font-weight:600; color:var(--primary);
}

/* cuerpo de la card */
.bc-body{padding:22px; flex:1; display:flex; flex-direction:column;}
.bc-meta{
  display:flex; align-items:center; gap:10px; font-size:0.78rem;
  color:var(--muted-foreground); margin-bottom:10px;
}
.bc-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--border);}
.bc-body h2, .bc-body h3{
  font-family:var(--font-serif); font-weight:600; line-height:1.25;
  font-size:1.25rem; margin:0;
}
.blog-card-featured .bc-body h2{font-size:clamp(1.5rem, 2.5vw, 2rem);}
.bc-body p{
  margin-top:10px; font-size:0.92rem; line-height:1.6;
  color:var(--muted-foreground); flex:1;
}
.bc-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-size:0.88rem; font-weight:600; color:var(--primary);
}
.bc-link svg{width:14px; height:14px; transition:transform .2s ease;}
.bc-link:hover svg{transform:translate(2px, -2px);}

/* ---- paginación ---- */
.blog-pagination{
  display:flex; justify-content:center; align-items:center; gap:8px;
  padding:0 0 64px;
}
.blog-pagination a,
.blog-pagination span{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:0.9rem; font-weight:500;
  border:1px solid var(--border); color:var(--muted-foreground); transition:all .2s ease;
}
.blog-pagination a:hover{border-color:var(--primary); color:var(--primary);}
.blog-pagination .current{
  background:var(--primary); color:var(--primary-foreground); border-color:var(--primary);
}

/* ============================================================
   SINGLE POST
   ============================================================ */

/* header del artículo */
.single-hero{
  padding:120px 0 48px; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, transparent) 0%, transparent 100%);
}
.single-hero .bc-meta{justify-content:center;}
.single-hero h1{
  font-family:var(--font-serif); font-weight:600; letter-spacing:-0.01em;
  font-size:clamp(2rem, 4.5vw, 3.2rem); line-height:1.1;
  max-width:30ch; margin:16px auto 0;
}
.single-hero .single-excerpt{
  margin:20px auto 0; max-width:52ch; font-size:1.1rem;
  line-height:1.6; color:var(--muted-foreground);
}

/* imagen destacada */
.single-cover{
  margin:0 auto 48px; 
  max-width:60%; 
  /*padding:0 24px;*/
  padding: 0;
}
.single-cover img{
  width:100%; 
  border-radius:24px; 
  /*aspect-ratio:16/9;*/ 
  height: 580px;
  object-fit:cover;
  box-shadow:0 20px 60px -20px color-mix(in srgb, var(--foreground) 15%, transparent);
}

/* contenido del artículo */
.single-content {
  background-color: #fff;
  border-radius: 24px;
  max-width:60%; 
  margin:0 auto; 
  padding:20px 50px 80px;
}

.single-content p{font-size:1.05rem; line-height:1.8; color:var(--foreground); margin-bottom:1.4em;}
.single-content h2{
  font-family:var(--font-serif); font-weight:600; font-size:1.7rem;
  margin:2em 0 0.6em; letter-spacing:-0.01em;
}
.single-content h3{
  font-family:var(--font-serif); font-weight:600; font-size:1.3rem;
  margin:1.6em 0 0.5em;
}
.single-content ul, .single-content ol{
  margin:0 0 1.4em 1.5em; font-size:1.05rem; line-height:1.8;
  color:var(--foreground);
}
.single-content li{margin-bottom:0.4em;}
.single-content a{color:var(--primary); text-decoration:underline;}
.single-content a:hover{color:color-mix(in srgb, var(--primary) 75%, black);}
.single-content blockquote{
  border-left:3px solid var(--accent); margin:2em 0;
  padding:16px 24px; background:color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius:0 12px 12px 0;
}
.single-content blockquote p{margin:0; font-family:var(--font-serif); font-style:italic; font-size:1.1rem;}
.single-content img{width:100%; border-radius:16px; margin:1.5em 0;}
.single-content hr{border:none; border-top:1px solid var(--border); margin:2.5em 0;}

/* barra de autor */
.single-author{
  max-width:720px; margin:0 auto 48px; padding:28px 24px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:20px;
}
.single-author img{
  width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.single-author .author-info{flex:1;}
.single-author .author-name{font-weight:600; font-size:0.95rem;}
.single-author .author-bio{font-size:0.85rem; color:var(--muted-foreground); margin-top:4px;}

/* posts relacionados */
.single-related{background:var(--card); border-top:1px solid var(--border); padding:64px 0;}
.single-related h2{
  font-family:var(--font-serif); font-weight:600; font-size:1.6rem;
  text-align:center; margin-bottom:36px;
}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}

/* CTA al final del single */
.single-cta{padding:64px 0;}
.single-cta .about-cta-box{
  background:var(--foreground); color:var(--background);
  border-radius:32px; padding:56px 40px; text-align:center;
}
.single-cta h2{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.15;
}
.single-cta p{
  margin:14px auto 0; max-width:42ch;
  color:color-mix(in srgb, var(--background) 70%, transparent); line-height:1.6;
}
.single-cta .btn{margin-top:24px;}

/* ---- responsive ---- */
@media (max-width: 1024px){
  .blog-grid{grid-template-columns:1fr 1fr;}
  .blog-card-featured{grid-template-columns:1fr; grid-column:1/-1;}
  .blog-card-featured .bc-photo{min-height:240px;}
  .related-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 768px){
  .blog-grid{grid-template-columns:1fr;}
  .blog-card-featured{grid-column:1/-1;}
  .related-grid{grid-template-columns:1fr;}
  .single-hero{padding:96px 0 40px;}
  .single-cta .about-cta-box{padding:40px 24px;}
}