/*==================================================
HERO PREMIUM
==================================================*/

.library-hero{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:48px 0 42px;

    text-align:center;

    isolation:isolate;

    background:

    linear-gradient(
        90deg,

        rgba(218,230,255,.95) 0%,

        rgba(244,248,255,.92) 18%,

        rgba(255,255,255,1) 50%,

        rgba(244,248,255,.92) 82%,

        rgba(218,230,255,.95) 100%

    ),

    linear-gradient(
        180deg,

        #f6f9ff 0%,

        #ffffff 100%

    );

}

/*==================================================
GLOW HERO
==================================================*/

.library-hero::before{

    content:"";

    position:absolute;

    inset:-120px;

    background:

        radial-gradient(

            circle at 25% 50%,

            rgba(40,110,255,.12) 0%,

            transparent 42%

        ),

        radial-gradient(

            circle at 75% 50%,

            rgba(40,110,255,.12) 0%,

            transparent 42%

        );

    z-index:0;

}

background:

linear-gradient(

180deg,

rgba(84,132,255,.08),

transparent 28%

);

.library-hero::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-180px;

    transform:translateX(-50%);

    width:1200px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(

        ellipse at center,

        rgba(255,255,255,.95) 0%,

        rgba(255,255,255,.65) 35%,

        rgba(255,255,255,.15) 65%,

        rgba(255,255,255,0) 100%

    );

    pointer-events:none;

    z-index:1;

}

/*==================================================
LINHA PREMIUM
==================================================*/

.library-hero-border{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:min(1180px,92%);

    height:2px;

    border-radius:999px;

    background:linear-gradient(

        90deg,

        transparent 0%,

        rgba(14,78,166,.12) 18%,

        rgba(14,78,166,.45) 50%,

        rgba(14,78,166,.12) 82%,

        transparent 100%

    );

    z-index:5;

}

/*==================================================
TRANSIÇÃO HERO
==================================================*/

.library-hero::before,
.library-hero::after{

    pointer-events:none;

}

.library-hero::after{

    box-shadow:

        0 80px 120px rgba(255,255,255,.95);

}

.library-hero-grid{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    min-height:180px;

}

.library-hero-content{

    position:relative;

    z-index:3;

    max-width:760px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

}


/*==================================================
MOCKUPS HERO
==================================================*/

.hero-book{

    position:absolute;

    transition:transform .35s ease;

}

.hero-book img{

    display:block;

    width:100%;

    height:auto;

    filter:

        drop-shadow(0 18px 35px rgba(0,0,0,.18));

}

.hero-book-front{

    width:220px;

    right:40px;

    top:10px;

    z-index:2;

    transform:rotate(-4deg);

}

.hero-book-back{

    width:190px;

    left:55px;

    bottom:0;

    z-index:1;

    opacity:.92;

    transform:rotate(7deg);

}

.library-hero-showcase:hover .hero-book-front{

    transform:

        rotate(-2deg)

        translateY(-6px);

}

.library-hero-showcase:hover .hero-book-back{

    transform:

        rotate(5deg)

        translateY(6px);

}

/*==================================================
TIPOGRAFIA HERO
==================================================*/

.library-hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 16px;

    margin-bottom:16px;

    border-radius:999px;

    border:1px solid rgba(14,78,166,.12);

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

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    color:#0e4ea6;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.library-hero-title{

    margin:0;

    max-width:760px;

    color:#16233c;

    font-size:2.3rem;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-.03em;

    text-wrap:balance;

    text-shadow:

        0 0 18px rgba(255,255,255,.65);

}

.library-hero-title span{

    color:#0e4ea6;

}

.library-hero-description{

    max-width:620px;

    margin:18px auto 0;

    color:#6b7280;

    font-size:1rem;

    line-height:1.75;

}

/*==================================================
SECTION
==================================================*/

.library-page{

    position:relative;

    padding:25px 0 35px;

    background:var(--color-background);

}


/*==================================================
CONTAINER
==================================================*/

.library-page .container{

    max-width:1680px;

    width:100%;

    margin:0 auto;

    padding:0 32px;

}

/*==================================================
LAYOUT
==================================================*/

.library-layout{

    display:grid;

    grid-template-columns:250px 1fr;

    gap:28px;

    align-items:start;

}

/*==================================================
CONTENT
==================================================*/

.library-page-content{

    min-width:0;

    width:100%;

}


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

