/* Title background area */
.article-title-bg {
    background: var(--Light-Grey);
    border-radius: 10px;
    margin-top: 24px;
}
.article-title-bg > .l-container {
    padding: 32px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px 7px;
    border-radius: 10px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 14px;
}
.badge--dark {
    background: var(--Dark-Blue);
    color: var(--White);
}

.article-title {
    margin: 12px 0 8px;
}
.article-date {
    color: var(--Black);
    font-size: 14px;
}

/* Body */
.article-body {
    margin-block: 24px 48px;
}
.article-body .rich-text p {
    margin: 0 0 1em;
}

/* Prefooter block (Views) */
.prefooter {
    background: var(--Light-Grey);
    padding-block: 32px 48px;
    margin-top: 48px;
}
.subtitle {
    color: var(--Blue);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 16px;
}

.card-grid {
    display: grid;
    gap: 24px;
}
@media (min-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.prefooter__actions {
    display: grid;
    place-items: center;
    margin-top: 16px;
}

/* ---- Card (one base class) ---- */
.c-card {
    position: relative;
    border: 1px solid var(--Medium-Grey);
    border-radius: 10px;
    background: var(--White);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}
.c-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.c-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.c-card__media {
    position: relative;
}
.c-card__media img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 207 / 155;
    object-fit: cover;
}
.c-card__badge {
    position: absolute;
    left: 12px;
    top: 12px;
    background: var(--Dark-Blue);
    color: var(--White);
    padding: 8px 16px 7px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}
.c-card__body {
    padding: 16px;
    display: grid;
    gap: 8px;
}
.c-card__meta {
    font-size: 14px;
    color: var(--Black);
}
.c-card__title {
    font-size: 1.375rem;
    font-weight: 500;
    margin: 0;
}
.c-card__title a {
    position: relative;
    z-index: 2;
}
.c-card__excerpt {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.c-card__cta {
    align-self: start;
    position: relative;
    z-index: 2;
}

/* Mobile Swiper for prefooter */
@media (max-width: 767.98px) {
    .card-grid {
        display: block;
    }
    .card-grid.swiper {
        overflow: hidden;
    }
    .card-grid .swiper-wrapper {
        padding-bottom: 12px;
    }
    .card-grid .swiper-slide {
        width: calc(100% - 32px);
        margin-right: 16px;
    }
}
/* Title background area */
.article-title-bg {
    background: var(--Light-Grey);
    border-radius: 10px;
    margin-top: 24px;
}
.article-title-wrap {
    text-align: center;
    padding-block: 32px;
}
.badge {
    margin-inline: auto;
} /* centrira badge */
.article-title {
    margin: 12px 0 8px;
} /* h1 koristi .h2 stil preko klase */
.article-date {
    display: block;
    color: var(--Black);
    font-size: 14px;
}

/* Hero (952/635), centriran i su탑en */
.article-hero {
    margin-block: 16px 24px;
}
.article-hero img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    aspect-ratio: 952 / 635;
    object-fit: cover;
}

/* Body tipografija prema figmi */
.article-body {
    margin-block: 24px 48px;
}
.rich-text {
    color: var(--Black);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
} /* regular baseline */
.rich-text p {
    margin: 0 0 1em;
    font-weight: 400;
}
.rich-text b,
.rich-text strong {
    font-weight: 700;
}