/*
 * Babakhan Foundation — Responsive fixes
 * --------------------------------------------------------------------------
 * Файл содержит ТОЛЬКО исправления адаптивности темы Babakhan (v2.0).
 * Дизайн, цвета, шрифты, структура разметки и функциональность не меняются.
 * Подключается последним (после style.css / responsive.css / custom.css),
 * поэтому переопределяет только перечисленные ниже правила.
 *
 * Откат: удалить подключение файла в functions.php (или сам файл) — сайт
 * вернётся в исходное состояние, т.к. исходные файлы темы не изменялись.
 */


/* ==========================================================================
   1. Контейнер: потеря боковых отступов в диапазоне 1211–1359 px
   --------------------------------------------------------------------------
   style.css задаёт .container { padding: 0; max-width: 83rem (1328px) },
   а responsive.css возвращает отступы только при max-width: 1210px.
   В промежутке 1211–1359 px контейнер занимает 100% ширины без полей:
   текст прилипает к краям экрана, а .row (margin: 0 -15px) выходит за
   пределы viewport. Возвращаем те же отступы, что тема использует ≤1210px.
   ========================================================================== */
@media (min-width: 1211px) and (max-width: 1359.98px) {
    .container {
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
    }

    /* Как и в responsive.css ≤1210px: вложенный контейнер без двойных полей */
    .container-fluid .container {
        padding-left: 0;
        padding-right: 0;
    }
}


/* ==========================================================================
   2. Изображения: искажение пропорций
   --------------------------------------------------------------------------
   2.1 «Ислом уламолари»: .team-img img имеет жёсткую height: 500px при
       width: 100% — портреты растягиваются (до 37% на 320–430px, а также
       на 1024 и 1920px). object-fit сохраняет размер блока без искажений.
   2.2 Логотипы партнёров сжимаются по ширине (до 2×) на всех разрешениях.
   ========================================================================== */
.team-img img {
    object-fit: cover;
    object-position: center top;
}

.partner-item img {
    object-fit: contain;
}


/* ==========================================================================
   3. Типографика: выравнивание по ширине на узких колонках
   --------------------------------------------------------------------------
   Глобальное p { text-align: justify } и утилита .text-justify (!important
   из Bootstrap) создают «реки» пробелов в колонках шириной 200–400px.
   Однострочные абзацы при justify и так выровнены по левому краю, поэтому
   замена на start меняет только межсловные интервалы.
   Правило для p без !important: более специфичные правила темы
   (например, центрирование) продолжают действовать.
   ========================================================================== */
@media (max-width: 1199.98px) {
    /* Подзаголовки секций и текст футера — узкие колонки уже на планшетах */
    .sec-title-inner > p,
    .footer-data .widget p {
        text-align: start;
    }

    .sec-title-inner > p.text-justify,
    .footer-data .widget p.text-justify {
        text-align: start !important;
    }

    /* Карточки контактов («Алоқа») центрированы (.text-center),
       а абзац внутри растягивается по ширине */
    .cont-info-box > p {
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    p,
    .prod-detail-info > p {
        text-align: start;
    }

    .text-justify {
        text-align: start !important;
    }

    /* Абзац на слайде героя: заголовок и кнопка центрированы */
    .feat-cap > p,
    .feat-cap > p.text-justify {
        text-align: center !important;
    }
}


/* ==========================================================================
   4. Заголовок внутренних страниц (баннер с хлебными крошками)
   --------------------------------------------------------------------------
   style.css уменьшает .page-title-inner > h1 до 1rem при ≤765px — H1
   становится равен основному тексту и хлебным крошкам, теряется иерархия.
   Плавное масштабирование: 20px на 360px → 28px на 765px.
   ========================================================================== */
@media (max-width: 765px) {
    .page-title-inner > h1 {
        font-size: clamp(1.25rem, 5.5vw, 1.75rem);
        line-height: 1.25;
        overflow-wrap: break-word;
    }
}


/* ==========================================================================
   5. Заголовки в контенте страниц (блоки Gutenberg) ≤575px
   --------------------------------------------------------------------------
   H2 блока «Заголовок» остаётся 32px на любом экране: длинные слова
   (например, «БОБОХОНОВЛАРНИНГ» на странице «Муфтий Бобохоновларнинг
   сафдошлари…») не помещаются в 290px и выходят за край экрана.
   ========================================================================== */
@media (max-width: 575.98px) {
    h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }

    h2.wp-block-heading {
        font-size: clamp(1.375rem, 7vw, 2rem);
    }
}


/* ==========================================================================
   6. Главная: точки слайдера под кнопкой «Батафсил» (≤576px)
   --------------------------------------------------------------------------
   responsive.css ставит .feat-wrap.v1 ul.slick-dots { bottom: 10rem } —
   точки перекрываются кнопкой. Опускаем их в свободную зону между кнопкой
   и блоком «Фондни қўллаб қувватлаш».
   ========================================================================== */
@media (max-width: 576px) {
    .feat-wrap.v1 ul.slick-dots {
        bottom: 4.75rem;
    }
}


/* ==========================================================================
   7. Заголовки секций со стрелками слайдера (Янгиликлар / Мақолалар)
   --------------------------------------------------------------------------
   Стрелки .event-caro позиционированы абсолютно (top: -6.875rem; right: 0)
   и на 576–1199px перекрывают подзаголовок секции. Резервируем место.
   ========================================================================== */
@media (min-width: 576px) and (max-width: 1199.98px) {
    [class*="col-"]:has(> .event-wrap2 .event-caro) > .sec-title .sec-title-inner {
        padding-right: 8.5rem;
    }
}


/* ==========================================================================
   8. Страница «Алоқа»: карточка «Манзил» скрыта за правым краем (576–995px)
   --------------------------------------------------------------------------
   responsive.css делает .res-row > .row { flex-wrap: nowrap } c
   overflow-x: auto. Для трёх карточек контактов это прячет третью
   (адрес) без визуальной подсказки о прокрутке. Переносим её на новую
   строку по центру.
   ========================================================================== */
@media (min-width: 576px) and (max-width: 995px) {
    .cont-info-wrap.res-row {
        overflow-x: visible;
    }

    .cont-info-wrap.res-row > .row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cont-info-wrap.res-row > .row > [class*="col-"]:nth-child(n+3) {
        margin-top: 1.875rem;
    }
}


/* ==========================================================================
   9. Список дат (архивы категорий, одиночная запись) ≤490px
   --------------------------------------------------------------------------
   Колонка даты занимает 7rem (112px) — на 320–360px под заголовок и текст
   остаётся 165–205px, заголовки переносятся по одному слову.
   ========================================================================== */
@media (max-width: 490px) {
    .post-info2,
    .post-detail-info {
        padding-left: 5.5rem;
    }

    /* В карточке архива (белый фон + тень) текст доходил до правого края */
    .post-box2 .post-info2 {
        padding-right: 0.75rem;
    }

    .post-info2-inner {
        max-width: 4.5rem;
    }
}


/* ==========================================================================
   10. Футер
   --------------------------------------------------------------------------
   10.1 Полоса контактов (адрес / телефон / e-mail) ≤767px: иконка слева,
        а многострочный текст центрирован — блок выглядит «разъехавшимся».
   10.2 Колонки меню футера 768–991px: третья колонка («Маълумот»)
        оказывается одна по центру на отдельной строке. Три колонки по
        1/3 помещаются без переносов.
   ========================================================================== */
@media (max-width: 767.98px) {
    .cont-info-list > li {
        justify-content: flex-start;
        text-align: start;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .footer-data .col-lg-8 > .row > .col-md-6 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}