/*
 * css/custom/sections/category.css
 * Sezione categorie
 */

.gp-category-section{
    padding     : 0 100px 0 0;
    margin-left : 50px;
}


/* ==========================================
   CARD
========================================== */
.gp-category-card{
    position      : relative;
    display       : block;
    width         : 100%;
    height        : 320px;
    min-height    : 320px;
    border-radius : 40px;
    overflow      : hidden;
    transition    : transform .25s ease,
                    box-shadow .25s ease;
}


/* bordo interno distanziato */
.gp-category-card::after{
    content        : '';
    position       : absolute;
    inset          : 10px;
    border         : 2px solid transparent;
    border-radius  : 32px;
    pointer-events : none;
    opacity        : 0;
    transition     :
        opacity .30s ease,
        border-color .30s ease,
        transform .30s ease;
}


/* hover + selezione */

.gp-category-card:hover::after,
.gp-category-card.is-active::after{
    opacity      : 1;
    border-color : var(--gp-blue-light);
    border-color : var(--gp-aqua);
    transform    : scale(.985);
}



/* ==========================================
   IMMAGINE
========================================== */

.gp-category-image-link{
    position : absolute;
    inset    : 0;
    z-index  : 0;
}

.gp-category-image-link img{
    position   : absolute;
    inset      : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition :
        transform .8s cubic-bezier(.22,1,.36,1);
}

/* zoom */
.gp-category-card:hover .gp-category-image-link img,
.gp-category-card.is-active .gp-category-image-link img{
    transform : scale(1.5);
}


/* ==========================================
   OVERLAY VETRO
========================================== */
.gp-category-glass{
    position                : absolute;
    inset                   : 0;
    z-index                 : 1;
    background              : var(--gp-blue-dark);
    opacity                 : .60;
    backdrop-filter         : blur(1px);
    -webkit-backdrop-filter : blur(1px);
    pointer-events          : none;
    transition :
        opacity .30s ease;
}


/* hover + selezionata */
.gp-category-card:hover .gp-category-glass,
.gp-category-card.is-active .gp-category-glass{
    opacity : .35;
}


/* ==========================================
   CONTENUTO
========================================== */
.gp-category-content{
    position         : absolute;
    inset            : 0;
    z-index          : 2;
    display          : flex;
    flex-direction   : column;
    justify-content  : flex-start;
    padding-left     : 34px;
    padding-top      : 18px;
}


/* ==========================================
   TITOLO
========================================== */

.gp-category-header{
    margin-bottom : 6px;
}

.gp-category-title{
    margin : 0;
}

.gp-category-title-link{
    color           : #fff;
    text-decoration : none;
    font-family     : 'Kondolar',sans-serif;
    font-size       : 32px;
    font-weight     : 800;
    line-height     : 1.1;
    transition      :
        color .25s ease;
}

/* hover + attiva */

.gp-category-card:hover .gp-category-title-link,
.gp-category-card.is-active .gp-category-title-link{

    color : var(--gp-accent);
}



/* ==========================================
   SOTTOCATEGORIE
========================================== */

.gp-subcategory-section{
    margin-top : 0px;
}

.gp-subcategory-list{
    list-style : none;
    margin     : 0;
    padding    : 0;
    display    : flex;
    flex-direction : column;
    gap         : 3px;
}

.gp-subcategory-item{
    margin : 0;

}

.gp-subcategory-link{
    color           : #fff;
    text-decoration : none;
    font-family     : 'Kondolar',sans-serif;
    font-size       : 18px;
    font-weight     : 800;
    transition      :
        color .25s ease;
}

.gp-subcategory-link:hover{
    color : var(--gp-accent);
}




/* ==========================================
   PAGINAZIONE
========================================== */
.gp-category-pagination{
    display         : flex;
    justify-content : center;
    align-items     : center;
    gap             : 14px;
    margin-top      : 28px;
    position        : relative;
    z-index         : 10;
}

/* bullet base */
.gp-category-pagination .swiper-pagination-bullet{

    width           : 12px;
    height          : 12px;
    
    margin          : 0 !important;
    border-radius   : 50%;

    /** background      : transparent; */ 
    background      : var(--gp-blue-dark);

    border          : 1px solid var(--gp-blue-dark);  

    opacity         : .8;
    cursor          : pointer;

    transition      :
        transform .25s ease,
        opacity .25s ease,
        background-color .25s ease,
        border-color .25s ease;

}

/* hover */
.gp-category-pagination .swiper-pagination-bullet:hover{
    opacity         : 1;
    transform       : scale(1.40);

    border-color    : var(--gp-accent);

}

/* bullet attivo */
.gp-category-pagination .swiper-pagination-bullet-active{
    background      : var(--gp-blue-dark);
    border-color    : var(--gp-accent);
    opacity         : 1;
    transform       : scale(1.6);
}

/* focus tastiera */
.gp-category-pagination .swiper-pagination-bullet:focus-visible{
    outline        : 2px solid var(--gp-accent);
    outline-offset : 4px;
}






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

@media(max-width:768px){

    .gp-category-card{

        height        : 220px;
        min-height    : 220px;

        border-radius : 24px;
    }

    .gp-category-card::after{
        border-radius : 18px;
    }

    .gp-category-title-link{
        font-size : 24px;
    }

    .gp-subcategory-link{
        font-size : 15px;
    }
}