/* ===========================
   Shared container width (force 4 across)
   =========================== */
.sb-search-shell,
.sb-adv,
.sb-dossier-grid-wrapper {
  --card-min: 280px; /* fixed card/column width */
  --gap: 1.25rem;    /* spacing between cards/controls */
  --pad: .75rem;     /* horizontal padding applied to these wrappers */

  /* Include padding in the max-width so 4 columns always fit */
  max-width: calc(4 * var(--card-min) + 3 * var(--gap) + 2 * var(--pad));
  margin-left: auto;
  margin-right: auto;
}

/* ===========================
   Top Bar: Search + Controls
   =========================== */
.sb-search-shell {
  margin-bottom: 1rem;
  padding: 0 var(--pad);
}

.sb-inline-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: .75rem;
  align-items: center;
}

.sb-search-left { display: flex; justify-content: center; }
.sb-search-right { display: inline-flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* Search field */
.sb-search-input {
  width: 100%;
  max-width: 640px;
  padding: .65rem 1rem;
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid #d0d0d5;
  border-radius: 999px; /* pill */
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
}

/* Buttons / selects look unified */
.sb-inline-label { font-size: .9rem; color: #666; }

.sb-btn,
.sb-sort {
  padding: .5rem .85rem;
  font-size: .95rem;
  line-height: 1.2;
  border: 1px solid #d0d0d5;
  border-radius: 999px;
  background: #fff;
  color: #222;
  cursor: pointer;
}

/* Hover: subtle bg only, keep text dark (same as Sort) */
.sb-btn:hover,
.sb-sort:hover {
  background: #f5f5f7;
  color: #222;
}

/* Select reset so it looks like a button */
.sb-sort {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right .65rem center;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.sb-reset { border-color: #c6c6cc; background: #f5f5f7; }
.sb-reset:hover { background: #ececf0; color: #222; }

#sb-adv-toggle.is-active,
#dp-adv-toggle.is-active {
  border-color: #b8b8bf;
  background: #f5f5f7;
  color: #222;
}

@media (max-width: 820px) {
  .sb-inline-row { grid-template-columns: 1fr; gap: .5rem; }
  .sb-search-left { justify-content: stretch; }
  .sb-search-right { justify-content: flex-end; }
}

/* ===========================
   Advanced Panels (default layout)
   =========================== */
.sb-adv {
  margin-top: .6rem;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  padding: 0 var(--pad); /* horizontal comfort padding */
}

.sb-adv-summary { display: none; }

.sb-adv-panels {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .75rem;
  padding: .75rem 0; /* top/bottom only; sides via parent padding */
}

@media (max-width: 1100px) { .sb-adv-panels { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 700px)  { .sb-adv-panels { grid-template-columns: repeat(1, 1fr); } }

.sb-panel {
  grid-column: span 4;
  background: #fafafa;
  border: 1px solid #ececf0;
  border-radius: 10px;
  padding: .75rem;
}

@media (max-width: 1100px) { .sb-panel { grid-column: span 6; } }
@media (max-width: 700px)  { .sb-panel { grid-column: span 1; } }

.sb-panel header h4 {
  margin: 0 0 .5rem 0;
  font-size: 1rem;
}

/* Checklists */
.sb-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  max-height: 260px;
  overflow: auto;
  padding-right: .25rem;
}

/* Categorieën one-per-line */
#sb-cats-list .sb-check,
#dp-cats-list .sb-check { display: block; }
#sb-cats-list .sb-check > *,
#dp-cats-list .sb-check > * { vertical-align: middle; }

/* Auteurs one-per-line */
#sb-auteurs-list .sb-check,
#dp-auteurs-list .sb-check { display: block; }
#sb-auteurs-list .sb-check > *,
#dp-auteurs-list .sb-check > * { vertical-align: middle; }

/* Generic check row styling */
.sb-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem;
  border-radius: 6px;
  transition: background .15s ease;
}
.sb-check:hover { background: #f0f0f4; }
.sb-check input[type="checkbox"] { transform: translateY(1px); }
.sb-check--child span::before { content: '— '; opacity: .6; }

/* ===========================
   Results Grid & Cards
   (flex so last row centers)
   =========================== */
.sb-dossier-grid-wrapper {
  position: relative;
  width: 100%;
  padding: 0 var(--pad); /* align with search/adv */
}

/* Use flex to center leftover items while keeping the 4-col cap via wrapper width */
.sb-dossier-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;     /* center 1–3 items on the last row */
  gap: var(--gap);
}

/* Fix the card width to the column width */
.sb-dossier-block {
  flex: 0 0 var(--card-min);
  max-width: var(--card-min);
  width: var(--card-min);
  margin: 0;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}

.sb-dossier-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.sb-dossier-block a {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* Thumbnail */
.sb-dossier-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: .5rem auto;
}

.sb-dossier-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title / Desc / Count */
.sb-dossier-title {
  margin: .75rem 0 .25rem;
  padding: 0 .5rem;
  font-size: 1.1rem;
  line-height: 1.25;
  flex-shrink: 0;
}

.sb-dossier-title mark {
  background-color: #ffeb3b;
  padding: 0;
}

.sb-dossier-desc {
  margin: 0 0 .5rem;
  padding: 0 .75rem;
  font-size: .95rem;
  color: #555;
  flex-grow: 1;
}

.sb-dossier-count {
  margin: 0 0 1rem;
  padding: 0 .5rem;
  font-size: .9rem;
  color: #888;
  flex-shrink: 0;
}

/* Post variant (for post cards rendered in dossier pages) */
.sb-dossier-block.sb-is-post .sb-dossier-title { font-size: .95rem; }
.sb-dossier-block.sb-is-post .sb-dossier-desc  { font-size: .88rem; }

/* ===========================
   Browse View
   =========================== */
.sb-browse { margin: 1rem 0; }

.sb-browse-details {
  border:1px solid #e5e5e9;
  border-radius:10px;
  padding:.4rem .8rem;
  margin-bottom:.6rem;
  background:#fff;
}

.sb-browse-summary {
  cursor:pointer;
  font-weight:700;
  list-style:none;
}

.sb-browse-summary::-webkit-details-marker { display:none; }

.sb-sub { margin:.6rem 0 .2rem .25rem; }

.sb-dossier-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:.5rem;
}

.sb-dossier-pill {
  border:1px solid #e3e3ea;
  border-radius:8px;
  padding:.5rem .6rem;
  background:#fafafa;
}

.sb-desc { font-size:.9em; color:#555; margin:.25rem 0 0; }
.sb-count { color:#888; font-size:.85em; margin-left:.4rem; }
.sb-subtitle { font-weight:600; margin:.2rem 0 .6rem; }

/* ===========================
   Dossier Posts – extras
   =========================== */

/* Small meta line under the search bar on dossier posts pages */
.sb-result-meta {
  margin: .5rem var(--pad);
  color: #555;
  font-size: .9rem;
  display: none; /* JS will show/hide */
}

/* Compact advanced layout on [dossier_posts] so blocks fill width with no right whitespace */
.sb-adv--posts .sb-adv-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .75rem;
  padding: .75rem 0;
}

/* In this compact layout, let panels auto-size (ignore the global 12-col spans) */
.sb-adv--posts .sb-panel {
  grid-column: auto;
}