/* ─────────────────────────────────────────────────────────────────────────
 * css/recursos.css
 *
 * Estils específics de Recursos > {Programes de ràdio, Videoteca}.
 * Reutilitza tokens (tokens.css) i patrons existents (taula d'agenda/catàleg
 * per a ràdio; nou patró .cards-grid per a videoteca).
 *
 * Dos blocs principals:
 *   1) INICI BLOC SECCIO RADIO  — capçaleres alineades a l'esquerra; Mitjà + play
 *      en una sola fila flex dins la cel·la, amb ranura dreta de l’amplada màxima
 *      desplegada del pill perquè l’expansió en hover no alteri el wrapping del text.
 *   2) INICI BLOC SECCIO VIDEOTECA — graella responsiva de cards amb thumbnail,
 *      categoria, títol i tags.
 * ───────────────────────────────────────────────────────────────────────── */

/* INICI BLOC SECCIO RADIO ──────────────────────────────────────────────── */

/* Capçaleres de taula i fila de context (#recursos): text alineat a l’esquerra */
#section-recursos .results-table thead th {
  text-align: left;
}

#section-recursos .results-header {
  justify-content: flex-start;
}

#section-recursos .results-count {
  text-align: left;
}

/* Mini-calendari sota la capçalera «Darrer» alineat a l’inici de la cel·la (vertical dalt) */
#section-recursos td.col-radio-data {
  text-align: left;
  vertical-align: top;
}

#section-recursos td.col-radio-data .cal-mini {
  margin-left: 0;
  margin-right: auto;
}

/*
 * Mateix inici visual que la resta de cel·les (font UI sense el padding extra del .wkrow global).
 * Taula principal + panel «previs» (cal-mini dins .radio-history-date-col).
 */
#section-recursos td.col-radio-data .cal-mini .wkrow,
#section-recursos td.col-radio-mobile-darrer .cal-mini .wkrow,
#section-recursos .radio-history-host .radio-history-date-col .cal-mini .wkrow {
  padding-top: 0;
}

/* Separadors d’element amb sub-fila (ràdio): `tr[data-has-subrow] td` treu border-bottom a totes
 * les cel·les; només la colspan pinta línia (cols 2–3). Els rowspan Data/Mitjà han de
 * portar la vora inferior per tancar la línia als costats (cols 1 i 4). */
#section-recursos .results-table tbody tr[data-has-subrow] td.col-radio-data[rowspan],
#section-recursos .results-table tbody tr[data-has-subrow] td.col-radio-mitja[rowspan] {
  border-bottom: var(--table-separator);
}

#section-recursos .results-table tbody tr.sub-row td.radio-episode-sub-row-cell {
  border-bottom: var(--table-separator);
}

/*
 * Primera columna (data): cel·la compacta pel cal-mini; capçalera «Data» + ▲▼
 * sense trencament (min-width ample prou per al label + botons d’ordenació).
 * Columna Realitzador(s): més amplària per al text.
 */
@media (min-width: 521px) {
  #section-recursos .results-table col.col-radio-data {
    width: 4rem;
    max-width: 4.375rem;
  }

  #section-recursos .results-table thead th.col-radio-data {
    white-space: nowrap;
    width: auto;
    min-width: 6.125rem;
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  #section-recursos .results-table thead th.col-radio-data .sortable-th-inner {
    flex-shrink: 0;
    width: auto;
    min-width: min-content;
  }

  #section-recursos .results-table thead th.col-radio-data .sortable-th-label {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    flex-shrink: 0;
  }

  #section-recursos .results-table tbody td.col-radio-data {
    width: 4rem;
    max-width: 4.375rem;
  }

  #section-recursos .results-table col.col-radio-autor,
  #section-recursos .results-table thead th.col-radio-autor,
  #section-recursos .results-table tbody td.col-radio-autor {
    min-width: 10.5rem;
  }
}

/* Contingut de taula sempre encapçalat verticalment a dalt (programes + altres llistes) */
#section-recursos .results-table tbody td {
  vertical-align: top;
}

/* Restaura padding inferior (tr[data-has-subrow] td el redueix a 2px globalment). */
#section-recursos .results-table tbody tr[data-has-subrow]:not(.sub-row) td {
  padding-bottom: 8px;
}

/* Ordenació (▲▼): mateix patró visual que el catàleg */
#section-recursos thead th.sortable-th {
  white-space: normal;
}

#section-recursos .sortable-th-inner {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

#section-recursos .sortable-th-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 0 1 auto;
  min-width: 0;
  /* Respecta els U+00AD de les etiquetes per al trencament sil·làbic en català */
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Capçaleres pla (textContent inicial): mateix comportament mentre porten U+00AD */
#section-recursos .results-table thead th[class*='col-radio'] {
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}

#section-recursos .sortable-th-btns {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

#section-recursos .sort-btn {
  display: block;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.5;
}

#section-recursos .sort-btn + .sort-btn {
  margin-left: -5px;
}

#section-recursos .sort-btn:hover {
  opacity: 1;
  color: var(--text-strong);
  background: var(--filter-option-hover-bg);
}

