/* posts.css – ergänzt index.css um das zweispaltige Layout & Karten für die Posts-Seite */

/* === Layout (2-spaltig) === */
.layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:20px;
}

/* Sidebar */
.sidebar{ position:relative }
.filter-card{
  position:sticky; top:90px;
  display:grid; gap:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.sidebar-title{ margin:0 0 2px 0 }
.field{ display:grid; gap:6px }
.field > span, .field > legend{ font-weight:700; font-size:14px }
.field input[type="search"]{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  outline:none;
}
.field input[type="search"]:focus{
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
}
.opt{ display:flex; align-items:center; gap:8px; font-size:14px }

.actions{ display:flex; gap:10px }
.btn.btn-ghost{ background:transparent } /* nutzt Button-Design aus index.css */
.hint{ color:var(--muted); font-size:12px; margin:2px 0 0 }

/* === Content & Grid === */
.content{ display:grid; gap:16px }
.content-head{ display:flex; align-items:center; justify-content:space-between }
.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip{
  background:#eef2ff;
  border:1px solid #d4d8ff;
  color:#3949ab;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}

/* === Karten === */
.tile{
  display:grid; gap:10px; padding:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.tile:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(3,7,18,.18) }
.post-image-wrap{
  width:100%; aspect-ratio: 16/9; overflow:hidden; border-radius:10px; background:#f2f2f2;
}
.post-image{ width:100%; height:100%; object-fit:cover }
.tile h3{ margin:.2rem 0 }
.tile p{ margin:0; color:var(--muted) }

/* Status */
.status{ text-align:center; color:#475467; font-size:14px; padding:8px 0 }

/* === Responsive === */
@media (max-width: 860px){
  .layout{ grid-template-columns: 1fr; }
  .filter-card{ position:static; top:auto }
}