/**
 * About Section Styles
 * Секция "О нашей клинике"
 * BEM Methodology
 */

/* === БАЗОВЫЕ СТИЛИ БЛОКА === */
.about {
    margin: 120px 0; /* Отступы сверху и снизу секции */
    position: relative; /* Для позиционирования декоративных элементов */
    overflow: hidden; /* Скрываем выходящие за границы элементы */
}

.about__container {
    max-width: 1320px; /* Максимальная ширина контейнера */
    margin: 0 auto; /* Центрирование контейнера */
    display: flex; /* Flexbox для горизонтального расположения */
    align-items: stretch; /* Растягиваем элементы по высоте */
    justify-content: space-evenly; /* Равномерное распределение */
    gap: 50px; /* Отступы между элементами */
    /* flex-wrap: wrap;  */
    position: relative; /* Для позиционирования дочерних элементов */
}

/* === КОНТЕНТНАЯ ОБЛАСТЬ === */
.about__content {
    display: flex;
    flex-direction: column; /* Вертикальное расположение элементов */
    flex: 0 0 487px; /* Фиксированная ширина 487px */
    max-width: 487px; /* Максимальная ширина */
    justify-content: space-between; /* Распределение по высоте */
    word-wrap: break-word; /* Перенос длинных слов */
    overflow-wrap: break-word; /* Альтернативный перенос слов */
    hyphens: auto; /* Автоматическая расстановка переносов */
}

/* --- Заголовочная область --- */
.about__header {
    display: flex;
    flex-direction: column; /* Вертикальное расположение */
    gap: 40px; /* Отступы между элементами */
}

.about__badge {
    display: flex;
    align-items: center; /* Вертикальное выравнивание по центру */
    gap: 10px; /* Отступ между иконкой и текстом */
}

.about__badge-icon {
    flex-shrink: 0; /* Запрет сжатия иконки */
    width: 30px; /* Ширина иконки */
    height: 26.25px; /* Высота иконки */
}