#section-recursos .sort-btn.is-active {
  opacity: 1;
  color: var(--color-primary);
  background: transparent;
  font-weight: 900;
}

/* Token compartit: amplada del pill expandit (mida suficient per a «+8888 previs»).
 * S'usa per dimensionar tant la columna com el botó en hover, sempre en sincronia. */
#section-recursos {
  --radio-pill-unified-w: 6rem;
  --radio-play-pill-expanded: var(--radio-pill-unified-w);
  --radio-audio-pill-expanded: var(--radio-pill-unified-w);
  /* Desplegament màx. del botó «+N previs» (escala 30/42 respecte l’antiga base) */
  --radio-history-pill-expanded: var(--radio-pill-unified-w);
  /* Ranura dues pastilles (esquema unificat): 1 segment desplegat (play + marge
     hover) + 1 col·lapsat (icona --bb-min-height), amb 1px de vora compartida. */
  --radio-mitja-two-actions-w: calc(
    var(--radio-play-pill-expanded) + var(--pill-hover-w-extra) + var(--bb-min-height) - 1px
  );
  /* Ranura dreta = desplegament màxim (embed) + separador respecte al text (+ una mica més per columna 4) */
  --radio-mitja-slot-w: calc(var(--radio-play-pill-expanded) + var(--space-2) + 16px);
}

/*
 * Columna Mitjà — fila única: bloc de text (flex) + ranura d’amplada fixa per al pill.
 * Padding alineat amb la resta de cel·les de taula; l’espai per als botons el reserva
 * la ranura (--radio-mitja-slot-w / --radio-mitja-two-actions-w), no padding extra.
 * L’hover només omple la ranura (expansió cap a l’esquerra dins la ranura), sense robar
 * amplada al bloc de text ni canviar-ne els salts de línia.
 */

#section-recursos .results-table col.col-radio-mitja,
#section-recursos .results-table th.col-radio-mitja,
#section-recursos .results-table td.col-radio-mitja {
  min-width: max(8rem, calc(10px + var(--radio-mitja-slot-w) + 3rem));
}

/* Amb històric: la columna ha de permetre dues pastilles desplegades sense compressió */
#section-recursos .results-table td.col-radio-mitja:has(.radio-mitja-row__slot--hist) {
  min-width: max(9rem, calc(10px + var(--radio-mitja-two-actions-w) + 3rem));
}

#section-recursos td.col-radio-mitja {
  vertical-align: top;
}

#section-recursos td.col-radio-mitja .radio-mitja-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
  min-width: 0;
  margin-bottom: var(--space-1);
}

#section-recursos td.col-radio-mitja .radio-mitja-row__text {
  flex: 1 1 auto;
  min-width: 0;
}

#section-recursos td.col-radio-mitja .radio-mitja-row__slot {
  flex: 0 0 var(--radio-mitja-slot-w);
  width: var(--radio-mitja-slot-w);
  min-width: var(--radio-mitja-slot-w);
  max-width: var(--radio-mitja-slot-w);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: visible;
}

#section-recursos td.col-radio-mitja .radio-mitja-row__slot .cobla-actions {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

#section-recursos td.col-radio-mitja .radio-mitja-row__slot .cobla-actions .actions.button-bar {
  pointer-events: auto;
  flex-wrap: nowrap;
}

/*
 * Dos pills horitzontals (Escolta + «+N»): mateix patró de ranura fixa que la
 * variant d’un sol botó; l’expansió en hover queda dins l’amplada reservada.
 */
#section-recursos td.col-radio-mitja .radio-mitja-row__slot--hist {
  flex: 0 0 var(--radio-mitja-two-actions-w);
  width: var(--radio-mitja-two-actions-w);
  min-width: var(--radio-mitja-two-actions-w);
  max-width: var(--radio-mitja-two-actions-w);
}

/*
 * Botons de la columna de play — extensió del patró canònic
 * .pill-action (results.css). Només cal aportar:
 *   · padding-left col·lapsat per centrar la icona quadrada (igual que
 *     .caratula-trigger / .pill-action--particelles).
 *   · `--expand-w` per a la mida desplegada.
 *   · estil de border distintiu (dashed→solid) per a la variant embed.
 *
 * IMPORTANT: NO redeclarar `width`/`min-width` aquí. La base
 * `.pill-action { width: var(--bb-min-height) }` i el `:hover` que
 * passa a `width: calc(var(--expand-w) + var(--pill-hover-w-extra))` (results.css §) tenen especificitat
 * (0,2,0); si redeclaràvem aquests valors amb la mateixa especificitat
 * en un full carregat després, l'ordre de fonts impediria l'expansió
 * (era el bug que mantenia col·lapsats els botons en hover).
 */
#section-recursos .pill-action.pill-action--play-audio,
#section-recursos .pill-action.pill-action--play-embed,
#section-recursos .pill-action.pill-action--radio-history,
#section-recursos .pill-action.pill-action--no-capture {
  width: var(--radio-pill-unified-w);
  min-width: var(--radio-pill-unified-w);
  padding-left: 8px;
  padding-right: 4px;
}

