/**
 * Latest News Section Styles (Reusable)
 * Used by: Homepage, News single
 *
 * @package MG
 */

/* ========================================
   Latest News Container
   ======================================== */

.latest-news {
    background: #f5f5f5;
    padding: 80px 0; /* Mobile */
}

@media (min-width: 768px) {
    .latest-news {
        padding: 60px 0; /* Tablet+ */
    }
}

.latest-news__container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 30px; /* Mobile */
}

@media (min-width: 768px) {
    .latest-news__container {
        padding: 0 40px; /* Tablet+ */
    }
}

/* ========================================
   Header (eyebrow + title + CTA)
   ======================================== */

.latest-news__header {
    /* spacing under header block */
    margin-bottom: 48px;
}

.latest-news__header-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

@media (min-width: 768px) {
    .latest-news__header-row {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
    }
}

/* CTA: celowo bez stylowania (ma być button z design systemu).
   Dajemy tylko zachowanie layoutu. */
.latest-news__cta {
    white-space: nowrap;
}

/* ========================================
   News Grid
   ======================================== */

.latest-news__grid {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
}

@media (min-width: 650px) {
    .latest-news__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .latest-news__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}