/* =============================================================
   Footer mega — мобильная версия (accordion-навигация).
   Стиль один в один с мобильным футером a101.ru.
   Дополняет /local/templates/aspro-premier/css/footer-mega.css.
   ============================================================= */

/* Сброс десктопного grid — одна колонка */
.footer-mega--mobile .footer-mega__inner {
    grid-template-columns: 1fr;
    padding: 0;
    border-radius: 0;
    gap: 0;
    background-color: transparent;
    overflow: hidden;
}

/* Full-bleed фон задаётся в footer-mega.css (#footer .footer-mega) */
#footer .footer-mega.footer-mega--mobile {
    border-radius: 16px;
}

/* Баннеры скрыты в мобильной версии */
.footer-mega--mobile .footer-mega__col--banners {
    display: none !important;
}

/* Единственная колонка занимает 100% */
.footer-mega--mobile .footer-mega__col--menus-all {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ================================================================
   Каждый accordion-item (footer-mega-group)
   ================================================================ */
.footer-mega--mobile .footer-mega-group {
    gap: 0;
    border-bottom: 1px solid rgba(27, 29, 36, 0.08);
}

/* Последний элемент (legal) — без нижней границы */
.footer-mega--mobile .footer-mega-group:last-child {
    border-bottom: none;
}

/* ================================================================
   Кнопка-заголовок аккордеона (toggle)
   Высота 48px, стиль как на a101.ru:
   — шрифт regular/medium, 15px
   — стрелка справа, серая
   ================================================================ */
.footer-mega--mobile .footer-mega-group__toggle {
    align-items: center;
    background: none;
    border: none;
    color: var(--color-body, #1b1d24);
    cursor: pointer;
    display: flex;
    font-size: 15px;
    font-weight: 400;
    gap: 8px;
    justify-content: space-between;
    letter-spacing: -0.015rem;
    line-height: 1.25;
    min-height: 48px;
    padding: 12px 20px;
    text-align: left;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

.footer-mega--mobile .footer-mega-group__toggle:focus {
    outline: none;
}

.footer-mega--mobile .footer-mega-group__toggle:active {
    background-color: rgba(27, 29, 36, 0.04);
}

/* Стрелка (chevron) — серая, вращается при открытии */
.footer-mega--mobile .footer-mega-group__toggle-arrow {
    color: var(--color-base-400, #9ea2ae);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.footer-mega--mobile .footer-mega-group__toggle--opened .footer-mega-group__toggle-arrow {
    transform: rotate(180deg);
}

/* ================================================================
   Содержимое аккордеона
   ================================================================ */
.footer-mega--mobile .footer-mega-accordion__content {
    display: none;
    padding: 0 20px 12px;
}

/* ================================================================
   Список ссылок меню внутри аккордеона
   ================================================================ */
.footer-mega--mobile .footer-mega-menu {
    gap: 0;
    padding: 0;
}

.footer-mega--mobile .footer-mega-menu__item {
    margin: 0;
}

.footer-mega--mobile .footer-mega-menu__link {
    color: var(--color-base-600, #43495a);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    gap: 6px;
    letter-spacing: -0.014rem;
    line-height: 1.3;
    padding: 6px 0;
    text-decoration: none;
}

.footer-mega--mobile .footer-mega-menu__link:hover {
    color: var(--color-primary-500, #e8363d);
}

.footer-mega--mobile .footer-mega-menu__price {
    color: var(--color-base-400, #9ea2ae);
    font-size: 13px;
    white-space: nowrap;
}

/* ================================================================
   ЖК-карточки внутри аккордеона «Проекты»
   ================================================================ */
.footer-mega--mobile .footer-mega-projects--accordion {
    padding: 0;
    gap: 4px;
}

.footer-mega--mobile .footer-mega-project {
    padding: 6px 0;
    border-radius: 12px;
}

.footer-mega--mobile .footer-mega-project:hover {
    background-color: rgba(27, 29, 36, 0.04);
    padding-inline: 6px;
}

.footer-mega--mobile .footer-mega-project__image {
    height: 44px;
    width: 44px;
    flex-shrink: 0;
}

/* «Все проекты» — логотип Atmosfera */
.footer-mega--mobile .footer-mega-project__image--logo {
    align-items: center;
    background-color: #e6e7ea;
    display: flex;
    justify-content: center;
    padding: 4px;
}

.footer-mega--mobile .footer-mega-project__image--logo img {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.footer-mega--mobile .footer-mega-project__content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* Название ЖК — переносится, без обрезки */
.footer-mega--mobile .footer-mega-project__name {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

/* Адрес — переносится, без обрезки многоточием */
.footer-mega--mobile .footer-mega-project__info {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.footer-mega--mobile .footer-mega-project__address {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

/* ================================================================
   Юридические ссылки (footer_legal) — без аккордеона, в самом низу
   ================================================================ */
.footer-mega--mobile .footer-mega-group--legal {
    border-bottom: none;
    padding: 12px 20px 16px;
}

.footer-mega--mobile .footer-mega-group--legal .footer-mega-menu {
    gap: 4px;
}

.footer-mega--mobile .footer-mega-group--legal .footer-mega-menu__link {
    color: var(--color-base-400, #9ea2ae);
    font-size: 12px;
    padding: 2px 0;
}

/* ================================================================
   footer__bottom-text — юридический текст под копирайтом
   ================================================================ */
.footer__bottom-text {
    margin-top: 8px;
}

.footer__bottom-text p {
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-base-400, #9ea2ae);
    opacity: 0.85;
}

.footer__bottom-text p:last-child {
    margin-bottom: 0;
}

.footer__bottom-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer__bottom-text a:hover {
    color: var(--color-primary-500, #e8363d);
}

/* ================================================================
   Тёмная тема футера
   ================================================================ */
#footer.footer--color-dark .footer-mega.footer-mega--mobile {
    background-color: rgba(255, 255, 255, 0.05);
}

.footer--color-dark .footer-mega--mobile .footer-mega-group {
    border-color: rgba(255, 255, 255, 0.08);
}

.footer--color-dark .footer-mega--mobile .footer-mega-group__toggle {
    color: #fff;
}

.footer--color-dark .footer-mega--mobile .footer-mega-menu__link {
    color: #c7c8ce;
}

.footer--color-dark .footer-mega--mobile .footer-mega-menu__link:hover {
    color: var(--color-primary-500, #e8363d);
}

.footer--color-dark .footer-mega--mobile .footer-mega-group--legal .footer-mega-menu__link {
    color: rgba(199, 200, 206, 0.7);
}
.footer-mega.footer-mega--mobile {
    margin-top: 0;
}

/* ================================================================
   Контекст мобильного меню (.footer-mega--in-menu)
   — те же аккордеоны, но баннеры показаны, фон прозрачный,
     отступы совпадают с остальными пунктами меню.
   ================================================================ */

/* Сброс фона и скруглений, чтобы блок вписался в меню */
.footer-mega--in-menu.footer-mega--mobile .footer-mega__inner {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    gap: 0;
}

/* Разделительная линия перед блоком навигации */
.footer-mega--in-menu {
    border-top: 1px solid rgba(27, 29, 36, 0.08);
    margin-top: 8px;
    margin-bottom: 0;
    padding-top: 4px;
}

/* Баннеры в меню скрыты */
.footer-mega--in-menu .footer-mega__col--banners {
    display: none !important;
}

/*
 * Якорь для ui-card__link: без position:relative ссылка баннера (inset:0)
 * цепляется к .mobilemenu и перекрывает всё меню — клики по пунктам не работают.
 */
.footer-mega--in-menu .footer-mega-banner {
    position: relative;
    overflow: hidden;
}

.footer-mega--in-menu .footer-mega-banner .ui-card__link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* Баннер: адаптируем под ширину меню */
.footer-mega--in-menu .footer-mega-banner.footer-mega-banner--ui {
    width: 100%;
    padding: 0;
    border-radius: 20px;
    box-shadow: none !important;
}

.footer-mega--in-menu .footer-mega-banner.footer-mega-banner--ui .footer-mega-banner__media {
    --aspect-ratio: 921 / 434;
    aspect-ratio: 921 / 434;
    height: auto;
    min-height: 0;
    max-height: none;
}

.footer-mega--in-menu .footer-mega-banner.footer-mega-banner--ui .side_banners__title {
    font-size: 16px;
}

.footer-mega--in-menu .footer-mega-banner.footer-mega-banner--ui .side_banners__text {
    max-width: 100%;
}

.footer-mega--in-menu .footer-mega-banner.footer-mega-banner--ui .side_banners__cta {
    width: 44px;
    height: 44px;
}

/* Аккордеоны: те же стили, что в футере */
.footer-mega--in-menu .footer-mega-group {
    border-color: rgba(27, 29, 36, 0.08);
}

.footer-mega--in-menu .footer-mega-group__toggle {
    padding-left: 0;
    padding-right: 0;
}

.footer-mega--in-menu .footer-mega-accordion__content {
    padding-left: 0;
    padding-right: 0;
}

.footer-mega--in-menu .footer-mega-group--legal {
    padding-left: 0;
    padding-right: 0;
}

/* ---- Тёмная тема меню ---- */
#mobilemenu .footer-mega--in-menu {
    border-color: rgba(255, 255, 255, 0.08);
}

#mobilemenu .footer-mega--in-menu .footer-mega-group {
    border-color: rgba(255, 255, 255, 0.08);
}

#mobilemenu .footer-mega--in-menu .footer-mega-group__toggle {
    color: var(--white_text_black, #1b1d24);
}

#mobilemenu .footer-mega--in-menu .footer-mega-menu__link {
    color: var(--basic_text_black, #43495a);
}

#mobilemenu .footer-mega--in-menu .footer-mega-menu__link:hover {
    color: var(--color-primary-500, #e8363d);
}

#mobilemenu .footer-mega--in-menu .footer-mega-group--legal .footer-mega-menu__link {
    color: var(--gray_text_black, #9ea2ae);
}

#mobilemenu .footer-mega--in-menu .footer-mega-project__name,
#mobilemenu .footer-mega--in-menu .footer-mega-project__price,
#mobilemenu .footer-mega--in-menu .footer-mega-project__address {
    color: var(--basic_text_black, #43495a);
}