/* ==========================================================================
   Édito — EconoviaTech
   ========================================================================== */

.edito-header {
    background: linear-gradient(135deg, var(--eco-black) 0%, var(--eco-dark-purple, #302253) 100%);
    padding: 4rem 0 2rem;
    margin-top: 56px;
}

.edito-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.edito-header .lead {
    color: rgba(255,255,255,0.85);
}

.edito-byline {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: rgba(255,255,255,0.06);
    border-left: 3px solid var(--eco-green, #20bf55);
    border-radius: 0 6px 6px 0;
}

.edito-byline-avatar {
    width: 80px;
    height: 100px;
    border-radius: 6px;
    object-fit: cover;
    object-position: top center;
    border: 2px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.edito-byline-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.edito-byline-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}

.edito-byline-role {
    font-size: 0.8rem;
    color: var(--eco-light-green, #a6ffa1);
    font-weight: 600;
}

.edito-byline-title {
    font-size: 0.78rem;
    color: var(--eco-light-purple, #A794EC);
    font-weight: 500;
}

.edito-byline-meta {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* Article body */
.edito-body h2 {
    color: var(--eco-purple, #583e98);
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.edito-body p {
    line-height: 1.8;
    color: var(--eco-black, #08060e);
}

.edito-body .lead {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--eco-black, #08060e);
    border-left: 3px solid var(--eco-green, #20bf55);
    padding-left: 1rem;
    margin-bottom: 2rem;
}

/* Sidebar styles */
.edito-sidebar {
    background: #fff;
    border: 1px solid rgba(88, 62, 152, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
}

.edito-sidebar h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--eco-black, #08060e);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--eco-green, #20bf55);
}

.edito-sidebar ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.edito-sidebar li {
    margin-bottom: 0.5rem;
}

.edito-sidebar a {
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    transition: color 0.2s;
}

.edito-sidebar a:hover {
    color: var(--eco-purple, #583e98);
}

.edito-sidebar .badge-count {
    background: rgba(88, 62, 152, 0.1);
    color: var(--eco-purple, #583e98);
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.edito-sidebar .archive-year {
    font-weight: 600;
    color: var(--eco-black, #08060e);
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.edito-sidebar .archive-month {
    padding-left: 1rem;
    font-size: 0.85rem;
}

/* Index cards */
.edito-card {
    background: #fff;
    border: 1px solid rgba(88, 62, 152, 0.1);
    border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.edito-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(88, 62, 152, 0.12);
}

.edito-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--eco-black, #08060e);
    margin-bottom: 0.5rem;
}

.edito-card .edito-byline {
    background: rgba(88, 62, 152, 0.04);
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
}

.edito-card .edito-byline-name { color: var(--eco-black); }
.edito-card .edito-byline-meta { color: #6c757d; }
.edito-card .edito-byline-role { color: var(--eco-green); }
.edito-card .edito-byline-title { color: var(--eco-purple); }

.edito-card .edito-excerpt {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

.edito-kicker {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--eco-green, #20bf55);
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .edito-header h1 { font-size: 1.6rem; }
    .edito-byline-avatar { width: 60px; height: 75px; }
}