/* --- GLOBAL LAYOUT FIX (इसे सबसे ऊपर रखें) --- */
.v-container { 
    max-width: 1200px; 
    margin: 30px auto; 
    padding: 0 15px; 
    width: 100%;
}

.home-layout { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 25px; 
}

/* मोबाइल के लिए */
@media (max-width: 768px) {
    .home-layout { 
        display: flex; 
        flex-direction: column; 
    }
}

/* --- SINGLE POST PAGE CLEANUP --- */
.v-fix-container { 
    max-width: 800px; 
    margin: 40px auto; 
    padding: 0 20px; 
}

.v-fix-card { 
    background: #fff; 
    padding: 40px; 
    border-radius: 12px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    border: 1px solid #eee;
}

/* Dark Mode support for Single Page */
body.dark-mode .v-fix-card { 
    background: #1e1e1e; 
    color: #e0e0e0; 
    border-color: #333; 
}

/* --- SEARCH & ARCHIVE COMMON STYLES --- */
.article-card { 
    display: flex; 
    gap: 20px; 
    background: #fff; 
    border-radius: 12px; 
    padding: 20px; 
    margin-bottom: 25px; 
    border: 1px solid #eee; 
}

@media (max-width: 768px) {
    .article-card { flex-direction: column; }
    .v-fix-card { padding: 20px; }
}

/* --- ARCHIVE & SEARCH PAGES --- */
.v-container { max-width: 1200px; margin: 30px auto; padding: 0 15px; }
.archive-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }

.archive-header { 
    background: white; 
    padding: 20px; 
    border-radius: 10px; 
    border-left: 5px solid #e63946; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

.archive-title { margin: 0; font-size: 24px; font-weight: 800; color: #1d3557; text-transform: uppercase; }

/* Dark Mode for Search/Archive */
body.dark-mode .archive-header { background: #1e1e1e; border-color: #333; }
body.dark-mode .archive-title { color: white; }

/* --- 404 PAGE STYLE --- */
.error-page-wrapper { display: flex; justify-content: center; align-items: center; min-height: 60vh; background: #f4f5f7; padding: 20px; }
.error-card { background: #fff; padding: 50px 30px; border-radius: 15px; text-align: center; max-width: 600px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee; }
.error-code { font-size: 100px; font-weight: 900; color: #e63946; line-height: 1; margin-bottom: 10px; }

body.dark-mode .error-page-wrapper { background: #121212; }
body.dark-mode .error-card { background: #1e1e1e; border-color: #333; }

/* --- HOME & SLIDER STYLES --- */
.hero-slider-wrap { position: relative; height: 450px; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.slide-single { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; display: none; }
.slide-single.active { opacity: 1; z-index: 1; display: block; }
.slide-single img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.slide-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); color: white; z-index: 2; }

.inline-search-box { display: flex; gap: 10px; margin-bottom: 20px; }
.inline-search-box input { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 5px; outline: none; }
.inline-search-box button { background: #1d3557; color: white; border: none; padding: 0 20px; border-radius: 5px; cursor: pointer; font-weight: 700; }

@media (max-width: 768px) {
    .hero-slider-wrap { height: 250px; }
    .mobile-paged-view .area-slider { display: none; }
}   

/* --- 1. MAIN CONTAINER (पेज को बीच में लाने के लिए) --- */
.v-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
}

/* --- 2. GRID LAYOUT (लेफ्ट और राइट को बांटने के लिए) --- */
.home-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* लेफ्ट बड़ा, राइट छोटा */
    gap: 30px;
    width: 100%;
}

/* --- 3. GRID AREAS (कौन सी चीज़ कहाँ दिखेगी) --- */
.area-slider {
    grid-column: 1;
    grid-row: 1;
}

.area-news {
    grid-column: 1;
    grid-row: 2;
}

.area-sidebar {
    grid-column: 2;
    grid-row: 1 / span 2; /* साइडबार ऊपर से नीचे तक */
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* --- 4. MOBILE RESPONSIVE (मोबाइल पर एक के नीचे एक) --- */
@media (max-width: 768px) {
    .home-layout {
        display: flex;
        flex-direction: column;
    }
    
    /* मोबाइल फ्लो: स्लाइडर -> साइडबार -> न्यूज़ */
    .area-slider { order: 1; }
    .area-sidebar { order: 2; }
    .area-news { order: 3; }
    
    /* पेज 2 पर स्लाइडर छिपाना */
    .mobile-paged-view .area-slider { display: none; }
    .mobile-paged-view .area-news { order: 1; }
    .mobile-paged-view .area-sidebar { order: 2; margin-top: 20px; }
}