/* ———- ARTICLE LIST LAYOUT ———- */
.article-list-container {
display: flex;
gap: 40px;
max-width: 1060px;
margin: 40px auto;
background: transparent;
color: #ffffff;
}

/* SIDEBAR */
.article-sidebar {
flex: 0 0 280px;
background: rgba(62, 0, 80, 0.58);
border: 1px solid var(–line, rgba(255,47,196,.65));
border-radius: 12px;
padding: 24px 0;
max-height: 600px;
overflow-y: auto;
}

.article-sidebar-title {
font-family: ‘Montserrat’, sans-serif;
font-weight: 900;
font-size: 1.2rem;
text-transform: uppercase;
color: var(–gold, #F6A91A);
padding: 0 20px 16px;
border-bottom: 1px solid rgba(255,47,196,.3);
margin: 0 0 8px;
}

.article-tabs {
list-style: none;
padding: 0;
margin: 0;
}

.article-tab {
padding: 14px 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 0.2s;
display: flex;
flex-direction: column;
gap: 2px;
}

.article-tab:hover {
background: rgba(255, 255, 255, 0.05);
}

.article-tab.active {
background: rgba(255, 189, 19, 0.12);
border-left: 3px solid var(–gold, #F6A91A);
}

.article-title {
font-family: ‘Montserrat’, sans-serif;
font-weight: 700;
font-size: 0.95rem;
color: #ffffff;
}

.article-date {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}

/* CONTENT AREA */
.article-content-area {
flex: 1;
background: rgba(55, 0, 75, 0.6);
border: 1px solid rgba(255,47,196,.65);
border-radius: 12px;
padding: 32px 36px;
min-height: 400px;
}

.article-content-panel {
display: none;
}

.article-content-panel.active {
display: block;
animation: fadeSlide 0.3s ease forwards;
}

.article-content-title {
font-family: ‘Georgia’, serif;
font-weight: 900;
font-size: clamp(1.8rem, 2.5vw, 2.6rem);
color: #ffffff;
margin: 0 0 16px;
}

.article-content-body {
font-family: ‘Montserrat’, sans-serif;
font-size: 1rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.9);
}

.article-content-body p {
margin: 0 0 18px;
}

.article-download-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(–gold, #F6A91A);
color: #21002f !important;
border-radius: 6px;
font-weight: 700;
text-decoration: none;
transition: background 0.2s;
}

.article-download-btn:hover {
background: #ffb526;
}

@keyframes fadeSlide {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE */
@media (max-width: 980px) {
.article-list-container {
flex-direction: column;
}
.article-sidebar {
flex: none;
max-height: 300px;
}
.article-content-area {
padding: 24px 20px;
}
}