/*
 * SERP Expert 2.0.24 — блок «Статьи от наших экспертов».
 * Макет 1994 px перенесён в масштабе 0,75: контент 1218 px, 3 карточки по ~389 px
 * с отступом 25 px, картинка 178 px, стрелки 56 px снаружи слайдера, точки снизу.
 */

.se-art {
    --art-ink: #182530;
    --art-red: #c00a0b;
    --art-font: var(--font-main, "Manrope", system-ui, sans-serif);
    --art-head: var(--font-heading, "Raleway", "Manrope", system-ui, sans-serif);
    position: relative;
    overflow: hidden;
    padding: 40px 20px 56px;
    background: #fff;
    color: var(--art-ink);
    font-family: var(--art-font);
}
.se-art *, .se-art *::before, .se-art *::after { box-sizing: border-box; }
.se-art__inner { max-width: 1218px; margin: 0 auto; }

/* ---------- Шапка ---------- */

.se-art__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.se-art .se-art__title {
    margin: 0;
    padding: 0;
    color: var(--art-ink);
    font-family: var(--art-head);
    font-size: 42px;
    line-height: 50px;
    font-weight: 900;
    letter-spacing: -0.4px;
    text-transform: none;
}
.se-art .se-art__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 150px;
    height: 46px;
    padding: 0 24px;
    border-radius: 23px;
    background: linear-gradient(180deg, #d10d10, #bb0807);
    box-shadow: 0 10px 22px rgba(192, 10, 11, .22);
    color: #fff;
    font: 700 14px/1 var(--art-font);
    text-decoration: none;
    white-space: nowrap;
    transition: filter .2s ease, transform .2s ease;
}
.se-art .se-art__all svg { width: 17px; height: 17px; stroke-width: 2.2; }
.se-art .se-art__all:hover { color: #fff; filter: brightness(1.07); transform: translateY(-1px); }

/* ---------- Слайдер ---------- */

.se-art__slider { position: relative; margin-top: 36px; }
.se-art .se-art__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 50px) / 3);
    gap: 25px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    list-style: none;
}
.se-art .se-art__track::-webkit-scrollbar { display: none; }

.se-art .se-art__arrow {
    position: absolute;
    z-index: 2;
    top: 156px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--art-red);
    box-shadow: 0 10px 22px rgba(192, 10, 11, .25);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.se-art .se-art__arrow--prev { left: -87px; }
.se-art .se-art__arrow--next { right: -87px; }
.se-art .se-art__arrow svg { width: 24px; height: 24px; stroke-width: 2.2; }
.se-art .se-art__arrow:hover:not(:disabled) { transform: scale(1.05); }
.se-art .se-art__arrow:disabled { background: #e06363; box-shadow: none; cursor: default; }
.se-art .se-art__arrow:focus-visible { outline: 3px solid rgba(192, 10, 11, .35); outline-offset: 3px; }
.se-art__slider.is-static .se-art__arrow { display: none; }

/* ---------- Карточка ---------- */

.se-art .se-art-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-snap-align: start;
}
.se-art .se-art-card::before { content: none; }
.se-art-card__media {
    position: relative;
    display: block;
    height: 178px;
    overflow: hidden;
    border-radius: 8px;
    background: #eef1f5;
}
.se-art-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.se-art-card:hover .se-art-card__media img { transform: scale(1.04); }
.se-art-card__badge {
    position: absolute;
    left: 13px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    height: 35px;
    padding: 0 20px;
    border-radius: 18px;
    background: rgba(253, 241, 241, .96);
    color: #27282f;
    font: 600 14px/1 var(--art-font);
}
.se-art-card__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
    color: #34373d;
    font: 400 15px/20px var(--art-font);
}
.se-art-card__meta time,
.se-art-card__meta span { display: inline-flex; align-items: center; gap: 7px; }
.se-art-card__meta svg { width: 17px; height: 17px; stroke-width: 1.7; }
.se-art .se-art-card__title {
    margin: 12px 0 0;
    padding: 0;
    color: #111318;
    font-family: var(--art-font);
    font-size: 20px;
    line-height: 23px;
    font-weight: 800;
    letter-spacing: -0.2px;
    text-transform: none;
}
.se-art .se-art-card__title a { color: inherit; text-decoration: none; transition: color .2s ease; }
.se-art .se-art-card__title a:hover { color: var(--art-red); }
.se-art .se-art-card__text {
    margin: 10px 0 18px;
    color: #5c5c5c;
    font: 400 16px/20.5px var(--art-font);
}
.se-art .se-art-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    height: 46px;
    margin-top: auto;
    padding: 0 26px 0 29px;
    border-radius: 23px;
    background: linear-gradient(180deg, #c80a0e, #b40504);
    box-shadow: 0 8px 18px rgba(180, 5, 4, .2);
    color: #fff;
    font: 700 14px/1 var(--art-font);
    text-decoration: none;
    white-space: nowrap;
    transition: filter .2s ease, transform .2s ease;
}
.se-art .se-art-card__btn svg { width: 17px; height: 17px; stroke-width: 2.2; transition: transform .2s ease; }
.se-art .se-art-card__btn:hover { color: #fff; filter: brightness(1.07); }
.se-art .se-art-card__btn:hover svg { transform: translateX(3px); }
.se-art .se-art-card__btn:focus-visible,
.se-art .se-art__all:focus-visible { outline: 3px solid rgba(192, 10, 11, .35); outline-offset: 3px; }

/* ---------- Точки ---------- */

.se-art__dots { display: flex; justify-content: center; gap: 18px; margin-top: 36px; }
.se-art__dots:empty { display: none; }
.se-art .se-art__dot {
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d8d6d6;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.se-art .se-art__dot.is-active { background: #be0606; transform: scale(1.1); }

/* ---------- Адаптив ---------- */

@media (max-width: 1399px) {
    .se-art .se-art__arrow--prev { left: -18px; }
    .se-art .se-art__arrow--next { right: -18px; }
    .se-art .se-art__arrow { width: 48px; height: 48px; top: 160px; }
}

@media (max-width: 1100px) {
    .se-art .se-art__title { font-size: 36px; line-height: 42px; }
    .se-art .se-art__track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
    .se-art-card__media { height: 200px; }
    .se-art .se-art__arrow { top: 176px; }
}

@media (max-width: 700px) {
    .se-art { padding: 36px 16px 44px; }
    .se-art__head { align-items: flex-end; }
    .se-art .se-art__title { font-size: 28px; line-height: 32px; }
    .se-art .se-art__all { min-width: 0; height: 42px; padding: 0 18px; font-size: 13px; }
    .se-art__slider { margin-top: 24px; }
    .se-art .se-art__track { grid-auto-columns: 86%; gap: 14px; }
    .se-art-card__media { height: 190px; }
    .se-art .se-art__arrow { display: none; }
    .se-art .se-art-card__title { font-size: 18px; line-height: 22px; }
    .se-art .se-art-card__text { font-size: 15px; line-height: 20px; }
    .se-art__dots { gap: 12px; margin-top: 26px; }
}