/* ABZ Gallery Tools — правки вёрстки страниц галереи С САЙДБАРОМ:
   single-gallery (одна работа) + tax-gallery_brand (марки/модели).
   Файл подключается ТОЛЬКО на этих страницах (Seo_Paragraph::front_assets).
   Префикс body[class*="gallery"] — общий для обеих страниц + поднимает специфичность над темой. */

/* 1) Выравнивание левого блока + очистка от floating соц-кнопок .hello (fixed; bottom:65px; left:15px → x 15–77).
   Кнопки лезут на сайдбар только когда .wrap (max-width 1440, центрируется) почти во всю ширину.
   Сдвигаем H1 + крошки + сайдбар ВМЕСТЕ (без «ступеньки») ПЛАВНО через clamp (без «прыжка»):
   0 на широких (кнопки в левом поле), до 64px на узких (ровно чтобы очистить кнопки). */
body[class*="gallery"] .wrap > h1,
body[class*="gallery"] .breadcrumbs,
body[class*="gallery"] #gallery_ctrl.gallery__sidebar {
    box-sizing: border-box;
    padding-left: clamp(0px, calc(64px - (100vw - 1440px) / 2), 64px);
}

/* 2) Заголовки. Реальный размер H1 задаёт span.gallery_title (тема: 36px !important) — перебиваем. */
body[class*="gallery"] .wrap > h1,
body[class*="gallery"] .wrap > h1 .gallery_title {
    font-size: 26px !important;
    line-height: 1.3;
}
body[class*="gallery"] .wrap > h1 {
    margin: 16px 0;
}
/* H2 услуги (есть только на странице работы). */
body[class*="gallery"] .gallery__conteiner__title {
    font-size: 32px;
    line-height: 1.2;
}
/* Подзаголовки сайдбара «Выберите марку/услугу» — были крупные 30px. */
body[class*="gallery"] #gallery_ctrl .gallery__controll__subscribe {
    font-size: 20px;
    line-height: 1.3;
}

/* 3) Хлебные крошки: компактнее и приглушённее (были крупные 18px и «тяжёлые») + отступ от колонок. */
body[class*="gallery"] .breadcrumbs {
    margin-bottom: 24px;
    font-size: 13px;
    line-height: 1.5;
    color: #9a9a9a;
}
body[class*="gallery"] .breadcrumbs a {
    font-size: 13px;
    color: #8f8f8f;
}

/* 4) SEO-абзац под работой (только страница работы). */
body[class*="gallery"] .gallery__seo_intro {
    margin-top: 14px;
}

/* 5) Блок заявки «Рассчитать стоимость» — лёгкая карточка. */
body[class*="gallery"] .gallery__cat__form {
    background: #f7f6fa;
    border: 1px solid #e8e6ef;
    border-radius: 12px;
    padding: 20px 22px 24px;
    margin-top: 30px;
}
body[class*="gallery"] .gallery__cat__form .title {
    margin-top: 0;
}

/* 6) Скрыть предзаполненное поле «Марка и модель авто» (значение уходит в заявку; display:none, не disabled). */
body[class*="gallery"] .gallery__cat__form .wpcf7-form-control-wrap.field-car {
    display: none;
}

/* 8) Список работ (десктоп): у названий были огромные отступы (30px сверху+снизу вокруг каждого
   из ~10 имён) + 40px между карточками. Поджимаем ритм, оставляя название заметным заголовком.
   Мобайл ниже (@media) перебивает эти значения ещё более компактными. */
body[class*="gallery"] .gallery__work__name {
    font-size: 24px;
    line-height: 1.25;
    margin: 6px 0 2px;
}
body[class*="gallery"] .gallery__work__item {
    margin-bottom: 4px;
}

/* 7) ТОЛЬКО форма «Рассчитать стоимость» «прилипает» и следует за скроллом, останавливаясь у низа
   контент-колонки (перед секцией «Другие услуги»/футером). Высоту сайдбара = высоте контента задаёт
   gallery-single.js (иначе липкая форма проехала бы недалеко). У предка .wrapper overflow:hidden ломает
   sticky → меняем на overflow:clip (клипает так же, scroll-контейнер не создаёт → sticky работает). */
body[class*="gallery"] .wrapper {
    overflow: clip;
}
body[class*="gallery"] #gallery_ctrl .gallery__cat__form {
    position: sticky;
    top: 20px;
}
/* Бейдж «Скидка 10%» — появляется, когда форма прилипла (проскроллили вниз). */
body[class*="gallery"] .gallery__cat__form .abz-discount-badge {
    display: none;
}
body[class*="gallery"] .gallery__cat__form.abz-stuck .abz-discount-badge {
    display: inline-block;
    background: #8e2fbf;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    padding: 7px 15px;
    border-radius: 20px;
    margin-bottom: 14px;
}