#section-recursos .pill-action.pill-action--play-audio,
#section-recursos .pill-action.pill-action--play-embed {
  --expand-w: var(--radio-pill-unified-w);
}

#section-recursos .pill-action.pill-action--play-embed {
  border-style: dashed;
}

#section-recursos .pill-action.pill-action--play-audio:hover,
#section-recursos .pill-action.pill-action--play-embed:hover {
  border-style: solid;
}

/* Variant "sense captura": programa visible al catàleg sense emissions
 * disponibles encara (B4). Mateixa morfologia que les pastilles de play
 * (per no trencar l'alineació de la cel·la), però to apagat, no clicable
 * i sense expansió en hover. La icona és la mateixa que la d'embed
 * (iconRadio) perquè recordi visualment a la fila d'emissora però amb
 * estil "deshabilitat" en lloc de "obrir streaming". */
#section-recursos .pill-action.pill-action--no-capture {
  --expand-w: var(--radio-pill-unified-w);
  color: var(--muted);
  border-style: dotted;
  cursor: not-allowed;
  opacity: 0.7;
}

#section-recursos .pill-action.pill-action--radio-history {
  --expand-w: var(--radio-pill-unified-w);
}

#section-recursos .pill-action.pill-action--play-audio .txt,
#section-recursos .pill-action.pill-action--play-embed .txt,
#section-recursos .pill-action.pill-action--radio-history .txt,
#section-recursos .pill-action.pill-action--no-capture .txt {
  opacity: 1;
  transform: none;
  transition: none;
}

#section-recursos .pill-action.pill-action--radio-history .txt {
  margin-left: 0;
}

/* Placeholder neutre per a cel·les sense data ("—"). Manté l'alineació
 * vertical i ressalta lleugerament que és un valor "buit intencional" en
 * lloc d'una cel·la oblidada. Tipus: span dins .col-radio-data o a la
 * cel·la mòbil "Darrer". */
.cobla-name.cobla-name--placeholder {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* Nom del mitjà: mateixa escala que .cobla-name; to secundari sense semblar una altra mida */
#section-recursos td.col-radio-mitja .radio-mitja-row__text .cobla-name {
  color: var(--muted);
  font-weight: 700;
}

/* Títol programa + subtítol episodi (.place .sub hereta `.place .sub` de results.css) */
#section-recursos td.col-radio-titol .place .title {
  color: var(--color-primary-strong);
}

/* Sub-fila (escriptori): `titol_emissio` en colspan 2 sota Programa + Autor */
#section-recursos tr.sub-row td.radio-episode-sub-row-cell .place--episode-sub-only .sub {
  display: block;
  width: 100%;
}

/* ── Botonera de ràdio ────────────────────────────────────────────────────────
   Escriptori (≥521 px): columna `.col-radio-accions`, pills apilats al peu-dreta.
   Mòbil: `.radio-mobile-actions` amb model in-cell §11c (`.results-actions`). */
@media (min-width: 521px) {
  #section-recursos .actions.button-bar.actions--stacked {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
  }

  /* Amb pills apilats cada botó és independent: restaurar border-radius complet
   * (la regla global `.actions.button-bar > .pill-action { border-radius: 0 }` de
   * results.css aplana les cantonades per a pills horitzontals adjacents; aquí
   * no toquen i cada un ha d'estar completament arrodonit). */
  #section-recursos .actions.button-bar.actions--stacked > .pill-action {
    border-radius: var(--bb-radius);
  }

  #section-recursos .results-table col.col-radio-accions {
    width: calc(var(--radio-pill-unified-w) + 20px);
  }

  #section-recursos .results-table th.col-radio-accions,
  #section-recursos .results-table td.col-radio-accions {
    width: calc(var(--radio-pill-unified-w) + 20px);
    min-width: calc(var(--radio-pill-unified-w) + 20px);
    max-width: calc(var(--radio-pill-unified-w) + 20px);
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }

  #section-recursos .results-table thead th.col-radio-accions {
    padding: 0;
    border: none;
    background: transparent;
  }

  #section-recursos td.col-radio-accions {
    position: relative;
    vertical-align: top;
    padding-bottom: calc(2 * var(--bb-min-height) + var(--space-2) + var(--space-3));
  }

  #section-recursos td.col-radio-accions .radio-accions-cell {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
  }

  #section-recursos td.col-radio-accions .radio-accions-cell .cobla-actions {
    pointer-events: auto;
  }
}

#section-recursos .radio-mobile-actions {
  margin-top: var(--space-2);
  width: 100%;
  min-width: 0;
}

@media (max-width: 520px) {
  /* Model in-cell §11c: barra segmentada amb `--expand-w` mesurat per greedy. */
  #section-recursos .radio-mobile-actions .results-actions .actions.button-bar > .pill-action {
    width: var(--expand-w, auto);
    min-width: 0;
  }
}

/* ── Programes de ràdio · Darrer + Programa (mòbil i escriptori) ── */
#section-recursos td.col-radio-mobile-darrer {
  text-align: left;
  vertical-align: top;
}

/* Columna estreta: menys amplada per al mini-calendari (només mòbil compacte). */
#section-recursos .results-table col.col-radio-mobile-darrer {
  width: 4.125rem;
}

