/* CBD Gondomar — Blog ("El mundo de CBD") */

/* ============================================================ MIGAS DE PAN */
.blog-breadcrumb{
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 16px 12px 0;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--b-mute);
}
.blog-breadcrumb a{ color: var(--b-mute); text-decoration: none; transition: color .15s var(--ease, ease); }
.blog-breadcrumb a:hover{ color: var(--b-orange); }
.blog-breadcrumb-sep{ opacity: .5; }
.blog-breadcrumb-current{
  color: var(--b-ink); font-weight: 600;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================ HERO LISTADO */
.blog-hero{
  background: var(--b-yellow);
  margin: 16px 12px;
  border-radius: 24px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px);
  text-align: center;
}
.blog-hero .bkicker{ background: var(--b-ink); color: var(--b-cream); }
.blog-hero-title{
  font-family: var(--f-chunk);
  font-size: clamp(36px, 7vw, 96px);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 16px 0 0;
  color: var(--b-orange);
}
.blog-hero-sub{
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--b-ink-soft);
  max-width: 560px;
  margin: 14px auto 0;
}

/* ============================================================ GRID DE ENTRADAS */
.blog-grid-wrap{
  padding: 40px clamp(16px, 3vw, 32px) 80px;
  max-width: 1300px;
  margin: 0 auto;
}
.blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.blog-card{
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.blog-card:hover{ transform: translateY(-4px); }
.blog-card-img{
  width: 100%; aspect-ratio: 16/11;
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,15,14,.07);
  border-radius: var(--b-radius-sm);
  margin-bottom: 14px;
}
.blog-card-img img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-med) var(--ease);
}
.blog-card:hover .blog-card-img img{ transform: scale(1.06); }
.blog-card-date{
  font-family: var(--f-cond);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--b-orange);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.blog-card-title{
  font-family: var(--f-chunk);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.blog-card-excerpt{
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--b-ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.blog-empty{
  text-align: center;
  padding: 60px 20px;
  font-family: var(--f-body);
  color: var(--b-mute);
}

@media (max-width: 900px){
  .blog-grid{ grid-template-columns: 1fr 1fr; gap: 20px 14px; }
}
@media (max-width: 600px){
  .blog-grid{ grid-template-columns: 1fr; }
}

/* ============================================================ ENTRADA INDIVIDUAL */
.blog-post{
  max-width: 760px;
  margin: 0 auto;
  padding: 24px clamp(20px, 4vw, 40px) 80px;
}
.blog-post-date{
  font-family: var(--f-cond);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--b-orange);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.blog-post-title{
  font-family: var(--f-chunk);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 24px;
  color: var(--b-ink);
}
.blog-post-cover{
  width: 100%;
  border-radius: var(--b-radius-sm);
  overflow: hidden;
  margin-bottom: 32px;
  background: #fff;
  border: 1px solid rgba(15,15,14,.07);
}
.blog-post-cover img{ width: 100%; height: auto; display: block; }
.blog-post-body{
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--b-ink-soft);
}
.blog-post-body p{ margin: 0 0 20px; }
.blog-post-body h2{ font-family: var(--f-chunk); font-size: clamp(24px,3.4vw,34px); text-transform: uppercase; color: var(--b-ink); margin: 40px 0 16px; letter-spacing: -.01em; }
.blog-post-body h3{ font-family: var(--f-chunk); font-size: clamp(20px,2.8vw,26px); text-transform: uppercase; color: var(--b-ink); margin: 32px 0 14px; letter-spacing: -.01em; }
.blog-post-body a{ color: var(--b-orange); text-decoration: underline; }
.blog-post-body img{ max-width: 100%; height: auto; border-radius: var(--b-radius-sm); margin: 8px 0 24px; display: block; }
.blog-post-body ul, .blog-post-body ol{ margin: 0 0 20px; padding-left: 24px; }
.blog-post-body li{ margin-bottom: 8px; }
.blog-post-back{ margin-top: 40px; }