/* ===== СЕКЦИЯ "О НАС" ===== */
.about {
    position: relative;
    width: 100%;
    max-width: 1728px;
    margin: 0 auto;
    /* Убираем фиксированную высоту для плотного прилегания секций */
    padding: 0 28px 0;
    overflow: hidden; /* Изменено с visible на hidden чтобы элементы не выходили за границы */
    /* z-index ниже чтобы маскот чат-бота был поверх секции */
    z-index: 0;
}

/* Контейнер секции */
.about__container {
    position: relative;
    width: 100%;
    max-width: 1671px;
    margin: 0 auto;
    /* Оптимизированная высота для плотного прилегания секций */
    min-height: 985px;
    padding-bottom: 50px;
}

/* ===== КРУГЛЫЙ ФОН ===== */
/* Серая плашка в границах секции (выровнена с Hero и Chatbot) */
.about__background-circle {
    position: absolute;
    /* Выравниваем с остальными секциями */
    left: 0;
    top: 2px;
    /* Ширина контейнера для выравнивания */
    width: 100%;
    max-width: 1671px;
    height: 894px;
    background-color: #fafafa;
    border-radius: 59px;
    z-index: 1;
}

/* ===== ДЕКОРАТИВНЫЙ ТЕКСТ "SUMMER FAMILY" ===== */
/* Декоративный текст выровнен по правому краю как в макете */
.about__decorative-text {
    position: absolute;
    /* Выравниваем по правому краю с отступом как в Figma */
    right: 166px;
    top: 0px;
    font-family: 'Coolvetica', sans-serif;
    /* ТОЧНЫЙ размер из Figma */
    font-size: 389.43px;
    font-weight: 700; /* Coolvetica Bold */
    line-height: 467.32px;
    color: #e0dcf2;
    white-space: pre-line;
    text-align: right;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

/* ===== ТЕКСТ "Г.АНАПА" ===== */
.about__location {
    position: absolute;
    /* Используем процентное позиционирование */
    left: 42%;
    top: 194px;
    font-family: 'Coolvetica', sans-serif;
    font-size: 40.82px;
    font-weight: 400; /* Coolvetica Book */
    line-height: 48.99px;
    color: #000000;
    z-index: 3;
}

/* ===== КОНТЕНТ СЛЕВА ===== */
.about__content-left {
    position: absolute;
    left: 36px;
    top: 341px;
    width: 465px;
    max-width: 30%; /* Добавлено для адаптивности */
    z-index: 4;
}

/* ===== БЕЙДЖ "О НАС" ===== */
/* Две части: рамка и текст */
.about__badge-frame {
    /* Из Figma: width=117px, height=49.64px */
    width: 117px;
    height: 49.64px;
    border: 1px solid #000000;
    border-radius: 24.82px;
    background-color: transparent;
    margin-bottom: 38px;
}

.about__badge {
    /* Текст внутри рамки */
    font-family: 'Coolvetica', sans-serif;
    font-size: 28.95px;
    font-weight: 400; /* Coolvetica Book */
    line-height: 34.74px;
    color: #000000;
    /* Центрирование в рамке */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ===== ЗАГОЛОВОК ===== */
.about__title {
    font-family: 'Coolvetica', sans-serif;
    /* ТОЧНЫЙ размер из Figma */
    font-size: 44.56px;
    font-weight: 400; /* Coolvetica Book */
    /* ТОЧНАЯ высота строки из Figma */
    line-height: 59.23px;
    color: #000000;
    margin-bottom: 58px;
    /* Из Figma: width=465px, height=177px */
    width: 465px;
}

/* ===== КНОПКА "УЗНАТЬ БОЛЬШЕ" ===== */
.about__cta {
    /* Из Figma: width=349px, height=89px */
    width: 349px;
    height: 89px;
    background-color: #2f2f2f;
    border-radius: 44.5px;
    border: none;
    font-family: 'Coolvetica', sans-serif;
    /* ТОЧНЫЙ размер из Figma */
    font-size: 32.41px;
    font-weight: 300; /* Coolvetica Light */
    line-height: 38.89px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about__cta:hover {
    background-color: #1f1f1f;
    transform: scale(1.02);
}

.about__cta:active {
    transform: scale(0.98);
}

/* ===== ИЗОБРАЖЕНИЯ ===== */
.about__images {
    position: relative;
}

/* Колонка с изображением и текстом */
.about__image-column {
    display: inline-block;
}

/* ФОТО 1 (БОЛЬШОЕ - ФОТОГАЛЕРЕЯ) */
/* Адаптивное позиционирование */
.about__image-1 {
    position: absolute;
    /* Используем процентное позиционирование для адаптивности */
    left: 37%;
    top: 336px;
    /* Используем процентную ширину */
    width: 35%;
    max-width: 581px;
    height: auto;
    aspect-ratio: 581 / 455;
    border-radius: 38px;
    overflow: hidden;
    z-index: 5;
}

.about__image-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ЛЕЙБЛ НА ФОТО 1 */
/* Позиция из Figma: x=-6456, y=5292 (относительно главного фрейма) */
.about__image-label-1 {
    position: absolute;
    /* Из Figma: внутри фото на 18px от левого края, 76px снизу */
    left: 18px;
    bottom: 76px;
    /* Из Figma: 230x57px */
    width: 230px;
    height: 57px;
    background-color: #ffffff;
    border-radius: 28.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px 0 26px;
    z-index: 6;
}

.about__image-label-1 span {
    font-family: 'Coolvetica', sans-serif;
    font-size: 24.34px;
    font-weight: 400; /* Coolvetica Book */
    line-height: 29.21px;
    color: #000000;
}

/* Кнопка-иконка на лейбле */
.about__image-btn {
    /* Из Figma: 48.09x48.09px */
    width: 48.09px;
    height: 48.09px;
    background-color: #2f2f2f;
    border-radius: 23.96px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

.about__image-btn:hover {
    background-color: #1f1f1f;
    transform: scale(1.05);
}

/* Стрелка внутри кнопки - PNG иконка из Figma */
.about__image-btn::after {
    content: '';
    display: block;
    /* Размер иконки из Figma: ~17x17px */
    width: 17px;
    height: 17px;
    /* PNG иконка стрелки */
    background-image: url('../../assets/images/about/arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Стрелка не блокирует клики */
    pointer-events: none;
    /* Плавная анимация при hover */
    transition: transform 0.3s ease;
}

/* Увеличение стрелки при наведении на кнопку */
.about__image-btn:hover::after {
    transform: scale(1.1);
}

/* ФОТО 2 (НОМЕРА) */
/* Адаптивное позиционирование */
.about__image-2 {
    position: absolute;
    /* Позиционируем справа с отступом */
    right: 30px;
    top: 221px;
    /* Процентная ширина для адаптивности */
    width: 27%;
    max-width: 446px;
    height: auto;
    aspect-ratio: 446 / 467;
    border-radius: 42px;
    overflow: hidden;
    z-index: 5;
}

.about__image-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ЛЕЙБЛ НА ФОТО 2 */
.about__image-label-2 {
    position: absolute;
    left: 21px;
    bottom: 79px;
    width: 176px;
    height: 57px;
    background-color: #ffffff;
    border-radius: 28.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px 0 20px;
    z-index: 6;
}

.about__image-label-2 span {
    font-family: 'Coolvetica', sans-serif;
    font-size: 24.34px;
    font-weight: 400; /* Coolvetica Book */
    line-height: 29.21px;
    color: #000000;
}

/* ТЕКСТ ПОД ФОТО 2 */
.about__image-caption {
    position: absolute;
    /* Позиционируем справа, под фото 2 */
    right: 30px;
    top: 706px;
    /* Процентная ширина */
    width: 27%;
    max-width: 449px;
    font-family: 'Coolvetica', sans-serif;
    font-size: 30.56px;
    font-weight: 250; /* Coolvetica ExtraLight */
    line-height: 38.97px;
    color: #000000;
    z-index: 4;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 1700px) {
    .about {
        padding: 0 40px;
    }
    
    .about__decorative-text {
        font-size: 280px;
        line-height: 340px;
        right: 100px;
    }
    
    .about__background-circle {
        width: 100%;
        max-width: 100%;
        height: 800px;
        left: 0;
        right: 0;
    }
    
    .about__content-left {
        max-width: 35%;
    }
    
    .about__image-1 {
        width: 32%;
    }
    
    .about__image-2 {
        width: 25%;
        right: 20px;
    }
    
    .about__image-caption {
        width: 25%;
        font-size: 26px;
        line-height: 34px;
    }
}

@media (max-width: 1400px) {
    .about {
        min-height: auto;
        padding: 80px 28px;
    }
    
    .about__container {
        min-height: auto;
    }
    
    .about__decorative-text {
        font-size: 200px;
        line-height: 240px;
        right: 50px;
    }
    
    .about__background-circle {
        width: 100%;
        max-width: 100%;
        height: 600px;
        left: 0;
        /* Растягиваем на всю доступную ширину */
        right: 0;
    }
    
    .about__content-left {
        position: relative;
        left: 0;
        top: 0;
        max-width: 100%;
        width: 100%;
        margin-bottom: 60px;
        /* Центрируем контент */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .about__title {
        width: 100%;
        max-width: 600px;
    }
    
    .about__location {
        position: relative;
        left: 0;
        top: 0;
        margin-bottom: 40px;
        /* Центрируем текст */
        text-align: center;
        width: 100%;
    }
    
    /* Фотографии адаптивно по всей ширине */
    .about__images {
        display: flex;
        flex-direction: row;
        gap: 2%;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
    }
    
    /* Колонки для изображений */
    .about__image-column {
        display: flex;
        flex-direction: column;
        width: 49%;
        flex-grow: 1;
    }
    
    .about__image-1,
    .about__image-2 {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        max-width: none;
        margin: 0;
    }
    
    /* Текст под первой фотографией (фотоальбом) */
    .about__image-caption {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .about {
        padding: 60px 20px;
    }
    
    .about__content-left {
        align-items: center;
        text-align: center;
    }
    
    .about__title {
        font-size: 32px;
        line-height: 42px;
        width: 100%;
        text-align: center;
    }
    
    .about__cta {
        width: 100%;
        max-width: 349px;
        font-size: 28px;
        margin: 0 auto;
    }
    
    .about__location {
        text-align: center;
    }
    
    /* На мобильной версии фотографии идут вертикально */
    .about__images {
        flex-direction: column;
        gap: 30px;
    }
    
    .about__image-column {
        width: 100%;
    }
    
    .about__image-1,
    .about__image-2 {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    
    .about__image-caption {
        margin-top: 15px;
    }
    
    .about__decorative-text {
        font-size: 120px;
        line-height: 140px;
        right: 20px;
    }
    
    .about__background-circle {
        width: 100%;
        max-width: 100%;
        height: 400px;
        left: 0;
    }
    
    .about__location {
        font-size: 36px;
        line-height: 44px;
    }
    
    .about__image-caption {
        font-size: 24px;
        line-height: 32px;
    }
}

@media (max-width: 480px) {
    .about {
        padding: 40px 15px;
    }
    
    .about__content-left {
        align-items: center;
        text-align: center;
    }
    
    .about__badge-frame {
        width: 100px;
        height: 42px;
        border-radius: 21px;
        margin: 0 auto 30px;
    }
    
    .about__badge {
        font-size: 24px;
        line-height: 30px;
    }
    
    .about__title {
        font-size: 26px;
        line-height: 34px;
        text-align: center;
    }
    
    .about__cta {
        font-size: 24px;
        height: 70px;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .about__location {
        font-size: 28px;
        line-height: 36px;
        text-align: center;
    }
    
    .about__image-caption {
        font-size: 20px;
        line-height: 28px;
    }
    
    .about__decorative-text {
        font-size: 80px;
        line-height: 96px;
        right: 10px;
    }
    
    .about__background-circle {
        width: 100%;
        max-width: 100%;
        height: 300px;
        left: 0;
    }
    
    .about__image-label-1,
    .about__image-label-2 {
        width: auto; /* Автоматическая ширина под контент */
        min-width: 160px; /* Минимальная ширина */
        max-width: calc(100% - 36px); /* Максимальная ширина с учетом отступов */
        height: 48px;
        padding: 0 10px 0 20px; /* Увеличили отступы: слева 20px, справа 10px */
        gap: 12px; /* Добавили расстояние между текстом и кнопкой */
        left: 18px; /* Сохраняем отступ слева */
        bottom: 20px; /* Уменьшаем отступ снизу для мобильных */
    }
    
    .about__image-label-1 span,
    .about__image-label-2 span {
        font-size: 18px; /* Немного уменьшаем шрифт */
        line-height: 22px;
        white-space: nowrap; /* Запрещаем перенос текста */
        margin-right: auto; /* Прижимаем текст влево, а кнопку вправо */
    }
    
    .about__image-btn {
        width: 36px; /* Уменьшаем кнопку */
        height: 36px;
        flex-shrink: 0; /* Кнопка не сжимается */
    }
    
    .about__image-btn::after {
        width: 12px;
        height: 12px;
    }
}

/* Дополнительная адаптация для очень маленьких экранов */
@media (max-width: 375px) {
    .about__image-label-1,
    .about__image-label-2 {
        min-width: 140px;
        max-width: calc(100% - 24px);
        height: 44px;
        padding: 0 8px 0 16px; /* Увеличили отступы для маленьких экранов */
        gap: 10px; /* Расстояние между текстом и кнопкой */
        left: 12px;
        bottom: 15px;
    }
    
    .about__image-label-1 span,
    .about__image-label-2 span {
        font-size: 16px;
        line-height: 20px;
        margin-right: auto; /* Прижимаем текст влево */
    }
    
    .about__image-btn {
        width: 32px;
        height: 32px;
    }
    
    .about__image-btn::after {
        width: 10px;
        height: 10px;
    }
}