#section-recursos .results-table th.col-radio-mobile-darrer,
#section-recursos .results-table td.col-radio-mobile-darrer {
  width: 4.125rem;
  max-width: 4.125rem;
  box-sizing: border-box;
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

#section-recursos td.col-radio-mobile-darrer .cal-mini {
  width: 100%;
  max-width: 3.5rem;
  margin-left: 0;
  margin-right: auto;
}

#section-recursos td.col-radio-mobile-darrer .cal-mini .wkrow {
  padding-top: 3px;
}

#section-recursos td.col-radio-mobile-darrer .cal-mini .mid {
  font-size: var(--font-lg);
  line-height: 1.08;
}

#section-recursos td.col-radio-mobile-darrer .cal-mini .bot {
  padding: 0 2px 3px;
}

/* Capçaleres sense ▲▼ (ordenació al sidebar): mateix salt de línia que .sortable-th */
#section-recursos .results-table thead th.col-radio-mobile-darrer,
#section-recursos .results-table thead th.col-radio-mobile-programa,
#section-recursos .results-table thead th.col-radio-desktop-programa {
  white-space: normal;
}

#section-recursos td.col-radio-mobile-programa,
#section-recursos td.col-radio-desktop-programa {
  vertical-align: top;
  min-width: 0;
}

#section-recursos td.col-radio-mobile-programa .radio-programa-cell,
#section-recursos td.col-radio-desktop-programa .radio-programa-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
}

#section-recursos td.col-radio-mobile-programa .place .title,
#section-recursos td.col-radio-desktop-programa .place .title {
  color: var(--color-primary-strong);
}

/* Mitjà inline al costat del títol (mateixa lectura tipogràfica que cobla-name sense icona). */
#section-recursos td.col-radio-mobile-programa .place .title .radio-mobile-mitja-inline.cobla-name,
#section-recursos td.col-radio-desktop-programa .place .title .radio-mobile-mitja-inline.cobla-name {
  display: inline;
  color: var(--muted);
  font-weight: 700;
}

/* Subtítol episodi: mateixa mida que realitzador (.cobla-name). */
#section-recursos .radio-programa-stack .place .sub {
  font-size: var(--font-xl);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--muted);
}

#section-recursos td.col-radio-mobile-programa .radio-programa-stack,
#section-recursos td.col-radio-desktop-programa .radio-programa-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}

#section-recursos td.col-radio-mobile-programa .radio-meta-row,
#section-recursos td.col-radio-desktop-programa .radio-meta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

#section-recursos td.col-radio-mobile-programa .radio-meta-ic,
#section-recursos td.col-radio-desktop-programa .radio-meta-ic {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--muted);
}

#section-recursos td.col-radio-mobile-programa .radio-meta-ic svg,
#section-recursos td.col-radio-desktop-programa .radio-meta-ic svg {
  width: 20px;
  height: 20px;
  display: block;
}

#section-recursos td.col-radio-mobile-programa .cobla-name,
#section-recursos td.col-radio-desktop-programa .cobla-name {
  color: var(--muted);
  font-weight: 700;
  min-width: 0;
}

#section-recursos td.col-radio-mobile-programa .radio-meta-row > .cobla-name,
#section-recursos td.col-radio-desktop-programa .radio-meta-row > .cobla-name {
  flex: 1 1 auto;
}

/* ── Històric d'episodis (fullscreen tipus programa-page dins recursos) ────
 *
 * Cos amb capçalera `prog-*` + files amb data (`cal-mini`), títol primari i play.
 * Sense peu Imprimir/Compartir (només «Tancar»).
 */
#section-recursos .radio-history-host {
  /* +10px respecte al desplegament en hover dels pills Escoltar/Emissora */
  --radio-history-play-slot-reserved: calc(var(--radio-play-pill-expanded) + 4px + 10px);
}

#section-recursos .radio-history-host .radio-history-programa-content {
  padding-bottom: var(--space-3);
}

/* Capçalera: títol del programa + «› Episodis anteriors» a la mateixa línia (esquerra). */
#section-recursos .radio-history-host .radio-history-page-top {
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

#section-recursos .radio-history-host .radio-history-prog-header {
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  min-width: 0;
}

#section-recursos .radio-history-host .radio-history-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

#section-recursos .radio-history-host .radio-history-program-place .title {
  color: var(--color-primary-strong);
  font-weight: 900;
  font-family: var(--font-ui);
  letter-spacing: 0.2px;
  font-size: var(--font-xl);
  line-height: 1.12;
}

#section-recursos .radio-history-host .radio-history-breadcrumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: 0.2px;
  min-width: 0;
}

#section-recursos .radio-history-host .radio-history-frame {
  margin-top: 0;
  padding: 0 10px 10px;
}

#section-recursos .radio-history-host .radio-history-state-msg {
  text-align: center;
  padding: var(--space-3);
  color: var(--muted);
}

#section-recursos .radio-history-host .radio-history-state-msg.programa-page-error {
  color: #b91c1c;
}

#section-recursos .radio-history-host .radio-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#section-recursos .radio-history-host .radio-history-sentinel.taules-scroll-sentinel {
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  pointer-events: none;
  background: transparent;
}

