/* ==========================================================
   DIGITAL E-BOOK LIBRARY
========================================================== */

* {
    box-sizing: border-box;
}


html,
body {
    min-height: 100%;
}


body {
    margin: 0;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color: #163655;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(240, 187, 95, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 14%,
            rgba(65, 132, 179, .14),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #f7f3e9 0%,
            #edf5f6 52%,
            #f9f5ea 100%
        );
}


/* ==========================================================
   PAGE
========================================================== */

.library-page {
    width: min(
        1220px,
        calc(100% - 40px)
    );

    min-height: 100vh;

    margin: 0 auto;

    padding:
        48px 0
        30px;
}


/* ==========================================================
   HEADER
========================================================== */

.library-header {
    max-width: 820px;

    margin:
        0 auto
        42px;

    text-align: center;
}


.library-badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding:
        7px 18px;

    margin-bottom: 14px;

    border:
        1px solid
        rgba(26, 84, 122, .16);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .72);

    color: #2c6688;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .16em;

    box-shadow:
        0 5px 20px
        rgba(25, 65, 90, .06);
}


.library-header h1 {
    margin: 0;

    color: #143e67;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            32px,
            4vw,
            52px
        );

    line-height: 1.12;

    font-weight: 700;
}


.library-title-en {
    margin:
        8px 0
        0;

    color: #b07835;

    font-size:
        18px;

    font-weight: 700;

    letter-spacing: .02em;
}


.library-intro {
    margin:
        18px auto
        0;

    color: #587084;

    font-size: 14px;

    line-height: 1.6;
}


.library-intro span {
    display: block;

    color: #788c9b;

    font-size: 13px;
}


/* ==========================================================
   GRID
========================================================== */

.book-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 310px)
        );

    justify-content: center;

    gap: 34px;
}


/* ==========================================================
   BOOK CARD
========================================================== */

.book-card {
    overflow: hidden;

    padding:
        16px 16px
        20px;

    border:
        1px solid
        rgba(26, 74, 105, .10);

    border-radius: 24px;

    background:
        rgba(255, 255, 255, .82);

    box-shadow:
        0 18px 48px
        rgba(28, 57, 77, .12);

    backdrop-filter:
        blur(12px);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.book-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 24px 56px
        rgba(28, 57, 77, .17);
}


/* ==========================================================
   BOOK COVER
========================================================== */

.book-cover-link {
    display: block;

    color: inherit;

    text-decoration: none;
}


.book-cover-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 3 / 4;

    overflow: hidden;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #e7eef0,
            #d7e3e6
        );

    box-shadow:
        0 12px 28px
        rgba(16, 47, 68, .16);
}


.book-cover {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


.book-cover-placeholder {
    width: 100%;
    height: 100%;

    padding: 24px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 18px;

    text-align: center;

    color: #315b75;

    background:
        linear-gradient(
            150deg,
            #f4e0b9,
            #d8edf0
        );
}


.placeholder-icon {
    font-size: 56px;
}


.book-cover-placeholder strong {
    max-width: 220px;

    font-family:
        Georgia,
        serif;

    font-size: 22px;

    line-height: 1.25;
}


/* ==========================================================
   HOVER OVERLAY
========================================================== */

.cover-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    opacity: 0;

    color: #fff;

    background:
        linear-gradient(
            rgba(17, 55, 84, .18),
            rgba(17, 55, 84, .82)
        );

    transition:
        opacity .2s ease;
}


.book-cover-link:hover
.cover-overlay {
    opacity: 1;
}


.open-icon {
    width: 48px;
    height: 48px;

    margin-bottom: 6px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding-left: 3px;

    border:
        2px solid
        rgba(255, 255, 255, .72);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .16);

    font-size: 20px;
}


.cover-overlay strong {
    font-size: 16px;
}


.cover-overlay small {
    color:
        rgba(255,255,255,.82);

    font-size: 12px;
}


/* ==========================================================
   BOOK INFO
========================================================== */

