/*** CMP-GENERAL-LABELS.CSS v2
- Shared component for displaying taxonomy labels (XT) under a single heading.
- Groups chips by label type (Collection / Disciplina / Theoria / Praxis / Libertas).
- Visual language: plain text (no bordered pills), small-caps group micro-labels,
  groups laid out side-by-side on desktop and stacked on narrow screens.
- Used identically on Article / Episode / Show / Work / Agent detail pages —
  all page modules share this one treatment.
##########################
***/

/* #region CONTAINER ########################## */

.cmp-general-labels {
  margin-top: 1.5rem;
}

.cmp-general-labels-title {
  margin: 0 0 1.5rem 0;
  padding: 0 0 1.25rem 0;
  border-bottom: 1px solid var(--color-shade);
}

/* #endregion */

/* #region GROUPS (side by side on desktop) ########################## */

.cmp-general-labels-groups {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.cmp-general-labels-group {
  display: flex;
  flex-direction: column;
  row-gap: 0.var(--space-lg);
  margin-bottom: 0;
}

.cmp-general-labels-group-label {
  margin: 0 0 0.25rem 0;
}

/* #endregion */

/* #region LIST + ITEMS (plain text, stacked) ########################## */

.cmp-general-labels-list {
  display: flex;
  flex-direction: column;
  row-gap: 0.var(--space-md);
  padding: 0;
  margin: 0;
  list-style: none;
}

.cmp-general-labels-list li { padding: 0; }

.cmp-general-labels-item {
  display: block;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  line-height: 1.4em;
  color: var(--color-black);
  text-decoration: none;
  letter-spacing: normal;
  text-transform: none;
}

.cmp-general-labels-item:hover {
  background: none;
  color: var(--color-shade);
  text-decoration: none;
}

/* #endregion */

/* #region RESPONSIVE ########################## */
/* Desktop (≥ 1280px) keeps the default `grid-auto-flow: column` — one
   column per group (up to 5: Collection / Disciplina / Theoria / Praxis /
   Libertas), all side-by-side.
   Tablet (800–1279.98px) drops to three balanced columns. Phone (< 800px)
   sits two-up — the regularity reads cleanly all the way down to the
   narrowest phone width, no further single-column collapse. */

/* Tablet — three columns. */
@media (max-width: 1279.98px) {
  .cmp-general-labels-groups {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
  }
}

/* Phone — two columns. */
@media (max-width: 799.98px) {
  .cmp-general-labels-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* #endregion */