/* Подгонка под сетку шаблона.
   Наши снимки приходят в 3:2, а в демо-вёрстке у каждого блока своя пропорция —
   без этого колонки не выравниваются по высоте. Кроп по центру. */

 /* Миниатюра в «Seçilmiş xəbərlər»: в оригинале строго 95x95.
    Наши заголовки длиннее, и флекс сжимал картинку — фиксируем её долю. */
.featured-news__thumb {
    flex: 0 0 95px;
    width: 95px;
}

/* Плитки разделов: азербайджанские названия длиннее английских,
   при 60px строка ломалась на 3 ряда вместо двух, как в оригинале. */
@media (min-width: 1200px) {
    .post-category__title {
        font-size: 46px;
    }
}

/* Центральный слайдер главного блока: в оригинале вертикальный кадр,
   за счёт него три колонки блока встают вровень. */
.blog-post__wrap .new-posts__thumb img {
    width: 100%;
    aspect-ratio: 524 / 857;
    object-fit: cover;
}

.blog-post__area .featured-stories__thumb img {
    width: 100%;
    aspect-ratio: 394 / 229;
    object-fit: cover;
}

.latest-updates__area .latest-updates__thumb img {
    width: 100%;
    aspect-ratio: 394 / 280;
    object-fit: cover;
}

.new-posts__area .new-posts__thumb img,
.popular-posts__area .popular-posts__thumb img,
.editors-choice__area .new-posts__thumb img {
    width: 100%;
    object-fit: cover;
}

.blog-sidebar__post-thumb img,
.footer__post-item .thumb img,
.footer__gallery .gallery__thumb img {
    object-fit: cover;
}

/* Пропорции фото по блокам — сняты с оригинала шаблона, чтобы высоты секций совпадали.
   Наши снимки приходят в 3:2, у макета в каждом блоке своя пропорция; кроп по центру. */

.new-posts__area .new-posts__item .new-posts__thumb img {
    width: 100%;
    aspect-ratio: 414 / 369;
    object-fit: cover;
}

.popular-posts__area .popular-posts__thumb img {
    width: 100%;
    aspect-ratio: 633 / 499;
    object-fit: cover;
}

.popular-posts__area .latest-updates__thumb img {
    width: 100%;
    aspect-ratio: 394 / 280;
    object-fit: cover;
}

.editors-choice__area .editors-choice__item .new-posts__thumb img {
    width: 100%;
    aspect-ratio: 633 / 508;
    object-fit: cover;
}

.featured-stories__area .featured-stories__thumb img {
    width: 100%;
    aspect-ratio: 394 / 270;
    object-fit: cover;
}

.latest-updates__area .latest-updates__wrap .latest-updates__thumb img {
    width: 100%;
    aspect-ratio: 394 / 290;
    object-fit: cover;
}

/* Мелкие миниатюры фиксированного размера: флекс сжимал их из-за длинных заголовков. */
.latest-updates-2__area .featured-stories__thumb,
.editors-choice__area .latest-updates-2__item .featured-stories__thumb {
    flex: 0 0 205px;
    width: 205px;
}

.latest-updates-2__area .featured-stories__thumb img,
.editors-choice__area .latest-updates-2__item .featured-stories__thumb img {
    width: 205px;
    height: 133px;
    object-fit: cover;
}

.blog-sidebar__post-thumb {
    flex: 0 0 90px;
}

.blog-sidebar__post-thumb img {
    width: 90px;
    height: 90px;
    object-fit: cover;
}

.footer__post-item .thumb {
    flex: 0 0 80px;
}

.footer__post-item .thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.footer__gallery .gallery__thumb img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

/* Внутренние страницы */

/* В галерее статьи шаблон рассчитан на два кадра в ряд;
   у нас часто один — растягиваем его на всю ширину, иначе висит половинкой. */
.blog-details__gallery .blog-details__image:only-child {
    width: 100%;
    flex: 1 1 100%;
}

.blog-details__gallery .blog-details__image img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Аватар автора-заглушка не должен растягиваться на всю плашку. */
.blog-details__author-thumb img,
.new-post-3__admin span img {
    object-fit: cover;
}

/* Текст статьи приходит готовым HTML из админки — задаём ему типографику блока. */
.blog-details__dec h2 {
    margin: 30px 0 15px;
}

.blog-details__dec p {
    margin-bottom: 15px;
}