#section-recursos .radio-history-host .radio-history-sentinel.taules-scroll-sentinel--loading {
  height: auto;
  min-height: 32px;
  padding: var(--space-2) 10px;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  color: var(--muted);
  text-align: center;
}

#section-recursos .radio-history-host .radio-history-sentinel.taules-scroll-sentinel--loading::after {
  content: 'Carregant més…';
}

#section-recursos .radio-history-host .radio-history-item {
  padding: var(--space-2) 10px;
  transition: background-color 0.12s ease;
  border-bottom: var(--table-separator);
}

#section-recursos .radio-history-host .radio-history-item.row-band-even {
  background: var(--row-band-even-bg);
}

#section-recursos .radio-history-host .radio-history-item.row-band-odd {
  background: var(--row-band-odd-bg);
}

#section-recursos .radio-history-host .radio-history-item:hover {
  background: var(--row-band-hover-bg);
}

#section-recursos .radio-history-host .radio-history-item:last-child {
  border-bottom: var(--table-separator);
}

#section-recursos .radio-history-host .radio-history-item:first-child {
  border-top: 2px solid rgba(var(--ink-rgb), 0.08);
}

#section-recursos .radio-history-host .radio-history-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Numeració d'episodi: mateixa mida que el títol del capítol; columna mínima. */
#section-recursos .radio-history-host .radio-history-num-col {
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  max-width: max-content;
  margin: 0;
  padding: 0;
  text-align: right;
  white-space: nowrap;
  font-weight: 800;
  font-family: var(--font-ui);
  font-size: var(--font-xl);
  line-height: 1.12;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--muted) 78%, var(--card));
}

/* Número d'ordre: visible en escriptori, amagat en mòbil on l'espai és limitat */
@media (max-width: 520px) {
  #section-recursos .radio-history-host .radio-history-num-col {
    display: none;
  }
}

#section-recursos .radio-history-host .radio-history-date-col {
  flex: 0 0 auto;
}

#section-recursos .radio-history-host .radio-history-date-col .cal-mini {
  margin-left: 0;
}

#section-recursos .radio-history-host .radio-history-main-col {
  flex: 1 1 auto;
  min-width: 0;
}

#section-recursos .radio-history-host .radio-history-title-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

#section-recursos .radio-history-host .radio-history-title-row .place {
  flex: 1 1 auto;
  min-width: 0;
}

#section-recursos .radio-history-host .radio-history-title-row .place .title {
  color: var(--color-primary-strong);
  font-weight: 900;
  font-family: var(--font-ui);
  letter-spacing: 0.2px;
  font-size: var(--font-xl);
  line-height: 1.12;
}

#section-recursos .radio-history-host .radio-history-play-slot {
  flex: 0 0 var(--radio-history-play-slot-reserved);
  width: var(--radio-history-play-slot-reserved);
  min-width: var(--radio-history-play-slot-reserved);
}

#section-recursos .radio-history-host .radio-history-play-slot .cobla-actions {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

#section-recursos .radio-history-host .radio-history-play-slot .actions.button-bar {
  pointer-events: auto;
  justify-content: flex-end;
}

@media (hover: hover) and (pointer: fine) {
  #section-recursos .radio-history-host .pill-action.pill-action--play-audio:hover,
  #section-recursos .radio-history-host .pill-action.pill-action--play-embed:hover {
    width: calc(var(--expand-w) + var(--pill-hover-w-extra) + 10px);
  }
}

@media (max-width: 520px) {
  #section-recursos .radio-history-host .radio-history-title-row {
    flex-wrap: wrap;
  }

  #section-recursos .radio-history-host .radio-history-play-slot {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
}

#section-recursos .radio-history-host .radio-history-title--missing {
  color: var(--muted);
  font-style: italic;
}

/* FI BLOC SECCIO RADIO */


/* INICI BLOC SECCIO VIDEOTECA ──────────────────────────────────────────── */

/* Estats genèrics del renderer cards-grid.view.js */
.cards-grid-status {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--font-md);
}
.cards-grid-status.is-error { color: #b91c1c; }

/* Graella responsiva de cards. Auto-fill perquè s'omplin els forats sense
 * forçar nombres de columnes específics; amplada mínima 220 (4-5 col en 1200) */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
}
/* L'atribut HTML `hidden` per defecte aplica `display: none` via l'user-agent,
 * però les regles d'autor sobre `.cards-grid { display: grid }` guanyen per
 * cascada d'origen i deixarien el grid visible si una versió futura del JS
 * tornés a amagar-lo amb `hidden` en lloc d'eliminar-lo. Aquesta regla és
 * defensa en profunditat: garanteix que `hidden` continuï funcionant aquí.
 * El problema es manifestava com a doble llistat (videoteca sota programes
 * de ràdio) quan l'usuari saltava entre subseccions de Recursos. */
.cards-grid[hidden] {
  display: none;
}
.cards-grid-sentinel {
  height: 1px;
  margin-top: -1px;
}

@media (max-width: 520px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-2);
    padding: var(--space-2);
  }
}

