/* ==========================================================================
   Blog list — toolbar con datepickers, placeholder de fecha y tarjetas
   ========================================================================== */

/* ------------------------------ Hero ------------------------------------ */
.hero--blog{
  background:
    radial-gradient(600px 400px at 90% -10%,
      color-mix(in oklab, var(--primary, #2563eb), #ffffff 90%) 10%,
      transparent 60%),
    linear-gradient(180deg, #f6f9fc, #ffffff);
  border: 1px solid #e6ecf3;
  border-radius: 16px;
  padding: clamp(18px, 4vw, 28px);
  box-shadow: 0 10px 30px rgba(46,74,117,.06);
  margin-top: 10px;
}
.hero--blog h1{ letter-spacing:-0.015em; color:#23324a; }
.hero--blog .hero-kicker, .hero--blog p{ margin:.35rem 0 0; color:#46566f; max-width:76ch; }

/* ------------------------------ Toolbar --------------------------------- */
.blog-toolbar.card{
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  border: 1px solid #e6ecf3;
  box-shadow: 0 10px 24px rgba(46,74,117,.06);
}
.blog-toolbar .filters{ display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.blog-toolbar label{ display:flex; flex-direction:column; gap:4px; font-size:1.2rem; color:#51607A; }

/* Inputs (texto y fecha) */
.blog-toolbar input[type="search"],
.blog-toolbar input[type="date"]{
  height:40px; min-width:200px;
  font-size:.95rem;
  color:#23324a;
  background:#fff;
  border:1px solid #dce5f3;
  border-radius:10px;
  padding: 0 .75rem;
}

/* Placeholder de search */
.blog-toolbar input[type="search"]::placeholder{
  color:#6f7d95; opacity:1;
}

/* -------- Placeholder “simulado” para fecha --------
   - Los inputs date no soportan placeholder estándar de forma consistente.
   - Usamos una clase .has-value gestionada por JS:
     * sin valor → estilo "placeholder"
     * con valor → estilo normal                                   */
.blog-toolbar .date-input:not(.has-value) {
  color:#6f7d95;             /* color tipo placeholder cuando está vacío */
}

/* WebKit: ajusta el contenido editable del date */
.blog-toolbar .date-input::-webkit-datetime-edit{
  padding: 0 .1rem;
}
.blog-toolbar .date-input::-webkit-calendar-picker-indicator{
  opacity:.85;
  cursor:pointer;
}

/* Botones */
.blog-toolbar .btn{
  font-size:.9rem; height:36px; border-radius:8px;
}
.blog-toolbar .btn-secondary{
  background:#f8fbff; border-color:#dce5f3; color:#23324a;
}
.blog-toolbar .btn-secondary:hover{
  background:#eef3ff; border-color:var(--primary); color:var(--primary);
}

/* ========================== TARJETAS (cuadrado + título) ================= */
:root{ --blog-card-size: 450px; }    /* tamaño del cuadrado de imagen */

.blog-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--blog-card-size), var(--blog-card-size)));
  gap:10px; justify-content:start;
}

.card-compact{
  width:var(--blog-card-size);
  padding:8px; border-radius:12px;
  display:flex; flex-direction:column; gap:6px;
}

.card-compact .cover{
  width:100%; height:var(--blog-card-size);
  display:block; border-radius:10px; border:1px solid #e6ecf3;
  background:#fff; box-shadow:0 2px 8px rgba(46,74,117,.05) inset;
  overflow:hidden;
}
.card-compact .cover img{
  width:100%; height:100%; object-fit:contain; display:block; border-radius:10px;
}
.card-compact .cover.cover-fallback{
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(96,165,250,.08));
  border:1px dashed var(--border);
}

/* Título debajo (2 líneas) */
.card-compact .title-link{ text-decoration:none; }
.card-compact .title-link h3{
  font-size:1.2rem;              /* <- tamaño del título */
  line-height:1.15;
  font-weight:700;
  color:#e2e3e4;                 /* <- color del título */
  margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(1.15em * 2);
}

/* Ocultamos meta/resumen en vista cuadrada */
.card-compact .meta, .card-compact p{ display:none; }

/* ------------------------------ Ficha (vista lista) --------------------- */
.ficha-list{ display:grid; gap:12px; }
.post-ficha{
  display:grid; grid-template-columns: 160px 1fr; gap:14px; padding:12px;
  align-items:start;
}
.ficha-media img{ width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }
.ficha-media .cover-fallback{
  width:100%; height:100%; min-height:130px; border-radius:10px;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(96,165,250,.10));
  border:1px dashed var(--border);
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 640px){
  :root{ --blog-card-size: 90px; }
  .blog-toolbar input[type="search"], .blog-toolbar input[type="date"]{ min-width:150px; }
}