.book-info {
    padding:
        18px 4px
        0;

    text-align: center;
}


.book-info h2 {
    margin:
        0 0
        10px;

    color: #173f64;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    line-height: 1.3;
}


.book-author {
    margin:
        0 0
        16px;

    color: #728494;

    font-size: 12px;

    line-height: 1.45;
}


.book-author span {
    display: block;

    margin-bottom: 2px;

    color: #8796a1;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.book-author strong {
    color: #536b7d;

    font-weight: 650;
}


/* ==========================================================
   OPEN BUTTON
========================================================== */

.open-book-button {
    min-height: 48px;

    padding:
        9px 22px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #f4c36e,
            #dfa04c
        );

    color: #143d67;

    text-decoration: none;

    box-shadow:
        0 8px 20px
        rgba(157, 102, 36, .20);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.open-book-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 11px 25px
        rgba(157, 102, 36, .27);
}


.open-book-button span {
    font-size: 13px;

    font-weight: 800;
}


.open-book-button small {
    margin-top: 1px;

    font-size: 10px;

    font-weight: 650;

    opacity: .82;
}


/* ==========================================================
   COMING SOON
========================================================== */

.coming-soon {
    color: #728493;

    font-size: 13px;

    font-weight: 700;
}


.coming-soon span {
    display: block;

    margin-top: 2px;

    font-size: 11px;

    font-weight: 500;
}


/* ==========================================================
   EMPTY LIBRARY
========================================================== */

.empty-library {
    grid-column: 1 / -1;

    padding:
        60px 30px;

    border:
        1px dashed
        rgba(46, 96, 128, .25);

    border-radius: 24px;

    text-align: center;

    background:
        rgba(255,255,255,.6);
}


.empty-icon {
    font-size: 58px;
}


.empty-library h2 {
    margin:
        14px 0
        6px;

    color: #294f6b;
}


.empty-library p {
    margin: 0;

    color: #718593;
}


/* ==========================================================
   FOOTER
========================================================== */

.library-footer {
    margin-top: 48px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: 9px;

    color: #80909a;

    font-size: 11px;
}


.footer-dot {
    color: #d7a251;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (
    max-width: 640px
) {

    .library-page {
        width:
            calc(100% - 24px);

        padding-top: 28px;
    }


    .library-header {
        margin-bottom: 28px;
    }


    .library-header h1 {
        font-size: 30px;
    }


    .library-title-en {
        font-size: 15px;
    }


    .book-grid {
        grid-template-columns:
            minmax(0, 310px);

        gap: 24px;
    }

}



/* ==========================================================
   COMPACT_SINGLE_BOOK_LIBRARY_V2
========================================================== */


/* ----------------------------------------------------------
   FIT MAIN LIBRARY INTO VIEWPORT
---------------------------------------------------------- */

html,
body {
    height: 100%;
}


body {
    overflow-x: hidden;
}


.library-page {

    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    min-height: 100vh;

    padding:
        18px 0
        14px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;
}


/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.library-header {

    max-width:
        1100px;

    margin:
        0 auto
        14px;

    text-align: center;
}


.library-badge {
    display: none !important;
}


.library-title-en {
    display: none !important;
}


.library-header h1 {

    margin: 0;

    white-space: nowrap;

    font-size:
        clamp(
            30px,
            3.6vw,
            48px
        );

    line-height:
        1.05;
}


.library-intro {

    margin:
        8px auto
        0;

    font-size:
        12px;

    line-height:
        1.35;
}


.library-intro span {

    display:
        inline;

    margin-left:
        6px;

    font-size:
        11px;
}


/* ----------------------------------------------------------
   SINGLE BOOK CENTERING
---------------------------------------------------------- */

.book-grid {

    flex: 1;

    display: grid;

    grid-template-columns:
        minmax(
            250px,
            290px
        );

    justify-content: center;

    align-content: start;

    gap: 0;
}


/* ----------------------------------------------------------
   COMPACT CARD
---------------------------------------------------------- */