.about__badge-text {
    color: var(--berloga-text, #1a1a1a); /* Цвет текста */
    font-family: 'Nunito', sans-serif; /* Шрифт */
    font-size: 20px; /* Размер шрифта */
    font-weight: 400; /* Толщина шрифта */
}

/* --- Основной заголовок --- */
.about__title {
    margin: 0; /* Убираем стандартные отступы */
    color: var(--berloga-text, #1a1a1a); /* Цвет заголовка */
}

.about__title-accent {
    color: var(--berloga-cyan, #4eb3ca); /* Акцентный цвет для части заголовка */
}

blockquote {
    background: var(--berloga-blue-lightest);
    border-left: 2px solid var(--berloga-blue);
    
}

/* --- Блок цитаты --- */
.about__quote {
    display: flex;
    flex-direction: column; /* Вертикальное расположение */
    gap: 8px; /* Отступ между текстом и автором */
}

.about__quote-text {
    color: var(--berloga-text, #1a1a1a); /* Цвет текста цитаты */
    font-family: var(--regular-text-font-family, 'Nunito', sans-serif); /* Шрифт из переменных */
    font-size: var(--regular-text-font-size, 16px); /* Размер из переменных */
    line-height: var(--regular-text-line-height, 20px); /* Высота строки */
    letter-spacing: var(--regular-text-letter-spacing, -0.04em); /* Межбуквенный интервал */
    font-weight: var(--regular-text-font-weight, 400); /* Толщина шрифта */
    margin: 0; /* Убираем стандартные отступы */
    font-style: normal; /* Обычное начертание */
    word-wrap: break-word; /* Перенос длинных слов */
    overflow-wrap: break-word; /* Альтернативный перенос */
    hyphens: auto; /* Автоматические переносы */
}

.about__quote-author {
    color: var(--berloga-text, #1a1a1a); /* Цвет имени автора */
    font-family: 'Nunito', sans-serif; /* Шрифт */
    font-size: 12px; /* Размер шрифта */
    font-weight: 800; /* Жирное начертание */
    text-align: right; /* Выравнивание по правому краю */
    font-style: normal; /* Обычное начертание */
}



#about-button-mobile{
    display: none; /* Скрываем мобильную кнопку по умолчанию */
}

/* === ИЗОБРАЖЕНИЕ === */
.about__image {
    flex: 0 1 300px; /* Фиксированная ширина 300px */
    width: 300px; /* Ширина контейнера */
    height: 478px; /* Высота контейнера */
    border-radius: 10px; /* Скругленные углы */
    overflow: visible; /* Видимый overflow для бейджа опыта */
    position: relative; /* Для позиционирования бейджа */
}

.about__image-pic {
    /* position: absolute;  */
    /* left: -1px;  */
    /* top: 0;  */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: top center; 
    border-radius: 10px; 
}

/* === БЛОК ПРЕИМУЩЕСТВ === */
.about__benefits {
    display: flex;
    flex-direction: column; /* Вертикальное расположение */
    gap: 20px; /* Отступы между элементами */
    flex: 1 1 0; /* Гибкая ширина */
    max-width: 413px; /* Максимальная ширина */
    position: relative; /* Для позиционирования дочерних элементов */
}

.about__benefits-title {
    margin: 0; /* Убираем стандартные отступы */
    color: var(--berloga-text, #1a1a1a); /* Цвет заголовка */
    position: relative; /* Для позиционирования */
}

.about__benefits-title-accent {
    color: var(--berloga-cyan, #4eb3ca); /* Акцентный цвет */
}

.about__benefits-subtitle {
    color: var(--berloga-text, #1a1a1a); /* Цвет подзаголовка */
}

.about__benefits-text {
    color: var(--berloga-text, #1a1a1a); /* Цвет текста */
    font-family: var(--regular-text-font-family, 'Nunito', sans-serif); /* Шрифт */
    font-size: var(--regular-text-font-size, 16px); /* Размер шрифта */
    line-height: var(--regular-text-line-height, 20px); /* Высота строки */
    letter-spacing: var(--regular-text-letter-spacing, -0.04em); /* Межбуквенный интервал */
    font-weight: var(--regular-text-font-weight, 400); /* Толщина шрифта */
}

.about__benefits-text:last-child {
    margin-bottom: 0; /* Убираем отступ у последнего элемента */
}

/* === БЕЙДЖ ОПЫТА === */
.about__image {
    position: relative; /* Для позиционирования бейджа */
    display: inline-block; /* Инлайн-блок для корректного позиционирования */
}

/* Корона через псевдоэлемент на бейдже */
.about__experience-badge::before {
    content: ''; /* Пустое содержимое для псевдоэлемента */
    position: absolute; /* Абсолютное позиционирование */
    left: 51px; /* Позиция слева */
    top: 3px; /* Позиция сверху */
    width: 40px; /* Ширина короны */
    height: 40px; /* Высота короны */
    background-image: url("data:image/svg+xml,%3Csvg width='43' height='44' viewBox='0 0 43 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_112_193)'%3E%3Cpath d='M21.3659 34.2605L8.99487 23.4833C8.84564 23.3557 8.74095 23.1837 8.69594 22.9926C8.65086 22.8015 8.66792 22.6009 8.74452 22.42L13.7253 10.6341C13.7941 10.4622 13.9136 10.3153 14.0679 10.2129C14.2223 10.1105 14.4041 10.0575 14.5893 10.061C14.7757 10.0603 14.9579 10.116 15.1121 10.2208C15.2663 10.3255 15.3853 10.4745 15.4534 10.648L18.5566 18.1574L26.1603 15.1363C26.3207 15.0838 26.492 15.0738 26.6573 15.1073C26.8228 15.1408 26.9766 15.2167 27.1039 15.3276C27.2312 15.4385 27.3275 15.5805 27.3834 15.7398C27.4393 15.899 27.4528 16.07 27.4228 16.2361L25.4641 24.1915L33.3374 26.2445C33.5166 26.2877 33.6784 26.384 33.8016 26.521C33.9249 26.658 34.0038 26.8291 34.0279 27.0117C34.032 27.1891 33.9856 27.3641 33.8942 27.5162C33.8028 27.6684 33.6701 27.7914 33.5114 27.871L22.4617 34.3533C22.2931 34.4572 22.0957 34.5042 21.8985 34.4875C21.7012 34.4708 21.5146 34.3911 21.3659 34.2605ZM10.7914 22.5625L22.0977 32.4122L30.6104 27.4153L24.0356 25.6981C23.9168 25.6686 23.8051 25.6158 23.7069 25.5427C23.6087 25.4697 23.526 25.3778 23.4635 25.2725C23.401 25.1672 23.3601 25.0506 23.343 24.9294C23.326 24.8082 23.3332 24.6848 23.3643 24.5664L25.1286 17.5189L18.3989 20.2408C18.2858 20.2878 18.1646 20.3118 18.0422 20.3115C17.9198 20.3113 17.7987 20.2867 17.6859 20.2393C17.573 20.1918 17.4707 20.1225 17.3849 20.0352C17.299 19.948 17.2314 19.8445 17.1859 19.7309L14.5895 13.4088L10.7914 22.5625Z' fill='%23ffffff'/%3E%3Cpath d='M18.9233 24.642C18.7388 24.4769 18.626 24.2464 18.609 23.9994C18.592 23.7524 18.6722 23.5085 18.8323 23.3197C18.9115 23.2263 19.0084 23.1495 19.1176 23.0938C19.2267 23.0382 19.3458 23.0048 19.468 22.9957C19.5901 22.9864 19.7128 23.0015 19.8291 23.0401C19.9453 23.0787 20.0528 23.14 20.1451 23.2205C20.3325 23.3837 20.4475 23.6148 20.4644 23.8628C20.4816 24.1107 20.3994 24.3553 20.2362 24.5427C20.0729 24.7301 19.8419 24.8451 19.5939 24.862C19.3459 24.8792 19.1013 24.797 18.9139 24.6338L18.9233 24.642Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_112_193'%3E%3Crect width='29.9899' height='29.9899' fill='%23ffffff' transform='translate(19.6992 0.92334) rotate(41.0611)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); /* SVG иконка короны */
    background-size: contain; /* Масштабирование по размеру */
    background-repeat: no-repeat; /* Без повторения */
    background-position: center; /* Центрирование */
    z-index: 3; /* Поверх других элементов */
}

.about__experience-badge {
    position: absolute; /* Абсолютное позиционирование */
    right: -10%; /* Позиция справа от изображения */
    top: 82%; /* Позиция сверху */
    transform: translateY(-50%); /* Центрирование по вертикали */
    width: 186px; /* Ширина бейджа */
    height: 106px; /* Высота бейджа */
    z-index: 2; /* Слой над изображением */
    display: flex;
    flex-direction: column; /* Вертикальное расположение текста */
    align-items: center; /* Центрирование по горизонтали */
    justify-content: center; /* Центрирование по вертикали */
    background: var(--berloga-magenta, #b50847); /* Магнетовый фон */
    border-radius: 15px; /* Скругленные углы */
}

.about__experience-years {
    color: var(--berloga-white, #ffffff); /* Белый цвет текста */
    font-family: 'Nunito', sans-serif; /* Шрифт */
    font-size: 40px; /* Размер шрифта для цифр */
    line-height: 40px; /* Высота строки */
    font-weight: 800; /* Жирное начертание */
    margin-bottom: 2px; /* Отступ снизу */
}

.about__experience-text {
    color: var(--berloga-white, #ffffff); /* Белый цвет текста */
    font-family: 'Nunito', sans-serif; /* Шрифт */
    font-size: 16px; /* Размер шрифта */
    line-height: 16px; /* Высота строки */
    font-weight: 400; /* Обычная толщина */
    text-align: center; /* Центрирование текста */
}

/* === ДЕКОРАТИВНАЯ ИКОНКА === */
.about__decoration {
    position: absolute; /* Абсолютное позиционирование */
    right: 0; /* Позиция справа */
    bottom: 0; /* Позиция снизу */
    width: 100px; /* Ширина декорации */
    height: 133px; /* Высота декорации */
    z-index: 1; /* Слой под основным контентом */
}

/* === АДАПТИВНОСТЬ === */
/* Скрытие элементов на средних экранах */
@media (max-width: 1240px) {
    .about__image{
        flex: 1 1 300px; /* Фиксированная ширина 300px */
    }
    .about__decoration{
        display: none; /* Скрываем декоративную иконку */
    }
    .about__benefits{
        display: none; /* Скрываем блок преимуществ */
    }
    .about__experience-badge{
        right: 6%; /* Корректируем позицию бейджа */
    }
}

/* Планшеты */
@media (max-width: 1024px) {
    .about{
        margin: 80px 0;
    }
    .about__container {
        gap: 30px; 
        padding: 0 20px;
        justify-content: space-between;
    }
    .about__content {
        flex: 0 0 400px; /* Уменьшаем ширину контента */
        max-width: 400px;
    }
    .about__benefits {
        flex: 0 0 340px; /* Уменьшаем ширину преимуществ */
        max-width: 340px;
    }
    .about__image {
        flex: 1 1 250px; 
        aspect-ratio: 1; /* Квадратные пропорции */
        display: flex;
        align-items: flex-start; /* Выравнивание изображения по верхнему краю */
        justify-content: center; /* Центрирование по горизонтали */
        /* width: 100%;  */
    }
    .about__image img {
        width: 100%; 
        height: 100%; 
        min-height: 100%; 
        object-fit: cover; 
        object-position: top center; 
    }
    .about__image::after {
        right: -80px; /* Корректируем позицию бейджа */
        width: 120px;
        height: 120px;
    }
    .about__image::before {
        right: -65px; /* Корректируем позицию короны */
        width: 25px;
        height: 25px;
    }

}

/* Мобильные устройства */
@media (max-width: 768px) {
    .about {
        margin: 40px 0; /* Уменьшаем отступы секции */
    }
    .about__container {
        gap: 20px; /* Уменьшаем отступы между элементами */
        padding: 0 20px; /* Добавляем боковые отступы */
    }
    .about__content,
    .about__benefits,
    .about__image {
        flex: 1 1 0; /* Гибкая ширина для всех элементов */
    }
    .about__title{
        text-align: left; /* Выравнивание заголовка по левому краю */
    }
    .about__image-pic {
        left: 0; /* Убираем сдвиг изображения */
        position: relative; /* Относительное позиционирование */
    }
    .about .about__content .about__button {
        max-width: 280px !important; /* Ограничиваем ширину кнопки */
        margin: 0 auto !important; /* Центрируем кнопку */
    }
    .about__experience-badge{
        right: 20%; /* Корректируем позицию бейджа */
    }
    /* Мобильная типографика */
    .about__title {
        font-size: 28px; /* Уменьшаем размер заголовка */
        line-height: 110%; /* Уменьшаем высоту строки */
    }
    .about__badge-text {
        font-size: 18px; /* Уменьшаем размер текста бейджа */
    }
    .about__quote-text,
    .about__benefits-text {
        font-size: 14px; /* Уменьшаем размер основного текста */
        line-height: 18px; /* Уменьшаем высоту строки */
    }
}

/* Мобильная кнопка */
.about__button--mobile {
    display: none; /* Скрываем мобильную кнопку по умолчанию */
}

/* Малые мобильные экраны */
@media (max-width: 640px) {
    .about__container{
        flex-direction: column; /* Вертикальное расположение элементов */
        align-items: center; /* Центрирование элементов */
        gap: 20px; /* Отступы между элементами */
    }
    .about__content{
        max-width: 100%; /* Полная ширина контента */
    }
    .about__image {
        aspect-ratio: 1; /* Квадратные пропорции */
        display: flex;
        align-items: flex-start; /* Выравнивание изображения по верхнему краю */
        justify-content: center; /* Центрирование по горизонтали */
        width: 100%; /* Полная ширина контейнера */
    }
    .about__image img {
        width: 100%; 
        height: 100%; 
        min-height: 100%; 
        object-fit: cover; 
        object-position: top center; 
    }
    .about__button--desktop{
        display: none; /* Скрываем десктопную кнопку */
    }
    .about__button--mobile {
        display: flex; /* Показываем мобильную кнопку */
        width: -webkit-fill-available; /* Полная доступная ширина */
    }
    .about__button--mobile:hover {
        background: var(--berloga-magenta); /* Магнетовый фон при наведении */
        transform: translateY(-2px); /* Поднимаем кнопку */
        box-shadow: 0 4px 12px rgba(181, 8, 71, 0.3); /* Добавляем тень */
    }
    .about__experience-badge{
        right: 6%; /* Корректируем позицию бейджа для малых экранов */
    }
}

/* Очень малые мобильные */
@media (max-width: 480px) {
    .about__container {
        padding: 0 20px; /* Боковые отступы контейнера */
    }
    .about .about__content .about__button {
        padding: 12px 40px !important; /* Уменьшаем отступы кнопки */
        min-height: 48px !important; /* Минимальная высота для touch */
        font-size: 18px !important; /* Уменьшаем размер шрифта */
    }
}