/* =============================================================
   StageHub /new — Magazín, Žáner, Vyhľadávanie
   Načíta sa spolu s tokens.css + base.css (max 3 súbory/stránka).
   Obsahuje aj kompaktné karty interpretov/podujatí pre stránku
   vyhľadávania (ktorá zdieľa tento pageCss).
   ============================================================= */

.sh-mgz, .sh-search { padding-block: var(--sh-space-8) var(--sh-space-16); }

/* Žánrové čipy */
.sh-mgz-genres { display: flex; flex-wrap: wrap; gap: var(--sh-space-2); margin-bottom: var(--sh-space-8); }
.sh-mgz-chip {
  display: inline-flex; align-items: center; gap: var(--sh-space-2);
  padding: var(--sh-space-2) var(--sh-space-4); border-radius: var(--sh-radius-pill);
  border: 1px solid var(--sh-ink-12); background: var(--sh-surface-raised);
  color: var(--sh-ink-70); font-size: var(--sh-text-sm); font-weight: var(--sh-weight-medium);
  transition: border-color var(--sh-transition), color var(--sh-transition), background var(--sh-transition);
}
.sh-mgz-chip:hover { color: var(--sh-ink); border-color: var(--sh-amber); background: var(--sh-cream-1); }
.sh-mgz-chip.is-active { background: var(--sh-ink); color: var(--sh-cream-2); border-color: var(--sh-ink); }
.sh-mgz-count { font-size: var(--sh-text-xs); opacity: 0.7; }

/* Mriežka článkov */
.sh-artgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sh-space-6);
}
.sh-artcard {
  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-artcard:hover { transform: translateY(-3px); box-shadow: var(--sh-shadow-md); }
.sh-artcard-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.sh-artcard-media { aspect-ratio: 16 / 10; background: var(--sh-cream-1); overflow: hidden; }
.sh-artcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-artcard-body { padding: var(--sh-space-5); display: flex; flex-direction: column; gap: var(--sh-space-2); flex: 1; }
.sh-artcard-genre {
  align-self: flex-start; font-size: var(--sh-text-xs); font-weight: var(--sh-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--sh-amber-text);
}
.sh-artcard-title { font-family: var(--sh-font-head); font-size: var(--sh-text-lg); line-height: var(--sh-leading-snug); color: var(--sh-ink); margin: 0; }
.sh-artcard-excerpt { font-size: var(--sh-text-sm); color: var(--sh-ink-70); line-height: var(--sh-leading-normal); margin: 0; }
.sh-artcard-date { font-size: var(--sh-text-xs); color: var(--sh-ink-50); margin: auto 0 0; }
.sh-artcard:hover .sh-artcard-title { color: var(--sh-amber-text); }

.sh-eyebrow-link { color: inherit; }
.sh-eyebrow-link:hover { color: var(--sh-amber-text); text-decoration: underline; }

/* Vyhľadávanie — sekcie */
.sh-search-sec { margin-top: var(--sh-space-12); }
.sh-search-sec:first-of-type { margin-top: var(--sh-space-10); }

/* Kompaktné karty interpretov (zdieľané so stránkou vyhľadávania) */
.sh-cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sh-space-5); }
.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-md); }
.sh-acard-link { display: flex; flex-direction: column; color: inherit; height: 100%; }
.sh-acard-media { aspect-ratio: 1 / 1; background: var(--sh-cream-1); overflow: hidden; }
.sh-acard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-acard-body { padding: var(--sh-space-4); display: flex; flex-direction: column; gap: var(--sh-space-1); }
.sh-acard-name { font-family: var(--sh-font-head); font-size: var(--sh-text-lg); color: var(--sh-ink); margin: 0; }
.sh-acard-meta { font-size: var(--sh-text-sm); color: var(--sh-ink-70); margin: 0; display: flex; flex-wrap: wrap; gap: var(--sh-space-2); align-items: center; }
.sh-acard-genre { color: var(--sh-amber-text); font-weight: var(--sh-weight-medium); }

/* Kompaktný zoznam podujatí (zdieľané so stránkou vyhľadávania) */
.sh-ev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sh-space-4); }
.sh-ev-card { background: var(--sh-surface-raised); border: 1px solid var(--sh-ink-12); border-radius: var(--sh-radius-lg); box-shadow: var(--sh-shadow-sm); transition: transform var(--sh-transition), box-shadow var(--sh-transition); }
.sh-ev-card:hover { transform: translateY(-2px); box-shadow: var(--sh-shadow-md); }
.sh-ev-card.is-cancelled { opacity: 0.72; }
.sh-ev-link { display: flex; align-items: center; gap: var(--sh-space-5); padding: var(--sh-space-4) var(--sh-space-5); color: inherit; }
.sh-ev-date { flex: 0 0 auto; text-align: center; display: flex; flex-direction: column; line-height: 1.05; background: var(--sh-cream-1); border-radius: var(--sh-radius-md); padding: var(--sh-space-2) var(--sh-space-3); min-width: 56px; }
.sh-ev-day { font-family: var(--sh-font-head); font-size: var(--sh-text-xl); color: var(--sh-ink); }
.sh-ev-mon { font-size: var(--sh-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sh-amber-text); }
.sh-ev-yr { font-size: var(--sh-text-xs); color: var(--sh-ink-50); }
.sh-ev-body { display: flex; flex-direction: column; gap: var(--sh-space-1); }
.sh-ev-title { font-family: var(--sh-font-head); font-size: var(--sh-text-lg); color: var(--sh-ink); margin: 0; }
.sh-ev-meta { font-size: var(--sh-text-sm); color: var(--sh-ink-70); margin: 0; display: flex; flex-wrap: wrap; gap: var(--sh-space-2); align-items: center; }

@media (max-width: 560px) {
  .sh-artgrid { grid-template-columns: 1fr; }
  .sh-ev-link { gap: var(--sh-space-4); padding: var(--sh-space-4); }
}