.library-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill, minmax(180px, 180px));

    justify-content:start;

    gap:20px;

    align-content:start;

}

/*==================================================
TOOLBAR
==================================================*/

.library-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

    padding-bottom:20px;


}

.library-results{

    font-size:.95rem;

    color:var(--color-text-light);

}

.library-results strong{

    color:var(--color-primary);

    font-size:1.05rem;

    font-weight:700;

}

/*==================================================
SIDEBAR
==================================================*/

.library-sidebar{

    position:sticky;

    top:120px;

    display:flex;

    flex-direction:column;

    gap:24px;

}

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

.library-sidebar-card{

    padding:24px;
	
	background:#ffffff;

    border:1px solid rgba(14,78,166,.08);

    box-shadow:

        0 8px 24px rgba(14,78,166,.08);

    transition:

        all .30s ease;

}

.library-sidebar-card:hover{

    transform:translateY(-2px);

    box-shadow:

        0 16px 36px rgba(14,78,166,.14);

}

.library-sidebar-card h3{

   margin:0 0 20px;

    padding-left:24px;
	
	padding-top:9px;

    color:#14213d;

    font-size:1.15rem;

    font-weight:700;

    line-height:1.2;

}


/*==================================================
INPUT
==================================================*/

.library-sidebar input{

    width:100%;

    height:52px;

    padding:0 18px;

    border:1px solid rgba(14,78,166,.10);

    border-radius:14px;

    background:#f8faff;

    color:#1c2740;

    font-size:.95rem;

    transition:all .30s ease;

}

.library-sidebar input::placeholder{

    color:#8b96a8;

}

.library-sidebar input:hover{

    border-color:rgba(14,78,166,.20);

}

.library-sidebar input:focus{

    outline:none;

    background:#ffffff;

    border-color:#0e4ea6;

    box-shadow:

        0 0 0 4px rgba(14,78,166,.10);

}

/*==================================================
SELECT
==================================================*/

.library-sidebar select{

    width:100%;

    height:52px;

    padding:0 18px;

    border:1px solid rgba(14,78,166,.10);

    border-radius:14px;

    background:#f8faff;

    color:#1c2740;

    font-size:.95rem;

    cursor:pointer;

    transition:all .30s ease;

}

.library-sidebar select:hover{

    border-color:rgba(14,78,166,.20);

}

.library-sidebar select:focus{

    outline:none;

    background:#ffffff;

    border-color:#0e4ea6;

    box-shadow:

        0 0 0 4px rgba(14,78,166,.10);

}

/*==================================================
CATEGORIAS
==================================================*/

.library-categories{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.category-chip{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    padding:14px 18px;

    border:1px solid transparent;

    border-radius:14px;

    background:transparent;

    color:var(--color-text-light);

    font-size:.95rem;

    font-weight:500;

    cursor:pointer;

    transition:all .30s ease;

}

.category-chip::before{

    content:"";

    width:10px;

    height:10px;

    margin-right:12px;

    border-radius:50%;

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

    transition:.30s ease;

}

.category-chip:hover{

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

    border-color:rgba(255,255,255,.08);

    color:var(--color-title);

    transform:translateX(4px);

}

.category-chip:hover::before{

    border-color:var(--color-primary);

}

.category-chip.active{

    background:rgba(14,78,166,.12);

    border-color:rgba(14,78,166,.30);

    color:var(--color-primary);

    font-weight:600;

}

.category-chip.active::before{

    background:var(--color-primary);

    border-color:var(--color-primary);

}

/*==================================================
CARDS
==================================================*/

.library-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    width:100%;

    background:#ffffff;

    border:1px solid rgba(38,56,89,.10);

    border-radius:12px;

    transition:.30s ease;

    height:100%;

}

.library-card:hover{

    transform:translateY(-4px);

    border-color:rgba(34,88,170,.25);

    box-shadow:

        0 10px 28px rgba(0,0,0,.10);

}

/*==================================================
CAPA
==================================================*/

.library-cover{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:8px 8px 4px;

    background:#f8f9fc;

    border-bottom:1px solid rgba(30,55,90,.06);

}

.library-cover img{

    width:100%;

    max-width:125px;

    height:auto;

    display:block;

    object-fit:contain;

    transition:.25s ease;

}

.library-card:hover .library-cover img{

    transform:scale(1.02);

}

