/* ============================================================ */
/* ПЕННЫЕ ПУЗЫРИ ДЛЯ СЕКЦИИ «УБОРКА КВАРТИР»                     */
/* ============================================================ */

/* Контейнер со случайной раскладкой (абсолютное позиционирование) */
.foam-apartments {
    position: relative;
    margin-top: 70px;
    min-height: 780px;
    padding: 0;
}

/* Позиции: крупные — сзади (z=1–3), средние — посередине (z=5),
   маленький — спереди (z=7). Тексты не перекрываются за счёт сдвига. */

/* 1. Генеральная уборка — теперь по центру (было: слева) */
.foam-apartments .a1 {
    width: 280px; height: 280px;
    top: 190px; left: 42%;
    font-size: 15px;
    animation-delay: 2.8s;
    z-index: 7;
}

/* 2. Регулярная уборка — крупный справа */
.foam-apartments .a2 {
    width: 300px; height: 300px;
    top: 0; left: 62%;
    font-size: 15px;
    animation-delay: 1.6s;
    z-index: 1;
}

/* 3. Уборка после ремонта — крупный по центру, чуть ниже */
.foam-apartments .a3 {
    width: 210px; height: 210px;
    top: 360px; left: 32%;
    font-size: 12px;
    animation-delay: 0.9s;
    z-index: 3;
}

/* 4. Мойка окон — средний, левый нижний, поверх a1 частично */
.foam-apartments .a4 {
    width: 220px; height: 220px;
    top: 300px; left: 2%;
    font-size: 12px;
    animation-delay: 2.2s;
    z-index: 5;
}

/* 5. Уборка после ЧП — средний, правый нижний, поверх a2 частично */
.foam-apartments .a5 {
    width: 220px; height: 220px;
    top: 380px; left: 72%;
    font-size: 13px;
    animation-delay: 1.1s;
    z-index: 5;
}

/* 6. Доп. услуги — теперь крупный слева (было: по центру) */
.foam-apartments .a6 {
    width: 240px; height: 240px;
    top: 40px; left: 10%;
    font-size: 14px;
    animation-delay: 0.4s;
    z-index: 2;
}

/* В тёмной секции пузыри должны быть чуть контрастнее */
.section.dark .foam-apartments .bubble {
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.92), rgba(255,255,255,.45) 30%, rgba(150,190,240,.28) 55%, rgba(120,170,235,.18) 100%);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
        inset -10px -14px 30px rgba(80,120,180,.35),
        inset 12px 14px 28px rgba(255,255,255,.75),
        0 20px 44px rgba(0,40,120,.35);
    color: #e8ecf1;
}

.section.dark .foam-apartments .bubble h3 { color: #fff; }
.section.dark .foam-apartments .bubble p { color: rgba(232,236,241,.75); }

/* Акцентный цвет — синий (var(--blue)) */
.section.dark .foam-apartments .bubble .ic {
    background: rgba(11,92,213,.22);
    color: var(--blue, #0b5cd5);
}
.section.dark .foam-apartments .bubble-btn {
    color: var(--blue, #0b5cd5);
}

/* Декоративные пузырьки (позиции) */
.foam-deco.d1 { width: 34px; height: 34px; top: 240px; left: 22%; animation-delay: .4s; }
.foam-deco.d2 { width: 22px; height: 22px; top: 90px;  left: 48%; animation-delay: 1.4s; }
.foam-deco.d3 { width: 28px; height: 28px; top: 580px; left: 60%; animation-delay: .8s; }
.foam-deco.d4 { width: 18px; height: 18px; top: 120px; left: 88%; animation-delay: 2.1s; }
.foam-deco.d5 { width: 24px; height: 24px; top: 660px; left: 18%; animation-delay: 1.7s; }

/* Наведение: пузырь всплывает поверх всех, чтобы текст был читаем */
.foam-apartments .bubble:hover {
    z-index: 100 !important;
}

/* ============================================================ */
/* АДАПТИВ                                                       */
/* ============================================================ */
@media (max-width: 1100px) {
    .foam-apartments { min-height: 900px; }

    .foam-apartments .a1 { width: 280px; height: 280px; left: 2%; }
    .foam-apartments .a2 { width: 270px; height: 270px; left: 58%; }
    .foam-apartments .a3 { width: 260px; height: 260px; top: 380px; left: 30%; }
    .foam-apartments .a4 { width: 210px; height: 210px; top: 340px; left: 0%; }
    .foam-apartments .a5 { width: 200px; height: 200px; top: 420px; left: 68%; }
    .foam-apartments .a6 { width: 180px; height: 180px; top: 220px; left: 40%; }
}

@media (max-width: 920px) {
    /* На мобильных — обычная сетка, чтобы всё читалось */
    .foam-apartments {
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
        justify-items: center;
        padding: 20px 0;
    }
    .foam-apartments .bubble,
    .foam-apartments .a1, .foam-apartments .a2, .foam-apartments .a3,
    .foam-apartments .a4, .foam-apartments .a5, .foam-apartments .a6 {
        position: static !important;
        width: 220px !important;
        height: 220px !important;
        font-size: 13px !important;
        animation-delay: 0s !important;
        z-index: auto !important;
    }
    .foam-deco { display: none !important; }
}

@media (max-width: 560px) {
    .foam-apartments { grid-template-columns: 1fr; }
    .foam-apartments .bubble { width: 240px !important; height: 240px !important; }
}