/* ot-tpl category & tag listings — chip strip + masonry */

.ot-cat-head {
  margin-top: var(--ot-sp-8);
  margin-bottom: var(--ot-sp-6);
  padding: var(--ot-sp-8) var(--ot-sp-8);
  background:
    radial-gradient(1200px 320px at 10% 0%, rgba(251,191,36,.08), transparent 60%),
    linear-gradient(180deg, var(--ot-surface-1), var(--ot-bg-elev));
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-r-lg);
  position: relative;
  overflow: hidden;
}
.ot-cat-head__kicker {
  font-family: var(--ot-font-mono);
  font-size: var(--ot-fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ot-accent);
  margin-bottom: var(--ot-sp-3);
}
.ot-cat-head__title {
  font-size: var(--ot-fs-3xl);
  font-weight: var(--ot-fw-b);
  letter-spacing: -0.02em;
  color: var(--ot-text);
  margin-bottom: var(--ot-sp-3);
}
.ot-cat-head__stats {
  font-family: var(--ot-font-mono);
  font-size: var(--ot-fs-sm);
  color: var(--ot-text-mute);
  letter-spacing: -0.01em;
}
.ot-cat-head__stats strong {
  color: var(--ot-accent);
  font-weight: var(--ot-fw-s);
  font-size: var(--ot-fs-lg);
  margin-right: 4px;
}

.ot-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ot-sp-2);
  margin-bottom: var(--ot-sp-6);
}

.ot-cat-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ot-sp-4);
  margin-bottom: var(--ot-sp-5);
  flex-wrap: wrap;
}
.ot-cat-filters__group {
  display: flex;
  align-items: center;
  gap: var(--ot-sp-2);
}
.ot-cat-filters__label {
  font-family: var(--ot-font-mono);
  font-size: var(--ot-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ot-text-dim);
  margin-right: var(--ot-sp-2);
}

.ot-empty {
  padding: var(--ot-sp-12);
  text-align: center;
  border: 1px dashed var(--ot-border-hi);
  border-radius: var(--ot-r);
  color: var(--ot-text-mute);
}
.ot-empty__icon {
  font-size: 48px;
  color: var(--ot-text-dim);
  margin-bottom: var(--ot-sp-3);
}
.ot-empty__title {
  font-size: var(--ot-fs-lg);
  font-weight: var(--ot-fw-s);
  color: var(--ot-text);
  margin-bottom: var(--ot-sp-2);
}
.ot-empty__hint {
  font-family: var(--ot-font-mono);
  font-size: var(--ot-fs-xs);
  letter-spacing: 0.1em;
  color: var(--ot-text-dim);
  text-transform: uppercase;
}