/* ==========================================================================
   HOME PAGE (front-page.php) — पहले यह सारा CSS inline style="" में था।
   ========================================================================== */

.main-layout-grid-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 25px;
    align-items: flex-start !important;
}

.main-content-area {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* --- SECTION 1: हीरो टॉप स्टोरी स्प्लिट --- */
.hero-split-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    background: #ffffff;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.lead-card-media-holder {
    position: relative;
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden;
    border-radius: 4px;
}
.lead-card-media-holder img { width: 100% !important; height: 100% !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; display: block !important; }

.badge-cat-label {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #e10600;
    color: #ffffff;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 2px;
    text-transform: uppercase;
}

.lead-card-content-box { margin-top: 15px; }

.lead-story-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 10px 0;
}
.lead-story-title a { color: #111111; text-decoration: none; }

.lead-story-meta { font-size: 13px; color: #64748b; }
.lead-story-meta .meta-author-by { margin-left: 10px; }

.lead-story-excerpt {
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
    margin: 10px 0 0 0;
}

.hero-vertical-list-column { display: flex; flex-direction: column; gap: 12px; }

.compact-row-article-card {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
    display: flex;
    align-items: center !important;
    gap: 12px;
}

.compact-thumb-frame {
    width: 96px !important;
    height: auto;
    aspect-ratio: 16 / 9 !important;
    align-self: center !important;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}
.compact-thumb-frame img { width: 100% !important; height: 100% !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; display: block !important; }

.compact-story-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.compact-story-title a { color: #1e293b; text-decoration: none; }

.compact-date-meta { font-size: 11px; color: #94a3b8; }

/* --- SECTION 2: 4-कैटेगरी सेक्शन मैट्रिक्स ग्रिड --- */
.category-sections-matrix-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    align-items: stretch;
}

.category-box-column-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    min-height: 350px;
}

.category-block-header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #e10600;
    padding-bottom: 8px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
    margin-top: 0;
}
.cat-title-text { color: #111111; }

.view-more-tag-link { font-size: 12px; color: #64748b; text-decoration: none; font-weight: 600; }

.category-block-posts-stack { display: flex; flex-direction: column; gap: 12px; }

.cat-block-inline-list-item {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #f1f5f9;
    align-items: center;
}

.cat-item-thumb {
    width: 80px !important;
    height: auto;
    aspect-ratio: 16 / 9 !important;
    align-self: center !important;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}
.cat-item-thumb img { width: 100% !important; height: 100% !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; display: block !important; }
.cat-item-thumb .thumb-placeholder-empty { width: 100%; height: 100%; background: #f1f5f9; }

.cat-item-title { font-size: 13px; font-weight: 700; margin: 0 0 4px 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-item-title a { color: #1e293b; text-decoration: none; }

.cat-item-date { font-size: 11px; color: #94a3b8; }

/* --- चौड़ाई भर का AD बैनर स्लॉट (970x90) --- */
.mid-ad-section { margin-top: 15px; margin-bottom: 25px; }
.magazine-mid-ad-row { width: 100%; }

/* --- Category rows (टेक/खेल + ऑटोमोबाइल/मनोरंजन) ke beech ad band --- */
.home-mid-categories-ad-section { margin: 25px 0; width: 100%; }

/* --- वेब स्टोरीज़ ke neeche home in-feed ad --- */
.home-infeed-ad-section { margin: 15px 0 25px; width: 100%; }
.ad-placeholder-frame {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #94a3b8;
    font-weight: bold;
    width: 100%;
    border-radius: 6px;
}

/* --- रेस्पॉन्सिव: टैबलेट/मोबाइल पर कॉलम स्टैक --- */
@media (max-width: 991px) {
    .main-layout-grid-wrapper { flex-direction: column !important; }
    .main-content-area,
    .main-sidebar-area-premium { width: 100% !important; }
    .hero-split-grid { grid-template-columns: 1fr !important; }
    .category-sections-matrix-grid { grid-template-columns: 1fr !important; }

    /* Hero (TOP STORY) image ko mobile par sahi 16:9 me fix kiya.
       Pehle inline style se fixed height:340px lagi thi jo chhote phones
       (iPhone SE) aur bade phones (Pro Max) dono par galat dikhti thi,
       kyunki width alag-alag hone par bhi height wahi rehti thi.
       Ab aspect-ratio use kar rahe hain jo har mobile width par khud
       16:9 crop banata hai. */
    .lead-card-media-holder {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
    .lead-card-media-holder img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

.home-infeed-ad-section { margin: 20px auto; }