/*==================================================
CRESCIENDO EN GRACIA
LIBRARY MOBILE
Versão 2.0
==================================================*/


/*==================================================
TABLET + MOBILE
==================================================*/

@media screen and (max-width:768px){


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

.library-page{

    padding:40px 0 60px;

}

.library-page .container{

    width:min(100% - 28px, 100%);

    padding:0;

}

.library-layout{

    display:flex;

    flex-direction:column;

    gap:32px;

}

.library-sidebar{

    position:static;

    width:100%;

    top:auto;

    gap:18px;

}

.library-page-content{

    width:100%;

    min-width:0;

}

.library-toolbar{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 0 24px;

    padding:0;

}

.library-results{

    width:100%;

    text-align:center;

    font-size:.95rem;

}


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

.library-sidebar{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.library-sidebar-card{

    width:100%;

    padding:20px;

    border-radius:18px;

    box-shadow:

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

}

.library-sidebar-card:hover{

    transform:none;

}

.library-sidebar-card h3{

    margin:0 0 16px;

    padding:0;

    text-align:center;

    font-size:1.15rem;

    line-height:1.2;

}

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

.library-sidebar input{

    width:100%;

    height:54px;

    padding:0 18px;

    font-size:.95rem;

    border-radius:14px;

}

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

.library-sidebar select{

    width:100%;

    height:54px;

    padding:0 18px;

    font-size:.95rem;

    border-radius:14px;

}

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

.library-categories{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.category-chip{

    justify-content:center;

    padding:14px 18px;

    border-radius:14px;

    font-size:.90rem;

}

.category-chip:hover{

    transform:none;

}


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

.library-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:18px 16px;

    justify-content:stretch;

    align-items:start;

}


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

.library-categories{

    display:flex;

    flex-direction:row;

    flex-wrap:nowrap;

    gap:12px;

    overflow-x:auto;

    overflow-y:hidden;

    padding-bottom:6px;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

}

.library-categories::-webkit-scrollbar{

    display:none;

}

.library-categories{

    scrollbar-width:none;

}

.category-chip{

    flex:0 0 auto;
	
	width:auto;

    justify-content:center;

    white-space:nowrap;

    min-height:42px;

    padding:0 18px;

    border-radius:999px;

    font-size:.84rem;

    font-weight:600;
	

}

.category-chip::before{

    display:none;

}

.category-chip.active{

    transform:none;

}


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

.library-hero{

    padding:28px 0 30px;

    overflow:hidden;

}

.library-hero::before{

    opacity:.65;

}

.library-hero::after{

    width:850px;

    height:260px;

    bottom:-120px;

}

.library-hero-grid{

    min-height:auto;

    display:flex;

    justify-content:center;

    align-items:center;

}

.library-hero-content{

    max-width:100%;

    padding:0;

}

.library-hero-badge{

    margin-bottom:14px;

    padding:7px 18px;

    font-size:.68rem;

    letter-spacing:.10em;

}

.library-hero-title{

    max-width:100%;

    font-size:2rem;

    line-height:1.12;

    letter-spacing:-.03em;

    margin:0;

}

.library-hero-title span{

    display:block;

}

.library-hero-description{

    max-width:100%;

    margin:18px auto 0;

    font-size:.95rem;

    line-height:1.75;
	
	display:none;


}



/*==================================================
COUNT
==================================================*/

.library-toolbar{

    justify-content:flex-start;

    margin-bottom:22px;

}

.library-results{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    font-size:.90rem;

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

}

.library-results strong{

    color:var(--color-primary);

}

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

.library-grid{

    grid-template-columns:repeat(2,1fr);

    gap:20px 14px;

}


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

.library-card{

    width:100%;

    border-radius:18px;

    overflow:hidden;

}

.library-card:hover{

    transform:none;

}

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

.library-cover{

    padding:10px 10px 6px;

}

.library-cover img{

    width:100%;

    max-width:150px;

    margin:auto;

}

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

.library-card-content{

    padding:14px 12px 18px;

    gap:10px;

}

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

.library-category{

    font-size:.62rem;

    padding:5px 10px;

}

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

.library-title{

    min-height:auto;

    font-size:.90rem;

    line-height:1.45;

}

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

.library-link{

    width:100%;

    min-height:44px;

    margin-top:6px;

}


/*==================================================
FILTERS ACCORDION
==================================================*/

.library-filters{

    width:100%;

}

.library-filters-toggle{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    border:none;

    border-radius:18px;

    background:#fff;

    cursor:pointer;

    font-size:1rem;

    font-weight:700;

    color:var(--color-text);

    box-shadow:0 8px 24px rgba(14,78,166,.08);
	
	transition:
    background .30s ease,
    color .30s ease,
    box-shadow .30s ease,
    transform .25s ease;

}

.library-filters-toggle:active{

    transform:scale(.98);

}

.library-filters-icon{

    transition:transform .35s ease;

}

.library-sidebar{

    overflow:hidden;

    max-height:0;

    opacity:0;

    transition:

        max-height .45s ease,

        opacity .30s ease,

        margin-top .30s ease;

}

.library-filters.open .library-sidebar{

    max-height:900px;

    opacity:1;

    margin-top:16px;

}

.library-filters.open .library-filters-icon{

    transform:rotate(180deg);

}


.library-filters-label{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:4px;

}

.library-filters-label strong{

    font-size:1rem;

    font-weight:700;

}

.library-filters-label small{

    font-size:.82rem;

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

}



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

.library-filters.open .library-filters-toggle{

    background:var(--color-primary);

    color:#fff;

    box-shadow:0 12px 30px rgba(14,78,166,.25);

}

.library-filters.open .library-filters-toggle small{

    color:rgba(255,255,255,.80);

}

.library-filters.open .library-filters-icon{

    color:#fff;

}

.library-filters.open .library-filters-icon svg{

    stroke:currentColor;

}



}


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

@media screen and (max-width:480px){

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

    .library-page .container{

        width:min(100% - 20px, 100%);

    }


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

    .library-hero{

        padding:24px 0 28px;

    }

    .library-hero-badge{

        margin-bottom:12px;

        padding:6px 14px;

        font-size:.62rem;

    }

    .library-hero-title{

        font-size:1.75rem;

        line-height:1.10;

    }


    /*==================================================
    FILTROS
    ==================================================*/

    .library-filters-toggle{

        padding:16px 18px;

        border-radius:16px;

    }

    .library-filters-label strong{

        font-size:.95rem;

    }

    .library-filters-label small{

        font-size:.76rem;

    }


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

    .library-sidebar-card{

        padding:16px;

        border-radius:16px;

    }

    .library-sidebar-card h3{

        font-size:1.05rem;

        margin-bottom:14px;

    }


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

    .library-sidebar input,
    .library-sidebar select{

        height:50px;

        padding:0 15px;

        font-size:.90rem;

    }


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

    .library-categories{

        gap:8px;

    }

    .category-chip{

        min-height:40px;

        padding:0 15px;

        font-size:.80rem;

    }


    /*==================================================
    RESULTADOS
    ==================================================*/

    .library-results{

        font-size:.82rem;

    }


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

    .library-grid{

        gap:16px 10px;

    }


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

    .library-card{

        border-radius:16px;

    }


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

    .library-cover{

        padding:8px 8px 5px;

    }

    .library-cover img{

        max-width:125px;

    }


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

    .library-card-content{

        padding:12px 10px 15px;

        gap:8px;

    }


    /*==================================================
    CATEGORIA DO CARD
    ==================================================*/

    .library-category{

        font-size:.56rem;

        padding:4px 8px;

    }


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

    .library-title{

        font-size:.82rem;

        line-height:1.35;

    }


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

    .library-link{

        min-height:40px;

        margin-top:4px;

        border-radius:10px;

        font-size:.80rem;

    }

}


@media (min-width: 769px){

    .library-filters-toggle{
        display:none;
    }

}