/*
 * Визуал карточных блоков Editor.js — в стилистике карточек ЖК/БЦ на
 * officenavigator.ru (mini_card): фото сверху, бейдж класса, метро с
 * цветной меткой, цена крупным зелёным, кнопка-пилюля.
 *
 * Конструкторские блоки (module_editorjs_block_type) полностью
 * schema-driven — PHP не знает о "цене" или "метро", он лишь добавляет
 * модификатор editorjs-dynamic__field--key-<ключ поля>. Поэтому карточка
 * "как на officenavigator" получается САМА, если админ в конструкторе
 * блока задаст повторитель (например с ключом "cards") с вложенными
 * полями с такими ключами:
 *   photo      (image)     — фото сверху карточки
 *   badge      (text)      — класс объекта (A/B+/B/C), бейдж поверх фото
 *   title      (text)      — название
 *   address    (text)      — адрес
 *   metroName  (text)      — станция метро
 *   metroTime  (text)      — время пешком, напр. "8 мин."
 *   price      (text)      — цена, напр. "от 103 800 руб./м²/год"
 *   area       (text)      — площадь, напр. "432 м²"
 *   buttonText (text)      — текст кнопки (декоративная, без ссылки —
 *                            как buttonText у уже существующего блока "main")
 * Любые другие ключи в той же схеме просто выводятся обычным текстом.
 */

.editorjs-content {
    /* Алиасы на РЕАЛЬНЫЕ переменные сайта (:root в styles.css) — чтобы
       блоки конструктора всегда были в текущей палитре/радиусах сайта,
       а не в отдельной выдуманной теме. Если бренд-цвета сайта поменяются,
       этот файл не нужно будет трогать отдельно. */
    --ejs-green: var(--primary, #09AD67);
    --ejs-green-light: color-mix(in srgb, var(--primary, #09AD67) 82%, white);
    --ejs-dark: var(--dark, #313230);
    --ejs-gray: var(--secondary-text, #666);
    --ejs-border: var(--border, #e0e0e0);
    --ejs-bg-muted: var(--background-secondary, #f0f0f0);
    --ejs-radius: var(--border-radius, 16px);
    --ejs-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --ejs-heading-font: "Raleway", Arial, sans-serif;
    font-family: 'PT Sans', Arial, sans-serif;
    color: var(--ejs-dark);
    /* Единственный источник отступа между блоками — gap, а не margin.
       Раньше каждый блок вдобавок задавал себе свой margin (20px, 24px,
       иногда и сверху, и снизу) поверх общего правила на margin-top — из-за
       схлопывания вертикальных margin итоговый зазор "на глаз" было легко
       принять за непредсказуемый (где-то казалось "больше сверху", где-то
       "больше снизу"). gap считает расстояние ровно один раз и одинаково
       для вообще любых соседей, вне зависимости от их собственных margin —
       поэтому margin у всех блоков ниже по файлу убран, трогать его там
       снова не нужно: новый отступ добавлять только через это значение gap. */
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* То же самое, если на странице по какой-то причине несколько соседних
   .editorjs-content рядом (напр. компонент вызван дважды) — без этого
   второй блок визуально "слипался" бы с концом первого, без какого-либо
   отступа между ними. */
.editorjs-content + .editorjs-content {
    margin-top: 32px;
}

/* ---------------------------------------------------------------------
   Общая карточная сетка и "чехол" карточки — переиспользуется блоками
   elements, repeaterImageText*, конструкторский repeater, а также
   expert-select (та же card-grid структура: title + description? +
   grid картинка-название)
--------------------------------------------------------------------- */

.editorjs-content .editorjs-elements__grid,
.editorjs-content .editorjs-repeater__grid,
.editorjs-content .editorjs-expert-select__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Эти два — ВНУТРИ другого блока (repeaterTitleDescription устарел и не
   используется шаблоном, dynamic__field--repeater — вложенный повторитель
   в конструкторских блоках), им нужен свой внутренний отступ сверху —
   gap у .editorjs-content их не касается, они не прямые потомки. */
.editorjs-content .editorjs-repeater-title-description__list,
.editorjs-content .editorjs-dynamic__field--repeater {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

.editorjs-content .editorjs-elements__card,
.editorjs-content .editorjs-repeater__item,
.editorjs-content .editorjs-repeater-title-description__item,
.editorjs-content .editorjs-dynamic__repeater-item,
.editorjs-content .editorjs-expert-select__card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--ejs-border);
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
    overflow: hidden;
    transition: box-shadow .2s ease-out, transform .2s ease-out;
}

.editorjs-content .editorjs-elements__card:hover,
.editorjs-content .editorjs-repeater__item:hover,
.editorjs-content .editorjs-repeater-title-description__item:hover,
.editorjs-content .editorjs-dynamic__repeater-item:hover,
.editorjs-content .editorjs-expert-select__card:hover {
    box-shadow: 0 0 10px var(--ejs-green);
    transform: translateY(-2px);
}

.editorjs-content .editorjs-elements__link,
.editorjs-content .editorjs-expert-select__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.editorjs-content .editorjs-elements__title,
.editorjs-content .editorjs-expert-select__title {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 16px;
}

.editorjs-content .editorjs-expert-select__description {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ejs-gray);
    margin: 0 0 16px;
}

.editorjs-content .editorjs-expert-select__image-wrap {
    height: 180px;
    overflow: hidden;
    background: var(--ejs-bg-muted);
}

.editorjs-content .editorjs-expert-select__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease-out;
}

.editorjs-content .editorjs-expert-select__card:hover img {
    transform: scale(1.04);
}

.editorjs-content .editorjs-expert-select__name {
    padding: 14px 18px;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.3;
}

/* ---------------------------------------------------------------------
   Блок "elements" (связанные элементы инфоблока) — фото + название
--------------------------------------------------------------------- */

.editorjs-content .editorjs-elements__image-wrap {
    height: 180px;
    overflow: hidden;
    background: var(--ejs-bg-muted);
}

.editorjs-content .editorjs-elements__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.editorjs-content .editorjs-elements__name {
    padding: 14px 18px;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.3;
}

/* ---------------------------------------------------------------------
   Блоки-повторители repeaterImageText / repeaterImageTextPrice /
   repeaterImageTextDescription — фото + текст (+ цена/описание)
--------------------------------------------------------------------- */

.editorjs-content .editorjs-repeater__image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.editorjs-content .editorjs-repeater__text {
    padding: 16px 20px 4px;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.3;
}

.editorjs-content .editorjs-repeater__price {
    padding: 4px 20px 20px;
    font-size: 20px;
    font-weight: bold;
    color: var(--ejs-green);
}

.editorjs-content .editorjs-repeater__description {
    padding: 4px 20px 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ejs-gray);
}

.editorjs-content .editorjs-repeater__title {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 8px;
}

.editorjs-content .editorjs-repeater__block-description {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ejs-gray);
    margin: 0 0 16px;
}

/* ---------------------------------------------------------------------
   Список "заголовок + описание" (без картинки) — repeaterTitleDescription
--------------------------------------------------------------------- */

.editorjs-content .editorjs-repeater-title-description__title {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 8px;
}

.editorjs-content .editorjs-repeater-title-description__description {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ejs-gray);
    margin: 0 0 16px;
}

.editorjs-content .editorjs-repeater-title-description__item {
    padding: 16px 20px;
}

.editorjs-content .editorjs-repeater-title-description__item-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 6px;
}

.editorjs-content .editorjs-repeater-title-description__item-description {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ejs-gray);
}

