/* News Section Mobile CSS - Based on Figma Design */

@media (max-width: 768px) {
    .news-section {
        padding: 0 !important;
    }

    .news-container {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 16px !important;
        gap: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .news-title {
        font-size: 20px;
        line-height: 28px;
        font-weight: 700;
        text-align: center;
        /* margin-bottom: 16px; */
    }

    /* News grid becomes horizontal scroll */
    .news-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100vw !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .news-grid::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* News card - fixed 253px width */
    .news-card {
        flex: 0 0 auto !important;
        width: 253px !important;
        min-width: 253px !important;
        border-radius: 12px;
        box-shadow: 0px 4px 4px -8px rgba(0, 0, 0, 0.03),
                    0px 4px 16px 10px rgba(16, 24, 40, 0.02),
                    0px 2px 32px -4px rgba(16, 24, 40, 0.04);
        overflow: hidden;
        background: white;
    }

    /* News image aspect ratio */
    .news-card .news-image {
        width: 100%;
        aspect-ratio: 330 / 192;
        overflow: hidden;
    }

    .news-card .news-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* News content padding */
    .news-content {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* News title text */
    .news-content h3,
    .news-content .news-card-title {
        font-family: 'SF Pro', sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        color: #3D3D3D;
        margin: 0;
    }

    /* Read more link */
    .news-content .news-link,
    .news-content a {
        font-family: 'SF Pro', sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        color: #4564ED;
        text-decoration: none;
    }

    /* View all button */
    .news-view-all {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 16px;
        padding: 4px 0;
    }

    .news-view-all a {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: 'SF Pro', sans-serif;
        font-size: 16px;
        font-weight: 510;
        line-height: 22px;
        color: #4564ED;
        text-decoration: none;
    }

    .news-view-all svg,
    .news-view-all img {
        width: 20px;
        height: 20px;
    }
}