/* ── Card individual ───────────────────────────────────────────────────── */
.videoteca-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.videoteca-card:hover {
  border-color: var(--actionable-border);
  box-shadow: var(--ctrl-shadow-hover);
  transform: translateY(-1px);
}

/* Coberta: botó que ocupa tot el thumbnail; clic = play */
.videoteca-card__cover {
  position: relative;
  display: block;
  width: 100%;
  /* Ratio 16:9 fix per evitar layouts trencats si el thumb encara no està carregat */
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.videoteca-card__cover:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.videoteca-card__thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.videoteca-card__thumb--noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, var(--opacity-60));
  background: linear-gradient(135deg, #2b2b2b, #555);
}
.videoteca-card__thumb--noimg svg { width: 36px; height: 36px; }

.videoteca-card__play {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 120ms ease, background 120ms ease;
}
.videoteca-card__play svg { width: 18px; height: 18px; }
.videoteca-card:hover .videoteca-card__play,
.videoteca-card__cover:focus-visible .videoteca-card__play {
  transform: scale(1.08);
  background: var(--color-primary-strong);
}

.videoteca-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 5px;
  flex: 1 1 auto;
}
@media (hover: none) {
  .videoteca-card:has(.videoteca-card__tags) .videoteca-card__body {
    cursor: pointer;
  }
}

.videoteca-card__category {
  margin: 0 -12px 0;
  padding: 3px 12px;
  font-family: var(--font-ui);
  font-size: var(--font-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-primary-strong);
  background: var(--surface-submenu);
  border-bottom: 1px solid var(--border-subtle);
}

.videoteca-card__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-strong);
  /* Trunca a 3 línies per mantenir la card compacta */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.videoteca-card__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.22s ease,
    opacity 0.18s ease,
    margin-top 0.22s ease;
}
/* Etiquetes: hover/focus amb hover primari (MQ); sense hover, clic → .videoteca-card--tags-reveal (JS) */
@media (hover: hover) {
  .videoteca-card:hover .videoteca-card__tags,
  .videoteca-card:focus-within .videoteca-card__tags {
    max-height: 15rem;
    opacity: 1;
    margin-top: 4px;
    pointer-events: auto;
  }
}
.videoteca-card--tags-reveal .videoteca-card__tags {
  max-height: 15rem;
  opacity: 1;
  margin-top: 4px;
  pointer-events: auto;
}
.videoteca-card__tag {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--chip-bg);
  border: 1px solid var(--border-subtle);
  color: var(--chip-text);
  white-space: nowrap;
}
/* Paleta idèntica a `.filter-chip[data-bucket].is-on` (filters.css). */
.videoteca-card__tag[data-tag-bucket="generes"] {
  background: color-mix(in srgb, var(--bucket-generes-accent) 15%, var(--card));
  border-color: var(--bucket-generes-accent);
  color: var(--bucket-generes-accent);
}
.videoteca-card__tag[data-tag-bucket="cobles"] {
  background: color-mix(in srgb, var(--bucket-cobles-accent) 15%, var(--card));
  border-color: var(--bucket-cobles-accent);
  color: var(--bucket-cobles-accent);
}
.videoteca-card__tag[data-tag-bucket="altres-formacions"] {
  background: color-mix(in srgb, var(--bucket-altres-formacions-accent) 15%, var(--card));
  border-color: var(--bucket-altres-formacions-accent);
  color: var(--bucket-altres-formacions-accent);
}
.videoteca-card__tag[data-tag-bucket="persones"] {
  background: color-mix(in srgb, var(--bucket-persones-accent) 15%, var(--card));
  border-color: var(--bucket-persones-accent);
  color: var(--bucket-persones-accent);
}
.videoteca-card__tag[data-tag-bucket="colles"] {
  background: color-mix(in srgb, var(--bucket-colles-accent) 15%, var(--card));
  border-color: var(--bucket-colles-accent);
  color: var(--bucket-colles-accent);
}
.videoteca-card__tag[data-tag-bucket="instruments"] {
  background: color-mix(in srgb, var(--bucket-instruments-accent) 15%, var(--card));
  border-color: var(--bucket-instruments-accent);
  color: var(--bucket-instruments-accent);
}
.videoteca-card__tag[data-tag-bucket="actes-i-contextos"] {
  background: color-mix(in srgb, var(--bucket-actes-i-contextos-accent) 15%, var(--card));
  border-color: var(--bucket-actes-i-contextos-accent);
  color: var(--bucket-actes-i-contextos-accent);
}
.videoteca-card__tag[data-tag-bucket="llocs-i-poblacions"] {
  background: color-mix(in srgb, var(--bucket-llocs-i-poblacions-accent) 15%, var(--card));
  border-color: var(--bucket-llocs-i-poblacions-accent);
  color: var(--bucket-llocs-i-poblacions-accent);
}
.videoteca-card__tag[data-tag-bucket="canals-youtube"] {
  background: color-mix(in srgb, var(--bucket-canals-youtube-accent) 15%, var(--card));
  border-color: var(--bucket-canals-youtube-accent);
  color: var(--bucket-canals-youtube-accent);
}

