/* page.css — типографика служебных текстовых страниц. Правит только тикет 01. */

.page-article {
  padding-block: var(--space-8) var(--space-12);
}

.page-article__header h1 {
  max-width: 72ch;
  margin-bottom: var(--space-4);
}

.page-article__body {
  max-width: 72ch;
  color: var(--color-text-primary);
  font-size: var(--text-base);
  /* line-height наследуется от body (эталон 16/300/1.6) — отдельного числа нет */
}

.page-article__body h2 { margin-top: var(--space-6); }
.page-article__body h3 { margin-top: var(--space-4); }

.page-article__body p,
.page-article__body ul,
.page-article__body ol {
  margin: 0 0 var(--space-2);
}

.page-article__body ul,
.page-article__body ol {
  padding-left: var(--space-3);
}

.page-article__body li { margin-bottom: var(--space-1); }

.page-article__body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-article__body strong { color: var(--color-text-primary); }

/* ============================================================
   G96: сюжетная иллюстрация-подложка статей Beauty Guide.
   Одна и та же разметка: до 1024px — широкая полоса под заголовком,
   от 1024px — закреплённая (sticky) колонка справа от текста.
   Движения не добавляем вообще, поэтому prefers-reduced-motion
   отдельного правила не требует.
   ============================================================ */

.page-article--art .page-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'head'
    'art'
    'body';
  column-gap: var(--space-6);
}

.page-article--art .page-article__header { grid-area: head; }
.page-article--art .page-article__art { grid-area: art; }
.page-article--art .page-article__body { grid-area: body; }

/* Полоса во всю ширину экрана: отрицательные поля ровно гасят padding
   контейнера, поэтому ширина совпадает с вьюпортом и скролла не даёт. */
.page-article__art {
  margin: 0 0 var(--space-4);
  margin-inline: calc(-1 * var(--gutter));
  min-width: 0;
}

.page-article__art-frame {
  display: block;
  position: relative;
  height: 40vh;
  min-height: 200px;
  overflow: hidden;
}

.page-article__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.68;
  /* тёплый luxury-фильтр темы: правило base.css ловит только секции главной */
  filter: var(--photo-luxe);
}

/* Мягкий уход в фон страницы по краям — стык подложки с текстом не виден. */
.page-article__art-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--color-surface-base) 0%,
    transparent 24%,
    transparent 76%,
    var(--color-surface-base) 100%
  );
}

@media (min-width: 1024px) {
  .page-article--art .page-article__layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'head art'
      'body art';
  }

  .page-article__art {
    margin: 0;
    margin-right: calc(-1 * var(--gutter));
    align-self: stretch;
  }

  .page-article__art-frame {
    position: sticky;
    top: calc(var(--header-height) + var(--space-3));
    height: calc(100vh - var(--header-height) - var(--space-6));
    min-height: 0;
  }

  /* сюжет у всех пяти кадров справа — при обрезке cover он остаётся в кадре */
  .page-article__art img { object-position: right center; }

  .page-article__art-frame::after {
    background:
      linear-gradient(
        to right,
        var(--color-surface-base) 0%,
        color-mix(in srgb, var(--color-surface-base) 55%, transparent) 32%,
        transparent 60%
      ),
      linear-gradient(
        to bottom,
        var(--color-surface-base) 0%,
        transparent 14%,
        transparent 86%,
        var(--color-surface-base) 100%
      );
  }
}

/* ============================================================
   Таблицы служебных страниц. На телефоне таблица шире экрана
   (в политике — 570px при 375px) и раньше растягивала всю страницу.
   Обёртку ставит page-article.html.twig: скроллер получает саму таблицу,
   документ по горизонтали больше не едет.
   ============================================================ */

.page-article__scroll {
  max-width: 100%;
  margin: 0 0 var(--space-2);
  overflow-x: auto;
  /* инерционная прокрутка пальцем в Safari */
  -webkit-overflow-scrolling: touch;
  /* докрутив таблицу до края, палец не начинает листать страницу/историю */
  overscroll-behavior-x: contain;
}

.page-article__scroll:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.page-article__body table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
}

/* Страховка: таблица, до которой обёртка почему-то не дошла (нестандартная
   разметка в контенте), скроллится сама — страница всё равно не разъедется. */
.page-article__body > table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-article__body th,
.page-article__body td {
  border: 1px solid color-mix(in srgb, var(--color-text-secondary) 40%, transparent);
  padding: var(--space-1) var(--space-2);
  text-align: left;
}