/*
Theme Name: Astra Child
Template: astra
*/

/* =====================================================
   ОБЩИЕ СТИЛИ
   ===================================================== */

/* Выравнивание по ширине только для контента */
.entry-content p {
    text-align: justify;
}

/* Запрещаем перенос слов по слогам */
* {
    hyphens: none !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* Цвет заголовков внутри светлых обложек */
.entry-content .wp-block-cover.is-light .wp-block-cover__inner-container h2,
.entry-content .wp-block-cover.is-light .wp-block-cover__inner-container h3 {
    color: #769947;
}

/* Левая рамка для цитат */
.wp-block-quote:not(.has-text-align-right):not(.has-text-align-center) {
    border-left: 5px solid #769947;
}

/* Фикс отступа для twentytwenty */
.twentytwenty-container {
    margin-top: 0 !important;
}

/* =====================================================
   СЛАЙДЕР «ДО/ПОСЛЕ» — НА ВСЮ ШИРИНУ
   ===================================================== */

/* ----- ПЕРЕМЕННЫЕ ----- */
:root {
    --handle-size: 85px;
    --handle-color: #739745;
    --line-thickness: 3px;
}

/* ----- ОБЁРТКА СЛАЙДЕРА ----- */
.slider-main {
    display: block;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

/* Растягиваем все внутренние обёртки плагина */
.slider-main,
.slider-main > *,
.slider-main .mbai-align-wrap,
.slider-main .mbai-before-after-wrap,
.slider-main .mbai-before-after-container,
.slider-main .twentytwenty-container,
.slider-main .twentytwenty-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: auto !important;
    transform: none !important;
    box-sizing: border-box;
}

/* Убираем возможные inline-ограничения от плагина */
.slider-main [style*="max-width"] {
    max-width: 100% !important;
}

/* Адаптивная высота блока — пропорция как у картинок 2001×1198 */
.slider-main .mbai-align-wrap {
    aspect-ratio: 2001 / 1198;
    height: auto !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Картинки — по ширине контейнера, без обрезки */
.slider-main .mbai-before-after-wrap {
    overflow: hidden;
}

.slider-main .mbai-before-after-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
}

/* Слои картинок */
.twentytwenty-before { z-index: 0 !important; }
.twentytwenty-after  { z-index: -1 !important; }
.twentytwenty-wrapper { line-height: 1; }

/* =====================================================
   КРУГ-РУЧКА СЛАЙДЕРА
   ===================================================== */

@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.mbai-before-after-wrap.handle-type-text .mbai-handle {
    width: var(--handle-size);
    height: var(--handle-size);
    margin-left: calc(var(--handle-size) / -2);
    margin-top: calc(var(--handle-size) / -2 + 2px);
    border: var(--line-thickness) solid var(--handle-color);
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    cursor: pointer;
    z-index: 9999 !important;
    animation: pulse 1.5s infinite ease-in-out;
}

/* Вертикальные линии сверху и снизу от ручки (десктоп) */
.mbai-before-after-wrap.handle-type-text .mbai-horizontal .mbai-handle::before,
.mbai-before-after-wrap.handle-type-text .mbai-horizontal .mbai-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: var(--line-thickness);
    background: var(--handle-color);
    z-index: 5 !important;
}

.mbai-before-after-wrap.handle-type-text .mbai-horizontal .mbai-handle::before {
    margin-bottom: calc(var(--handle-size) / 2 + 3px);
}

.mbai-before-after-wrap.handle-type-text .mbai-horizontal .mbai-handle::after {
    margin-top: calc(var(--handle-size) / 2 + 3px);
}

/* Текст на круге */
.h1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1.3;
    color: #333;
    text-align: center;
    padding: 8px 10px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: pre-line;
    max-width: 90%;
    box-sizing: border-box;
    position: relative;
    z-index: 10000 !important;
}

/* =====================================================
   АДАПТИВНОСТЬ СЛАЙДЕРА
   ===================================================== */

/* Планшеты и маленькие ноутбуки (до 1024px) */
@media (max-width: 1024px) {
    :root {
        --handle-size: 75px;
    }
    .h1{
        font-size: 15px;
        padding: 6px 8px;
    }

}

/* Телефоны и планшеты в портретной ориентации (до 768px) */
@media (max-width: 768px) {
    :root {
        --handle-size: 60px;
    }
    /* Скрываем вертикальные линии */
    .mbai-before-after-wrap.handle-type-text .mbai-horizontal .mbai-handle::before,
    .mbai-before-after-wrap.handle-type-text .mbai-horizontal .mbai-handle::after {
        display: none !important;
    }
    .h1{
        font-size: 13px;
        padding: 5px 6px;
        line-height: 1.2;

}

/* Маленькие телефоны (до 480px) */
@media (max-width: 480px) {
    :root {
        --handle-size: 48px;
    }
    .h1{
        font-size: 11px;
        padding: 4px 5px;
        line-height: 1.1;
        max-width: 85%;
    }
 }

/* Очень маленькие экраны (до 360px) */
@media (max-width: 360px) {
    :root {
        --handle-size: 42px;
    }
    .h1{
        font-size: 9px;
        padding: 3px 4px;
        line-height: 1;
        max-width: 80%;
  }

/* =====================================================
   ВСПОМОГАТЕЛЬНОЕ
   ===================================================== */

/* Отступ сверху для основного контента на главной */
.ast-plain-container.ast-no-sidebar #primary {
    margin-top: 16px;
}

/* Растяжение alignfull-групп */
.wp-block-group.alignfull {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}