/* Страница "Aktualności" — собрана из существующих компонентов.
   НОВОЕ здесь помечено отдельно у каждого блока. */

/* ============ Хиро (Figma 127:837) — НОВОЕ: высота и позиция заголовка/
   полоски; топбар/фон/скрим уже есть в hero.css, типографика заголовка —
   service-hero__title + text-h1, полоска — service-hero__underline
   (тот же приём, что на GW/KP/O Firmie: инлайн left/width на странице) ============ */
.hero--news {
  height: 488.222px;
}

.hero-news__head {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 254.96px;
  transform: translateX(-50%);
}

.hero--news .service-hero__underline {
  top: 306.82px;
}

/* Заголовок центрирован (.hero-news__head: left:50%), поэтому фикс.
   left/width полоски из ноды не годится на широких экранах — рисуем
   полоску от самого слова (тот же приём, что у KP на мобильном) */
.hero--news:has(.service-hero__title-word) .service-hero__underline {
  display: none;
}

.hero--news .service-hero__title-word {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.hero--news .service-hero__title-word::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 51.86px;
  height: 19.135px;
  background: var(--color-light-400);
}

/* ============ Block 2 — каталог статей (Figma 127:1699). Переиспользовано
   целиком: .realizacje-filters__group/__tab (фильтр), .realizacje-catalog__grid
   (сетка 3 колонки), .news__card (карточка), .realizacje-pager (пагинация).
   НОВОЕ — только контейнер секции и счётчик числа внутри таба фильтра,
   которого нет у .realizacje-filters__tab. ============ */
.news-catalog {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -48px;
  /* низ 112 = видимых 64 + 48 съеденных наездом .footer-wrap (margin-top:-48px) */
  padding: 64px 88px 112px;
  border-radius: 56px;
  background: var(--color-light-1000);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.news-catalog__filters {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1264px;
  margin-inline: auto;
}

.news-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 24px;
  border-radius: 8px;
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  background: var(--color-light-1000);
  color: var(--color-dark-700);
}

.realizacje-filters__tab.is-active .news-filter__count {
  background: var(--color-light-100);
  color: var(--color-light-1000);
}

/* Разделители между табами: у .realizacje-filters__dots в realizacje.css
   есть display:none вне years-группы (селектор из 3 классов — перебиваем
   !important, т.к. наш 2-классовый оверрайд слабее). Гашение прозрачностью
   рядом с активным табом (opacity:0, место сохраняется) уже унаследовано
   из realizacje.css как есть — то же поведение, что у годов. */
.news-catalog__filters .realizacje-filters__dots {
  display: block !important;
}

/* ============ Mobile ≤767px ============ */
@media (max-width: 767px) {
  /* Hero (Figma 307:2135). Топбар/лого уже наследуются из общего мобильного
     hero.css (unscoped-правила подходят 1-в-1), заголовок — из общего
     .service-hero__title (32/32/-2.24). Тут — только высота хиро, позиция
     блока с заголовком и полоска (центрированная, а не фикс.px как на GW/KP) */
  .hero--news {
    height: 515px;
  }

  .hero-news__head {
    top: 381px;
  }

  /* left/width — !important перебивает инлайновые десктопные координаты */
  .hero--news .service-hero__underline {
    display: block;
    left: calc(50% - 108.346px) !important;
    width: 217.212px !important;
    top: 402.01px;
    background: var(--color-light-200);
  }

  /* На мобильном полоска остаётся фикс.позиционированной (см. выше) —
     word-приём только для широких экранов, где заголовок центрирован */
  .hero--news .service-hero__title-word::after {
    display: none;
  }

  /* Block — каталог статей (Figma 307:2191). Много уже наследуется бесплатно:
     .realizacje-catalog__grid (1 колонка, gap:16 — unscoped-правило уже есть),
     .realizacje-pager__btn/__page (56×56 — unscoped-правило уже есть),
     .news__card-image (216/24 — unscoped-правило уже есть). Реальная дельта —
     ниже. Значение верха паддинга — 16px из ноды; низ — 96 (из ноды) + 48
     компенсации наезда .footer-wrap (margin-top:-48px, съедает низ секции,
     та же логика, что и на десктопе этого блока) — не подставлено на глаз. */
  .news-catalog {
    padding: 16px 16px 144px;
    border-radius: 40px 40px 0 0;
  }

  /* Ряд фильтров шире экрана (WSZYSTKO/ARTYKUŁY/WYDARZENIA не помещаются) —
     скролл вбок, тот же приём, что у .realizacje-filters__group--years */
  .news-catalog__filters {
    justify-content: flex-start;
  }

  .news-catalog__filters .realizacje-filters__group {
    max-width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  /* Настоящая причина наезда счётчика на текст: .realizacje-filters__group
     .realizacje-filters__tab в realizacje.css задаёт flex:1 1 0 (для
     СВОИХ 2 статус-табов на 50/50) — та же пара классов используется
     здесь для 3 совсем других табов, и правило неявно протекает сюда.
     Одного flex-shrink:0 было мало — flex-basis:0 и flex-grow:1 от
     чужого правила оставались активны. Полный flex-сброс + inline-flex
     с gap вместо margin-left, чтобы ширина кнопки считалась по сумме
     текста и бейджа, а не только по тексту. */
  .news-catalog__filters .realizacje-filters__tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    min-width: auto;
  }

  .news-catalog__filters .news-filter__count {
    margin-left: 0;
  }

  .news-catalog__filters .realizacje-filters__group::-webkit-scrollbar {
    display: none;
  }

  /* Карточка вставлена в сетку с колонкой 1fr — снимаем фикс. ширину/высоту
     карусельного .news__card (308×556), иначе не растянется на всю колонку.
     height:auto, не min-height — карточка не в фикс-рядах, просто follow-content */
  .news-catalog .news__card {
    width: 100%;
    height: auto;
    /* .realizacje-catalog__grid — CSS Grid, элементы по умолчанию
       растягиваются на высоту трека (align-items: stretch); без этого
       height:auto не работал, и карточка обрезала текст/дату/ссылку */
    align-self: start;
  }

  .news-catalog .news__card-body {
    /* flex:1 0 0 + min-height:0 (базовое правило) рассчитаны на карточку
       фиксированной высоты — тело тянется до конца желаемой высоты.
       На мобилке карточка height:auto, готовой высоты для растяжения
       нет, а flex-basis:0 занижает вклад тела в авто-высоту карточки
       до нуля, из-за чего текст/дата/ссылка визуально наезжали на
       следующую карточку в сетке. flex:none — тело просто по контенту */
    flex: none;
    padding: 24px;
    border-radius: 24px;
  }

  /* Отступ перед "CZYTAJ WIĘCEJ" по мобильной ноде — 32px, не 24
     (десктопное значение компенсировалось margin-top:auto в карточке
     фиксированной высоты; на мобилке карточка height:auto, поэтому
     реальный отступ равен именно padding-top и его нужно задать явно) */
  .news-catalog .news__card-link {
    padding-top: 32px;
  }

  /* 56×56 (квадратные), не 80×56 — десктопное значение */
  .news-catalog .realizacje-pager__btn,
  .news-catalog .realizacje-pager__page {
    width: 56px;
    border-radius: 16px;
  }
}