/* Страница статьи "Aktualności/Artykuł" — собрана из существующих
   компонентов где возможно (hero__topbar/bg/scrim, service-hero__crumb,
   project-hero__meta, text-h4/label-xl/label-lg/body-md, .news тёмный
   вариант для "Inne Artykuły", footer). НОВОЕ помечено по блокам —
   типографика и компоненты статьи (карточка TOC, callout, таблица, CTA,
   отзыв) в проекте физически отсутствовали, теперь это переиспользуемая
   база для будущих статей. */

/* ============ Hero (Figma 132:2123) ============ */
.hero--article {
  height: 488.222px;
}

.article-hero__head {
  position: absolute;
  z-index: 2;
  left: 88px;
  top: 227px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 1264px;
}

.article-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.article-hero__title {
  margin: 0;
  max-width: 1018px;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
  letter-spacing: -2.88px;
  text-transform: uppercase;
  color: var(--color-light-1000);
}

/* ============ Block 2 — тело статьи (Figma 132:3890) ============ */
.article-block {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -48px;
  padding-top: 48px;
  border-radius: 56px;
  background: var(--color-light-1000);
  /* overflow:hidden убран — ломал position:sticky у .article-toc
     (любой предок с overflow != visible отключает sticky у потомка).
     Тут нет фонового изображения, которому нужна была бы обрезка под
     скругление, так что снимать overflow безопасно. */
}

/* Стейдж: сам .article-block теперь тянется на 100% (фон-карточка без ушей
   рядом с соседними полноширинными секциями), а пара TOC+тело статьи
   держится в центрированных 1440px — тот же приём, что у .hero__inner,
   БЕЗ overflow/transform на этом узле, чтобы не сломать sticky у TOC. */
.article-block__inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
}

/* --- TOC (слева, фиксируется и переключается по скроллу — JS: article.js) --- */
.article-toc {
  position: sticky;
  top: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
  width: 460px;
  padding: 32px 0 80px 88px;
}

.article-toc__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 10px 16px;
  border: 1px solid var(--color-dark-50);
  border-radius: 16px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dark-1100);
}

/* НОВОЕ: прогресс чтения теперь заливкой внутри плашки SPIS TREŚCI,
   вместо полоски слева от списка пунктов. */
.article-toc__label-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--color-dark-100);
  transition: width 0.1s linear;
}

.article-toc__label-text {
  position: relative;
}

.article-toc__list {
  position: relative;
  display: flex;
  flex-direction: column;
}

.article-toc__link {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 10px 16px;
  border-radius: 16px;
  background: var(--color-dark-50);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.56px;
  color: var(--color-dark-1000);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.article-toc__link + .article-toc__link {
  margin-top: 0;
}

.article-toc__link.is-active {
  background: var(--color-dark-1000);
  color: var(--color-light-1000);
}

/* --- Тело статьи (справа) --- */
.article-body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 32px 88px 80px 48px;
}

.article-body__section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  scroll-margin-top: 32px;
}

.article-body__intro {
  gap: 16px;
}

.article-body__heading {
  margin: 0;
  color: var(--color-dark-1000);
}

.article-body__subheading {
  margin: 0;
  color: var(--color-dark-1000);
}

/* Обёртка текстового блока — может содержать несколько <p> (без зазора
   между ними, просто соседние строки) или один; цвет наследуется детьми */
.article-body__text {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: var(--color-dark-700);
}

.article-body__text p {
  margin: 0;
}

.article-body__text strong {
  font-weight: 600;
  color: var(--color-dark-1000);
}

/* Маркированный список — точка вместо ::marker, без абсолютных офсетов из ноды */
.article-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-list li {
  position: relative;
  padding-left: 24px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: var(--color-dark-700);
}

.article-list li::before {
  content: '';
  position: absolute;
  left: 10.3px;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-dark-700);
}

/* Нумерованный список с акцентным primary-номером */
.article-list--numbered {
  gap: 8px;
}

.article-list--numbered li {
  display: flex;
  gap: 4px;
  padding-left: 0;
}

.article-list--numbered li::before {
  content: none;
}

.article-list--numbered .article-list__index {
  flex-shrink: 0;
  width: 24px;
  font-weight: 600;
  color: var(--color-primary);
}

.article-list--numbered .article-list__text {
  font-weight: 600;
  color: var(--color-dark-1000);
}

/* Callout — 4 варианта статуса */
.article-callout {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px 12px 24px;
  border-left: 3px solid;
  border-radius: 0 24px 24px 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: var(--color-dark-1000);
}

.article-callout--info {
  background: var(--color-dark-100);
  border-color: var(--color-dark-1000);
}

.article-callout--warning {
  background: var(--color-warning-100);
  border-color: var(--color-warning);
}

