/* Angka dari habits-site/Home.dc.html: lingkaran 96px, gap 24px, 6 kolom. */
.hbt-cats {
  --hbt-cats-cols: 6;
  display: grid;
  grid-template-columns: repeat(var(--hbt-cats-cols), minmax(0, 1fr));
  column-gap: 24px; row-gap: 28px;
  max-width: 100%;
  font-family: var(--hbt-font);
}

/*
 * min-width: 0 wajib. Item grid bawaannya min-width: auto, jadi label yang
 * lebih lebar dari jatah kolomnya akan melebarkan kolom itu melewati 1fr —
 * seluruh grid lalu meluber keluar layar. Itu yang membuat lingkaran
 * kategori "nembus" di ponsel begitu ada label dua kata.
 */
.hbt-cats__item {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  min-width: 0;
  color: var(--hbt-ink); text-decoration: none;
}
/*
 * Tinggi TIDAK pernah diset — selalu mengikuti lebar lewat aspect-ratio.
 * Menyetel tinggi tetap membuat lingkaran berubah jadi oval begitu kolomnya
 * lebih sempit dari nilai itu, dan itu persis yang terjadi di ponsel.
 */
.hbt-cats__media {
  width: 96px; max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hbt-surface);
  overflow: hidden; display: grid; place-items: center;
  transition: background-color .2s ease;
}
/* Ukuran gambar kategori diatur aturan bersama di habits-core.css. */
.hbt-cats__item:hover .hbt-cats__media { background: #EBEBE7; }
.hbt-cats__label {
  font-size: 14px; text-align: center; line-height: 1.4;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.hbt-cats__count { color: var(--hbt-muted); }

/* Kolom per breakpoint saat mode otomatis menyala. */
@media (max-width: 1024px) {
  .hbt-cats { grid-template-columns: repeat(var(--hbt-cats-cols-tablet, var(--hbt-cats-cols)), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hbt-cats { grid-template-columns: repeat(var(--hbt-cats-cols-mobile, var(--hbt-cats-cols)), minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hbt-cats { column-gap: 12px; row-gap: 20px; }
  .hbt-cats__label { font-size: 12.5px; }
}

/* Hanya tampil di editor: widget menjelaskan kenapa dia kosong,
   supaya kanvas kosong tidak tertukar dengan widget yang rusak. */
.hbt-cats--empty {
  display: block;
  padding: 24px; text-align: center;
  font-size: 13.5px; line-height: 1.6; color: var(--hbt-muted);
  border: 1px dashed var(--hbt-border);
  border-radius: var(--hbt-radius);
}