/* ---------------------------------------------------------------------
   Конструкторская карточка объекта — поля по ключам (см. комментарий
   в начале файла). Первым в схеме должно идти поле "photo", чтобы бейдж
   и остальные поля визуально легли поверх/под фото как на референсе.
--------------------------------------------------------------------- */

.editorjs-content .editorjs-dynamic__repeater-item {
    padding-bottom: 16px;
}

.editorjs-content .editorjs-dynamic__field--key-photo {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.editorjs-content .editorjs-dynamic__field--key-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    height: 44px;
    min-width: 44px;
    padding: 0 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--ejs-dark);
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
}

.editorjs-content .editorjs-dynamic__field--key-title {
    padding: 16px 20px 4px;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.3;
}

.editorjs-content .editorjs-dynamic__field--key-address {
    padding: 0 20px 8px;
    font-size: 14px;
    color: var(--ejs-gray);
}

.editorjs-content .editorjs-dynamic__field--key-metroname,
.editorjs-content .editorjs-dynamic__field--key-metrotime {
    display: inline-block;
    font-size: 14px;
    color: var(--ejs-gray);
    padding: 0 0 8px 20px;
}

.editorjs-content .editorjs-dynamic__field--key-metroname {
    padding-left: 20px;
    position: relative;
    font-weight: bold;
}

.editorjs-content .editorjs-dynamic__field--key-metroname::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ejs-green);
}

.editorjs-content .editorjs-dynamic__field--key-metrotime {
    padding-left: 6px;
}

.editorjs-content .editorjs-dynamic__field--key-area {
    display: inline-block;
    padding: 0 20px 8px;
    font-size: 14px;
    color: var(--ejs-gray);
}

.editorjs-content .editorjs-dynamic__field--key-price {
    padding: 4px 20px 8px;
    font-size: 22px;
    font-weight: bold;
    color: var(--ejs-green);
}

.editorjs-content .editorjs-dynamic__field--key-buttontext {
    display: inline-block;
    margin: 8px 20px 0;
    padding: 0 20px;
    height: 44px;
    line-height: 44px;
    border-radius: 3px;
    background: var(--ejs-green);
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}


.editorjs-content .blog_header{
    min-height: auto;
}
.editorjs-content .blog_header .row{
    padding-bottom: 0px;
}

/* ---- articleHeader (.blog_header) — дата / время чтения / «Поделиться».
   Раньше не было вообще никакого CSS под эти классы — стилизуем с нуля
   в палитре --ejs-* (та же, что у остальных блоков конструктора). ---- */

.editorjs-content .head_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ejs-border);
}

.editorjs-content .date_head p,
.editorjs-content .viev_head p {
    margin: 0;
    font-size: 14px;
    color: var(--ejs-gray);
}

.editorjs-content .head_share {
    position: relative;
    margin-left: auto;
}

