/* ============================================================
   DATA BREAKDOWNS SECTION (The Story Grid) - FIXED CODE
   ============================================================ */

.data-breakdowns-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

/* Grid Layout - FIX #1: Responsive Grid */
.story-grid {
    display: grid;
    /* Yeh line grid ko flexible banati hai. Yeh koshish karega ke har item kam se kam 320px ka ho
       aur agar jagah ho to columns ko barabar fill kar dega. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* Base Card Style */
.story-card {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}


/* Article Card - FIX #2: Text Visibility */
.article-card {
    position: relative; /* Zaroori hai taake text ko image ke oopar laaya ja sake */
    min-height: 280px; /* Card ki ek munasib height set karein */
}

.article-card .card-image-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Dark gradient overlay taake text parha ja sake */
.article-card .card-image-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

.article-card .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.article-card:hover .card-image {
    transform: scale(1.05);
}

/* Content ko image ke oopar rakhna */
.article-card .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 2; /* Gradient ke oopar dikhane ke liye */
    box-sizing: border-box; /* Padding ko width mein shamil karne ke liye */
}

/* Text ka color safed (white) karna */
.article-card .category-tag {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff; /* White text color */
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.article-card .card-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff; /* White text color */
    margin: 0 0 15px;
    line-height: 1.4;
    min-height: 0; /* Ab min-height ki zaroorat nahi */
}

.article-card .card-title a {
    text-decoration: none;
    color: inherit; /* Parent se color lega (yani ke safed) */
}

.article-card .read-more-link {
    font-size: 13px;
    font-weight: 700;
    color: #fff; /* White text color */
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.article-card .read-more-link:hover {
    opacity: 1;
}


/* Highlight Cards (Quote & Stat) - In mein koi tabdeeli nahi */
.highlight-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    min-height: 280px;
}
.highlight-content {
    position: relative;
}

/* Quote Card */
.quote-card {
    background-color: #222;
    color: #fff;
}
.quote-card .highlight-icon {
    font-size: 60px;
    font-family: serif;
    color: var(--brand-pink, #FF3366);
    opacity: 0.5;
    position: absolute;
    top: -20px;
    left: -20px;
}
.quote-card .highlight-text {
    font-size: 18px;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}
.quote-card .highlight-author {
    display: block;
    margin-top: 15px;
    font-size: 14px;
    opacity: 0.7;
}

/* Stat Card */
.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}
.stat-card .stat-value {
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
}
.stat-card .stat-description {
    font-size: 14px;
    margin: 10px 0 0;
    opacity: 0.8;
}

/* Responsive (Mobile/Tablet) */
@media (max-width: 991px) {
    /* Hide highlights on tablet if needed */
    .story-card.highlight-card {
        display: none;
    }
}

/* Mobile ke liye grid ko mazeed behtar karne ki zaroorat nahi
   kyunke 'auto-fit' aur 'minmax' isko khud aek column mein badal denge
   jab screen choti hogi. */