/*==================================================
BADGE
==================================================*/

.library-badge{

    position:absolute;

    top:18px;

    left:18px;

    padding:8px 14px;

    border-radius:999px;

    background:var(--color-primary);

    color:#fff;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

}

/*==================================================
CONTEÚDO DO CARD
==================================================*/

.library-card-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:10px;

    padding:14px 14px 18px;

}

/*==================================================
CATEGORIA
==================================================*/

.library-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 12px;

    border-radius:999px;

    background:#eef3fb;

    border:1px solid #d9e5f7;

    color:#2d5fb6;

    font-size:.60rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin:0;

}

/*==================================================
TÍTULO
==================================================*/

.library-title{

    margin:0;

    color:#1c2740;

    font-size:.88rem;

    font-weight:700;

    line-height:1.45;

    min-height:42px;

}

/*==================================================
BOTÃO
==================================================*/

.library-link{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    min-height:44px;

    padding:0 18px;

    margin-top:8px;

    border-radius:10px;

    background:var(--color-primary);

    color:#fff;

    font-size:.88rem;

    font-weight:700;

    text-decoration:none;

    transition:

        background .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}

.library-link:hover{

    background:#0E4EA6;

    color:#fff;

    transform:translateY(-1px);

    box-shadow:0 6px 14px rgba(14,78,166,.18);

}


/*==================================================
PAGINAÇÃO DA BIBLIOTECA
==================================================*/

.library-pagination{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    width:100%;

    margin:42px 0 10px;

    padding:0;

}


/*==================================================
BOTÕES DA PAGINAÇÃO
==================================================*/

.library-pagination-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-width:42px;

    height:42px;

    padding:0 14px;

    border:1px solid rgba(14,78,166,.12);

    border-radius:10px;

    background:#ffffff;

    color:#53627a;

    font-family:inherit;

    font-size:.84rem;

    font-weight:600;

    line-height:1;

    cursor:pointer;

    box-shadow:

        0 3px 10px rgba(14,78,166,.05);

    transition:

        background .25s ease,

        border-color .25s ease,

        color .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}


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

.library-pagination-button:hover:not(:disabled){

    border-color:rgba(14,78,166,.28);

    background:#f5f8fe;

    color:#0e4ea6;

    transform:translateY(-1px);

    box-shadow:

        0 6px 16px rgba(14,78,166,.10);

}


/*==================================================
PÁGINA ATIVA
==================================================*/

.library-pagination-number.active{

    border-color:#0e4ea6;

    background:#0e4ea6;

    color:#ffffff;

    box-shadow:

        0 6px 16px rgba(14,78,166,.18);

}


/*==================================================
PÁGINA ATIVA — HOVER
==================================================*/

.library-pagination-number.active:hover{

    border-color:#0e4ea6;

    background:#0e4ea6;

    color:#ffffff;

    transform:none;

}


/*==================================================
ANTERIOR / SIGUIENTE
==================================================*/

.library-pagination-prev,
.library-pagination-next{

    min-width:44px;

    color:#0e4ea6;

    font-weight:700;

}


/*==================================================
SETAS
==================================================*/

.library-pagination-prev span:first-child,
.library-pagination-next span:last-child{

    font-size:1.25rem;

    line-height:.8;

    font-weight:400;

}


/*==================================================
DESABILITADO
==================================================*/

.library-pagination-button:disabled{

    opacity:.38;

    cursor:not-allowed;

    background:#f7f8fb;

    border-color:rgba(14,78,166,.08);

    box-shadow:none;

    transform:none;

}


/*==================================================
FOCUS ACESSÍVEL
==================================================*/

.library-pagination-button:focus-visible{

    outline:none;

    border-color:#0e4ea6;

    box-shadow:

        0 0 0 4px rgba(14,78,166,.10);

}


/*==================================================
RESPONSIVIDADE — PAGINAÇÃO
==================================================*/

@media (max-width:600px){

    .library-pagination{

        gap:6px;

        margin:32px 0 8px;

    }

    .library-pagination-button{

        min-width:40px;

        height:40px;

        padding:0 11px;

        border-radius:9px;

        font-size:.80rem;

    }

    .library-pagination-prev,
    .library-pagination-next{

        padding:0 10px;

    }

    .library-pagination-prev span:nth-child(2),
    .library-pagination-next span:first-child{

        display:none;

    }

}