.editorjs-content .head_share__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--ejs-border);
    border-radius: 100px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    color: var(--ejs-dark);
    cursor: pointer;
    transition: border-color .15s ease-out, color .15s ease-out;
}

.editorjs-content .head_share__label::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease-out;
}

.editorjs-content .head_share__label:hover,
.editorjs-content .head_share__label[aria-expanded="true"] {
    border-color: var(--ejs-green);
    color: var(--ejs-green);
}

.editorjs-content .head_share__label[aria-expanded="true"]::after {
    transform: rotate(225deg) translateY(2px);
}

.editorjs-content .head_share__list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--ejs-border);
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
    box-shadow: 0 12px 28px rgba(25, 40, 52, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease-out, transform .15s ease-out, visibility .15s;
}

.editorjs-content .head_share__label[aria-expanded="true"] + .head_share__list {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.editorjs-content .head_share__btn {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--ejs-dark);
    text-decoration: none;
    white-space: nowrap;
}

.editorjs-content .head_share__btn:hover {
    background: var(--ejs-bg-muted);
    color: var(--ejs-green);
}

@media (max-width: 575px) {
    .editorjs-content .head_info {
        gap: 10px 16px;
    }
    .editorjs-content .head_share {
        margin-left: 0;
        width: 100%;
    }
    .editorjs-content .head_share__label {
        width: 100%;
        justify-content: space-between;
    }
    .editorjs-content .head_share__list {
        left: 0;
        right: 0;
    }
}

.editorjs-detail-description__title {
    margin-bottom: 22px;
    color: #171b1e;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
}

.b-article-detail-content__detail-text > .row{
    padding-bottom: 0px; 
}
.b-article-detail-content__detail-text .breadcrambs.tac {
    text-align: left;
    padding: 0;
}

.title_dop.tal.small_margin {
    margin-bottom: 22px;
    color: #171b1e;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
}

.hpl_section{padding:0 0 30px}
.hab_page_block .breadcrumb-wrap-css {
    padding: 10px 0 0 0;
}
@media(max-width:1343px){.hpl_section{padding:40px 0}}
/* @media(max-width:639px){.hpl_section{padding:30px 0}} */