.article-callout--danger {
  background: var(--color-danger-100);
  border-color: var(--color-danger);
}

.article-callout--success {
  background: var(--color-success-100);
  border-color: var(--color-success);
}

/* Таблица */
/* Таблица (Figma 141:5016) — переверстано на div вместо <table>: у
   Figma-компонента заголовок сидит прямо на тонированной рамке (4px
   отступ со всех сторон), а строки — во вложенном белом блоке со своим
   бордером и скруглением. border-radius на <tbody> ненадёжен кросс-
   браузерно, поэтому структура строго повторяет узлы Figma (Header +
   FrameRows), а не семантический <table>. */
.article-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
  border-radius: 16px;
  background: var(--color-dark-50);
}

.article-table__header,
.article-table__row {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.article-table__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-light-1000);
  border: 1px solid var(--color-dark-100);
  border-radius: 16px;
  overflow: hidden;
}

.article-table__row + .article-table__row {
  border-top: 1px solid var(--color-dark-100);
}

.article-table__cell {
  flex: 1 0 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: var(--color-dark-1000);
}

.article-table__cell:first-child {
  min-width: 240px;
}

.article-table__cell--head {
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--color-dark-500);
}

/* CTA-баннер внутри статьи */
.article-cta {
  position: relative;
  width: 100%;
  min-height: 366px;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.article-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-cta__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-dark-800);
}

.article-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 51px 77px 0;
  text-align: center;
}

.article-cta__title {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
  letter-spacing: -2.88px;
  text-transform: uppercase;
  color: var(--color-light-1000);
}

.article-cta__title-underline {
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  top: 37px;
  width: 334.49px;
  height: 19.135px;
  background: var(--color-light-200);
}

.article-cta__subtitle {
  margin: 0;
  color: var(--color-light-1000);
}

.article-cta__desc {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: var(--color-light-700);
}

.article-cta__button-wrap {
  position: relative;
  z-index: 1;
  padding: 24px;
}

.article-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 16px;
  background: var(--color-primary);
  backdrop-filter: blur(7px);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.64px;
  text-transform: uppercase;
  color: var(--color-light-1000);
  cursor: pointer;
  transition: border-radius 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.article-cta__button:hover,
.article-cta__button:focus-visible {
  border-radius: 24px;
  transform: scale(1.02);
}

.article-cta__button img {
  width: 31px;
  height: 31px;
  display: block;
  transform: rotate(90deg);
}

/* НОВОЕ: та же "dart"-анимация стрелки, что у .news__card-link img —
   короткий бросок в верхний правый угол и обратно при ховере кнопки. */
@keyframes cta-arrow-dart {
  0%, 100% { transform: rotate(90deg) translate(0, 0); }
  50% { transform: rotate(90deg) translate(-4px, -4px); }
}

.article-cta__button:hover img,
.article-review__button:hover img {
  animation: cta-arrow-dart 0.6s ease-in-out 1;
}

/* Карточка отзыва */
.article-review {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-dark-1000);
}

.article-review__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
  border-left: 3px solid var(--color-dark-1000);
  /* dark/50 (4%) поверх light/1000 — как два отдельных слоя в Figma,
     не заранее посчитанный плоский цвет */
  background: linear-gradient(0deg, var(--color-dark-50), var(--color-dark-50)), var(--color-light-1000);
  /* top-left не скруглён (стык с полосой слева), остальные три угла —
     внутренняя граница с футером-кнопкой, не обрезается внешним
     контейнером, поэтому радиус нужен явно на самом теле */
  border-radius: 0 24px 24px 24px;
}

.article-review__header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.article-review__avatar {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--color-light-1000);
  background: var(--color-dark-200);
}

.article-review__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* НОВОЕ: тёмный оверлей поверх фото — по Figma-спеке (dark/200 20%) */
.article-review__avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-dark-200);
}

.article-review__who {
  flex: 1 0 0;
  min-width: 0;
}

.article-review__name {
  margin: 0;
  color: var(--color-dark-1000);
}

.article-review__role {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: var(--color-dark-500);
}

.article-review__quote {
  margin: 0;
  color: var(--color-dark-1000);
}

.article-review__divider {
  height: 0;
  border: none;
  border-top: 1px dashed var(--color-dark-100);
  margin: 0;
}

.article-review__text {
  margin: 0;
  color: var(--color-dark-700);
}

.article-review__footer {
  padding: 12px;
}

.article-review__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 16px;
  background: var(--color-primary);
  backdrop-filter: blur(7px);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.64px;
  text-transform: uppercase;
  color: var(--color-light-1000);
  cursor: pointer;
  transition: border-radius 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.article-review__button:hover,
.article-review__button:focus-visible {
  border-radius: 24px;
  transform: scale(1.02);
}

.article-review__button img {
  width: 31px;
  height: 31px;
  display: block;
  transform: rotate(90deg);
}

