/* ==========================================================================
   index.css — Blog (listado) — views/blog/index.php
   Se carga ADEMÁS de css/style.css
   ========================================================================== */

.blog-hero .section-title {
  max-width: 620px;
  margin: 0 auto 56px;
  text-align: center;
}
.blog-hero .section-title h1 {
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
}
.blog-hero .section-title p {
  font-size: 1.08rem;
  color: var(--ink-soft, #3B584F);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white, #FFFFFF);
  border: 1px solid var(--line-soft, rgba(18,56,50,0.08));
  border-radius: var(--radius-lg, 22px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-soft, 0 12px 28px -20px rgba(10,35,30,0.25));
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card, 0 20px 40px -24px rgba(10,35,30,0.35));
  border-color: var(--gold, #D6A24C);
}

.post-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.post-card:hover img { transform: scale(1.05); }

.post-card-body {
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.post-card-body .fecha {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal, #0E6B5C);
  margin-bottom: 10px;
}

.post-card-body h3 {
  font-family: var(--font-display, serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--teal-deep, #0A4A40);
  line-height: 1.3;
  margin: 0 0 12px;
  transition: color 0.2s ease;
}
.post-card:hover .post-card-body h3 { color: var(--teal, #0E6B5C); }

.post-card-body p {
  font-size: 0.94rem;
  color: var(--ink-soft, #3B584F);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-body::after {
  content: "Leer artículo →";
  margin-top: 18px;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--teal-deep, #0A4A40);
  transition: gap 0.2s ease, color 0.2s ease;
}
.post-card:hover .post-card-body::after { color: var(--gold-deep, #B8842E); }

/* Estado vacío ------------------------------------------------------------*/

.blog-empty {
  max-width: 480px;
  margin: 0 auto;
  padding: 64px 40px;
  text-align: center;
  background: var(--paper-alt, #EAF0EA);
  border-radius: var(--radius-lg, 22px);
  border: 1px dashed var(--line, rgba(18,56,50,0.14));
}
.blog-empty svg {
  width: 40px;
  height: 40px;
  color: var(--teal, #0E6B5C);
  margin: 0 auto 18px;
  display: block;
}
.blog-empty p {
  font-family: var(--font-display, serif);
  font-size: 1.1rem;
  color: var(--teal-deep, #0A4A40);
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post-card img { height: 200px; }
}