.hpl_hero{position:relative;overflow:hidden;padding:56px 32px;border-radius:var(--ejs-radius)}
.hpl_hero__bg{position:absolute;inset:0;z-index:0}
.hpl_hero__bg img{width:100%;height:100%;display:block;object-fit: cover;}
.hpl_hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,.94) 38%,rgba(255,255,255,.55) 62%,rgba(255,255,255,.1) 100%)}
.hpl_hero .container{position:relative;z-index:2}
.hpl_hero .row{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.hpl_hero__text{flex:1 1 480px;min-width:280px;max-width:640px}
.hpl_hero__eyebrow{color:#00b475;font-weight:bold;font-size:14px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.hpl_hero__title{
    font-size:36px;
    line-height:1.2;
    color:#192834;
    margin:0 0 16px;
    font-weight:bold;
    text-align: left;
}
.hpl_hero__descr{color:#5e5e5e;font-size:16px;line-height:1.5;max-width:520px;margin-bottom:28px}
.hpl_hero__bullets{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 32px;
}
.hpl_bullet{
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding: 11px 16px 11px 42px;
    border: 1px solid #d3ebe1;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.88);
    color: #26312d;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    backdrop-filter: blur(4px);
}
.hpl_bullet::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 14px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: #00b475;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    transform: translateY(-50%);
}
.hpl_icon{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:rgba(0,180,117,.1);color:#00b475;display:flex;align-items:center;justify-content:center}
.hpl_icon img{
    width: 30px;
    height: 30px;
}
.hpl_hero__buttons{display:flex;gap:16px;flex-wrap:wrap}
.hpl_btn{cursor:pointer}

.hpl_map_advantages{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start}
.hpl_map_wrap{flex:1 1 520px;min-width:280px}
.hpl_map{position:relative;background:#e8ece9;border-radius:12px;padding:0;min-height:400px;overflow:hidden}
.hpl_map[id="yandex-map"]{background:transparent;padding:0}
.hpl_map__pin{display:inline-flex;align-items:center;gap:8px;background:#ffffff;border:1px solid #dedede;border-radius:20px;padding:8px 16px;margin:6px;font-size:13px;font-weight:bold;color:#192834}
.hpl_map__pin i{width:8px;height:8px;border-radius:50%;background:#00b475;display:inline-block}
.hpl_advantages{flex:1 1 380px;min-width:260px}
.hpl_advantages__list{list-style:none;margin:0;padding:0}
.hpl_advantages__list li{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;font-size:15px;color:#192834}
.hpl_advantages__list li:last-child{margin-bottom:0}

.hpl_how{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start}
.hpl_how__left{flex:1 1 480px;min-width:280px}
.hpl_how__text{color:#5e5e5e;font-size:15px;line-height:1.6;margin-bottom:24px}
.hpl_how__right{flex:1 1 320px;min-width:260px;background:#00b475;border-radius:12px;padding:32px}
.hpl_how__checklist{list-style:none;margin:0;padding:0}
.hpl_how__checklist li{display:flex;align-items:center;gap:12px;color:#ffffff;font-weight:bold;font-size:15px;margin-bottom:18px}
.hpl_how__checklist li:last-child{margin-bottom:0}
.hpl_how__checklist img{flex:0 0 auto;width:20px;height:20px}
.info-object:before{
    background: none;
}
.advantages__icon_wrap {
    height: 100px;
}
.advantages__icon_1, .advantages__icon_2, .advantages__icon_3 {
    font-size: 80px;
}

.faq_section {
    padding: 34px;
    border: 1px solid var(--on-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(21, 38, 31, 0.055);
}


#office-district-price h2 {
    font-family: var(--ejs-heading-font);
    font-weight: bold;
    font-size: 26px;
    color: var(--ejs-dark);
    margin: 0 0 12px;
}

#office-district-price > .row > p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ejs-gray);
    margin: 0 0 20px;
}

#office-district-price h3 {
    font-family: var(--ejs-heading-font);
    font-weight: bold;
    font-size: 18px;
    color: var(--ejs-dark);
    margin: 0 0 8px;
}

.on-blog-price__locations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.on-blog-price__location {
    padding: 26px;
    border: 1px solid var(--on-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(21, 38, 31, 0.05);
}
.on-blog-price__location p:last-child {
    margin-bottom: 0;
}

@media(max-width: 767px ) {
    .hpl_hero {
        padding: 32px 20px;
    }
}
@media(max-width: 991px ) {
    .fitrst_filt {
        margin: 20px 20px 0;
    }
    .hab_page_block .breadcrumb-wrap-css {
        padding: 10px 20px 0;
    }
    .free-offices .free-offices__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    }          
    .row.hpl_map_advantages {
        padding: 0 20px;
    }
    .advantages.advantages_slider--mobile.owl-carousel {
    display: block;
    padding: 0 20px;
    }
    .hpl_section {
    padding: 30px 20px;
    background: #fff;
    }
    .info-object {
    padding: 20px;
    }
    h2.title.big_margin {
    padding: 25px 0 0;
    }
    
    .title_dop.tal.small_margin{
        font-size: 25px;
    }
}

/* =======================================================================
   Визуал блоков, у которых раньше не было ни одной строчки CSS —
   текстовые/базовые блоки и "карточные" конструкторские блоки
   (stages, expert). Палитра и приёмы — те же --ejs-* токены и card-паттерн,
   что заданы в начале файла, чтобы весь контент статьи выглядел одним
   целым, а не набором разностильных вставок.
   ======================================================================= */

/* ---- paragraph / header / list / quote — базовая типографика текста ---- */

.editorjs-content .editorjs-paragraph {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.65;
}

.editorjs-content .editorjs-paragraph:last-child {
    margin-bottom: 0;
}

.editorjs-content h1.editorjs-header,
.editorjs-content h2.editorjs-header,
.editorjs-content h3.editorjs-header,
.editorjs-content h4.editorjs-header,
.editorjs-content h5.editorjs-header,
.editorjs-content h6.editorjs-header {
    font-family: var(--ejs-heading-font);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ejs-dark);
    margin: 40px 0 16px;
    scroll-margin-top: 90px; /* якоря из editorjs-toc не прячутся под фикс-хедером */
}

.editorjs-content h1.editorjs-header:first-child,
.editorjs-content h2.editorjs-header:first-child,
.editorjs-content h3.editorjs-header:first-child,
.editorjs-content h4.editorjs-header:first-child,
.editorjs-content h5.editorjs-header:first-child,
.editorjs-content h6.editorjs-header:first-child {
    margin-top: 0;
}

.editorjs-content h1.editorjs-header { font-size: 32px; }
.editorjs-content h2.editorjs-header { font-size: 26px; }
.editorjs-content h3.editorjs-header { font-size: 22px; }
.editorjs-content h4.editorjs-header { font-size: 18px; }
.editorjs-content h5.editorjs-header,
.editorjs-content h6.editorjs-header { font-size: 16px; }

.editorjs-content .editorjs-list {
    margin: 0 0 16px;
    padding-left: 4px;
    font-size: 16px;
    line-height: 1.65;
}

.editorjs-content ol.editorjs-list {
    padding-left: 22px;
}

.editorjs-content ul.editorjs-list {
    list-style: none;
    padding-left: 0;
}

.editorjs-content ul.editorjs-list > li {
    position: relative;
    padding-left: 24px;
}

.editorjs-content ul.editorjs-list > li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ejs-green);
}

.editorjs-content .editorjs-list > li {
    margin-bottom: 8px;
}

.editorjs-content .editorjs-list > li:last-child {
    margin-bottom: 0;
}

.editorjs-content .editorjs-quote {
    margin: 24px 0;
    padding: 4px 24px;
    border-left: 3px solid var(--ejs-green);
    font-size: 18px;
    line-height: 1.55;
    font-style: italic;
    color: var(--ejs-dark);
}

.editorjs-content .editorjs-quote__caption {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: var(--ejs-gray);
}

.editorjs-content .editorjs-quote__caption::before {
    content: '— ';
}

/* ---- table — с горизонтальной прокруткой на узких экранах ---- */

.editorjs-content .editorjs-table-wrap {
    margin: 0 0 20px;
    overflow-x: auto;
    border: 1px solid var(--ejs-border);
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
}

.editorjs-content .editorjs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.editorjs-content .editorjs-table td,
.editorjs-content .editorjs-table th {
    padding: 10px 16px;
    border-bottom: 1px solid var(--ejs-border);
    text-align: left;
    vertical-align: top;
}

.editorjs-content .editorjs-table tr:last-child td {
    border-bottom: none;
}

.editorjs-content .editorjs-table th {
    background: var(--ejs-bg-muted);
    font-weight: bold;
    color: var(--ejs-dark);
}

.editorjs-content .editorjs-table tbody tr:nth-child(even) {
    background: var(--ejs-bg-muted);
}

/* ---- checklist — кастомный чекбокс вместо точки списка ---- */

.editorjs-content .editorjs-checklist {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.editorjs-content .editorjs-checklist__item {
    position: relative;
    padding-left: 32px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5;
}

.editorjs-content .editorjs-checklist__item:last-child {
    margin-bottom: 0;
}

.editorjs-content .editorjs-checklist__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid var(--ejs-border);
    background: #fff;
}

.editorjs-content .editorjs-checklist__item--checked {
    color: var(--ejs-gray);
    text-decoration: line-through;
}

.editorjs-content .editorjs-checklist__item--checked::before {
    border-color: var(--ejs-green);
    background: var(--ejs-green);
}

.editorjs-content .editorjs-checklist__item--checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 5px;
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

/* ---- code ---- */

.editorjs-content .editorjs-code {
    margin: 0 0 20px;
    padding: 16px 20px;
    background: var(--ejs-dark);
    color: #e6e6e6;
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
}

.editorjs-content .editorjs-code code {
    font-family: 'Courier New', monospace;
    background: none;
}

/* ---- delimiter — три точки вместо стандартной <hr> ---- */

.editorjs-content .editorjs-delimiter {
    height: auto;
    margin: 32px auto;
    width: auto;
    border: none;
    text-align: center;
}

.editorjs-content .editorjs-delimiter::before {
    content: '• • •';
    letter-spacing: 8px;
    color: var(--ejs-green);
    font-size: 14px;
}

/* ---- warning — акцентный блок-предупреждение (янтарный, не зелёный:
   семантика "внимание" должна визуально отличаться от брендового акцента) ---- */

.editorjs-content .editorjs-warning {
    margin: 0 0 20px;
    padding: 16px 20px;
    background: #fff8ec;
    border: 1px solid #f3dba3;
    border-left: 3px solid #e3a008;
    border-radius: var(--ejs-radius);
}

.editorjs-content .editorjs-warning__title {
    font-weight: bold;
    font-size: 16px;
    color: #171b1e;
    margin-bottom: 4px;
}

.editorjs-content .editorjs-warning__message {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ejs-dark);
}

/* ---- text-area — выделенный текстовый блок (как врезка в статье) ---- */

.editorjs-content .editorjs-text-area {
    display: block;
    margin: 0 0 20px;
    padding: 24px;
    background: var(--ejs-bg-muted);
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
}

.editorjs-content .editorjs-text-area__title {
    font-weight: bold;
    font-size: 18px;
    color: var(--ejs-dark);
    margin-bottom: 10px;
}

.editorjs-content .editorjs-text-area__content {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ejs-dark);
}

.editorjs-content .editorjs-text-area__content:last-child {
    margin-bottom: 0;
}

/* ---- toc — оглавление статьи ---- */

.editorjs-content .editorjs-toc {
    display: block;
    margin: 0 0 24px;
    padding: 20px 24px;
    border: 1px solid var(--ejs-border);
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
    background: #fff;
}

.editorjs-content .editorjs-toc__title {
    font-weight: bold;
    font-size: 16px;
    color: var(--ejs-dark);
    margin-bottom: 12px;
}

.editorjs-content .editorjs-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ejs-toc;
}

.editorjs-content .editorjs-toc__list li {
    counter-increment: ejs-toc;
    margin-bottom: 8px;
}

.editorjs-content .editorjs-toc__list li:last-child {
    margin-bottom: 0;
}

.editorjs-content .editorjs-toc__list li::before {
    content: counter(ejs-toc) '.';
    display: inline-block;
    width: 20px;
    color: var(--ejs-green);
    font-weight: bold;
}

.editorjs-content .editorjs-toc__list a {
    color: var(--ejs-dark);
    text-decoration: none;
    font-size: 15px;
}

.editorjs-content .editorjs-toc__list a:hover {
    color: var(--ejs-green);
    text-decoration: underline;
}

/* ---- embed / video — отзывчивое 16:9 окно для iframe ---- */

.editorjs-content .editorjs-embed,
.editorjs-content .editorjs-video-embed {
    position: relative;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--ejs-radius);
    background: var(--ejs-bg-muted);
    box-shadow: var(--ejs-shadow);
}