.book-card {

    width: 100%;

    padding:
        10px
        10px
        14px;

    border-radius:
        20px;
}


/* ----------------------------------------------------------
   SMALLER COVER
---------------------------------------------------------- */

.book-cover-frame {

    width: 100%;

    max-height:
        410px;

    aspect-ratio:
        3 / 4;

    border-radius:
        14px;
}


.book-cover {

    object-fit:
        cover;
}


/* ----------------------------------------------------------
   BOOK INFO
---------------------------------------------------------- */

.book-info {

    padding:
        10px 4px
        0;
}


/* ----------------------------------------------------------
   TITLE — ONE LINE
---------------------------------------------------------- */

.book-title {

    margin:
        0 0
        7px !important;

    display: flex;

    align-items: baseline;

    justify-content: center;

    flex-wrap: nowrap;

    gap:
        5px;

    white-space: nowrap;

    font-size:
        14px !important;

    line-height:
        1.2 !important;
}


.book-title-ky {

    color:
        #173f64;

    font-weight:
        800;
}


.book-title-divider {

    color:
        #c69249;

    font-weight:
        600;
}


.book-title-en {

    color:
        #536f84;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        650;
}


/* ----------------------------------------------------------
   AUTHOR
---------------------------------------------------------- */

.book-author {

    margin:
        0 0
        9px !important;

    line-height:
        1.25 !important;
}


.author-label {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #8a99a4;

    font-size:
        8px !important;

    font-weight:
        700;

    letter-spacing:
        .08em;
}


.author-name {

    display:
        block;

    white-space:
        nowrap;

    color:
        #566d7e;

    font-size:
        9.5px;

    font-weight:
        700;
}


.author-divider {

    margin:
        0 3px;

    color:
        #c48f45;
}


/* ----------------------------------------------------------
   OPEN BUTTON
---------------------------------------------------------- */

.open-book-button {

    min-height:
        40px;

    padding:
        7px
        18px;
}


.open-book-button span {

    font-size:
        11px;
}


.open-book-button small {

    font-size:
        8.5px;
}


/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */

.library-footer {

    margin-top:
        10px;

    padding-bottom:
        2px;

    font-size:
        9px;
}


/* ----------------------------------------------------------
   DESKTOP HEIGHT OPTIMIZATION
---------------------------------------------------------- */

@media (
    min-width: 900px
)
and (
    max-height: 850px
) {

    .library-page {

        padding-top:
            12px;
    }


    .library-header {

        margin-bottom:
            10px;
    }


    .library-header h1 {

        font-size:
            36px;
    }


    .book-grid {

        grid-template-columns:
            minmax(
                230px,
                265px
            );
    }


    .book-cover-frame {

        max-height:
            365px;
    }


    .book-card {

        padding:
            8px
            8px
            11px;
    }


    .book-info {

        padding-top:
            7px;
    }


    .library-footer {

        margin-top:
            7px;
    }

}


/* ----------------------------------------------------------
   NARROW SCREEN
---------------------------------------------------------- */

@media (
    max-width: 640px
) {

    .library-page {

        width:
            calc(100% - 20px);

        padding-top:
            18px;
    }


    .library-header h1 {

        white-space:
            normal;

        font-size:
            27px;
    }


    .library-intro span {

        display:
            block;

        margin:
            2px 0 0;
    }


    .book-title {

        flex-wrap:
            wrap;

        white-space:
            normal;
    }


    .author-name {

        white-space:
            normal;
    }

}



/* ==========================================================
   BALANCED_SINGLE_BOOK_LIBRARY_V3
========================================================== */


/* ----------------------------------------------------------
   PAGE BALANCE
---------------------------------------------------------- */

.library-page {

    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    min-height:
        100vh;

    padding:
        14px 0
        12px;

    display:
        flex;

    flex-direction:
        column;
}


/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.library-header {

    max-width:
        980px;

    margin:
        0 auto
        16px;

    text-align:
        center;
}


