/* ============================================================
   HOMEPAGE-SPECIFIC STYLES
   Loaded only on index.php
   ============================================================ */

/* --- Hero Section --- */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    margin-bottom: 20px;
}
.hero-card {
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.hero-card-image { display: block; overflow: hidden; flex: 1; }
.hero-card-image img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    transition: transform 0.4s;
}
.hero-card:hover .hero-card-image img { transform: scale(1.03); }
.hero-card-body { padding: 20px; }
.hero-card-category {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-accent);
    margin-bottom: 10px;
}
.hero-card-title {
    font-family: var(--font-main);
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 12px;
}
.hero-card-title a { color: var(--color-primary); }
.hero-card-title a:hover { color: var(--color-accent); }
.hero-card-excerpt {
    font-size: 15px;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 12px;
}
.hero-card-meta { font-size: 13px; color: var(--color-text-muted); display: flex; gap: 8px; align-items: center; }

/* Hero Side Cards — ✅ FIXED: Vertical layout (image upar poori, neeche title) */
.hero-side { display: flex; flex-direction: column; gap: 20px; }
.hero-side-card {
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    flex: 1;
    transition: transform 0.2s;
}
.hero-side-card:hover { transform: translateY(-2px); }
.hero-side-image { width: 100%; flex-shrink: 0; overflow: hidden; aspect-ratio: 16 / 9; display: block; }
.hero-side-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-side-body { padding: 14px; display: flex; flex-direction: column; justify-content: flex-start; }
.hero-side-category {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-accent);
    margin-bottom: 6px;
}
.hero-side-title { font-size: 15px; line-height: 1.4; }
.hero-side-title a { color: var(--color-primary); }
.hero-side-title a:hover { color: var(--color-accent); }

/* Hero Bottom Row */
.hero-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* --- Category Horizontal Layout --- */
.cat-horizontal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.cat-horizontal-main .news-card-large .news-card-image img { height: 280px; }
.cat-horizontal-list { display: flex; flex-direction: column; gap: 12px; }

/* --- Newsletter Box --- */
.newsletter-box {
    background: linear-gradient(135deg, var(--color-primary) 0%, #16213e 100%);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
    color: #fff;
}
.newsletter-sidebar { margin-top: 0; }
.newsletter-full {
    padding: 48px 32px;
    margin: 40px 0;
}
.newsletter-icon { font-size: 36px; margin-bottom: 12px; }
.newsletter-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
    color: #fff;
}
.newsletter-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 20px;
    line-height: 1.5;
}
.newsletter-input-group { display: flex; gap: 0; }
.newsletter-input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 6px 0 0 6px;
    font-size: 14px;
    outline: none;
}
.newsletter-btn {
    padding: 12px 24px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.newsletter-btn:hover { background: var(--color-accent-dark); }
.newsletter-message { margin-top: 10px; font-size: 13px; min-height: 20px; }

/* --- Video Section Placeholder --- */
.video-section {
    background: var(--color-dark-bg);
    border-radius: var(--radius);
    padding: 40px;
    text-align: center;
    color: var(--color-dark-text);
    margin-bottom: 32px;
}
.video-section h2 { color: #fff; font-size: 22px; margin-bottom: 12px; }
.video-section p { font-size: 14px; }

/* --- Category Section Spacing --- */
.category-section { scroll-margin-top: 80px; }

/* --- Responsive --- */
@media (max-width: 992px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-side { flex-direction: row; }
    .hero-side-card { flex-direction: column; }
    .hero-side-image { width: 100%; height: 150px; }
    .hero-bottom { grid-template-columns: repeat(2, 1fr); }
    .cat-horizontal-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .hero-card-title { font-size: 22px; }
    .hero-card-image img { min-height: 220px; }
    .hero-side { flex-direction: column; }
    .hero-side-card { flex-direction: column; }
    .hero-side-image { width: 100%; height: 150px; }
    .hero-bottom { grid-template-columns: 1fr; }
    .newsletter-input-group { flex-direction: column; gap: 10px; }
    .newsletter-input { border-radius: 6px; }
    .newsletter-btn { border-radius: 6px; }
}
/* ============================================
   ✅ HERO BOTTOM — Full Images (koi cropping nahi)
   ============================================ */
.hero-bottom .news-card-image {
    height: auto !important;
    display: block;
    overflow: hidden;
}
.hero-bottom .news-card-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}
/* ============================================
   ✅ 4-COLUMN GRID — 4 cards per line (responsive)
   ============================================ */
.news-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 1200px) { .news-grid-4 { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 992px)  { .news-grid-4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 768px)  { .news-grid-4 { grid-template-columns: 1fr !important; } }