/* embed (iframe-врезка в тексте) — текстовый блок, нужен свой отступ внутри
   потока текста; video-embed — самостоятельный блок, его отступ уже даёт
   gap у .editorjs-content. */
.editorjs-content .editorjs-embed {
    margin: 0 0 20px;
}

.editorjs-content .editorjs-embed iframe,
.editorjs-content .editorjs-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.editorjs-content .editorjs-embed__caption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ejs-gray);
    text-align: center;
}

/* ---- video (upload) — та же разметка/классы, что у штатного видео-блока
   сайта (hero "О компании" и т.п., см. main-video в template_styles.css):
   постер + круглая кнопка play/pause поверх, а не голый <video controls>.
   JS для .js-video-button/.js-video-wrapper/.js-video уже есть в main.js
   сайтово — ничего отдельно подключать не нужно. ---- */

.editorjs-content .editorjs-video-frame {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    border-radius: var(--ejs-radius);
    background: #000;
    box-shadow: var(--ejs-shadow);
}

.editorjs-content .editorjs-video {
    display: block;
    width: 100%;
    max-height: 520px;
}

.editorjs-content .editorjs-video-frame__button {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background: #fff;
    color: var(--ejs-green);
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.editorjs-content .editorjs-video-frame__button:hover {
    background: var(--ejs-green);
    color: #fff;
}

.editorjs-content .editorjs-video-frame__button .main-video__button-play {
    display: flex;
    margin-left: 3px;
}

.editorjs-content .editorjs-video-frame__button .main-video__button-pause {
    display: none;
}

.editorjs-content .editorjs-video-frame__button.is-active .main-video__button-play {
    display: none;
}

.editorjs-content .editorjs-video-frame__button.is-active .main-video__button-pause {
    display: flex;
}

@media (max-width: 575px) {
    .editorjs-content .editorjs-video-frame__button {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
    }
}

/* ---- gallery — сетка фотографий ---- */

.editorjs-content .editorjs-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.editorjs-content .editorjs-gallery__item {
    margin: 0;
    border-radius: var(--ejs-radius);
    overflow: hidden;
    background: var(--ejs-bg-muted);
}

.editorjs-content .editorjs-gallery__item img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform .3s ease-out;
}