/* ============ Block 3 — "Inne Artykuły" (Figma 307:819): 100%
   переиспользование .news как есть (padding/margin/цвета уже совпадают
   с базовым правилом дословно) — просто другой заголовок и без CTA-кнопки
   в шапке, оверрайдов не требуется */

/* ============ Mobile ≤767px ============================================
   Hero — Figma 317:2632 (десктоп 132:2123)
   Content — Figma 317:2688 (десктоп 132:3890)
   Block 3 — Figma 326:3417 (десктоп 307:819)
   Footer — общий, уже работает на мобилке сайтом-в-целом, оверрайдов нет.

   ДВЕ ПОЗИЦИИ НЕ РЕАЛИЗОВАНЫ — правило "не менять HTML" их не позволяет:
   1) Block 3 в мобильном макете показывает кнопку "WSZYSTKIE AKTUALNOŚCI"
      снизу (узел 326:3493) — в разметке этой секции на artykul.html такого
      элемента физически нет (сознательно опущен при вёрстке десктопа,
      см. комментарий выше). У .news уже ЕСТЬ готовое мобильное правило
      `.news__cta { order: 3; margin: 32px 16px 0; }`, но оно сработает
      только если такой элемент появится в разметке — сам я его не добавляю.
   2) "Якоря снизу при скролле, как у Sigvin" — в мобильном макете статьи
      (спрятанном за скроллом) нет левого сайдбара .article-toc вообще;
      его заменяет нижняя панель — но это НОВЫЙ элемент, которого нет в
      десктопной разметке. Не создаю его, оставляю .article-toc видимым,
      но перестраиваю в обычный блок в потоке (не sticky, во всю ширину) —
      к чему сводится "другой UI" без нарушения правила про разметку. ============ */
@media (max-width: 767px) {
  /* --- Hero (Figma 317:2632) --- */
  .hero--article {
    height: 515px;
  }

  .article-hero__head {
    left: 16px;
    right: 16px;
    top: 173px;
    width: auto;
    gap: 24px;
  }

  .article-hero__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .article-hero__title {
    max-width: none;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: -2.24px;
  }

  /* Хлебные крошки: 3 уровня на этой странице (Główna/Aktualności/текущая),
     последняя — длинный заголовок статьи, обрезаем эллипсисом в 1 строку */
  .service-hero__crumbs {
    width: 100%;
  }

  .article-hero__head .service-hero__crumb--current {
    flex: 1 0 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- Content / тело статьи (Figma 317:2688) --- */
  .article-block {
    flex-direction: column;
    width: auto;
    padding: 32px 16px 48px;
    border-radius: 40px;
  }

  /* TOC на мобилке убран по прямому решению — оставлена только статья,
     без панели-якоря снизу и без сайдбара */
  .article-toc {
    display: none;
  }

  /* .article-block стал flex-direction:column (TOC скрыт), а его
     align-items:flex-start (унаследовано с десктопа, где это была
     ROW-раскладка) в колоночном режиме означает "не тянуть по
     ширине" — .article-body считался по контенту (max-content, тут
     896px) вместо ширины родителя. Явная width:100% чинит реальный
     выход текста за экран. */
  .article-body {
    width: 100%;
    padding: 0;
    gap: 24px;
  }

  .article-body__section {
    gap: 16px;
  }

  .article-body__heading {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1.44px;
  }

  /* Таблица: на мобильной ноде первые две колонки — фиксированные 240/298px
     (шире экрана, скролл вбок), а не равный flex, как на десктопе */
  .article-table {
    overflow-x: auto;
  }

  .article-table__header,
  .article-table__row {
    width: max-content;
    min-width: 100%;
  }

  .article-table__cell:first-child {
    width: 240px;
    min-width: 240px;
    flex: none;
  }

  .article-table__cell:nth-child(2) {
    width: 298px;
    min-width: 298px;
    flex: none;
  }

  .article-table__header .article-table__cell:nth-child(3),
  .article-table__row .article-table__cell:nth-child(3) {
    flex: 1 0 0;
  }

  /* CTA-баннер: min-height, не height — по правилу проекта */
  .article-cta {
    min-height: 430px;
  }

  .article-cta__content {
    padding: 31px 32px 0;
    gap: 16px;
  }

  .article-cta__title {
    font-size: 28px;
    line-height: 37px;
    letter-spacing: -1.68px;
  }

  /* --- Block 3 (Figma 326:3417), 100% .news, только своя дельта ---
     Общее мобильное правило центрирует полоску под всем заголовком
     ("Inne Artykuły" целиком); здесь она должна быть под словом
     "Artykuły" — сдвиг +34px от центра, как в ноде */
  .news .news__title-underline {
    left: calc(50% + 34px);
    width: 156.212px;
  }
}