/* Атмосфера — рекомендации МАКО */

/* Факты на первом экране: те же карточки темы, но текст вместо цифр таймера */
.mainbanner-block.atm-mako-hero .atm-mako-facts .advant-card .number {
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.6rem);
    white-space: nowrap;
}
.mainbanner-block.atm-mako-hero .atm-mako-facts .advant-card .advant-text {
    font-size: 14px;
    line-height: 125%;
}

/* Карточка с подзаголовком и кнопкой: тема ограничивала текст 210px под
   таймер; с фактами карточка стала шире, и текст сбился в узкий столбик.
   Даём тексту всю ширину слева от кнопки и чуть крупнее шрифт. */
/* ширину карточки не ограничиваем: её задают три карточки фактов ниже */
.mainbanner-block.atm-mako-hero .mainbanner-info .info__holder {
    max-width: min(100%, 960px);
}
.mainbanner-block.atm-mako-hero .mainbanner-info .info-btn {
    gap: 24px;
}
.mainbanner-block.atm-mako-hero .mainbanner-info .info-btn .mainbanner-subtitle {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
}
.mainbanner-block.atm-mako-hero .mainbanner-info .info-btn .mainbanner-subtitle p {
    font-size: clamp(16px, 1rem + 0.35vw, 20px);
    line-height: 135%;
}
.mainbanner-block.atm-mako-hero .mainbanner-info .info-btn .btn {
    flex: 0 0 auto;
}

/* Переключатель филиалов под карточками */
.atm-mako-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.atm-mako-switch__label {
    color: #fff;              /* первый экран — на фиолетовом фоне */
    opacity: .9;
    margin-right: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.atm-mako-switch__item {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--background, #fff);
    color: var(--primary, #d15bd6);
    border: 1.5px solid var(--primary, #d15bd6);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: background .2s, color .2s;
}
.atm-mako-switch__item:hover,
.atm-mako-switch__item.is-active {
    background: var(--primary, #d15bd6);
    color: #fff;
}

/* Кому подойдут занятия: сетка карточек как у «Для чего к нам приходят петь» */
.atm-audience-block .atm-audience__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.atm-audience-block.why-block .items__wrapper .card.atm-audience__card,
.atm-audience-block .atm-audience__card {
    height: auto;              /* тема даёт карточкам why-block фиксированные 300px */
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    border-radius: 20px;
    background: var(--background, #fff);
    box-shadow: 0 10px 30px rgba(34, 32, 42, .06);
}
.atm-audience-block .atm-audience__card .card-text {
    line-height: 140%;
}
.atm-audience-block .atm-audience__cta {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
@media (max-width: 860px) {
    .atm-audience-block .atm-audience__grid { grid-template-columns: 1fr; gap: 12px; }
    .atm-audience-block.why-block .items__wrapper .card.atm-audience__card { padding: 20px; }
    .mainbanner-block.atm-mako-hero .atm-mako-facts .advant-card .number { font-size: 1.3rem; }
}

/* Телефон: три карточки фактов в ряд не помещаются (тема считала на две
   цифры таймера) — ставим их столбиком, число слева, подпись справа;
   переключатель школ — подпись строкой, кнопки в ряд на всю ширину. */
@media (max-width: 660px) {
    .mainbanner-block.atm-mako-hero .mainbanner-info .info__holder {
        max-width: 100%;
        width: 100%;
    }
    .mainbanner-block.atm-mako-hero .atm-mako-facts {
        grid-template-columns: 1fr;
        gap: 8px;
        min-width: 0;
    }
    .mainbanner-block.atm-mako-hero .atm-mako-facts .advant-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        text-align: left;
        min-width: 0;
    }
    .mainbanner-block.atm-mako-hero .atm-mako-facts .advant-card .number {
        flex: 0 0 96px;
        font-size: 1.7rem;
        text-align: center;
        white-space: nowrap;
    }
    .mainbanner-block.atm-mako-hero .atm-mako-facts .advant-card .advant-text {
        flex: 1 1 auto;
        font-size: 14px;
        line-height: 125%;
        text-align: left;
    }
    .atm-mako-switch {
        width: 100%;
        gap: 8px;
        margin-top: 8px;
    }
    .atm-mako-switch__label {
        flex: 0 0 100%;
        margin: 0;
    }
    .atm-mako-switch__item {
        flex: 1 1 0;
        justify-content: center;
        padding: 10px 8px;
        font-size: 14px;
        white-space: nowrap;
    }
}