.editorjs-content .editorjs-gallery__item:hover img {
    transform: scale(1.04);
}

.editorjs-content .editorjs-gallery__item figcaption {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--ejs-gray);
}

/* ---- одиночное изображение (инструмент image) ---- */

.editorjs-content figure:not(.editorjs-gallery__item) {
    margin: 0 0 20px;
}

.editorjs-content figure:not(.editorjs-gallery__item) img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ejs-radius);
}

.editorjs-content figure:not(.editorjs-gallery__item) figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ejs-gray);
    text-align: center;
}

/* Настройки изображения (тюнлы официального инструмента image) — раньше
   классы ставились (editorjs-image--bordered/--background/--stretched),
   но для них не было ни одного правила: переключатели в редакторе ничего
   не меняли на публичной части. */
.editorjs-content .editorjs-image--bordered img {
    border: 1px solid var(--ejs-border);
}

.editorjs-content .editorjs-image--background {
    padding: 16px;
    background: var(--ejs-bg-muted);
    border-radius: var(--ejs-radius);
}

.editorjs-content .editorjs-image--background img {
    border-radius: calc(var(--ejs-radius) - 8px);
}

.editorjs-content .editorjs-image--stretched img {
    border-radius: 0;
}

/* ---- raw — произвольный HTML; только базовый сброс отступов и
   отзывчивость вложенных медиа, своё оформление не навязываем ---- */

.editorjs-content .editorjs-raw {
    margin: 0 0 20px;
}

.editorjs-content .editorjs-raw img,
.editorjs-content .editorjs-raw iframe,
.editorjs-content .editorjs-raw video {
    max-width: 100%;
}

/* ---- detail-description__text — раньше был стилизован только заголовок ---- */

.editorjs-detail-description__text {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ejs-dark);
}

.editorjs-detail-description__text p {
    margin: 0 0 16px;
}

.editorjs-detail-description__text p:last-child {
    margin-bottom: 0;
}

.editorjs-detail-description__text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ejs-radius);
}

/* ---- stages — нумерованные шаги с "дорожкой" ---- */

.editorjs-content .editorjs-stages__title {
    font-weight: bold;
    font-size: 20px;
    color: var(--ejs-dark);
    margin-bottom: 20px;
}

.editorjs-content .editorjs-stages__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.editorjs-content .editorjs-stages__item {
    position: relative;
    display: flex;
    gap: 20px;
    padding-bottom: 28px;
}

.editorjs-content .editorjs-stages__item:last-child {
    padding-bottom: 0;
}

.editorjs-content .editorjs-stages__item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--ejs-border);
}

.editorjs-content .editorjs-stages__number {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ejs-green);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.editorjs-content .editorjs-stages__body {
    flex: 1 1 auto;
    padding-top: 6px;
}

.editorjs-content .editorjs-stages__heading {
    font-weight: bold;
    font-size: 17px;
    color: var(--ejs-dark);
    margin-bottom: 6px;
}

.editorjs-content .editorjs-stages__description {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ejs-gray);
}

/* ---- expert — две колонки: фото+чеклист слева, список справа ---- */

.editorjs-content .editorjs-expert {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 28px;
    border: 1px solid var(--ejs-border);
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
}

.editorjs-content .editorjs-expert__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ejs-radius);
    margin-bottom: 16px;
}

.editorjs-content .editorjs-expert__heading {
    font-weight: bold;
    font-size: 18px;
    color: var(--ejs-dark);
    margin-bottom: 12px;
}

