/* ==========================================================================
   1. CSS VARIABLES & THEME SETUP (Bootstrap 5 Style)
   ========================================================================== */
:root {
    /* -- 1.1. Core Colors -- */
    --bs-primary: #158ee1;
    --bs-primary-rgb: 21, 142, 225;
    --bs-dark-blue: #020024; 
    --bs-white: #ffffff;
    --bs-white-rgb: 255, 255, 255;
    
    /* -- 1.2. Body & Text Theme Colors -- */
    --bs-body-bg: #f0f8ff;
    --bs-body-color: #333333;
    --bs-heading-color: #154A6E;
    --bs-secondary-color: #666; 
    --bs-subtitle-color: #4299e1;

    /* -- 1.3. Component Colors & Properties -- */
    --bs-tertiary-bg: #ffffff;
    --bs-card-bg: rgba(var(--bs-white-rgb), 0.9);
    --bs-border-color: #e0e0e0;
    --bs-shadow-color: rgba(0, 0, 0, 0.1);

    /* -- 1.4. General Properties -- */
    --bs-border-radius: 0.5rem;
    --bs-transition-speed: 0.3s;
}

/* Dark Theme Overrides */
[data-bs-theme="dark"] {
    --bs-body-bg: #0b1c31;
    --bs-body-color: #e0e0e0;
    --bs-heading-color: #61dafb;
    --bs-secondary-color: #a0a0a0;
    --bs-subtitle-color: #e6f0ff;
    
    --bs-tertiary-bg: #1e1e1e;
    --bs-card-bg: rgba(42, 42, 42, 0.9);
    --bs-border-color: #444444;
    --bs-shadow-color: rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   2. GLOBAL & BODY STYLES
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color var(--bs-transition-speed), color var(--bs-transition-speed);
}