/* --- Мобайл --- */
@media (max-width: 767px) {
    body[class*="gallery"] .wrap > h1,
    body[class*="gallery"] .breadcrumbs { padding-left: 0; }
    /* на мобайле сайдбар на всю ширину — липкость формы не нужна. */
    body[class*="gallery"] #gallery_ctrl.gallery__sidebar { padding-left: 60px; }
    body[class*="gallery"] #gallery_ctrl .gallery__cat__form { position: static; }

    body[class*="gallery"] .wrap > h1,
    body[class*="gallery"] .wrap > h1 .gallery_title { font-size: 19px !important; }
    body[class*="gallery"] .gallery__conteiner__title { font-size: 24px; }
    body[class*="gallery"] .breadcrumbs { margin-bottom: 16px; font-size: 12px; }
    body[class*="gallery"] .breadcrumbs a { font-size: 12px; }
    body[class*="gallery"] #gallery_ctrl .gallery__controll__subscribe { font-size: 18px; }

    /* Мобайл: контент вперёд, выбор марки/услуги — вниз (после формы; для телефона это наименее важно,
       пользователь сразу видит саму работу). Переставляем через flex order у контент-обёртки (:has). */
    body[class*="gallery"] .wrap:has(> #gallery_ctrl) { display: flex; flex-direction: column; }
    /* ВСЁ прочее (SEO-текст .gallery__info, «Другие услуги» и любые др. блоки) — по умолчанию ВНИЗ,
       в исходном DOM-порядке. Иначе неучтённый блок получит order:0 и прыгнет наверх. */
    body[class*="gallery"] .wrap:has(> #gallery_ctrl) > * { order: 10; }
    body[class*="gallery"] .wrap:has(> #gallery_ctrl) > h1 { order: 1; }
    body[class*="gallery"] .wrap:has(> #gallery_ctrl) > .breadcrumbs { order: 2; }
    body[class*="gallery"] .wrap:has(> #gallery_ctrl) > .gallery__conteiner { order: 3; }
    body[class*="gallery"] .wrap:has(> #gallery_ctrl) > .gallery__cat__form_mobil { order: 4; }
    body[class*="gallery"] .wrap:has(> #gallery_ctrl) > #gallery_ctrl { order: 5; }

    /* Крошки короче: одна строка (свайп по горизонтали), без текущей страницы (она дублирует H1). */
    body[class*="gallery"] .breadcrumbs {
        white-space: nowrap;
        overflow-x: auto;
        min-width: 0;
    }
    body[class*="gallery"] .breadcrumbs > span:last-child,
    body[class*="gallery"] .breadcrumbs > span:nth-last-child(2) { display: none; }

    /* Компактнее список работ (были гигантские отступы вокруг названий) и нижние блоки. */
    body[class*="gallery"] .gallery__work__name { font-size: 20px; line-height: 1.25; margin: 8px 0 4px; }
    body[class*="gallery"] .gallery__work__item { margin-bottom: 16px; }
    body[class*="gallery"] #gallery_ctrl.gallery__sidebar { margin: 18px 0; }
    body[class*="gallery"] .gallery__cat__form { margin-top: 18px; }
    body[class*="gallery"] .gallery__cat__similar { margin-top: 6px; }
}

/* ============================================================
   АРХИВ галереи (услуга × авто): авто-SEO-блок + «Другие работы»
   Подключается тем же файлом (Seo_Paragraph::front_assets на is_tax('gallery_brand')).
   ============================================================ */

/* авто-SEO-абзац: чуть мягче ручного, тот же грид в 2 колонки */
body[class*="gallery"] .gallery__info_auto {
    margin-top: 26px;
}

/* Лента «Другие работы {авто}» — превью реальных работ этого авто по другим услугам */
body[class*="gallery"] .gallery__other_works {
    margin-top: 34px;
}
body[class*="gallery"] .gallery__other_works > .title {
    margin-bottom: 18px;
}
body[class*="gallery"] .gallery__other_works__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
body[class*="gallery"] .gallery__other_works__item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
body[class*="gallery"] .gallery__other_works__img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: #f2f2f5;
}
body[class*="gallery"] .gallery__other_works__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
body[class*="gallery"] .gallery__other_works__item:hover .gallery__other_works__img img {
    transform: scale(1.05);
}
body[class*="gallery"] .gallery__other_works__cat {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 5px 11px;
    border-radius: 20px;
    background: rgba(142, 47, 191, .92);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body[class*="gallery"] .gallery__other_works__name {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.3;
    color: #222;
    transition: color .2s ease;
}
body[class*="gallery"] .gallery__other_works__item:hover .gallery__other_works__name {
    color: #8e2fbf;
}

@media (max-width: 767px) {
    body[class*="gallery"] .gallery__other_works { margin-top: 24px; }
    body[class*="gallery"] .gallery__other_works__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    body[class*="gallery"] .gallery__other_works__img { border-radius: 10px; }
    body[class*="gallery"] .gallery__other_works__cat { font-size: 11px; padding: 4px 9px; }
    body[class*="gallery"] .gallery__other_works__name { font-size: 14px; margin-top: 7px; }
    /* авто-SEO попадает под общий order:10 (низ) — как и ручной блок */
    body[class*="gallery"] .wrap:has(> #gallery_ctrl) > .gallery__info_auto { order: 10; }
}