/* Experts (native /experts) — directory grid.
   Reuses the /kelas chrome (.tkls-crumb / .tkls-hero / .tkls-toolbar / .tkls-search / .tkls-dd
   from assets/kelas/kelas.css); this file styles the expert grid, cards, and category pills. */

.texp { --texp-blue: #004aad; --texp-ink: #1f2937; --texp-muted: #64748b; --texp-line: #e7eaf5; }

.texp-count {
    margin: 22px 0 6px;
    font-weight: 700;
    color: var(--texp-blue);
    font-size: .95rem;
}

/* ── Grid (8 columns, dense) ────────────────────────────────────── */
.texp-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px 6px;
    align-items: start;
    padding: 10px 0 34px;
}
.texp-grid--flat { margin-top: 4px; }
.texp-grid--cat  { padding: 4px 0 22px; }

@media (max-width: 1200px) { .texp-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 900px)  { .texp-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 700px)  { .texp-grid { grid-template-columns: repeat(4, 1fr); gap: 16px 6px; } }
@media (max-width: 460px)  { .texp-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Category label (kategori view) ─────────────────────────────
   The category NAME itself is the divider: inline in the continuous grid, right-aligned,
   enlarged black bold, may wrap to multiple lines. No pill / stat / background / border. */
.texp-catlabel {
    align-self: start;              /* valign TOP — aligns with the avatar top */
    text-align: center;             /* horizontally centered */
    padding: 10px 8px 0;            /* top matches the card photo top (card padding-top 10px) */
}
.texp-catlabel__txt {
    display: -webkit-box;
    -webkit-line-clamp: 3;          /* up to 3 lines, then ellipsis */
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;      /* safety: never clip a word horizontally */
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(1rem, 1.35vw, 1.2rem);   /* sized so a 12-char word fits one column */
    line-height: 1.16;
    letter-spacing: -.015em;
    color: #000;
}

/* ── Card ──────────────────────────────────────────────────────── */
.texp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 4px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.texp-card:hover {
    background: #f5f8ff;
    box-shadow: 0 6px 16px rgba(0, 74, 173, .10);
    transform: translateY(-2px);
}
.texp-card__photo,
.texp-card__placeholder {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    background: #eef2f7;
}
.texp-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--texp-line);
}
.texp-card__name {
    font-size: .8rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 2px;
    line-height: 1.28;
}
.texp-card__line {
    font-size: .68rem;
    color: var(--texp-muted);
    margin: 0 0 5px;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.texp-card__count {
    display: inline-block;
    background: #f0f7ff;
    color: #1e5faa;
    font-size: .64rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: auto;
    white-space: nowrap;
}

/* ── Empty ─────────────────────────────────────────────────────── */
.texp-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--texp-muted);
    font-size: .98rem;
}

/* Baris metrik kartu: label positioning #1 + metrik, satu baris, rata tengah */
.texp-card__meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:8px}
.texp-card__count--pos{background:#004aad;color:#fff}