/* ==========================================================================
   3. ANIMATED BACKGROUND STYLES
   ========================================================================== */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.shape {
    position: absolute;
    opacity: 0.2;
    filter: blur(50px);
    border-radius: 50%;
    animation: pulse 10s infinite ease-in-out;
    transition: background-color 0.5s ease;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.1); opacity: 0.3; }
    100% { transform: scale(1); opacity: 0.2; }
}
.dots {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-size: 20px 20px;
    opacity: 0.2;
    transition: background 0.5s ease;
}
.shape-1 { background-color: #63b3ed; }
.shape-2 { background-color: #4299e1; }
.shape-3 { background-color: #2b6cb0; }
.dots { 
    background-image: radial-gradient(circle, rgba(44, 82, 130, 0.1) 1px, transparent 1px);
}
[data-bs-theme="dark"] .shape-1 { background-color: #1a5c89; }
[data-bs-theme="dark"] .shape-2 { background-color: #216d9a; }
[data-bs-theme="dark"] .shape-3 { background-color: #2b709e; }
[data-bs-theme="dark"] .dots {
    background-image: radial-gradient(circle, rgba(230, 240, 255, 0.1) 1px, transparent 1px);
}


/* ==========================================================================
   4. LAYOUT CONTAINERS
   ========================================================================== */
.site-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.main-content {
    flex-grow: 1;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, var(--bs-dark-blue), var(--bs-heading-color), var(--bs-primary));
    padding: 1rem 2rem;
    color: var(--bs-white);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.footer {
    background-color: var(--bs-dark-blue);
    color: var(--bs-white);
    text-align: center;
    padding: 1.5rem;
}


/* ==========================================================================
   5. HEADER COMPONENTS
   ========================================================================== */
.logo a {
    font-weight: bold;
    font-size: 1.25rem;
    color: var(--bs-white);
    text-decoration: none;
}
.header-controls {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.main-menu {
    display: flex;
    gap: 2rem;

}
.main-menu a {
    color: var(--bs-white);
    text-decoration: none;
    font-weight: 500;
    position: relative;
}
.main-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--bs-white);
    transition: width var(--bs-transition-speed) ease;
}
.main-menu a:hover::after {
    width: 100%;
}
.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}
.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: var(--bs-transition-speed);
    border-radius: 26px;
}
[data-bs-theme="dark"] .slider {
    background-color: var(--bs-border-color); /* Un gri închis, consistent cu tema */
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: var(--bs-transition-speed);
    border-radius: 50%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>');
    background-repeat: no-repeat;
    background-position: center;
}
/* Stilizare suplimentară pentru comutator în dark mode */

input:checked + .slider {
    background-color: var(--bs-border-color);
}
input:checked + .slider:before {
    transform: translateX(24px);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>');
}
.hamburger {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    z-index: 1001;
}
.hamburger .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--bs-white);
    transition: all var(--bs-transition-speed) ease-in-out;
}


/* ==========================================================================
   6. PAGE-SPECIFIC: JOURNALS LISTING
   ========================================================================== */
.journals-page-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1;
}
.page-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.page-header h1 {
    font-size: 2.8rem;
    color: var(--bs-heading-color);
    margin-bottom: 0.5rem;
}
.page-header p {
    font-size: 1.1rem;
    color: var(--bs-subtitle-color);
    margin-bottom: 2rem;
    max-width: 600px;
    margin: 0 auto 2rem auto;
}
.search-bar form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
}
.search-bar input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-radius: 4px 0 0 4px;
    outline: none;
    transition: border-color var(--bs-transition-speed);
}
.search-bar input[type="text"]:focus {
    border-color: var(--bs-primary);
}
.search-bar button {
    padding: 0.75rem 1.5rem;
    border: none;
    background-color: var(--bs-primary);
    color: var(--bs-white);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: background-color var(--bs-transition-speed);
}
.search-bar button:hover {
    background-color: var(--bs-heading-color);
}
.controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.filters-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0;
}
.filter-label {
    font-weight: bold;
    color: var(--bs-body-color);
    margin-right: 1rem;
}
.filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--bs-transition-speed);
}
.filter-btn:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
.filter-btn.active {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    border-color: var(--bs-primary);
}
.results-info {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    font-weight: 500;
}
.journals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}
.journal-card {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 4px 6px var(--bs-shadow-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--bs-transition-speed) ease, box-shadow var(--bs-transition-speed) ease;
}
.journal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 7px 15px var(--bs-shadow-color);
}
.card-image-wrapper {
    width: 100%;
    height: 220px;
    background-color: #eee;
}
.journal-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-body {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.card-title {
    font-size: 1.2rem;
    color: var(--bs-heading-color);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.card-meta {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    font-family: monospace;
    margin-bottom: 1rem;
}
.card-actions {
    margin-top: auto;
    text-align: right;
}
.btn {
    display: inline-block;
    background: var(--bs-primary);
    color: var(--bs-white) !important;
    padding: 0.6rem 1.2rem;
    border-radius: var(--bs-border-radius);
    text-decoration: none;
    transition: background-color var(--bs-transition-speed);
}
.btn:hover {
    background: var(--bs-heading-color);
}
.no-journals-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background-color: var(--bs-tertiary-bg);
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.no-journals-message h3 {
    color: var(--bs-heading-color);
    margin-bottom: 0.5rem;
}
.no-journals-message p {
    color: var(--bs-secondary-color);
}


/* ==========================================================================
   7. PAGE-SPECIFIC: SINGLE JOURNAL, ARTICLE & ISSUE PAGES
   ========================================================================== */
.journal-page-container, .article-page-grid {
    width: 95%;
    max-width: 1400px;
    margin: 2rem auto;
    display: grid;
    gap: 2rem;
    align-items: flex-start;
}
.journal-page-container {
    grid-template-areas: "sidebar content";
    grid-template-columns: 25% 1fr;
}
.article-page-grid {
    grid-template-areas: "main sidebar";
    grid-template-columns: 1fr 25%;
}
.journal-sidebar, .journal-content, .article-main-content, .article-sidebar, .issue-content {
    background: var(--bs-tertiary-bg);
    padding: 2rem;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem var(--bs-shadow-color);
    transition: background-color var(--bs-transition-speed);
}
.article-main-content { grid-area: main; }
.article-sidebar { 
    grid-area: sidebar; 
    position: sticky;
    top: 80px;
    padding: 1.5rem;
    border: 1px solid var(--bs-border-color);
}
.journal-sidebar h2, .article-sidebar h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--bs-heading-color);
    border-bottom: 2px solid var(--bs-primary);
    padding-bottom: 0.5rem;
}
.journal-sidebar ul {
    list-style: none;
    padding: 0;
}
.journal-sidebar ul li a {
    display: block;
    text-decoration: none;
    color: var(--bs-body-color);
    padding: 0.75rem 0.5rem;
    border-radius: calc(var(--bs-border-radius) / 2);
    transition: background-color var(--bs-transition-speed), color var(--bs-transition-speed);
    font-weight: 500;
}
.journal-sidebar ul li a:hover {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}
.journal-article-header {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 2rem;
}
.journal-article-header img.cover {
    width: 180px;
    height: auto;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 4px 10px var(--bs-shadow-color);
    flex-shrink: 0;
}
.journal-article-header .details h1, .article-content h1.article-title {
    font-size: 2.2rem;
    color: var(--bs-heading-color);
    margin-bottom: 0.5rem;
}
.journal-article-header .details .issn, .article-content .article-institution {
    font-size: 1rem;
    color: var(--bs-secondary-color);
    font-style: italic;
}
.breadcrumb {
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}
.breadcrumb a {
    color: var(--bs-primary);
    text-decoration: none;
}
.article-item {
    display: block;
    padding: 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.article-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem var(--bs-shadow-color);
    border-color: var(--bs-primary);
}
.article-item h3 {
    font-size: 1.2rem;
    color: var(--bs-heading-color);
    margin-bottom: 0.5rem;
}
.article-item .authors {
    font-size: 0.95rem;
    color: var(--bs-body-color);
    font-style: italic;
}


