/* News Section */
.news-card { background: white; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; transform-style: preserve-3d; perspective: 1000px; height: 100%; display: flex; flex-direction: column; position: relative; }
.news-card:hover { transform: translateY(-10px) rotateX(3deg) rotateY(-2deg) scale(1.02); box-shadow: 0 25px 50px rgba(0,0,0,0.15); z-index: 2; }
.news-img { height: 200px; background-position: center; }
.news-content { padding: 25px; flex-grow: 1; }
.news-meta { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 10px; }
.news-meta span { color: var(--primary); font-family: 'flexoblack', sans-serif; margin-left: 10px; }
.news-card h3 { font-size: 1.4rem; margin-bottom: 15px; }
.news-card p { font-size: 1rem; color: var(--text-muted); }
.news-card-blue { background: linear-gradient(135deg, var(--secondary), var(--primary-dark)); color: white; }
.news-card-blue .news-content { padding-top: 15px; }
.news-card-blue .news-meta, .news-card-blue .news-meta span, .news-card-blue h3, .news-card-blue p { color: white; }

/* Horizontal Scroll Container */
.news-scroll-container {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 20px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    scroll-behavior: smooth;
    /* Optional: snap to cards */
    scroll-snap-type: x mandatory;
}
.news-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.news-track {
    display: flex;
    gap: 20px;
    padding: 20px 10px; /* space for box-shadow and hover transform */
    width: max-content;
}

.news-track .news-card {
    /* Base width for 4 visible items, max-content track allows it to scroll */
    width: calc((100vw - 120px) / 4);
    min-width: 300px;
    max-width: 400px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1200px) { 
    .grid-4 { grid-template-columns: repeat(2, 1fr); } 
    .news-track .news-card {
        width: calc((100vw - 80px) / 2);
    }
}
@media (max-width: 600px) { 
    .grid-4 { grid-template-columns: 1fr; } 
    .news-track .news-card {
        width: calc(100vw - 40px);
    }
}