/* =============================================================
   StageHub /new — katalóg interpretov (/new/interpreti)
   Načíta sa po tokens.css a base.css. Žiadny inline štýl.
   ============================================================= */

.sh-cat { padding-block: clamp(var(--sh-space-10), 6vw, var(--sh-space-16)); }

.sh-cat-head { max-width: 60ch; margin-bottom: var(--sh-space-8); }
.sh-cat-title { font-size: var(--sh-text-4xl); margin: 0 0 var(--sh-space-3); }
.sh-cat-lead { color: var(--sh-ink-70); margin: 0; font-size: var(--sh-text-lg); }

/* --- Filtre (bežný GET formulár, žiadny JS) --- */
.sh-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sh-space-4);
  align-items: flex-end;
  padding: var(--sh-space-5);
  background: var(--sh-surface-raised);
  border: 1px solid var(--sh-ink-12);
  border-radius: var(--sh-radius-lg);
  box-shadow: var(--sh-shadow-sm);
  margin-bottom: var(--sh-space-8);
}
.sh-field { display: flex; flex-direction: column; gap: var(--sh-space-2); }
.sh-field label {
  font-size: var(--sh-text-xs);
  font-weight: var(--sh-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sh-ink-70);
}
.sh-field-search { flex: 1 1 220px; }
.sh-cat-filters input[type="search"],
.sh-cat-filters select {
  width: 100%;
  padding: var(--sh-space-3) var(--sh-space-4);
  font-family: var(--sh-font-body);
  font-size: var(--sh-text-base);
  color: var(--sh-ink);
  background: var(--sh-cream-3);
  border: 1px solid var(--sh-ink-12);
  border-radius: var(--sh-radius-md);
  transition: border-color var(--sh-transition), box-shadow var(--sh-transition);
}
.sh-cat-filters input[type="search"]:focus,
.sh-cat-filters select:focus {
  outline: none;
  border-color: var(--sh-amber);
  box-shadow: 0 0 0 3px rgba(198, 116, 31, 0.18);
}
.sh-field-actions { flex-direction: row; align-items: center; gap: var(--sh-space-4); }
.sh-cat-reset { font-size: var(--sh-text-sm); color: var(--sh-amber-text); }

.sh-cat-count { color: var(--sh-ink-70); font-size: var(--sh-text-sm); margin: 0 0 var(--sh-space-5); }

/* --- Mriežka kariet --- */
.sh-cat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sh-space-6);
}
.sh-acard {
  background: var(--sh-surface-raised);
  border: 1px solid var(--sh-ink-12);
  border-radius: var(--sh-radius-lg);
  overflow: hidden;
  box-shadow: var(--sh-shadow-sm);
  transition: transform var(--sh-transition), box-shadow var(--sh-transition);
}
.sh-acard:hover { transform: translateY(-3px); box-shadow: var(--sh-shadow-lg); }
.sh-acard-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.sh-acard-link:hover { color: inherit; }
.sh-acard-media { position: relative; aspect-ratio: 4 / 3; background: var(--sh-cream-1); overflow: hidden; }
.sh-acard-media img { width: 100%; height: 100%; object-fit: cover; }
.sh-acard-media .sh-badge { position: absolute; top: var(--sh-space-3); left: var(--sh-space-3); }
.sh-acard-body { padding: var(--sh-space-4) var(--sh-space-5) var(--sh-space-5); }
.sh-acard-name { font-family: var(--sh-font-head); font-size: var(--sh-text-lg); margin: 0 0 var(--sh-space-1); color: var(--sh-ink); }
.sh-acard-meta { margin: 0; font-size: var(--sh-text-sm); color: var(--sh-ink-70); display: flex; align-items: center; flex-wrap: wrap; }
.sh-acard-genre { color: var(--sh-amber-text); font-weight: var(--sh-weight-medium); }

/* --- Prázdny stav --- */
.sh-cat-empty {
  text-align: center;
  padding: var(--sh-space-16) var(--sh-space-6);
  background: var(--sh-surface-raised);
  border: 1px dashed var(--sh-ink-12);
  border-radius: var(--sh-radius-lg);
  color: var(--sh-ink-70);
}
.sh-cat-empty p { margin: 0 0 var(--sh-space-2); }

/* --- Stránkovanie --- */
.sh-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sh-space-5);
  margin-top: var(--sh-space-10);
}
.sh-pager-info { color: var(--sh-ink-70); font-size: var(--sh-text-sm); }

/* --- Responzívne --- */
@media (max-width: 900px) {
  .sh-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .sh-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .sh-field-search { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .sh-cat-grid { grid-template-columns: 1fr; }
  .sh-cat-title { font-size: var(--sh-text-3xl); }
}