/* Animation Classes */
.gj-custom-animate-item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.download-metrics-btn {
    margin-top: 40px;
}

.gj-custom-animate-item.gj-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.gj-article-metrics-section>div>.gj-custom-animate-item:nth-child(1) {
    transition-delay: 0s;
}

.gj-article-metrics-section>div>.gj-custom-animate-item:nth-child(2) {
    transition-delay: 0.2s;
}

.gj-article-metrics-section>div>.gj-custom-animate-item:nth-child(3) {
    transition-delay: 0.4s;
}

.gj-article-metrics-section>div {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.metrics-info-card {
    background-color: #f2f2f2;
    padding: 30px;
    border-radius: 30px;
}

/* Desktop Layout: 2 items on top row, 1 item on bottom row */

/* Desktop Layout: 3 items in one row */
.gj-article-metrics-section>div>div:first-child {
    flex: 1 1 35%;
    /* Info Card */
    max-width: 35%;
}

.gj-article-metrics-section>div>div:nth-child(2) {
    flex: 1 1 20%;
    /* Pie Chart */
    max-width: 25%;
    display: flex;
    justify-content: center;
}

.gj-article-metrics-section>div>div:nth-child(3) {
    flex: 1 1 35%;
    /* Bar Chart */
    max-width: 40%;
}

/* Mobile Responsive */
@media (max-width: 991px) {

    /* Stack everything in one column on tablets and mobile */
    .gj-article-metrics-section>div {
        flex-direction: column !important;
        gap: 20px;
    }

    .gj-article-metrics-section>div>div:first-child,
    .gj-article-metrics-section>div>div:nth-child(2),
    .gj-article-metrics-section>div>div:nth-child(3) {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .metrics-info-card {
        padding: 24px;
    }
}