/* ==========================================================================
   Вкладки-фильтр — общий блок
   Одна и та же строка вкладок на страницах «Объекты» и «Новости»:
   активная подчёркнута красной линией в 2px. Линия нарисована
   псевдоэлементом, чтобы не менять высоту вкладки и перекрыть общую серую.

   Figma: 177:2488  — «Объекты», десктоп
          144:5124  — «Новости», десктоп 1320 × 31
          279:12052 — «Новости», мобильный (шаг 12px, без боковых полей)

   WP: template-parts/blocks/tabs.php
   ========================================================================== */

.tabs {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--c-grey-300);
}

.tabs__btn {
    position: relative;
    padding: 0 16px 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
    color: var(--c-grey-500);
    transition: color var(--transition);
}

/* В Ui kit (Tab2) при наведении подпись становится красной, как у активной,
   но без линии под ней */
.tabs__btn:hover {
    color: var(--c-red-500);
}

.tabs__btn.is-active {
    color: var(--c-red-500);
}

.tabs__btn.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background-color: var(--c-red-500);
}

/* --------------------------------------------------------------------------
   Планшет и мобильный
   -------------------------------------------------------------------------- */

/* вкладок больше, чем помещается: строка листается пальцем */
@media (max-width: 1023px) {
    .tabs {
        margin-left: calc(-1 * var(--container-pad));
        margin-right: calc(-1 * var(--container-pad));
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
        overflow-x: auto;
        /* Полоса листается только по горизонтали: overflow-x:auto без явного
           overflow-y превращает ось Y в auto, и красная линия активной вкладки
           (::after, bottom:-1px) даёт 1px переполнения по вертикали — из-за
           него строка при пролистывании уезжала и вниз. Отсекаем ось Y. */
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }
}

/* без боковых полей вкладки начинаются от края текста, как в макете */
@media (max-width: 767px) {
    .tabs {
        gap: 12px;
    }

    .tabs__btn {
        padding-left: 0;
        padding-right: 0;
    }
}