.blog-details__dec ul {
    margin: 0 0 20px 20px;
    list-style: disc;
}

.blog-details__dec blockquote {
    margin: 25px 0;
    padding: 20px 25px;
    border-left: 3px solid var(--primary);
    background: var(--grey-bg);
    font-style: italic;
}

/* Сайдбар «Ən son» тянется на высоту левой сетки материалов.
   Колонки Bootstrap уже равной высоты, но внутреннее содержимое
   по умолчанию не растягивается — включаем флекс по всей цепочке. */
@media (min-width: 992px) {
    .new-posts__area > .container > .row {
        align-items: stretch;
    }

    .new-posts__area > .container > .row > .col-lg-4 {
        display: flex;
    }

    .new-posts__area .blog-sidebar__wrap_2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
    }

    .new-posts__area .blog-sidebar__wrap_2 .blog-sidebar__post {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Материал, не поместившийся по высоте, скрывает скрипт целиком —
       чтобы не оставалось обрезанной наполовину карточки. */
    .new-posts__area .blog-sidebar__post-item[hidden] {
        display: none !important;
    }
}

/* «Ən çox oxunanlar»: карточки в одном ряду тянутся по самой высокой.
   Колонки Bootstrap равной высоты сами, но карточка внутри по умолчанию
   занимает столько, сколько занял её текст — из-за разной длины
   заголовков нижние края расходились. */
