/*
 * "Электрон кутубхона" ro'yxat sahifasi (`ELibraryAsset`).
 *
 * `inner-page.css` ning ustiga tushadi: ranglar, radius va soya o'sha
 * yerdagi `--ip-*` tokenlaridan olinadi, shrift esa `typography.css`
 * dagi Montserrat. Bu yerda faqat filtr paneli, kitob kartasi va
 * kategoriyalar ustunining mobil xulqi bor.
 *
 * Klasslar `lib-` prefiksli — sayt shablonidagi (`gorom`) umumiy
 * qoidalar bilan to'qnashmasligi uchun.
 */

.lib {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ============================================================
   Sarlavha qatori
   ============================================================ */

.lib-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 22px;
}

.lib-head__title {
    color: var(--ip-ink);
    font-size: 30px;
    font-weight: var(--fw-bold, 700);
    line-height: 1.2;
}

.lib-head__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ip-primary);
    font-size: var(--fs-card, 15px);
    font-weight: var(--fw-semibold, 600);
    text-decoration: none;
    transition: color 0.15s ease;
}

.lib-head__link:hover {
    color: var(--ip-primary-600);
}

/* ============================================================
   Filtr paneli
   ============================================================ */

/*
 * Flex, grid emas: qatordagi elementlar soni o'zgaruvchan — "Tozalash"
 * faqat qidiruv matni bo'lganda chiqadi. Qat'iy ustunlarda u paydo
 * bo'lishi bilan "Qidirish" pastki qatorga tushib ketardi.
 */
.lib-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lib-field {
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--ip-line);
    border-radius: var(--ip-radius);
    background-color: #fff;
    box-shadow: var(--ip-shadow);
}

.lib-field__icon {
    display: flex;
    color: #98a2b7;
}

.lib-field input {
    width: 100%;
    height: 48px;
    border: 0;
    background: none;
    color: var(--ip-ink);
    font-family: inherit;
    font-size: var(--fs-card, 15px);
    outline: none;
}

.lib-field input::placeholder {
    color: #98a2b7;
}

/* "Tozalash" — qidirish tugmasidan oldingi kontur tugma */
.lib-filter__clear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 18px;
    border: 1px solid var(--ip-line);
    border-radius: var(--ip-radius);
    background-color: #fff;
    color: var(--ip-muted);
    font-size: var(--fs-card, 15px);
    font-weight: var(--fw-semibold, 600);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.lib-filter__clear:hover {
    border-color: var(--ip-primary);
    color: var(--ip-primary);
}

.lib-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--ip-radius);
    background-color: var(--ip-primary);
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-card, 15px);
    font-weight: var(--fw-semibold, 600);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lib-filter__btn:hover {
    background-color: var(--ip-primary-600);
}

/* ============================================================
   Kitoblar to'ri
   ============================================================ */

.lib-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

/*
 * Yuklanish holati: forma yuborilganda yoki sahifalash bosilganda to'r
 * xiralashadi. Sahifa serverda qayta chiziladi, shuning uchun bu — javob
 * kutilayotganini bildiruvchi belgi, alohida skelet emas.
 */
.lib-grid.is-loading {
    position: relative;
    opacity: 0.5;
    pointer-events: none;
}

.lib-grid.is-loading::after {
    position: absolute;
    top: 40px;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    border: 3px solid var(--ip-primary-50);
    border-top-color: var(--ip-primary);
    border-radius: 50%;
    animation: lib-spin 0.8s linear infinite;
    content: "";
}

@keyframes lib-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Karta ---- */

.lib-card {
    display: flex;
    flex-direction: column;
    /* Teng balandlik: to'r `stretch` beradi, tugmalar esa pastga bosiladi */
    height: 100%;
    padding: 16px;
}

.lib-card__cover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 290px;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f2f5fb;
}

/* Muqova KESILMAYDI — kitob nisbati har xil bo'lishi mumkin */
.lib-card__cover img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lib-card__nocover {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #98a2b7;
    font-size: 13px;
    text-align: center;
}

.lib-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lib-card__cat {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: var(--ip-primary-50);
    color: var(--ip-primary);
    font-size: 12px;
    font-weight: var(--fw-semibold, 600);
    line-height: 1.4;
}

