/* =======================================================================
   ALL ARTICLES - Maurin/WebSens
   UX cards + filters + pagination
   ======================================================================= */

.all-articles {
    background: var(--aa-section-bg, var(--theme-section-background, #ffffff));
    color: var(--aa-section-text, var(--theme-text-color, #212221));
    font-family: var(--theme-font-primary, var(--maurin-font-primary, inherit));
}

.all-articles .all-articles__inner {
    width: 100%;
    max-width: var(--aa-container-max-width, 1320px);
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.all-articles.all-articles--full .all-articles__inner {
    max-width: none;
}

.all-articles.all-articles--container .all-articles__inner {
    max-width: var(--aa-container-max-width, 1320px);
}

.all-articles .all-articles__header {
    max-width: var(--aa-section-header-max-width, 920px);
    margin: 0 auto var(--aa-section-header-margin-bottom, 34px);
    text-align: var(--aa-section-title-align, left);
}

.all-articles .all-articles__section-title {
    margin: 0;
    color: var(--aa-section-title-color, var(--theme-section-title-color, #2a6d47));
    font-family: var(--theme-title-font, var(--theme-font-primary, inherit));
    font-size: var(--aa-section-title-size, 42px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -.035em;
}

.all-articles .all-articles__section-subtitle {
    margin: 14px 0 0;
    color: var(--aa-section-subtitle-color, var(--theme-section-subtitle-color, #212221));
    font-family: var(--theme-text-font, var(--theme-font-primary, inherit));
    font-size: var(--aa-section-subtitle-size, 18px);
    line-height: 1.45;
    font-weight: 750;
}

.all-articles .all-articles__section-text {
    margin: 14px 0 0;
    color: var(--aa-section-text-content-color, var(--theme-section-text-color, #212221));
    font-family: var(--theme-text-font, var(--theme-font-primary, inherit));
    font-size: var(--aa-section-text-size, 16px);
    line-height: 1.65;
}

.all-articles .all-articles__section-text p {
    margin: 0;
}

.all-articles .all-articles__section-text p + p {
    margin-top: .7em;
}

/* CATEGORY FILTERS */
.all-articles .article-category-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 34px;
}

.all-articles .article-category-filter {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--aa-filter-active-bg, var(--theme-button-bg, #2a6d47)) 32%, transparent);
    background: var(--aa-filter-bg, var(--theme-bg-white, #ffffff));
    color: var(--aa-filter-text, var(--theme-text-color, #212221));
    border-radius: var(--theme-button-radius, 999px);
    padding: 11px 18px;
    font-family: var(--theme-button-font, var(--theme-font-primary, inherit));
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: transform .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.all-articles .article-category-filter:hover,
.all-articles .article-category-filter.active {
    background: var(--aa-filter-active-bg, var(--theme-button-bg, #2a6d47));
    border-color: var(--aa-filter-active-bg, var(--theme-button-bg, #2a6d47));
    color: var(--aa-filter-active-text, var(--theme-button-text-color, #ffffff));
    box-shadow: 0 12px 28px rgba(42, 109, 71, .16);
    transform: translateY(-1px);
}

/* GRID */
.all-articles .article-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--aa-columns, 3), minmax(0, 1fr));
    column-gap: var(--aa-card-gap, 28px) !important;
    row-gap: var(--aa-card-gap, 28px) !important;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
}

.all-articles .article-item {
    min-width: 0;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* CARD */
.all-articles .article-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--aa-card-border-color, color-mix(in srgb, var(--theme-text-color, #212221) 13%, transparent));
    border-radius: var(--aa-card-radius, var(--theme-card-radius, 18px));
    background: var(--aa-card-bg, var(--theme-card-background, #f3f3f3));
    box-shadow: var(--aa-card-shadow, 0 18px 45px rgba(0, 0, 0, .08));
    transform: translateY(0) scale(1);
    transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
    will-change: transform;
}

.all-articles .article-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--aa-hover-border-color, var(--theme-button-bg, #2a6d47));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .26s ease;
}

.all-articles .article-card:hover {
    transform: translateY(-5px) scale(1.012);
    border-color: color-mix(in srgb, var(--aa-hover-border-color, var(--theme-button-bg, #2a6d47)) 50%, transparent);
    box-shadow: var(--aa-card-shadow-hover, 0 24px 60px rgba(0, 0, 0, .12));
}

.all-articles .article-card:hover::after {
    transform: scaleX(1);
}

/* IMAGE */
.all-articles .article-img-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    padding-bottom: 64%;
    overflow: hidden;
    background: var(--theme-bg-light, #f6f6f6);
}

.all-articles .article-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: 0;
}

.all-articles .article-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform .38s ease;
}

.all-articles .article-card:hover .article-img img {
    transform: scale(1.055);
}

.all-articles .article-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    max-width: calc(100% - 32px);
    padding: 8px 13px;
    border-radius: var(--theme-button-radius, 999px);
    background: var(--aa-badge-bg, var(--theme-button-bg, #2a6d47));
    color: var(--aa-badge-text, var(--theme-button-text-color, #ffffff));
    font-family: var(--theme-button-font, var(--theme-font-primary, inherit));
    font-size: 12px;
    font-weight: 500;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

/* CONTENT */
.all-articles .article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 19px 21px;
    background: transparent !important;
}

.all-articles .article-date {
    display: inline-block;
    color: var(--aa-date-color, color-mix(in srgb, var(--aa-text-color, var(--theme-text-color, #212221)) 68%, transparent)) !important;
    font-family: var(--theme-text-font, var(--theme-font-primary, inherit));
    font-size: var(--aa-date-size, 13px) !important;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 8px;
}

.all-articles .article-title {
    color: var(--aa-title-color, var(--theme-text-color, #212221)) !important;
    font-family: var(--theme-title-font, var(--theme-font-primary, inherit));
    font-size: var(--aa-title-size, 20px) !important;
    font-weight: 500;
    line-height: 1.13;
    letter-spacing: -.02em;
    margin: 0 0 9px !important;
}

.all-articles .article-excerpt,
.all-articles .article-content p {
    flex: 1;
    color: var(--aa-text-color, var(--theme-text-color, #212221)) !important;
    font-family: var(--theme-text-font, var(--theme-font-primary, inherit));
    font-size: var(--aa-text-size, 14px) !important;
    line-height: 1.48;
    margin: 0 0 15px !important;
}

.all-articles .article-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: auto;
    color: var(--aa-link-color, var(--theme-link-color, #2a6d47)) !important;
    font-family: var(--theme-button-font, var(--theme-font-primary, inherit));
    font-size: var(--aa-link-size, 14px) !important;
    font-weight: 900;
    line-height: 1;
    text-decoration: none !important;
    transition: color .22s ease, gap .22s ease;
}

.all-articles .article-readmore:hover {
    color: var(--aa-link-hover-color, var(--theme-link-hover-color, #3c9a65)) !important;
    gap: 11px;
}

/* PAGINATION */
.all-articles .article-pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 46px;
}

.all-articles .article-pagination-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    max-width: 100%;
    padding: 12px 18px;
    border: 1px solid rgba(33, 34, 33, .08);
    border-radius: 999px;
    background: var(--theme-bg-white, #ffffff);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .08);
}

.all-articles .offers-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.all-articles .offers-pager .pager-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 38px;
    height: 38px;
    border: none;
    padding: 0 12px;
    color: var(--theme-text-color, #212221);
    font-family: var(--theme-button-font, var(--theme-font-primary, inherit));
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    background: transparent;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.all-articles .offers-pager .pager-link:hover,
.all-articles .offers-pager .active .pager-link {
    background: var(--theme-button-bg, #2a6d47);
    color: var(--theme-button-text-color, #ffffff);
    box-shadow: 0 8px 20px rgba(42, 109, 71, .22);
}

.all-articles .offers-pager .pager-link:hover {
    transform: translateY(-1px);
}

.all-articles .offers-pager .pager-arrow {
    min-width: auto;
    padding: 0 14px;
}

.all-articles .offers-pager .pager-item.disabled .pager-link {
    pointer-events: none;
    opacity: .42;
    box-shadow: none;
}

.all-articles .offers-pager .pager-dots,
.all-articles .offers-pager .pager-dots:hover {
    background: transparent;
    color: var(--theme-text-color, #212221);
    box-shadow: none;
    transform: none;
}

.all-articles .offers-pager-result {
    color: color-mix(in srgb, var(--theme-text-color, #212221) 78%, transparent);
    font-family: var(--theme-text-font, var(--theme-font-primary, inherit));
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.all-articles .article-empty {
    grid-column: 1 / -1;
    color: var(--theme-text-color, #212221);
}

/* RESPONSIVE */
@media (max-width: 1199.98px) {
    .all-articles .article-grid {
        grid-template-columns: repeat(min(var(--aa-columns, 3), 3), minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .all-articles .article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .all-articles .article-pagination-shell {
        flex-direction: column;
        gap: 10px;
        border-radius: 28px;
    }
}

@media (max-width: 575.98px) {
    .all-articles .all-articles__inner {
        padding-left: 18px;
        padding-right: 18px;
    }

    .all-articles .all-articles__section-title {
        font-size: calc(var(--aa-section-title-size, 42px) * .74);
    }

    .all-articles .article-grid {
        grid-template-columns: 1fr;
    }

    .all-articles .article-title {
        font-size: calc(var(--aa-title-size, 20px) * .92) !important;
    }

    .all-articles .offers-pager .pager-arrow span {
        display: none;
    }
}