/* ==========================================================================
   8. RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 992px) {
    .journal-page-container {
        grid-template-areas: "content" "sidebar";
        grid-template-columns: 1fr;
    }
    .article-page-grid {
        grid-template-areas: "main" "sidebar";
        grid-template-columns: 1fr;
    }
    .article-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .header { padding: 1rem; }
    .header-controls { gap: 1rem; }
    .main-menu {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        background-color: rgba(2, 0, 36, 0.95);
        backdrop-filter: blur(5px);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 1.5rem;
		z-index: 1000;
    }
    .main-menu.is-active { display: flex; }
    .hamburger { display: block; }
    .hamburger.is-active .bar:nth-child(2) { opacity: 0; }
    .hamburger.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .journal-card {
        flex-basis: 99%;
        max-width: 99%;
    }
    .journal-article-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .journal-article-header img.cover {
        width: 80%;
        max-width: 250px;
    }
    .journal-sidebar, .journal-content {
        padding: 1.5rem;
    }
}
/* ==========================================================================
   9. ARTICLE PAGE STYLES (NEW & ENHANCED)
   ========================================================================== */

/* -- 9.1. General Card Enhancement -- */
.article-card-enhanced {
    padding: 1.5rem 2.5rem; /* More spacious padding */
}

/* -- 9.2. Breadcrumbs -- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 1.5rem;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb .separator svg {
    color: var(--bs-secondary-color);
    opacity: 0.7;
}

/* -- 9.3. Article Header & Title -- */
.article-header {
    margin-bottom: 2rem;
}
.article-title {
    font-size: 2.1rem; /* Dimensiune redusă pentru o mai bună lizibilitate */
    line-height: 1.3;
    text-transform: none; /* Elimină orice capitalizare forțată */
    font-weight: 600; /* Puțin mai puțin bold decât un h1 standard */
}

