/* ─────────────────────────────────────────────────────────────
   Kutubxona (content module) — catalog + reader.

   DESIGN_SYSTEM.md §2.3: the content module is bound to `primary`.
   No literal colors, sizes, or radii here — tokens only.
   ───────────────────────────────────────────────────────────── */

/* ─── Catalog ─────────────────────────────────────────────── */

.bedu-lib-filterbar {
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    margin-bottom: var(--bedu-space-4);
}

.bedu-lib-paging {
    margin-top: var(--bedu-space-4);
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
}

.bedu-lib-empty {
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    background: var(--bedu-surface);
}

/* Tag chips — filter shortcuts under the filter bar. */
.bedu-lib-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bedu-space-2);
    margin-bottom: var(--bedu-space-4);
}

.bedu-lib-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--bedu-space-1) var(--bedu-space-3);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius-pill);
    background: var(--bedu-surface);
    color: var(--bedu-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--bedu-dur-fast) var(--bedu-ease),
                border-color var(--bedu-dur-fast) var(--bedu-ease),
                color var(--bedu-dur-fast) var(--bedu-ease);
}

.bedu-lib-tag:hover {
    background: var(--bedu-surface-muted);
    border-color: var(--bedu-primary);
    color: var(--bedu-text);
}

.bedu-lib-tag--active {
    background: var(--bedu-primary-50);
    border-color: var(--bedu-primary);
    color: var(--bedu-primary);
}

/* ─── Reader layout ───────────────────────────────────────── */

.bedu-lib-crumbs {
    display: flex;
    align-items: center;
    gap: var(--bedu-space-2);
    font-size: 0.85rem;
    color: var(--bedu-text-muted);
    margin-bottom: var(--bedu-space-4);
}

.bedu-lib-crumbs a {
    color: var(--bedu-text-muted);
    text-decoration: none;
}

.bedu-lib-crumbs a:hover {
    color: var(--bedu-primary);
    text-decoration: underline;
}

.bedu-lib-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--bedu-space-5);
    align-items: start;
}

.bedu-lib-stage {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bedu-space-4);
}

.bedu-lib-head {
    display: flex;
    align-items: flex-start;
    gap: var(--bedu-space-3);
}

.bedu-lib-head__body {
    flex: 1;
    min-width: 0;
}

.bedu-lib-head__title {
    margin: var(--bedu-space-1) 0 0;
    font-family: var(--bedu-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bedu-text);
}

.bedu-lib-desc {
    margin: 0;
    color: var(--bedu-text-muted);
    line-height: var(--bedu-line);
}

/* ─── Media surfaces ──────────────────────────────────────── */

.bedu-lib-audio {
    width: 100%;
}

.bedu-lib-image,
.bedu-lib-video {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    background: var(--bedu-surface-muted);
}

.bedu-lib-external {
    display: flex;
    align-items: center;
    gap: var(--bedu-space-4);
    padding: var(--bedu-space-5);
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
}

.bedu-lib-external > .bi {
    font-size: 1.6rem;
    color: var(--bedu-primary);
    flex-shrink: 0;
}

.bedu-lib-external > div {
    flex: 1;
    min-width: 0;
}

.bedu-lib-external__title {
    font-weight: 700;
    color: var(--bedu-text);
}

.bedu-lib-external__url {
    margin: var(--bedu-space-1) 0 0;
    font-size: 0.82rem;
    color: var(--bedu-text-muted);
    overflow-wrap: anywhere;
}

.bedu-lib-placeholder {
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
}

.bedu-lib-dl {
    align-self: flex-start;
}

/* ─── Sidebar ─────────────────────────────────────────────── */

.bedu-lib-side {
    display: flex;
    flex-direction: column;
    gap: var(--bedu-space-4);
    min-width: 0;
}

.bedu-lib-side__title {
    margin: 0 0 var(--bedu-space-3);
    font-family: var(--bedu-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bedu-text);
}

.bedu-lib-dl-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--bedu-space-2) var(--bedu-space-4);
    margin: 0;
    font-size: 0.88rem;
}

.bedu-lib-dl-grid dt {
    color: var(--bedu-text-muted);
    font-weight: 500;
}

.bedu-lib-dl-grid dd {
    margin: 0;
    color: var(--bedu-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.bedu-lib-dl-grid dd a {
    color: var(--bedu-primary);
    text-decoration: none;
}

.bedu-lib-dl-grid dd a:hover {
    text-decoration: underline;
}

.bedu-lib-meta .bedu-lib-tags {
    margin: var(--bedu-space-4) 0 0;
}

.bedu-lib-version {
    display: flex;
    align-items: flex-start;
    gap: var(--bedu-space-2);
    font-size: 0.85rem;
    color: var(--bedu-text);
}

.bedu-lib-version .bedu-resource__meta {
    display: block;
}

/* ─── Mobile: sidebar drops below the stage ───────────────── */

@media (max-width: 992px) {
    .bedu-lib-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}