.library-header h1 {

    margin:
        0;

    white-space:
        nowrap;

    font-size:
        clamp(
            30px,
            3vw,
            44px
        );

    line-height:
        1.05;
}


.library-subtitle {

    margin:
        5px 0
        0;

    color:
        #b87b31;

    font-size:
        15px;

    line-height:
        1.2;

    font-weight:
        700;

    letter-spacing:
        .01em;
}


.library-intro {

    margin:
        7px auto
        0;

    font-size:
        11.5px;

    line-height:
        1.35;
}


.library-intro span {

    display:
        inline;

    margin-left:
        7px;

    font-size:
        10.5px;
}


/* ----------------------------------------------------------
   GRID
---------------------------------------------------------- */

.book-grid {

    flex:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(
            290px,
            330px
        );

    justify-content:
        center;

    align-content:
        center;

    padding:
        2px 0
        8px;
}


/* ----------------------------------------------------------
   CARD
---------------------------------------------------------- */

.book-card {

    width:
        100%;

    padding:
        10px
        10px
        14px;

    border-radius:
        20px;
}


/* ----------------------------------------------------------
   COVER
---------------------------------------------------------- */

.book-cover-frame {

    width:
        100%;

    max-height:
        430px;

    aspect-ratio:
        3 / 4;

    border-radius:
        14px;
}


/* ----------------------------------------------------------
   INFO
---------------------------------------------------------- */

.book-info {

    padding:
        10px 6px
        0;
}


/* ----------------------------------------------------------
   TITLE — TWO SEPARATE LINES
---------------------------------------------------------- */

.book-title {

    margin:
        0 0
        7px !important;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        2px;

    white-space:
        normal;

    text-align:
        center;
}


.book-title-ky {

    display:
        block;

    width:
        100%;

    color:
        #173f64;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        14px;

    line-height:
        1.15;

    font-weight:
        800;
}


.book-title-en {

    display:
        block;

    width:
        100%;

    color:
        #61798b;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        10.5px;

    line-height:
        1.2;

    font-weight:
        650;
}


/* ----------------------------------------------------------
   AUTHOR — TWO SEPARATE LINES
---------------------------------------------------------- */

.book-author {

    margin:
        0 0
        9px !important;

    text-align:
        center;
}


.author-label {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #8c9aa4;

    font-size:
        7.5px !important;

    line-height:
        1.15;

    font-weight:
        700;

    letter-spacing:
        .08em;
}


.author-name-ky,
.author-name-en {

    display:
        block;

    width:
        100%;

    white-space:
        normal;

    line-height:
        1.2;
}


.author-name-ky {

    color:
        #526b7e;

    font-size:
        9px;

    font-weight:
        750;
}


.author-name-en {

    margin-top:
        1px;

    color:
        #748696;

    font-size:
        8.5px;

    font-weight:
        600;
}


/* ----------------------------------------------------------
   BUTTON
---------------------------------------------------------- */

.open-book-button {

    min-height:
        38px;

    padding:
        6px
        17px;
}


.open-book-button span {

    font-size:
        10.5px;
}


.open-book-button small {

    font-size:
        8px;
}


/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */

.library-footer {

    margin-top:
        7px;

    padding-bottom:
        1px;

    font-size:
        8.5px;
}


/* ----------------------------------------------------------
   LAPTOP HEIGHT OPTIMIZATION
---------------------------------------------------------- */