/* -- 9.4. Enhanced Author List -- */
.author-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2.5rem;
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}
.author-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem 0;
    gap: 1rem;
}
.author-item:not(:last-child) {
    border-bottom: 1px solid var(--bs-border-color);
}
.author-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.author-name {
    font-size: 1.1rem;
    color: var(--bs-body-color);
    font-weight: 600;
}
.author-institution {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}
.author-institution svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.author-email {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    background-color: transparent;
    color: var(--bs-primary);
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: all var(--bs-transition-speed) ease;
    font-size: 0.85rem;
}
.author-email:hover {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    border-color: var(--bs-primary);
}

/* -- 9.5. Main Content Sections -- */
.article-content-body {
    padding-top: 1.5rem;
}
.article-section {
    margin-bottom: 2.5rem;
}
.article-section h3 {
    font-size: 1.3rem;
    color: var(--bs-heading-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bs-primary);
    display: inline-block;
}
.article-section p {
    text-align: justify;
}

/* -- 9.6. Keywords as Tags -- */
.keywords-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.keyword-tag {
    display: inline-block;
    background-color: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 20px;
    font-size: 0.85rem;
    font-style: italic;
    transition: all var(--bs-transition-speed) ease;
}
.keyword-tag:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* -- 9.7. Interactive Sidebar Actions -- */
.article-actions-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}
.article-actions-list li {
    margin-bottom: 0.75rem;
}
.article-actions-list a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    text-decoration: none;
    color: var(--bs-body-color);
    background-color: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: all var(--bs-transition-speed) ease;
    font-weight: 500;
}
.article-actions-list a svg {
    color: var(--bs-primary);
    transition: color var(--bs-transition-speed) ease;
}
.article-actions-list a:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
    transform: translateX(5px);
}
.article-actions-list a:hover svg {
    color: var(--bs-white);
}

.btn-full-width {
    display: block;
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   10. ISSUE/ARCHIVE PAGE STYLES (NEW & ENHANCED)
   ========================================================================== */

/* -- 10.1. Sidebar Enhancements -- */
.journal-sidebar h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.journal-sidebar ul li a.active {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    font-weight: bold;
}
.journal-sidebar ul li a.active:hover {
    background-color: var(--bs-heading-color);
}

/* -- 10.2. Enhanced Issue Header -- */
.issue-header-enhanced {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.issue-cover {
    flex: 0 0 200px; /* Baza flex: 200px lățime, nu crește, nu se micșorează */
}
.issue-cover img {
    width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 25px var(--bs-shadow-color);
}
.issue-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.issue-main-title {
    font-size: 2.4rem;
    color: var(--bs-heading-color);
    margin-bottom: 0.5rem;
}
.issue-meta {
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}
.issue-details .btn {
    margin-top: auto; /* Aliniază butonul la bază */
    max-width: 250px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* -- 10.3. Table of Contents Section -- */
.toc-section .section-title {
    font-size: 1.8rem;
    color: var(--bs-heading-color);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bs-primary);
    display: inline-block;
}

/* -- 10.4. Enhanced Article List -- */
.article-list-enhanced {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Spațiu mic între articole */
}
/* Modificăm stilul existent .article-item pentru noul design */
.article-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem; /* Mai mult padding vertical */
}
.article-item .article-info {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.article-item h3 {
    margin-bottom: 0.25rem;
    line-height: 1.3;
}
.article-counter {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bs-primary);
    padding-top: 0.1rem; /* Aliniere fină cu titlul */
}
.article-chevron {
    color: var(--bs-border-color);
    transition: transform var(--bs-transition-speed) ease, color var(--bs-transition-speed) ease;
}
.article-item:hover .article-chevron {
    transform: translateX(5px);
    color: var(--bs-primary);
}
.no-articles-message {
    background-color: var(--bs-body-bg);
    padding: 2rem;
    text-align: center;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-secondary-color);
}