/*
 * Sarlavha IKKI QATOR bilan cheklanadi: uzun nomlar kartani cho'zib,
 * qatordagi kartalar balandligini va tugmalar chizig'ini buzardi.
 * `min-height` — bir qatorli nom ham ikki qatorlik joyni egallasin,
 * shunda kartalar ichidagi bloklar bir xil sathda turadi.
 */
.lib-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: calc(2 * 1.32em);
    overflow: hidden;
    color: var(--ip-ink);
    font-size: 17px;
    font-weight: var(--fw-bold, 700);
    line-height: 1.32;
}

.lib-card__author {
    color: var(--ip-text);
    font-size: 14px;
    line-height: 1.45;
}

.lib-card__meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 2px;
}

.lib-card__meta li {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--ip-muted);
    font-size: 13.5px;
    line-height: 1.4;
}

.lib-card__meta svg {
    color: var(--ip-primary);
}

.lib-card__meta li > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- Tugmalar ---- */

.lib-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Kartaning pastiga bosadi — qatordagi tugmalar bir chiziqda turadi */
    margin-top: auto;
    padding-top: 16px;
}

.lib-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: var(--fw-semibold, 600);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lib-btn--primary {
    background-color: var(--ip-primary);
    color: #fff;
}

.lib-btn--primary:hover {
    background-color: var(--ip-primary-600);
    color: #fff;
}

/* Fayli yo'q kitob: tugma ko'rinadi, lekin bosilmaydi */
.lib-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   Natija yo'q
   ============================================================ */

.lib-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 52px 20px;
    color: var(--ip-muted);
    text-align: center;
}

.lib-empty svg {
    color: #b9c3d6;
}

.lib-empty a {
    color: var(--ip-primary);
    font-weight: var(--fw-semibold, 600);
}

/* ============================================================
   Sahifalash
   ============================================================ */

.lib-pager .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.lib-pager .pagination li a,
.lib-pager .pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e1e7f0;
    border-radius: 8px;
    background-color: #fff;
    color: var(--ip-ink);
    font-size: var(--fs-card, 15px);
    font-weight: var(--fw-medium, 500);
    text-decoration: none;
}

.lib-pager .pagination li a:hover {
    border-color: var(--ip-primary-600);
    color: var(--ip-primary-600);
}

.lib-pager .pagination li.active a {
    border-color: var(--ip-primary-600);
    background-color: var(--ip-primary-600);
    color: #fff;
}

.lib-pager .pagination li.disabled span {
    color: #aab2c2;
}

/* ============================================================
   Kategoriyalar ustuni
   ============================================================ */

.lib-cats__head {
    /* `<summary>` ning standart uchburchagi olib tashlanadi */
    list-style: none;
    cursor: default;
}

.lib-cats__head::-webkit-details-marker {
    display: none;
}

.lib-cats__toggle {
    display: none;
    margin-left: auto;
    color: #9aa3b5;
    transition: transform 0.2s ease;
}

/* ============================================================
   Tablet: 2 ta karta
   ============================================================ */

@media (max-width: 1199.98px) {
    .lib-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* ============================================================
   Mobil: 1 ta karta, kategoriyalar — ochiladigan ro'yxat
   ============================================================ */

@media (max-width: 991.98px) {
    .lib-cats__head {
        cursor: pointer;
    }

    .lib-cats__toggle {
        display: flex;
    }

    /*
     * Chevron `UiIcons` da O'NGGA qaraydi, shuning uchun burchak shu
     * yerda beriladi: yopiq — pastga ("ochish"), ochiq — tepaga.
     */
    .lib-cats__toggle svg {
        transform: rotate(90deg);
    }

    .lib-cats[open] .lib-cats__toggle svg {
        transform: rotate(-90deg);
    }

    .lib-cats:not([open]) .lib-cats__head {
        border-bottom-color: transparent;
    }
}

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

    .lib-head__title {
        font-size: 24px;
    }

    /* Tor ekranda har bir element alohida qatorni egallaydi */
    .lib-field,
    .lib-filter__clear,
    .lib-filter__btn {
        flex: 1 1 100%;
    }

    .lib-filter__clear,
    .lib-filter__btn {
        justify-content: center;
    }

    .lib-card__cover {
        height: 250px;
    }
}