/* Videoteca activa: capçalera de resultats sense negreta (alineat amb la resta de la vista). */
#section-recursos:has(#recursos-cards-grid:not([hidden])) .results-count,
#section-recursos:has(#recursos-cards-grid:not([hidden])) .results-breadcrumb {
  font-weight: 400;
}

/* Mateix padding lateral entre chips sidebar i filtres actius. */
#section-recursos:has(#recursos-cards-grid:not([hidden])) .filter-chips-group {
  gap: calc(4px * var(--chips-desktop-scale));
  padding: 8px 6px 6px;
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .filter-collapsible .filter-chips-group {
  padding: 4px 6px 8px;
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filters-chips {
  gap: calc(4px * var(--chips-desktop-scale));
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filter-chip {
  font-family: var(--font-taules-condensed);
  font-size: calc(var(--font-sm) * var(--chips-desktop-scale) - 1px);
  line-height: 1.35;
  padding: calc(3px * var(--chips-desktop-scale)) calc(4px * var(--chips-desktop-scale))
    calc(3px * var(--chips-desktop-scale)) calc(5px * var(--chips-desktop-scale));
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .videoteca-card__tags,
#section-recursos:has(#recursos-cards-grid:not([hidden])) .banc-imatges-card__tags {
  gap: calc(3px * var(--chips-desktop-scale));
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .videoteca-card__tag,
#section-recursos:has(#recursos-cards-grid:not([hidden])) .banc-imatges-card__tag {
  font-size: calc(var(--font-xs) - 1px);
  padding: calc(2px * var(--chips-desktop-scale)) calc(4px * var(--chips-desktop-scale));
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filter-chip__label {
  font-weight: 400;
}

#section-recursos:has(#recursos-cards-grid:not([hidden])) .active-filter-chip__remove {
  font-weight: 400;
}

/* FI BLOC SECCIO VIDEOTECA */

/* ════════════════════════════════════════════════════════════════════════
   INICI BLOC SECCIO BANC D'IMATGES

   Card de la graella d'imatges. Reaprofita l'estructura de `.videoteca-card`
   (graella #recursos-cards-grid compartida via swap del sub-controller), però:
     · La coberta usa ratio 4:3 (les fotos no són 16:9).
     · La icona de hover és «ampliar» (lupa/expand) en comptes de play.
     · El títol no és obligatori (moltes fotos només tenen categoria + tags).
   ════════════════════════════════════════════════════════════════════════ */
.banc-imatges-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.banc-imatges-card:hover {
  border-color: var(--actionable-border);
  box-shadow: var(--ctrl-shadow-hover);
  transform: translateY(-1px);
}

/* Coberta: botó que conté el thumbnail; clic = obre el lightbox.
 *
 * Comportament:
 *   · Per defecte: aspect-ratio 4:3 clipat (crop centrat, fons negre).
 *   · En hover (punter primari): JS anima l'expansió (600 ms). Imatges més altes
 *     que 4:3 creixen en alçada; les més baixes mantenen 4:3 amb zoom-out suau
 *     (scale) cap a la vista sencera centrada sobre fons gris clar instantani.
 *
 * La imatge és un <img> (no background-div) perquè height:auto tingui efecte. */
.banc-imatges-card__cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
}
.banc-imatges-card__cover:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* img thumbnail: clipada per defecte, sencera en hover */
img.banc-imatges-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* En hover amb punter primari: alçada animada (JS) + imatge sencera centrada. */
@media (hover: hover) {
  .banc-imatges-card__cover {
    --banc-imatges-cover-expand-duration: 600ms;
    transition: height var(--banc-imatges-cover-expand-duration) ease-in-out;
  }
  .banc-imatges-card__cover--expanded {
    background: var(--surface-submenu);
    overflow: visible;
  }
  .banc-imatges-card__cover--expanded img.banc-imatges-card__thumb {
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

/* div placeholder quan no hi ha thumbnail (icona centrada sobre degradat fosc) */
.banc-imatges-card__thumb--noimg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, var(--opacity-60));
  background: linear-gradient(135deg, #2b2b2b, #555);
}
.banc-imatges-card__thumb--noimg svg { width: 36px; height: 36px; }

.banc-imatges-card__zoom {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}
.banc-imatges-card__zoom svg { width: 17px; height: 17px; }
.banc-imatges-card:hover .banc-imatges-card__zoom,
.banc-imatges-card__cover:focus-visible .banc-imatges-card__zoom {
  opacity: 1;
  transform: scale(1.08);
  background: var(--color-primary-strong);
}
/* Sense hover primari (tàctil): la lupa sempre visible com a affordance. */
@media (hover: none) {
  .banc-imatges-card__zoom { opacity: 1; }
}

.banc-imatges-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 5px;
  flex: 1 1 auto;
}
@media (hover: none) {
  .banc-imatges-card:has(.banc-imatges-card__tags) .banc-imatges-card__body {
    cursor: pointer;
  }
}

.banc-imatges-card__category {
  margin: 0 -12px 0;
  padding: 3px 12px;
  font-family: var(--font-ui);
  font-size: var(--font-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-primary-strong);
  background: var(--surface-submenu);
  border-bottom: 1px solid var(--border-subtle);
}

.banc-imatges-card__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.banc-imatges-card__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.22s ease,
    opacity 0.18s ease,
    margin-top 0.22s ease;
}
@media (hover: hover) {
  .banc-imatges-card:hover .banc-imatges-card__tags,
  .banc-imatges-card:focus-within .banc-imatges-card__tags {
    max-height: 15rem;
    opacity: 1;
    margin-top: 4px;
    pointer-events: auto;
  }
}
.banc-imatges-card--tags-reveal .banc-imatges-card__tags {
  max-height: 15rem;
  opacity: 1;
  margin-top: 4px;
  pointer-events: auto;
}
.banc-imatges-card__tag {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--chip-bg);
  border: 1px solid var(--border-subtle);
  color: var(--chip-text);
  white-space: nowrap;
}
/* Paleta idèntica a `.filter-chip[data-bucket].is-on` (filters.css). */
.banc-imatges-card__tag[data-tag-bucket="autors"] {
  background: color-mix(in srgb, var(--bucket-autors-accent) 15%, var(--card));
  border-color: var(--bucket-autors-accent);
  color: var(--bucket-autors-accent);
}
.banc-imatges-card__tag[data-tag-bucket="anys"] {
  background: color-mix(in srgb, var(--bucket-anys-accent) 15%, var(--card));
  border-color: var(--bucket-anys-accent);
  color: var(--bucket-anys-accent);
}
.banc-imatges-card__tag[data-tag-bucket="temes"] {
  background: color-mix(in srgb, var(--bucket-temes-accent) 15%, var(--card));
  border-color: var(--bucket-temes-accent);
  color: var(--bucket-temes-accent);
}
.banc-imatges-card__tag[data-tag-bucket="llocs"] {
  background: color-mix(in srgb, var(--bucket-llocs-accent) 15%, var(--card));
  border-color: var(--bucket-llocs-accent);
  color: var(--bucket-llocs-accent);
}