.editorjs-content .editorjs-expert__checklist,
.editorjs-content .editorjs-expert__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.editorjs-content .editorjs-expert__checklist li,
.editorjs-content .editorjs-expert__list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ejs-dark);
}

.editorjs-content .editorjs-expert__checklist li:last-child,
.editorjs-content .editorjs-expert__list li:last-child {
    margin-bottom: 0;
}

/* чеклист — галочка в кружке */
.editorjs-content .editorjs-expert__checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ejs-green);
}

.editorjs-content .editorjs-expert__checklist li::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    width: 8px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

/* обычный список — зелёная точка, как в editorjs-list */
.editorjs-content .editorjs-expert__list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ejs-green);
}

@media (max-width: 767px) {
    .editorjs-content .editorjs-expert {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .editorjs-content .editorjs-stages__item:not(:last-child)::before {
        left: 15px;
    }
    .editorjs-content .editorjs-stages__number {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* ---- expert-contact — контактная карточка эксперта-консультанта:
   фото + должность + телефон/email + кнопка заявки (открывает общую
   модалку сайта через класс header__contact-link, см. main.js) ---- */


.editorjs-content .editorjs-expert-contact__title {
    font-weight: bold;
    font-size: 20px;
    margin: 0 0 16px;
}

.editorjs-content .editorjs-expert-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.editorjs-content .editorjs-expert-contact__card {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 24px;
    background: #ffffff;
    border: 1px solid var(--ejs-border);
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
    box-sizing: border-box;
}

@media (max-width: 575px) {
    .editorjs-content .editorjs-expert-contact__card {
        flex-direction: column;
        align-items: flex-start;
    }
}

.editorjs-content .editorjs-expert-contact__image-wrap {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ejs-bg-muted);
}

.editorjs-content .editorjs-expert-contact__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.editorjs-content .editorjs-expert-contact__body {
    flex: 1 1 auto;
    min-width: 0;
}

.editorjs-content .editorjs-expert-contact__name {
    display: block;
    font-weight: bold;
    font-size: 17px;
    color: var(--ejs-dark);
    text-decoration: none;
    margin-bottom: 2px;
}

a.editorjs-expert-contact__name:hover {
    color: var(--ejs-green);
}

.editorjs-content .editorjs-expert-contact__post {
    font-size: 13px;
    color: var(--ejs-gray);
    margin-bottom: 10px;
}

.editorjs-content .editorjs-expert-contact__contacts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.editorjs-content .editorjs-expert-contact__contact {
    font-size: 14px;
    color: var(--ejs-dark);
    text-decoration: none;
}

.editorjs-content .editorjs-expert-contact__contact:hover {
    color: var(--ejs-green);
}

.editorjs-content .editorjs-expert-contact__button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--ejs-radius);
    background: var(--ejs-green);
    color: #fff;
    font-family: var(--ejs-heading-font);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background-color .2s ease-out;
}

.editorjs-content .editorjs-expert-contact__button:hover {
    background: var(--ejs-green-light);
}

/* ---- stats — крупные цифры инфографики в ряд ---- */


.editorjs-content .editorjs-stats__title {
    font-weight: bold;
    font-size: 20px;
    margin: 0 0 16px;
}

.editorjs-content .editorjs-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px;
}

.editorjs-content .editorjs-stats__item {
    padding: 20px;
    border: 1px solid var(--ejs-border);
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
    background: #fff;
}

.editorjs-content .editorjs-stats__number {
    font-size: 32px;
    font-weight: bold;
    color: var(--ejs-green);
    line-height: 1.1;
    margin-bottom: 6px;
}

.editorjs-content .editorjs-stats__label {
    font-size: 14px;
    color: var(--ejs-gray);
}

/* ---- download — кнопка скачивания презентации + бейдж-ачивка ---- */

.editorjs-content .editorjs-download {
    position: relative;
    padding: 24px;
    border: 1px solid var(--ejs-border);
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
    background: var(--ejs-bg-muted);
}

.editorjs-content .editorjs-download__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 88px;
    text-align: center;
}

.editorjs-content .editorjs-download__badge img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.editorjs-content .editorjs-download__badge-text {
    font-size: 11px;
    line-height: 1.3;
    color: var(--ejs-gray);
}

.editorjs-content .editorjs-download__title {
    max-width: 70%;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.3;
    color: var(--ejs-dark);
    margin-bottom: 16px;
}

.editorjs-content .editorjs-download__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--ejs-radius);
    background: var(--ejs-green);
    color: #fff;
    font-family: var(--ejs-heading-font);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: background-color .2s ease-out;
}

.editorjs-content .editorjs-download__button:hover {
    background: var(--ejs-green-light);
}

@media (max-width: 767px) {
    .editorjs-content .editorjs-download__badge {
        position: static;
        margin-bottom: 16px;
        flex-direction: row;
        width: auto;
        text-align: left;
    }
    .editorjs-content .editorjs-download__title {
        max-width: 100%;
    }
}

/* ---- faq — оформление и работающий аккордеон (раньше классы в разметке
   были без единого совпадения в CSS и без JS раскрытия) ---- */

.faq_section .question_item__col.accordion {
    margin-top: 16px;
}

