/* Εξασφάλιση σωστής διάταξης και αποστάσεων στο Category Blog Layout */
.com-content-category-blog .blog-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px; /* Ξεκόλλημα μεταξύ όλων των καρτών σε mobile */
    margin-bottom: 40px;
}

/* Desktop διάταξη: Διαχωρισμός και παράθεση καρτών */
@media (min-width: 992px) {
    .com-content-category-blog .blog-items {
        grid-template-columns: repeat(12, 1fr); /* Σύστημα 12 στηλών */
    }

    /* Το πρώτο/κύριο άρθρο καταλαμβάνει όλο το πλάτος (12 στήλες) */
    .com-content-category-blog .blog-items > .blog-item:nth-child(1) {
        grid-column: span 12;
        margin-bottom: 15px;
    }

    /* Τα επόμενα εισαγωγικά άρθρα παρατάσσονται δίπλα-δίπλα (6 στήλες το καθένα) */
    .com-content-category-blog .blog-items > .blog-item:not(:nth-child(1)) {
        grid-column: span 6;
    }
}

/* Διαμόρφωση της αυτόνομης δομής της κάθε κάρτας άρθρου */
.com-content-category-blog .blog-item {
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.com-content-category-blog .blog-item:hover {
    transform: translateY(-4px);
}

/* ==========================================================================
   ΔΙΟΡΘΩΣΗ ΙΕΡΑΡΧΙΑΣ: ΜΙΚΡΕΜΑ ΤΙΤΛΩΝ ΣΤΑ MODULES (Sidebar, Footer, κλπ)
   ========================================================================== */
.sidebar-right .module-title, 
.sidebar-left .module-title,
aside .module-title,
.page .module-title,
footer .module-title {
    font-size: 16px !important; /* Αισθητά μικρότερο από το h2/h3 των άρθρων */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--news-line);
    position: relative;
}

/* Μοντέρνα δημοσιογραφική γραμμή (accent) κάτω από τον τίτλο του module */
.sidebar-right .module-title::after,
.sidebar-left .module-title::after,
aside .module-title::after,
.page .module-title::after {
    content: "";
    position: absolute;
    bottom: -2px; /* Κάθεται ακριβώς πάνω στην υπάρχουσα border-bottom */
    left: 0;
    width: 60px; /* Μικρή, κομψή έγχρωμη γραμμή */
    height: 2px;
    background-color: var(--news-menu-accent); /* Το κόκκινο της ταυτότητάς σας */
}

/* Light Mode (Εργοστασιακές ρυθμίσεις βασισμένες στο δικό σας αρχείο) */
html, html[data-theme="light"] {
    --card-bg-custom: #ffffff;
    --card-border-custom: #e5e7eb;
    --card-shadow-custom: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Dark Mode (Οι μεταβλητές αλλάζουν δυναμικά όταν γυρνάει ο διακόπτης) */
html[data-theme="dark"] {
    --card-bg-custom: var(--news-panel);     /* #19232c */
    --card-border-custom: var(--news-line);  /* #37434e */
    --card-shadow-custom: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* Εφαρμογή των δυναμικών μεταβλητών στις κάρτες (Εξαλείφει το 'αχνό' εφέ) */
.com-content-category-blog .blog-item,
.com-content-category-blog__items .blog-item {
    background-color: var(--card-bg-custom) !important;
    border: 1px solid var(--card-border-custom) !important;
    box-shadow: var(--card-shadow-custom) !important;
    color: var(--news-ink) !important;
}

/* Εξασφάλιση ότι οι τίτλοι και οι σύνδεσμοι μέσα στις κάρτες έχουν 100% αντίθεση */
.com-content-category-blog .blog-item h1,
.com-content-category-blog .blog-item h2,
.com-content-category-blog .blog-item h3,
.com-content-category-blog .blog-item a,
.com-content-category-blog .blog-item .page-header h2 a {
    color: var(--news-ink) !important;
    opacity: 1 !important;
}

/* Hover εφέ για τους συνδέσμους των άρθρων ανάλογα με το mode */
.com-content-category-blog .blog-item a:hover {
    color: var(--news-link-hover) !important;
}

/* ==========================================================================
   2. CUSTOM MODULE BLOCK ΜΕ GRADIENT & ΕΙΚΟΝΑ ΦΟΝΤΟΥ (Απομονωμένο Opacity)
   ========================================================================== */
.opacity-bg-row {
    position: relative;
    overflow: hidden;
    padding: 60px 24px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: var(--card-shadow-custom);
}

.opacity-bg-row::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: opacity 0.4s ease;
}

.opacity-bg-row > * { position: relative; z-index: 2; }

html[data-theme="dark"] .opacity-bg-row a,
html[data-theme="dark"] .opacity-bg-row h2,
html[data-theme="dark"] .opacity-bg-row h3 {
    color: #ffffff !important;
}

/* --- ΔΙΑΦΟΡΕΤΙΚΑ GRADIENTS ΑΝΑ ΚΑΤΗΓΟΡΙΑ ΚΑΙ MODE --- */
html[data-theme="light"] .opacity-bg-row.bg-politics::before {
    opacity: 0.15;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(254, 226, 226, 0.85) 100%), url('/images/politics-bg.jpg');
}
html[data-theme="dark"] .opacity-bg-row.bg-politics::before {
    opacity: 0.4;
    background-image: linear-gradient(135deg, rgba(11, 17, 23, 0.85) 0%, rgba(143, 29, 29, 0.7) 100%), url('/images/politics-bg.jpg');
}

html[data-theme="light"] .opacity-bg-row.bg-sports::before {
    opacity: 0.15;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(220, 252, 231, 0.85) 100%), url('/images/sports-bg.jpg');
}
html[data-theme="dark"] .opacity-bg-row.bg-sports::before {
    opacity: 0.4;
    background-image: linear-gradient(135deg, rgba(11, 17, 23, 0.9) 0%, rgba(21, 128, 61, 0.7) 100%), url('/images/sports-bg.jpg');
}