/* La graella del banc d'imatges té align-items:start perquè les cards del
   mateix row no s'estirin quan una s'expandeix en hover. La videoteca usa
   la mateixa classe .cards-grid però sense aquest modificador. */
.banc-imatges-grid {
  align-items: start;
}

/* FI BLOC SECCIO BANC D'IMATGES */

/* ════════════════════════════════════════════════════════════════════════
   INICI BLOC PRIMER NIVELL (graella de categories)

   Vista d'entrada compartida per banc d'imatges i videoteca: una card per
   categoria (imatge representativa + nom + comptador) + una card «Tot».
   Vegeu js/views/category-landing.view.js i js/modules/recursos/category-levels.js
   (ARCHITECTURE.md §11f).
   ════════════════════════════════════════════════════════════════════════ */

/* Nivell primari actiu: la graella de categories ocupa la card de resultats.
   A diferència de la versió antiga, la SIDEBAR es manté visible (com a la resta
   de seccions): només amaguem la graella de continguts i el comptador de
   resultats. La classe la posa/treu category-levels.js sobre la secció. */
#section-recursos.recursos-landing-active #recursos-cards-grid {
  display: none;
}
#section-recursos.recursos-landing-active .results-count {
  display: none;
}

.category-landing {
  display: flex;
  flex-direction: column;
}

/* Card individual de categoria: mateix llenguatge visual que les fitxes de
   contingut (.banc-imatges-card / .videoteca-card), però seleccionable. */
.category-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--card-border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.category-card:hover {
  border-color: var(--actionable-border);
  box-shadow: var(--ctrl-shadow-hover);
  transform: translateY(-1px);
}
.category-card:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.category-card__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  overflow: hidden;
}
.category-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.category-card__thumb--noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, var(--opacity-60));
  background: linear-gradient(135deg, #2b2b2b, #555);
}
.category-card__thumb--noimg svg { width: 36px; height: 36px; }

/* Card «Tot»: portada amb mosaic de 6 miniatures (graella 3×2, separacions
   blanques) o, com a fallback, degradat d'accent amb glif tènue de graella. */
.category-card__cover--all {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.category-card__cover--all:has(.category-card__all-glyph) {
  background: linear-gradient(135deg,
    var(--color-primary-strong),
    color-mix(in srgb, var(--color-primary-strong) 55%, #000));
}
.category-card__all-glyph {
  color: rgba(255, 255, 255, 0.85);
}
.category-card__all-glyph svg { width: 52px; height: 52px; }

/* Mosaic 3×2: separacions blanques de 5 px entre miniatures. */
.category-card__mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
  width: 100%;
  height: 100%;
  background: #fff;
}
.category-card__tile {
  background-color: var(--surface-muted, #eee);
  background-size: cover;
  background-position: center;
  transition: transform 260ms ease;
}
/* Lleuger zoom de les rajoles en passar el ratolí per la card. */
.category-card--all:hover .category-card__tile { transform: scale(1.05); }

.category-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 10px;
}
.category-card__title {
  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-strong);
}
.category-card__count {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-sm);
  color: var(--muted);
}

/* FI BLOC PRIMER NIVELL (graella de categories) */