/* Community Bases (home page). */
.page-bases { display: grid; gap: 16px; }
.page-bases .intro { margin-bottom: 0; }

.bases-controls { display: grid; gap: .2rem; }
.bases-controls .tabs { margin-bottom: .5rem; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1rem; }
.filter-label, .sort-label {
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.sort-label { margin-left: auto; }
.sort-select { width: auto; min-width: 12rem; }

.bases-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.bases-grid > .empty { grid-column: 1 / -1; }

.base-card {
  display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2);
}
.card-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--field); }
.card-thumb.ph {
  background:
    linear-gradient(135deg, transparent 0 46%, var(--line) 46% 54%, transparent 54%) 0 0 / 24px 24px,
    var(--field);
}
.card-body { display: grid; align-content: start; gap: .45rem; padding: .75rem .85rem .9rem; }
.card-body p { margin: 0; }
.card-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.card-title { margin: 0; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; }
.card-facts { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--muted); }
.card-body .btn { justify-self: start; margin-top: .2rem; }

.highlight-body .hl-wrap { display: grid; gap: 16px; }
.hl-why h3 { font-size: .95rem; }
@media (min-width: 900px) {
  .highlight-body .hl-wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}

.cta-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cta-body h2 { font-size: 1.2rem; }
.cta-body p { margin: 0; max-width: 52rem; }

@media (max-width: 640px) {
  .sort-label { margin-left: 0; }
  .sort-select { flex: 1 1 10rem; min-width: 0; }
}