/* ======================================
ARTICLES PAGE LAYOUT
====================================== */

.knowledge-main{
background:var(--color-light);
padding:60px 0;
}

/* MAIN GRID */

.knowledge-layout{

display:grid;
grid-template-columns:260px 1fr;
gap:50px;

align-items:start;

}

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

.knowledge-sidebar{

background:white;
padding:25px;

border-radius:10px;

box-shadow:0 6px 20px rgba(0,0,0,0.08);

}

.knowledge-sidebar h3{
margin-bottom:15px;
}

.knowledge-sidebar ul li{
margin-bottom:10px;
}

.knowledge-sidebar a{
color:var(--color-primary);
font-size:14px;
}

.knowledge-sidebar a:hover{
text-decoration:underline;
}

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

.knowledge-content h2{
margin-bottom:25px;
}

/* ARTICLE GRID */

.article-grid{

display:grid;

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

gap:30px;

margin-bottom:60px;

}

/* ARTICLE CARD */

.article-card{

background:white;

padding:25px;

border-radius:10px;

box-shadow:0 6px 18px rgba(0,0,0,0.08);

transition:.25s ease;

}

.article-card:hover{

transform:translateY(-5px);

box-shadow:0 12px 26px rgba(0,0,0,0.12);

}

.article-card h3{
margin-bottom:8px;
}

.article-card p{
color:var(--color-muted);
margin-bottom:12px;
}

/* LABEL */

.coming-label{

display:inline-block;

background:#0b1e3c;
color:white;

font-size:12px;

padding:5px 10px;

border-radius:5px;

}

/* ======================================
KNOWLEDGE MESSAGE
====================================== */

.knowledge-message{

max-width:700px;

}

.knowledge-message h2{
margin-bottom:15px;
}

.knowledge-message ul{
margin:20px 0;
}

.knowledge-message li{
margin-bottom:8px;
}

/* ======================================
SEARCH BAR
====================================== */

.knowledge-search{

max-width:420px;

margin:30px auto 0;

display:flex;

background:white;

border-radius:8px;

padding:10px 14px;

box-shadow:0 4px 12px rgba(0,0,0,0.15);

}

.knowledge-search input{

border:none;
outline:none;

width:100%;

font-size:14px;

}

.knowledge-search:hover{

box-shadow:0 6px 18px rgba(0,0,0,0.18);

}

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

@media (max-width:900px){

.knowledge-layout{
grid-template-columns:1fr;
}

.article-grid{
grid-template-columns:1fr;
}

.knowledge-sidebar{
margin-bottom:30px;
}

}