/* ===========================================================
   Blog index (posts page = /blogs/) — search + category toolbar.
   Loaded ONLY on the blog posts index (is_home), so it cannot
   affect any other page. Cards/grid/pagination reuse the global
   design system (.arch-grid / .arch-card / .pagination in main.css).
   =========================================================== */

/* ---- Toolbar: search (left) + category dropdown (right) ---- */
.blog-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; flex-wrap:wrap; margin-bottom:22px;
}
.blog-search{ position:relative; flex:1 1 340px; max-width:460px; }
.blog-search svg{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--blue); pointer-events:none;
}
.blog-search input{
  width:100%; padding:15px 20px 15px 48px;
  border:1px solid var(--cyan-200); border-radius:999px; background:#fff;
  font-family:var(--sans); font-size:.95rem; color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.blog-search input::placeholder{ color:#9fb0c4; }
.blog-search input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(4,100,203,.1); }

.blog-filter{ position:relative; flex:0 0 auto; }
.blog-filter select{
  appearance:none; -webkit-appearance:none;
  padding:14px 48px 14px 22px;
  border:1px solid var(--cyan-200); border-radius:999px; background:#fff;
  font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--ink);
  cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease;
}
.blog-filter select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(4,100,203,.1); }
.blog-filter::after{
  content:""; position:absolute; right:20px; top:46%;
  width:8px; height:8px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:translateY(-50%) rotate(45deg); pointer-events:none;
}

/* ---- Result note ---- */
.blog-resultnote{ font-size:.92rem; color:var(--body); margin:0 0 26px; }
.blog-resultnote a{ color:var(--blue); font-weight:600; margin-left:12px; white-space:nowrap; }
.blog-resultnote a:hover{ color:var(--blue-dark); }

/* ---- Grid spacing + responsive (reuses .arch-grid / .arch-card) ---- */
.blog-grid{ margin-top:6px; }
.arch-card .more{ color:var(--blue); }
.arch-card:hover .more{ color:var(--blue-dark); }

/* ---- Empty state ---- */
.blog-empty{ text-align:center; padding:60px 0; }
.blog-empty h3{ margin:0 0 8px; font-size:1.4rem; }
.blog-empty p{ color:var(--body); margin:0 0 22px; }

@media(max-width:620px){
  .blog-toolbar{ flex-direction:column; align-items:stretch; }
  .blog-search{ flex:0 0 auto; max-width:none; }
  .blog-filter{ width:100%; }
  .blog-filter select{ width:100%; }
  .blog-grid{ grid-template-columns:1fr; }
}