/*==========================================================================
COMPONENTS.CSS

 
 /*==========================================================================
01. SECTION HEADERS
==========================================================================*/



/*==========================================================================
02. KNOWLEDGE CARD - BASE
==========================================================================*/
.knowledge-feed-item,
.knowledge-feature-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:rgba(255,255,255,.70);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.22);
    transition:all .28s ease;
}
.knowledge-feed-item:hover,
.knowledge-feature-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(0,0,0,.08);
}

/*==========================================================================
03. KNOWLEDGE CARD - COMPACT
==========================================================================*/
.knowledge-feed-item.compact .p-3{
    padding:1rem!important;
}
.knowledge-feed-item.compact .knowledge-title{
    font-size:1.05rem;
}
.knowledge-feed-item.compact .knowledge-preview{
    font-size:.88rem;
}
.knowledge-title.compact{
        line-height:1.4;
        min-height:3.8rem;   /* reserves space for about 2 lines */
    }

    .knowledge-title.compact a{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        text-overflow:ellipsis;
    }


/*==========================================================================
04. KNOWLEDGE CARD - FEATURED
==========================================================================*/
.knowledge-feature-card{
    border-top-width:4px;
}
.knowledge-feature-card .knowledge-title{
    font-size:2rem;
}
.knowledge-feature-card .knowledge-preview{
    font-size:1rem;
}

/*==========================================================================
05. KNOWLEDGE CARD - META
==========================================================================*/



/*==========================================================================
06. KNOWLEDGE CARD - CATEGORY
==========================================================================*/



/*==========================================================================
07. TREND BADGES
==========================================================================*/
    .trend-badge{
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:4px 10px;
        border-radius:999px;
        font-size:.72rem;
        font-weight:700;
        line-height:1;
        white-space:nowrap;
        box-shadow: 0 3px 10px rgba(0,0,0,.10);
        transition:.25s ease;
    }

    .trend-badge i{
        font-size:.70rem;
    }

    .trend-badge:hover{
        transform:translateY(-1px);
    }

    /*------HOT------------*/
    .trend-hot{
        background:linear-gradient(
            135deg,
            #ff4d4f,
            #dc3545
        );
        color:#ffffff;
    }

    /*-------------------------
    TRENDING
    -------------------------*/
    .trend-trending{
        background:linear-gradient(
            135deg,
            #ffd54f,
            #ffb300
        );
        color:#2b2b2b;
    }

    /*------------FEATURED----------*/
    .trend-featured{
        background:linear-gradient( 135deg, #43cea2, #28a745
        );
        color:#ffffff;
    }


/*==========================================================================
08. USER COMPONENT
==========================================================================*/



/*==========================================================================
09. BUTTONS
==========================================================================*/



/*==========================================================================
10. SIDEBAR
==========================================================================*/



/*==========================================================================
11. MOBILE
==========================================================================*/



/*==========================================================================
12. DARK MODE
==========================================================================*/


/*==========================================================================
COMPACT KNOWLEDGE FEED
==========================================================================*/
.knowledge-feed-item{
    border-radius:18px;
    transition:.25s ease;
    overflow:hidden;

}

.knowledge-feed-item:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.knowledge-feed-item a{
    display:block;
}

.knowledge-title{
    font-size:1.05rem;
    font-weight:700;
    line-height:1.45;
    margin:0;
}

.knowledge-preview{
    color:#6c757d;
    font-size:.92rem;
    line-height:1.55;
    margin:0;

}



/*==================================================
TRENDING KNOWLEDGE (knowledge_card.php)
==================================================*/

.knowledge-feed-item.compact{
    border-left-width:4px !important;
}

.knowledge-feed-item.compact .p-3{
    padding:1rem !important;
}

.knowledge-feed-item.compact .knowledge-title{
    font-size:1.05rem;
    line-height:1.35;
    margin-bottom:.45rem;
    min-height:2.8rem;
}

.knowledge-feed-item.compact .knowledge-title a{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.knowledge-feed-item.compact .knowledge-preview{
    font-size:.88rem;
    line-height:1.55;
    margin-bottom:.75rem;
    min-height:3rem;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.knowledge-feed-item.compact .latest-category{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.35rem;
    margin-bottom:.45rem;
    font-size:.84rem;
}

.knowledge-feed-item.compact .latest-meta{
    margin-top:.45rem;
    padding-top:.60rem;
    border-top:1px solid rgba(0,0,0,.06);
}


/*==================================================
LATEST KNOWLEDGE CARD (latest_card.php)
==================================================*/
.latest-card{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    transition:.28s ease;
    border-left:4px solid transparent;

}

.latest-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 35px rgba(0,0,0,.08);

}

.latest-card .p-3{
    padding:1rem 1.15rem !important;

}


/*==============================
HEADER
==============================*/
.latest-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:.45rem;

}

.latest-type{
    display:flex;
    align-items:center;
    gap:.5rem;

}

.latest-type .badge{
    font-size:.72rem;
    padding:.35rem .8rem;
}

.latest-type i{
    font-size:.85rem;
    color:#6c757d;
}

/*==============================
TITLE
==============================*/
.latest-title{
    margin:.15rem 0 .45rem;
    font-size:1.28rem;
    line-height:1.35;
    font-weight:700;
}

.latest-title a{
    color:#212529;
    text-decoration:none;
    transition:.25s;
}

.latest-title a:hover{
    color:var(--bs-primary);

}


/*==============================
CATEGORY
==============================*/
.latest-category{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.35rem;
    margin-bottom:.55rem;
    font-size:.88rem;

}