@media (min-width: 576px) {
    .popular-posts__area .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }

    .popular-posts__area .popular-posts__wrap,
    .popular-posts__area .latest-updates__wrap {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    /* Белая плашка с текстом добирает остаток высоты, поэтому
       низ у всех карточек ряда оказывается на одной линии. */
    .popular-posts__area .latest-updates__wrap .latest-updates__content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .popular-posts__area .popular-posts__wrap .popular-posts__thumb {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
}

/* Лента «Son yeniliklər»: карточки в ряду равной высоты,
   иначе при разной длине заголовков нижние края расходятся. */
@media (min-width: 576px) {
    .latest-updates__area .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }

    .latest-updates__area .featured-stories__item {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .latest-updates__area .featured-stories__content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}


/* Видеоблок сайдбара на фирменном красном фоне темы.
   Заголовок карточки по умолчанию тёмный — на красном его не видно. */
.blog-sidebar__wrap.primary_bg {
    /* У .blog-sidebar__wrap в теме свой белый фон с такой же специфичностью,
       поэтому одного класса primary_bg не хватает — задаём по двум классам. */
    background-color: var(--primary);
    border-color: transparent;
}

.blog-sidebar__wrap.primary_bg .blog-sidebar__title {
    color: var(--white);
}

/* Карточка внутри остаётся белой — как в красной секции на главной. */
.blog-sidebar__wrap.primary_bg .featured-stories__item:last-child {
    margin-bottom: 0;
}

/* Страница материала: белая подложка под текстом.
   В теме у .blog-details__wrapper фона нет вовсе, и текст ложится
   прямо на серый фон секции — читать тяжело. */
.news-details__area .blog-details__wrapper {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 30px;
}

@media (max-width: 575px) {
    .news-details__area .blog-details__wrapper {
        padding: 20px;
    }
}

/* Кегль основного текста: 16px на широкой колонке мелковат для чтения. */
.news-details__area .blog-details__dec,
.news-details__area .blog-details__dec p {
    font-size: 18px;
    line-height: 30px;
    max-width: none;
}

.news-details__area .blog-details__dec h2 {
    font-size: 24px;
    line-height: 32px;
}

.news-details__area .blog-details__dec h3 {
    font-size: 21px;
    line-height: 30px;
}

.news-details__area .blog-details__dec li {
    font-size: 18px;
    line-height: 30px;
}

.news-details__area .blog-details__dec blockquote {
    font-size: 19px;
    line-height: 31px;
}

.news-details__area .blog-details__title {
    font-size: 34px;
    line-height: 44px;
}

@media (max-width: 767px) {
    .news-details__area .blog-details__title {
        font-size: 26px;
        line-height: 34px;
    }
}

/* Лид — заметнее основного текста. */
.news-details__area .blog-details__dec.mb-25 strong {
    font-size: 19px;
    line-height: 31px;
    color: var(--secondary);
}

/* «Oxşar xəbərlər» вынесен за белую карточку и лежит на сером фоне секции,
   поэтому своя подложка ему не нужна — только белые карточки внутри.
   Класса .mt-40 в теме нет, поэтому отступ от карточки задаём сами. */
.news-details__area .news-page__wrapper {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .news-details__area .news-page__wrapper {
        margin-top: 30px;
    }
}

.news-details__area .news-page__wrapper .blog-sidebar__title {
    margin-bottom: 24px;
}
.news-details__area .news-page__wrapper .featured-stories__item {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
}

.news-details__area .news-page__wrapper .featured-stories__content {
    padding: 16px;
}

/* Теги под материалом. В теме у .blog-details__tag li нет никакого
   оформления — просто слова в строку, из-за чего блок не читается
   как теги. Берём вид «таблеток» из сайдбара, значения те же. */
.blog-details__tag ul {
    display: flex;
    gap: 10px;
    /* Теги идут одной строкой и прокручиваются вбок: при большом
       количестве они не разъезжаются на несколько строк. */
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    padding: 0;
    margin: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

/* Полосу прокрутки прячем — жест остаётся, вида не портит. */
.blog-details__tag ul::-webkit-scrollbar {
    display: none;
}

.blog-details__tag ul li {
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 8.5px 18px;
    border-radius: 500px;
    display: inline-block;
    color: var(--secondary);
    font-family: var(--font_header);
    border: 1px solid var(--border);
    background-color: var(--grey-bg);
    transition: all 0.3s ease-in-out;
    flex: 0 0 auto;
    white-space: nowrap;
}

.blog-details__tag ul li a {
    color: inherit;
}

.blog-details__tag ul li:hover {
    cursor: pointer;
    border-color: var(--primary);
    background-color: var(--primary);
}

.blog-details__tag ul li:hover a {
    color: var(--white);
}

/* Подпись «Teqlər» остаётся на месте, прокручивается только лента тегов. */
.blog-details__tag {
    flex-wrap: nowrap;
    min-width: 0;
}

.blog-details__tag ul {
    min-width: 0;
}

.blog-details__tag-title {
    white-space: nowrap;
}

/* Теги и «Поделиться» под материалом: при длинном списке тегов строка
   налезала на иконки. Разрешаем перенос и разводим блоки по строкам. */
.blog-details__category {
    flex-wrap: wrap;
    gap: 12px 24px;
}

.blog-details__tag,
.blog-details__share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}

.blog-details__tag ul,
.blog-details__share ul {
    flex-wrap: wrap;
}

/* Подпись под главным фото материала */
.blog-details__thumb-caption {
    font-size: 13px;
    line-height: 1.45;
    color: #6b7280;
}

/* ==========================================================================
   Миниатюры: в шаблоне картинка обёрнута в ссылку, а стили темы рассчитаны
   на картинку напрямую. Из-за этого ссылка оставалась строчной, и картинка
   съёживалась до собственного размера вместо того, чтобы занять блок.
   ========================================================================== */
.featured-news__thumb > a,
.featured-stories__thumb > a,
.blog-sidebar__post-thumb > a,
.latest-updates__thumb > a,
.latest-updates-2__thumb > a,
.news-page__thumb > a,
.author-page__thumb > a,
.new-post-3__thumb > a,
.trending-post__thumb > a,
.footer__post-item .thumb > a,
.footer__gallery .gallery__thumb > a,
.blog-details__thumb > a {
    display: block;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Мобильная версия: шаблон рассчитан на широкий экран, на телефоне блоки
   расходились — крупные заголовки, разорванные карточки, лишний воздух.
   ========================================================================== */
@media (max-width: 767px) {
    /* Воздуха между секциями было столько же, сколько на десктопе */
    .section-space {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .section-space-bottom { padding-bottom: 36px; }
    .section-space-top { padding-top: 36px; }

    .section__title {
        font-size: 21px;
        line-height: 1.25;
    }

    /* Карточка ленты: картинка сверху во всю ширину, текст под ней */
    .featured-news__item {
        padding: 12px;
        gap: 12px;
    }

    .featured-news__thumb {
        /* Выше в этом файле миниатюра прибита к 95px под десктопную сетку —
           на телефоне она должна занимать всю ширину карточки. */
        flex: 0 0 100%;
        width: 100%;
        height: 190px;
    }

    .featured-news__title {
        font-size: 17px;
        line-height: 1.35;
    }

    /* «Ən son»: миниатюра слева, заголовок справа — а не друг под другом */
    .blog-sidebar__post-item {
        flex-wrap: nowrap;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 14px;
        padding-bottom: 14px;
    }

    .blog-sidebar__post-thumb {
        position: relative;
        /* Перебиваем десктопные 90px и жёсткую картинку 90x90 из этого же файла. */
        flex: 0 0 76px;
        width: 76px;
        height: 76px;
        overflow: hidden;
        border-radius: 8px;
    }

    .blog-sidebar__post-thumb img {
        width: 76px;
        height: 76px;
        object-fit: cover;
    }

    .blog-sidebar__post-number {
        top: 4px;
        left: 4px;
        font-size: 11px;
        width: 22px;
        height: 22px;
        line-height: 22px;
    }

    .blog-sidebar__post-title {
        font-size: 15px;
        line-height: 1.35;
        margin-bottom: 4px;
    }

    .blog-sidebar__post-meta li {
        font-size: 12px;
    }

    /* Рубрики: вместо огромных строк с диагоналями — компактный список */
    .post-category__wrap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .post-category__item {
        margin: 0;
        padding: 0;
    }

    .post-category__item::before,
    .post-category__item:last-of-type::before {
        display: none;
    }

    .post-category__item > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background-color: var(--white);
    }

    .post-category__title {
        font-size: 15px;
        line-height: 1.2;
        margin: 0;
    }

    .post-category__thumb .image { display: none; }

    .post-category__number span {
        font-size: 11px;
        color: var(--body_text);
    }

    /* Боковые карточки прибиты к 205px под десктоп — на телефоне это половина
       экрана, картинка и заголовок сдавливаются. Отпускаем. */
    .latest-updates-2__area .featured-stories__thumb,
    .editors-choice__area .latest-updates-2__item .featured-stories__thumb {
        flex: 0 0 100%;
        width: 100%;
    }

    .latest-updates-2__area .featured-stories__thumb img,
    .editors-choice__area .latest-updates-2__item .featured-stories__thumb img {
        width: 100%;
        height: 100%;
    }

    /* Крупные карточки-обложки: фиксируем пропорцию, чтобы не растягивались */
    .featured-stories__thumb,
    .latest-updates__thumb,
    .latest-updates-2__thumb {
        aspect-ratio: 16 / 10;
        height: auto;
        overflow: hidden;
        border-radius: 8px;
    }

    .featured-stories__thumb img,
    .latest-updates__thumb img,
    .latest-updates-2__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .featured-stories__title,
    .latest-updates__title,
    .latest-updates-2__title {
        font-size: 17px;
        line-height: 1.35;
    }

    /* Стрелки каруселей: не занимают отдельную строку под заголовком */
    .featured-news__top,
    .featured-stories__top,
    .heading-display__wrap {
        align-items: center;
        gap: 10px;
    }
}


/* Подвал: миниатюры «Son yazılar» и плитка «Qalereya».
   Картинки обёрнуты в ссылку, из-за чего блоки схлопывались в ноль. */
.footer__post-item .thumb {
    width: 80px;
    height: 60px;
    overflow: hidden;
    border-radius: 6px;
}

.footer__post-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer__gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.footer__gallery .gallery__thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
}

.footer__gallery .gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    /* Порядковый номер рубрики — декоративный элемент широкой раскладки:
       он позиционируется поверх обложки, а на телефоне обложки нет,
       и номер повисал над карточкой. Прячем. */
    .post-category__thumb {
        display: none;
    }

    /* Подвал на телефоне: колонки идут одна под другой, без лишнего воздуха */
    .footer__widget { margin-bottom: 26px; }

    .footer__gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Поле поиска на странице результатов.
   В теме класс .search__input принадлежит всплывающему поиску и по
   умолчанию прозрачен (opacity: 0) — на странице поле было невидимым. */
.news-page__search .search__input {
    opacity: 1;
    height: 54px;
    background: #fff;
    border: 1px solid #e2e5e9;
    border-radius: 6px;
    padding: 0 16px;
    transition: border-color .2s ease;
}

.news-page__search .search__input::after {
    content: none;
}

.news-page__search .search__input:focus-within {
    border-color: var(--theme, #DC2626);
}

.news-page__search .search__input input {
    color: #16191d;
    font-size: 16px;
    padding-right: 36px;
}

.news-page__search .search__input input::placeholder {
    color: #8a929c;
    font-size: 16px;
}

.news-page__search .search__input button {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: #16191d;
}