/* ── Artist grid ──────────────────────────────────────────────────── */
.js-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

/* ── Artist card ──────────────────────────────────────────────────── */
.js-card {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}
.js-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.13);
    border-color: #2e7d32;
}
.js-card:hover .js-card-thumb img.placeholder {
    opacity: 0.88;
}
.js-card:hover .js-play-overlay span {
    opacity: 1;
    transform: scale(1.15);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .js-grid {
        grid-template-columns: 1fr;
    }
    .js-section-title { font-size: 1.25rem; }
}

/* ─── Card layout fixes ───────────────────────────────── */
.js-card {
  position: relative;
}

/* Artist-specific styles */
.js-artist-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
    background: #cdcdcd;
}
.js-card-img-link {
    display: block;
    overflow: hidden;
}
.js-card-img-link:hover .js-artist-img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}
.js-artist-img {
    transition: transform 0.3s ease;
}
.js-card-roles {
    font-size: 0.78rem;
    color: #777;
    margin: 2px 0 6px 0;
}
.js-card-location {
    font-size: 0.75rem;
    color: #999;
    margin: 0 0 4px 0;
    font-style: italic;
}
a.js-artist-badge-genre {
    text-decoration: none;
    color: #bbdefb;
    cursor: pointer;
}
a.js-artist-badge-genre:hover {
    opacity: 0.8;
    text-decoration: underline;
}
.js-card-video-row {
    width: 100%;
}

.js-artist-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    margin: 2px 3px 2px 0;
}
.js-artist-badge-type {
    background: #2d5c2d;
    color: #c8e6c9;
}
.js-artist-badge-genre {
    background: #1a3a5c;
    color: #bbdefb;
}
.js-artist-badge-videos {
    background: #5c4a1a;
    color: #ffe0b2;
}
.js-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

/* Search input styling — match the look of .js-filter-select */
.js-filter-search {
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  min-width: 200px;
}
.js-filter-search:focus {
  outline: none;
  border-color: #f5b01a;
  box-shadow: 0 0 0 2px rgba(245,176,26,0.25);
}
@media (max-width: 600px) {
  .js-filter-search { min-width: 0; width: 100%; }
  .js-filter-group-search { flex: 1 1 100%; }
}

/* ── Pagination Prev/Next + mobile collapsible filter bar ───────────── */
.js-filter-group-page { display: flex; align-items: center; gap: .35rem; }
.js-page-btn { background: #fff; border: 1px solid #c6c6c6; color: #2e2e2e; padding: .35rem .6rem; border-radius: 6px; cursor: pointer; font-size: .9rem; transition: background .15s ease, border-color .15s ease; }
.js-page-btn:hover:not(:disabled) { background: #f3f3f3; border-color: #2e7d32; color: #2e7d32; }
.js-page-btn:disabled { opacity: .45; cursor: not-allowed; }
.js-filter-page-input { width: 4.5rem; padding: .35rem .4rem; border: 1px solid #c6c6c6; border-radius: 6px; font-size: .9rem; text-align: center; }
.js-filter-page-input:focus { outline: 2px solid #c4a661; outline-offset: 1px; border-color: #c4a661; }
.js-filter-page-info { color: #555; font-size: .85rem; padding: 0 .15rem; }

/* Filters toggle button — hidden on desktop */
.js-filter-toggle { display: none; }
@media (max-width: 768px) {
  .js-filter-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; padding: .6rem .85rem;
    background: #2e7d32; color: #fff; border: 0; border-radius: 8px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    margin-bottom: .5rem;
  }
  .js-filter-toggle:focus { outline: 2px solid #c4a661; outline-offset: 2px; }
  .js-filter-toggle-icon { transition: transform .2s ease; display: inline-block; }
  .js-filter-bar[data-collapsible="1"]:not(.is-open) .js-filter-inner { display: none; }
  .js-filter-bar.is-open .js-filter-toggle-icon { transform: rotate(180deg); }
}

/* ── Compact multi-select dropdown (Genre filter) ───────────── */
.js-multiselect { position: relative; display: inline-block; }
.js-multiselect-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 9rem; max-width: 14rem; padding: .35rem .55rem; background: #fff; border: 1px solid #c6c6c6; border-radius: 6px; font-size: .9rem; color: #2e2e2e; cursor: pointer; text-align: left; }
.js-multiselect-toggle:hover { border-color: #2e7d32; }
.js-multiselect-toggle[aria-expanded="true"] { border-color: #2e7d32; box-shadow: 0 0 0 2px rgba(46,125,50,.18); }
.js-multiselect-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.js-multiselect-caret { font-size: .8rem; color: #555; transition: transform .15s ease; }
.js-multiselect-toggle[aria-expanded="true"] .js-multiselect-caret { transform: rotate(180deg); }
.js-multiselect-panel { display: none; position: fixed; top: 0; left: 0; min-width: 16rem; max-width: 22rem; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #c6c6c6; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.13); z-index: 9999; padding: .25rem 0; }
.js-multiselect.is-open .js-multiselect-panel { display: block; }
.js-filter-group .js-multiselect-option { display: flex; align-items: center; gap: .5rem; padding: .4rem .75rem; cursor: pointer; font-size: .9rem; color: #b8860b; font-weight: 600; user-select: none; }
.js-filter-group .js-multiselect-option:hover { background: rgba(196, 166, 97, 0.12); }
.js-multiselect-option input { margin: 0; cursor: pointer; }
.js-filter-group .js-multiselect-option input:checked + span { color: #2e7d32; font-weight: 700; }
.js-filter-group .js-multiselect-option:has(input:checked) { background: rgba(46, 125, 50, 0.10); }