.latest-category a{
    text-decoration:none;
    font-weight:500;
}


/*==============================
PREVIEW
==============================*/
.latest-preview{
    margin-bottom:.85rem;
    color:#6c757d;
    line-height:1.65;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

}

/*==============================
FOOTER
==============================*/
.latest-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:.75rem;
    border-top:1px solid rgba(0,0,0,.06);
}

.latest-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    font-size:.84rem;
    color:#6c757d;

}

.latest-meta span{
    display:flex;
    align-items:center;
    gap:4px;

}

.latest-meta i{
    opacity:.8;
}


/*==============================
READ BUTTON
==============================*/

.latest-read{

    color:var(--bs-primary);

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.latest-read:hover{

    letter-spacing:.3px;

}


/*==============================
MOBILE
==============================*/
@media (max-width:768px){
    .latest-title{ font-size:1.08rem; }

    .latest-header{ align-items:flex-start; gap:.4rem; }

    .latest-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:.65rem;
    }

    .latest-meta{ gap:12px; }

}


/*==========================================================================
FEATURED KNOWLEDGE
==========================================================================*/
.knowledge-feature-card{
    border-radius:26px;
    padding:40px;
    position:relative;
    overflow:hidden;
}

.knowledge-feature-card h2{
    line-height:1.3;
}

 
/*==========================================================================
SIDEBAR WIDGETS
==========================================================================*/
.sidebar-widget{
    border-radius:22px;
    padding:22px;
    margin-bottom:25px;
}

/*==========================================================================
STAT CARD
==========================================================================*/
.stat-card{
    border-radius:18px;
    padding:18px;
    text-align:center;
}

/*==========================================================================
BUTTONS
==========================================================================*/
.btn{
    transition:.25s;
}
.btn:hover{
    transform:translateY(-2px);
}

/*==========================================================================
MOBILE
==========================================================================*/
@media(max-width:768px){
.knowledge-feature-card{
padding:25px;
}
.knowledge-title{
font-size:1rem;
}

}

 

/* ==========================================================================
   UNIVERSAL KNOWLEDGE CARD
   ========================================================================== */
.knowledge-feed-item,
.knowledge-feature-card{
    border-radius:18px;
    overflow:hidden;
    transition:all .28s ease;
    background:rgba(255,255,255,.65);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.25);
}

.knowledge-feed-item:hover,
.knowledge-feature-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(0,0,0,.08);
}

/* ==========================================================================
   META
   ========================================================================== */
.knowledge-meta{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:center;
    font-size:.84rem;
    color:#6c757d;
}

.knowledge-meta span{
    display:flex;
    align-items:center;
    gap:5px;
}

/* ==========================================================================
   COMPACT LAYOUT
   ========================================================================== */
.knowledge-feed-item.compact{
    border-left-width:4px !important;
}

.knowledge-feed-item.compact .knowledge-title{
    font-size:1.05rem;
    margin-bottom:.6rem;
}

.knowledge-feed-item.compact .knowledge-preview{
    font-size:.88rem;
}

/* ==========================================================================
   DEFAULT LAYOUT
   ========================================================================== */
.knowledge-feed-item.default .knowledge-title{
    font-size:1.22rem;
}

.knowledge-feed-item.default .knowledge-preview{
    font-size:.93rem;
}

/* ==========================================================================
   BADGES
   ========================================================================== */
.knowledge-feed-item .badge{
    font-weight:600;
    letter-spacing:.02em;
}

/* ==========================================================================
   USER LINK
   ========================================================================== */
.user-link{
    font-weight:600;
    color:inherit;
    transition:.25s;
}

.user-link:hover{
    color:var(--bs-primary);
}

/* ==========================================================================
   EXPLORE BUTTON
   ========================================================================== */
.knowledge-read-more{
    font-weight:600;
    transition:.25s;
}

.knowledge-read-more:hover{
    letter-spacing:.03em;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media(max-width:991px){
    .knowledge-feature-card .knowledge-title{
        font-size:1.55rem;
    }
}

@media(max-width:768px){
    .knowledge-feed-item,
    .knowledge-feature-card{
        border-radius:14px;
    }
    .knowledge-feature-card{
        margin-bottom:1.25rem;
    }
    .knowledge-meta{
        gap:12px;
        font-size:.8rem;
    }
    .knowledge-title{
        font-size:1.08rem !important;
    }
    .knowledge-preview{
        font-size:.9rem !important;
    }
}

/* ==========================================================================
   DARK MODE SUPPORT
   ========================================================================== */
[data-bs-theme="dark"] .knowledge-feed-item,
[data-bs-theme="dark"] .knowledge-feature-card{
    background:rgba(35,35,35,.70);
    border-color:rgba(255,255,255,.08);
}

[data-bs-theme="dark"] .knowledge-preview,
[data-bs-theme="dark"] .section-subtitle,
[data-bs-theme="dark"] .knowledge-meta{
    color:#b8bcc2;

}

/* ==========================================
   SIDEBAR
========================================== */
.qamsa-sidebar .glass-panel{
margin-bottom:1.5rem;
}

.qamsa-sidebar h4{
letter-spacing:.02em;
}

.qamsa-sidebar .glass-panel:hover{
transform:translateY(-2px);
}

.qamsa-sidebar img{
transition:.25s;
}

.qamsa-sidebar img:hover{
transform:scale(1.02);

}
.qamsa-sidebar .btn{
transition:.25s;
}
.qamsa-sidebar .btn:hover{
transform:translateY(-2px);
}