@media (
    min-width: 900px
)
and (
    max-height: 850px
) {

    .library-page {

        padding-top:
            10px;
    }


    .library-header {

        margin-bottom:
            10px;
    }


    .library-header h1 {

        font-size:
            34px;
    }


    .library-subtitle {

        font-size:
            13px;
    }


    .library-intro {

        margin-top:
            5px;

        font-size:
            10.5px;
    }


    .library-intro span {

        font-size:
            9.5px;
    }


    .book-grid {

        grid-template-columns:
            minmax(
                270px,
                300px
            );

        align-content:
            center;
    }


    .book-cover-frame {

        max-height:
            390px;
    }


    .book-card {

        padding:
            8px
            8px
            11px;
    }


    .book-info {

        padding-top:
            7px;
    }


    .library-footer {

        margin-top:
            4px;
    }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (
    max-width: 640px
) {

    .library-header h1 {

        white-space:
            normal;

        font-size:
            27px;
    }


    .library-subtitle {

        font-size:
            13px;
    }


    .library-intro span {

        display:
            block;

        margin:
            2px 0 0;
    }


    .book-grid {

        grid-template-columns:
            minmax(
                0,
                310px
            );

        align-content:
            start;
    }

}



/* ==========================================================
   LIBRARY_BILINGUAL_TYPOGRAPHY_V4
   Equal visual weight for Kyrgyz and English
========================================================== */


/* ==========================================================
   MAIN LIBRARY TITLES
========================================================== */

.library-header h1 {

    margin: 0;

    color: #143e67;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        34px !important;

    line-height:
        1.08;

    font-weight:
        700;

    white-space:
        nowrap;
}


/* English main subtitle now matches Kyrgyz visually */

.library-subtitle {

    margin:
        5px 0
        0;

    color: #143e67;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        28px !important;

    line-height:
        1.08;

    font-weight:
        700;

    letter-spacing:
        0;
}


/* ==========================================================
   INSTRUCTION LINE
========================================================== */

.library-intro {

    margin:
        8px auto
        0;

    color: #4e6a7e;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        13px !important;

    line-height:
        1.4;

    font-weight:
        600;
}


.library-intro span {

    display:
        inline;

    margin-left:
        10px;

    color: #4e6a7e;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        13px !important;

    line-height:
        1.4;

    font-weight:
        600;
}


/* ==========================================================
   BOOK TITLES
========================================================== */

.book-title {

    margin:
        0 0
        8px !important;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        2px;

    text-align:
        center;
}


/* Kyrgyz title */

.book-title-ky {

    display:
        block;

    width:
        100%;

    color: #173f64;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        14px !important;

    line-height:
        1.2;

    font-weight:
        700;
}


/* English title — same style and size */

.book-title-en {

    display:
        block;

    width:
        100%;

    color: #173f64;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        14px !important;

    line-height:
        1.2;

    font-weight:
        700;
}


/* ==========================================================
   AUTHOR
========================================================== */

.book-author {

    margin:
        0 0
        10px !important;

    text-align:
        center;
}


.author-label {

    display:
        block;

    margin-bottom:
        3px;

    color: #7c8e9a;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        8px !important;

    line-height:
        1.2;

    font-weight:
        700;

    letter-spacing:
        .09em;
}


/* Kyrgyz author */

.author-name-ky {

    display:
        block;

    width:
        100%;

    color: #536b7d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        10px !important;

    line-height:
        1.25;

    font-weight:
        700;
}


/* English author — same style and size */

.author-name-en {

    display:
        block;

    width:
        100%;

    margin-top:
        1px;

    color: #536b7d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        10px !important;

    line-height:
        1.25;

    font-weight:
        700;
}


/* ==========================================================
   BUTTON TYPOGRAPHY
========================================================== */

.open-book-button span {

    font-size:
        11px !important;

    font-weight:
        800;
}


.open-book-button small {

    margin-top:
        1px;

    font-size:
        11px !important;

    font-weight:
        800;
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (
    min-width: 900px
)
and (
    max-height: 850px
) {

    .library-header h1 {

        font-size:
            34px !important;
    }


    .library-subtitle {

        font-size:
            26px !important;
    }


    .library-intro,
    .library-intro span {

        font-size:
            12px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (
    max-width: 640px
) {

    .library-header h1 {

        white-space:
            normal;

        font-size:
            28px !important;
    }


    .library-subtitle {

        font-size:
            23px !important;
    }


    .library-intro {

        font-size:
            12px !important;
    }


    .library-intro span {

        display:
            block;

        margin:
            2px 0 0;

        font-size:
            12px !important;
    }

}