/* ============================================================================
   MOBILE.CSS — адаптация сайта OutLoud под мобильные устройства
   Брейкпоинт: max-width: 640px
   Подключается ТОЛЬКО на мобильных (см. header.php)
   Автор: адаптация Muse-вёрстки
   ============================================================================ */
   
/* ============================================================================
   БАЗОВЫЕ СТИЛИ (применяются ВСЕГДА — и на десктопе, и на мобильных)
   Скрывают мобильные элементы, чтобы они не «вылезали» на десктопе
   ============================================================================ */

.mobile-burger,
.mobile-nav {
    display: none !important;
}

/* ============================================================================
   МОБИЛЬНЫЕ СТИЛИ — только для экранов <= 640px
   ============================================================================ */

@media screen and (max-width: 640px) {   

@media screen and (max-width: 640px) {

/* ========================================================================
   0. СЛУЖЕБНЫЕ ЭЛЕМЕНТЫ MUSE — скрываем то, что должно быть скрыто
   ======================================================================== */

/* Явно скрываем "АНИМЭЙТ v.3.5" */
#u359 {
    display: none !important;
}

/* Уважаем инлайн display:none, выставленный Muse */
.grpelem[style*="display:none"],
.grpelem[style*="display: none"] {
    display: none !important;
}

    /* ========================================================================
       1. ГЛОБАЛЬНЫЙ СБРОС ФИКСАЦИИ ШИРИНЫ
       Muse ставил width: 960px и min-width: 960px — отменяем
       ======================================================================== */

    html {
        min-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        min-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    #page {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    #page_position_content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        float: none !important;
        margin: 0 !important;
    }

    /* Все Muse-элементы — отменяем абсолютное позиционирование */
    .grpelem,
    .colelem {
        float: none !important;
        display: block !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        left: auto !important;
        right: auto !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Обнуляем отрицательные margin'ы Muse */
    [id*="pu"], [id*="ppu"], [id*="pppu"] {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }


    /* ========================================================================
       2. ШАПКА — ЛОГОТИП, ПОИСК, МЕНЮ
       ======================================================================== */

    /* Верхняя часть шапки (лого + поиск) */
    #pu1974 {
        margin: 0 !important;
        padding: 10px 0 !important;
    }

    #u1974 {
        width: 100% !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Белый блок над шапкой */
    #u1970 {
        width: 100% !important;
        height: auto !important;
        min-height: 70px !important;
        position: relative !important;
    }

    /* Оранжевая полоса под шапкой */
    #u4010-bw,
    #u4010 {
        width: 100% !important;
        height: 4px !important;
        position: relative !important;
    }

    /* Логотип */
    #u8024 {
        position: absolute !important;
        top: 15px !important;
        left: 12px !important;
        width: 130px !important;
        margin: 0 !important;
        z-index: 100 !important;
    }

    #u8025 {
        width: 130px !important;
        height: auto !important;
    }

    /* Поиск — компактная строка под шапкой */
    #u5156 {
        width: 100% !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 8px 0 0 0 !important;
        padding: 0 !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        background: #fff !important;
        z-index: 5 !important;
    }

    #u5156 form {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    #u5186 {
        display: none !important; /* скрываем иконку Muse-лупы */
    }

    #u5159-4 {
        position: relative !important;
        left: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #supersearch {
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 15px !important;
        border: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    /* Скрываем десктопные Muse-меню */
    #pamphletu12116,
    #pamphletu12132,
    #pamphletu12148,
    #pamphletu12163,
    #u12131-4 {
        display: none !important;
    }


    /* ========================================================================
       3. БУРГЕР-МЕНЮ (генерируется в header.php)
       ======================================================================== */

    .mobile-burger {
        display: flex !important;
        position: absolute !important;
        top: 20px !important;
        right: 14px !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 0 !important;
        z-index: 200 !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-burger span {
        display: block !important;
        width: 26px !important;
        height: 3px !important;
        background: #000 !important;
        border-radius: 2px !important;
        transition: transform 0.25s ease, opacity 0.25s ease !important;
        transform-origin: center !important;
    }

    .mobile-burger.is-open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    .mobile-burger.is-open span:nth-child(2) {
        opacity: 0 !important;
    }
    .mobile-burger.is-open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }

    /* Мобильное меню */
    .mobile-nav {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: #fff !important;
        z-index: 150 !important;
        overflow-y: auto !important;
        padding: 80px 20px 40px !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mobile-nav.is-open {
        display: block !important;
    }

    .mobile-nav ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mobile-nav li {
        border-bottom: 1px solid #eee !important;
    }

    .mobile-nav a {
        display: block !important;
        padding: 16px 8px !important;
        color: #000 !important;
        text-decoration: none !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        font-family: 'Roboto', sans-serif !important;
        transition: color 0.2s !important;
    }

    .mobile-nav a:hover,
    .mobile-nav a:active {
        color: #F7931E !important;
    }

    /* Затемнение фона при открытом меню */
    body.mobile-menu-open {
        overflow: hidden !important;
    }


    /* ========================================================================
       4. БАННЕР "КАРТИНА ДНЯ" (.day-banner-clean)
       ======================================================================== */

    .day-banner-clean {
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 24px 0 !important;
        padding: 0 !important;
    }

    .day-banner-clean .banner-image {
        width: 100% !important;
        max-height: 260px !important;
        object-fit: cover !important;
    }

    .day-banner-clean .banner-badge-wrap {
        bottom: -10px !important;
    }

    .day-banner-clean .banner-badge {
        padding: 6px 16px !important;
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
    }

    .day-banner-clean .banner-content {
        margin-top: 16px !important;
        padding: 0 !important;
    }

    .day-banner-clean .banner-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin: 0 0 4px 0 !important;
    }

    .day-banner-clean .banner-date {
        font-size: 13px !important;
    }


    /* ========================================================================
       5. СЕКЦИИ НОВОСТЕЙ — ВСЁ В ОДНУ КОЛОНКУ
       ======================================================================== */

    /* Общие правила для карточек картинок */
    .clip_frame img,
    .block {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 4px !important;
    }

    /* Все секции новостей */
    #pu4414,
    #pu4441,
    #pu4995,
    #pu5284,
    #pppu5132,
    #ppu5132,
    #pu5132 {
        width: 100% !important;
        margin: 0 0 24px 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Каждая карточка картинки — на всю ширину */
    #u4414,
    #u4978,
    #u4441,
    #u4507,
    #u4517,
    #u4995,
    #u4662,
    #u5132,
    #u5122,
    #u5277,
    #u5284 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        left: auto !important;
        position: relative !important;
    }

    /* Плашки "картина дня" */
    #u4527, #uqw4527, #qwu4484,
    #u4484, #u4669, #u5102, #u5145, #u5291 {
        display: none !important;
    }

    /* Блоки заголовков */
    #ppu4427-4,
    #ppu4474-6,
    #ppu4659-4,
    #ppu5300-4,
    #pu5096-6,
    #pu5139-8 {
        width: 100% !important;
        margin: 0 0 24px 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    #pu4427-4,
    #pu4474-6,
    #pu4659-4,
    #pu5300-4,
    #pu5139-8 {
        width: 100% !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
    }

    /* Заголовки новостей */
    #u4427-4,
    #u4317-4,
    #u4474-6,
    #u4464-4,
    #u4451-8,
    #u4659-4,
    #u4656-4,
    #u5096-6,
    #u5139-8,
    #u5300-4,
    #u5297-4 {
        width: 100% !important;
        min-height: auto !important;
        font-size: 17px !important;
        line-height: 1.3 !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        left: auto !important;
        position: relative !important;
    }

    /* Даты */
    #u26803-4,
    #u26800-4,
    #u26815-4,
    #u26809-4,
    #u26833-4,
    #u26842-4,
    #u26839-4,
    #u26848-4,
    #u26845-4,
    #u26863-4,
    #u26860-4 {
        width: 100% !important;
        font-size: 12px !important;
        color: #999 !important;
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        left: auto !important;
        position: relative !important;
    }

    /* Скрываем пустые/дублирующие блоки */
    #ppu4474-6 .clearfix.grpelem[style*="left: 652px"],
    #u26833-4 {
        display: none !important;
    }


    /* ========================================================================
       6. РЕКЛАМНЫЙ БАННЕР (#u4683) — оставляем, на всю ширину
       ======================================================================== */

    #u4683 {
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 !important;
    }

    #u4683 img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 4px !important;
    }

    /* Чёрные разделители */
    #u4693,
    #u4699 {
        width: 100% !important;
        margin: 20px 0 !important;
    }


    /* ========================================================================
       7. ПОДВАЛ (#u20534)
       ======================================================================== */

    #u20534-bw,
    #u20534 {
        width: 100% !important;
        min-height: auto !important;
        padding: 30px 16px !important;
        box-sizing: border-box !important;
        margin-top: 24px !important;
    }

    #u20534_align_to_page {
        width: 100% !important;
        left: auto !important;
        margin: 0 !important;
        display: block !important;
    }

    #pu20560 {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
    }

    #u20560 {
        width: 130px !important;
        margin: 0 auto 20px auto !important;
    }

    #u20561 {
        width: 130px !important;
        height: auto !important;
    }

    /* Кнопки в подвале */
    #u20562,
    #u20564 {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto 10px auto !important;
        padding-bottom: 6px !important;
        position: relative !important;
        top: auto !important;
    }

    #u20563-4,
    #u20564-4 {
        width: 100% !important;
        margin: 0 auto !important;
        left: auto !important;
        position: relative !important;
    }

    /* Социальные иконки */
    #u20549 {
        width: 100% !important;
        margin: 20px auto !important;
        display: flex !important;
        justify-content: center !important;
        gap: 16px !important;
    }

    #pu20550, #pu20553, #pu20558 {
        width: auto !important;
        margin: 0 !important;
        position: relative !important;
    }

    /* Колонка ссылок */
    #u20535 {
        width: 100% !important;
        left: auto !important;
        margin: 24px 0 0 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #u20535 a,
    #u20535 .clearfix {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 4px 0 !important;
    }

    #u20535 p {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }

    /* Большая цифра "14+" */
    #u20559-5 {
        display: none !important;
    }


    /* ========================================================================
       8. ПАГИНАЦИЯ И КНОПКА "ВСЕ НОВОСТИ"
       ======================================================================== */

    div.k2Pagination ul {
        padding: 15px 5px !important;
        flex-wrap: wrap !important;
    }

    div.k2Pagination li.pagination-next {
        float: none !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    /* Кнопка "Все новости →" */
    #page_position_content > .clearfix.colelem[style*="text-align: center"] a {
        width: 100% !important;
        max-width: 280px !important;
        box-sizing: border-box !important;
    }


    /* ========================================================================
       9. КОПИРАЙТ
       ======================================================================== */

    #page + div {
        padding: 12px 16px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }


    /* ========================================================================
       10. ФОРМА СВЯЗИ И ПОДПИСКИ — на всю ширину
       ======================================================================== */

    #u19523 input.textbox,
    #u19523 input.email,
    #u19523 textarea.editbox {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* важно: >= 16px чтобы iOS не зумил */
    }

    .subscribe-page {
        margin-top: 100px !important;
        padding: 0 16px !important;
    }

    .subscribe-custom {
        padding: 20px !important;
    }

    .subscribe-page-header h1 {
        font-size: 22px !important;
    }


    /* ========================================================================
       11. КОНТЕНТ СТАТЕЙ (#u6190-14) — читаемость на телефоне
       ======================================================================== */

    #u6190-14 {
        font-size: 16px !important;
        line-height: 1.7 !important;
        padding: 0 12px !important;
    }

    #u6190-14 h2 { font-size: 20px !important; }
    #u6190-14 h3 { font-size: 18px !important; }

    #u6190-14 img {
        width: 100% !important;
        height: auto !important;
    }


    /* ========================================================================
       12. УБИРАЕМ ЛИШНИЙ ВЕРТИКАЛЬНЫЙ СПЕЙСЕР MUSE
       ======================================================================== */

    .verticalspacer {
        height: auto !important;
        min-height: 0 !important;
    }

    .css_verticalspacer .verticalspacer {
        height: 0 !important;
    }


    /* ========================================================================
       13. УЛУЧШЕНИЯ UX ДЛЯ ТАЧА
       ======================================================================== */

    a, button, .transition, .grpelem[onclick] {
        -webkit-tap-highlight-color: rgba(247, 147, 30, 0.15) !important;
    }

    .transition:hover p {
        text-decoration: none !important; /* убираем hover на тач */
    }

    .transition:active p {
        text-decoration: underline !important;
    }

}