.faq_section .question_item.accordion_item {
    border-bottom: 1px solid var(--on-line, #dedede);
}

.faq_section .question_item.accordion_item:last-child {
    border-bottom: none;
}

.faq_section .accordion_head {
    position: relative;
    padding: 18px 36px 18px 0;
    cursor: pointer;
}

.faq_section .accordion_head .question__head {
    font-weight: bold;
    font-size: 16px;
    color: #171b1e;
}

.faq_section .accordion_head::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    border-right: 2px solid #00b475;
    border-bottom: 2px solid #00b475;
    transform: rotate(45deg);
    transition: transform .2s ease-out;
}

.faq_section .question_item.accordion_item--open .accordion_head::after {
    transform: rotate(-135deg);
    margin-top: -2px;
}

.faq_section .question__text.accordion_text {
    display: none;
    padding: 0 0 18px;
    font-size: 15px;
    line-height: 1.6;
    color: #5e5e5e;
}

.faq_section .question_item.accordion_item--open .question__text.accordion_text {
    display: block;
}

/* ---- Заголовки карточных блоков — та же гарнитура, что у заголовков
   карточек на сайте (.advantages__card__title, .author-card__fio .name
   и т.д. в styles.css используют Raleway), чтобы блоки конструктора
   не выбивались шрифтом из остального контента страницы. ---- */
.editorjs-content .editorjs-elements__title,
.editorjs-content .editorjs-expert-select__title,
.editorjs-content .editorjs-repeater__title,
.editorjs-content .editorjs-repeater-title-description__title,
.editorjs-content .editorjs-stages__title,
.editorjs-content .editorjs-expert-contact__title,
.editorjs-content .editorjs-stats__title,
.editorjs-content .editorjs-toc__title,
.editorjs-content .editorjs-text-area__title,
.editorjs-content .editorjs-download__title {
    font-family: var(--ejs-heading-font);
}

/* ---- form-output — карточка-подложка под общей формой «Заказать звонок»
   (форма .modal-inputs обычно показывается в попапе на тёмной подложке
   сайта, при встраивании в текст без своего фона выглядела голо) ---- */

.editorjs-content .editorjs-form-output {
    padding: 24px;
    background: #ffffff;
    border: 1px solid var(--ejs-border);
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
}

/* На десктопе поля "Ваше имя"/"Ваш телефон" — в одну строку (на мобилке
   остаются в столбик, как задумано у .modal-inputs в общем попапе сайта —
   этот override только внутри editorjs-form-output, общую модалку не трогает). */
@media (min-width: 576px) {
    .editorjs-content .editorjs-form-output .modal-inputs {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }
    .editorjs-content .editorjs-form-output .modal-label {
        flex: 1 1 260px;
        max-width: 400px;
        min-width: 0;
    }
    .editorjs-content .editorjs-form-output .modal-checkbox,
    .editorjs-content .editorjs-form-output #modal-submit {
        flex: 1 1 100%;
        max-width: none;
    }
}

.editorjs-content .editorjs-form-output__title {
    font-family: var(--ejs-heading-font);
    font-weight: bold;
    font-size: 20px;
    color: var(--ejs-dark);
    margin: 0 0 16px;
}

/* ---- case-studies — карточки кейсов с кнопкой "Заказать звонок"
   (открывает общую модалку сайта, та же механика, что у expert-contact) ---- */


.editorjs-content .editorjs-case-studies__title {
    font-family: var(--ejs-heading-font);
    font-weight: bold;
    font-size: 20px;
    margin: 0 0 16px;
}

.editorjs-content .editorjs-case-studies__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.editorjs-content .editorjs-case-studies__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ejs-border);
    border-radius: var(--ejs-radius);
    box-shadow: var(--ejs-shadow);
    overflow: hidden;
}

.editorjs-content .editorjs-case-studies__image-wrap {
    height: 200px;
    background: var(--ejs-bg-muted);
}

.editorjs-content .editorjs-case-studies__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.editorjs-content .editorjs-case-studies__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.editorjs-content .editorjs-case-studies__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 8px;
}

.editorjs-content .editorjs-case-studies__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--ejs-gray);
}

.editorjs-content .editorjs-case-studies__meta-item svg {
    flex-shrink: 0;
    color: var(--ejs-green);
}

.editorjs-content .editorjs-case-studies__name {
    font-family: var(--ejs-heading-font);
    font-weight: bold;
    font-size: 17px;
    color: var(--ejs-dark);
    text-decoration: none;
    margin-bottom: 8px;
}

a.editorjs-case-studies__name:hover {
    color: var(--ejs-green);
}

.editorjs-content .editorjs-case-studies__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ejs-gray);
    margin-bottom: 16px;
}

.editorjs-content .editorjs-case-studies__link {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    color: var(--ejs-green);
    text-decoration: none;
}

.editorjs-content .editorjs-case-studies__link:hover {
    text-decoration: underline;
}

.editorjs-content .editorjs-case-studies__actions {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.editorjs-content .editorjs-case-studies__button {
    display: inline-block;
    flex: 0 0 auto;
    padding: 10px 20px;
    border: none;
    border-radius: var(--ejs-radius);
    background: var(--ejs-green);
    color: #fff;
    font-family: var(--ejs-heading-font);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background-color .2s ease-out;
    white-space: nowrap;
}

.editorjs-content .editorjs-case-studies__button:hover {
    background: var(--ejs-green-light);
}