/* assets/css/img.css 
 * Spartan Image Architecture - Course Page Focus
 */

/* 1. MAIN ARTICLE IMAGES */
#roadmap-content-body img {
    max-width: 100% !important; /* Prevents horizontal scrolling */
    height: auto !important;
    display: block !important;
    margin: 40px auto !important; /* Centers the image with breathing room */
    
    /* Premium Styling */
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    
    /* Smooth entrance */
    transition: transform 0.3s ease !important;
}

/* 2. HOVER EFFECT (Optional: for technical detail check) */
#roadmap-content-body img:hover {
    transform: scale(1.01);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
}

/* 3. CAPTION SUPPORT (If you use <figcaption> or similar) */
#roadmap-content-body em {
    display: block;
    text-align: center;
    font-size: 13px;
    color: #64748b;
    margin-top: -30px;
    margin-bottom: 40px;
}

/* 🛡️ DARK THEME SUPPORT */
@media (prefers-color-scheme: dark) {
    .dark-theme #roadmap-content-body img {
        border-color: #334155 !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
        opacity: 0.9; /* Reduces glare in dark mode */
    }
}