/*
 * Статья.
 *
 * Колонка 42em (~760px при базовых 18px) — примерно 75 знаков в строке.
 * Внутри колонки текст, списки, таблицы и врезки; картинки могут
 * выходить шире колонки, см. .article__body img и .wide.
 *
 * От 70em к тексту добавляется боковая колонка с оглавлением и списком
 * частей серии — см. грид в конце файла.
 */

/* Общий фон сайта #f4f1ea для сплошного текста слишком тёплый: страница
   статьи стоит на белом. */
body {
  background-color: #fff;
}

/* Отступ сверху задан в base.css от высоты шапки — здесь только цвет.
   Раньше тут стояло padding-top: 1em, и на телефоне крошки уезжали
   под меню: этот файл грузится после base.css и перебивал его. */
.main-header--article {
  background-color: #0d3759;
}

/* Полоса с крошками. Отступ сверху считается от высоты шапки — крошки
   всегда на одном расстоянии под меню. Было 1.75em: крошки висели почти
   вплотную к меню, потому что на остальных страницах отступ задан как
   max(20vh, …) и там выходит вдвое больше. Полосе от этого высоты не
   занимать — 3.5em дают тот же порядок, не раздувая её до каталожной.

   Снизу мало: под полосой сразу начинается текст, а не белая карточка,
   как в каталогах, и большое поле пустой синевы бросалось в глаза. */
@media (min-width: 62em) {
  .main-header--article {
    padding-top: calc(var(--nav-h) + 3.5em);
    padding-bottom: .75em;
  }
}

.article {
  display: block;
  max-width: 42em;
  margin: 0 auto;
  padding: 0 1.25em 5em;
}

/* ---- шапка статьи ---------------------------------------------------- */

.article__series {
  margin-top: 1.6em;
  padding: 0;
  font-size: .9em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #767676;
}

.article__head h1 {
  text-align: left;
  margin: 1.2em 0 .4em;
}

/* Надзаголовок серии уже дал отступ сверху. */
.article__series + h1 {
  margin-top: .2em;
}

.article__lead {
  font-size: 1.2em;
  line-height: 1.5;
  color: #444;
  margin-bottom: .8em;
}

.article__meta {
  color: #767676;
  font-size: .9em;
  padding: 0;
  margin-bottom: 2.5em;
}

.article__meta > * + *::before {
  content: "·";
  margin: 0 .5em;
}

/* Код в тексте. Нужен на странице образцов оформления и в редких местах,
   где приходится показывать настройки. Длинная строка не должна распирать
   колонку — блок прокручивается вбок сам, как таблицы. */
.article__body code {
  padding: .15em .35em;
  background: #f0f3f6;
  border-radius: .25em;
  font-size: .9em;
}

.article__body pre {
  margin: 1.4em 0;
  padding: 1em 1.2em;
  background: #f4f7fa;
  border-radius: .4em;
  overflow-x: auto;
  font-size: .85em;
  line-height: 1.5;
}

/* Внутри блока подложка и отступы уже есть — у вложенного code они лишние. */
.article__body pre code {
  padding: 0;
  background: none;
  font-size: 1em;
}

/* Ссылка на оригинал переводной статьи. Отделена чертой: это уже не текст
   статьи, а служебная сноска к нему. */
.article__source {
  margin-top: 3em;
  padding-top: 1em;
  border-top: 1px solid #e2e2e2;
  font-size: .9em;
  color: #767676;
}

/* ---- оглавление ------------------------------------------------------ */

.toc {
  background: #f4f7fa;
  border-radius: .4em;
  padding: 1.2em 1.5em;
  margin-bottom: 2.5em;
}

.toc__title {
  font-weight: 500;
  color: #145285;
  padding: 0;
  margin-bottom: .5em;
}

/* Номер вынесен в свою колонку грида вместо маркера списка.
   У маркера ширина задаётся отступом вслепую, и он растёт с числом
   разрядов: на 1.4em двузначные номера обрезались, 1.6em хватает
   ровно впритык — 25,8px нужно при 25,9px отступа. Колонка auto
   подстраивается сама, сколько бы разделов ни было. */
/* Грид на весь список, а не на каждый пункт: колонка номера тогда одна
   на всех и равна самому широкому номеру. Если гридом делать каждый li,
   у пунктов 1–9 колонка выходит уже, чем у 10–15, и текст идёт лесенкой. */
.toc__list {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .45em;
  row-gap: .3em;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

/* Пункт растворяется, а его номер и ссылка встают ячейками общего грида. */
.toc__list > li {
  display: contents;
}

/* Счёт ведёт сам псевдоэлемент: у li с display: contents бокса нет,
   и counter-increment на нём не срабатывает — все номера выходят нулями. */
.toc__list > li::before {
  counter-increment: toc;
  content: counter(toc) ".";
  color: #767676;
  font-variant-numeric: tabular-nums;
}

.toc__sub {
  grid-column: 2;
  margin: .1em 0 .4em;
  padding-left: 1.2em;
  list-style: circle;
}

/* ---- текущий раздел --------------------------------------------------- */

/* Ставит toc.js. Насыщенности и цвета хватает: подложка или полоска слева
   спорили бы с номерами, которые и так держат левый край. */
.toc a[aria-current] {
  color: #0d3759;
  font-weight: 600;
}

/* Номер верхнего пункта темнеет, даже когда активен вложенный подзаголовок:
   видно, в каком разделе находишься. У li с display: contents бокса нет,
   поэтому красим псевдоэлемент — он единственный, у кого он есть. */
.toc__list > li.is-current::before {
  color: #145285;
  font-weight: 600;
}

/* ---- текст ----------------------------------------------------------- */

.article__body h2 {
  text-align: left;
  font-size: 1.6em;
  margin: 2em 0 .6em;
}

.article__body h3 {
  text-align: left;
  font-size: 1.25em;
  margin: 1.6em 0 .5em;
}

/* Переносы. Колонка узкая, а русские слова длинные — без переносов правый
   край рвётся, и в строке остаются дыры. В base.css у p стоит hyphens: none,
   поэтому включаем здесь адресно. Ограничители не дают переносить короткие
   слова и оставлять огрызки в две буквы. Язык берётся из <html lang="ru">. */
.article__lead,
.article__body p,
.article__body li,
.callout {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* Заголовки, оглавление и таблицы не переносим. */
.article__body h2,
.article__body h3,
.toc,
.series,
.article__body table {
  hyphens: manual;
}

.article__body ul,
.article__body ol {
  padding-left: 1.5em;
  margin: 0 0 1em;
}

.article__body li {
  margin-bottom: .4em;
}

/* Подчёркивание — только текстовым ссылкам. Раньше правило било по всем a
   внутри тела статьи, и карточки технологий с навигацией по частям
   оказывались подчёркнутыми в покое, а при наведении подчёркивание
   снималось — задом наперёд. Цвет этим ссылкам даёт base.css. */
.article__body a:not([class]) {
  text-decoration: underline;
  text-underline-offset: .15em;
}

.article__body strong {
  font-weight: 600;
}

/* ---- картинки -------------------------------------------------------- */

/* По умолчанию — в ширину колонки. */
.article__body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.5em auto;
  border-radius: .3em;
}

/* Шире колонки. Раздвигаем только когда экран заведомо шире колонки;
   на узких .wide ведёт себя как обычная картинка.
   max-width считаем от 100vw минус запас: 100vw включает полосу
   прокрутки, и без запаса страница едет вбок. */
@media (min-width: 62em) {
  .article__body .wide {
    width: 54em;
    max-width: calc(100vw - 3em);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

.article__body figure {
  margin: 1.5em 0;
}

.article__body figure img {
  margin: 0 auto;
}

.article__body figcaption {
  color: #767676;
  font-size: .85em;
  line-height: 1.4;
  text-align: center;
  margin-top: .5em;
}

/* Мелкая картинка с обтеканием. На узких экранах обтекание снимается. */
@media (min-width: 40em) {
  .article__body .inline-left,
  .article__body .inline-right {
    width: auto;
    max-width: 45%;
    margin: .4em 0 1em;
  }

  .article__body .inline-left {
    float: left;
    margin-right: 1.5em;
  }

  .article__body .inline-right {
    float: right;
    margin-left: 1.5em;
  }
}

/* ---- разделитель частей ---------------------------------------------- */

/* Автор делит длинную статью строкой подчёркиваний — Markdown превращает
   её в <hr>. Своих стилей у него нет, поэтому раздел выглядел как обычный
   разрыв абзаца. Показываем паузу: короткая линейка и воздух вокруг. */
.article__body hr {
  width: 6em;
  height: 1px;
  margin: 3.5em auto;
  border: 0;
  background: #d3d3d3;
}

/* ---- таблицы --------------------------------------------------------- */

.article__body table {
  width: 100%;
  height: auto;
  border-collapse: collapse;
  font-size: .95em;
  margin: 1.5em 0;
}

.table-scroll table {
  margin: 0;
  min-width: 30em;
}

.article__body th {
  text-align: left;
  background: #145285;
  color: #fff;
  font-weight: 500;
  padding: .5em .8em;
}

.article__body td {
  padding: .5em .8em;
  border-bottom: 1px solid #e3e3e3;
  transition: none;
}

.article__body tbody tr:nth-child(even) td {
  background: #f7f9fb;
}

.article__body tr:hover td {
  background: #eef3f8;
}

/* ---- врезки ---------------------------------------------------------- */

.callout {
  display: block;
  background: #eef6f6;
  border-left: 4px solid #0d5c63;
  border-radius: 0 .3em .3em 0;
  padding: .9em 1.1em;
  margin: 1.8em 0;
}

.callout > :last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

.callout__title {
  display: block;
  font-weight: 600;
  color: #0d5c63;
  margin-bottom: .3em;
}

/* Практический совет — тёплый акцент, чтобы отличался от нейтральной врезки. */
.callout--practice {
  background: #fdf6e8;
  border-left-color: #b8801a;
}

.callout--practice .callout__title {
  color: #8a5d0d;
}

/* Предупреждение. */
.callout--warning {
  background: #fdeeee;
  border-left-color: #b03030;
}

.callout--warning .callout__title {
  color: #8f2626;
}

/* ---- части серии ------------------------------------------------------ */

.series {
  margin-bottom: 1.5em;
}

.series__title,
.toc__title {
  font-weight: 500;
  color: #145285;
  padding: 0;
  margin-bottom: .5em;
}

.series__list {
  margin: 0;
  padding-left: 1.4em;
}

.series__item {
  margin-bottom: .4em;
}

.series__item--current > span {
  font-weight: 600;
  color: #333;
}

/* ---- переход к соседним частям ---------------------------------------- */

.series-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14em, 100%), 1fr));
  gap: 1em;
  margin-top: 3.5em;
  padding-top: 1.5em;
  border-top: 1px solid #e3e3e3;
}

.series-nav__link {
  display: block;
  padding: .9em 1.1em;
  background: #f4f7fa;
  border-radius: .4em;
  color: inherit;
  transition: box-shadow .3s;
}

.series-nav__link:hover {
  box-shadow: 0 .2em .8em rgba(0, 0, 0, .1);
  text-decoration: none;
}

.series-nav__link--next {
  text-align: right;
}

.series-nav__label {
  display: block;
  font-size: .85em;
  color: #767676;
}

.series-nav__label::before {
  content: "← ";
}

.series-nav__link--next .series-nav__label::before {
  content: none;
}

.series-nav__link--next .series-nav__label::after {
  content: " →";
}

.series-nav__title {
  display: block;
  color: #145285;
}

/* ---- боковая колонка --------------------------------------------------- */

/* Порядок в разметке — под узкий экран: шапка, боковина, текст. Оглавление
   и список частей оказываются над статьёй, как и было раньше.

   От 70em (1260px при базовых 18px) хватает места на вторую колонку:
   42em текста + 3em промежутка + 17em боковины = 62em, остальное — поля.
   Боковина растянута на все три ряда, залипает её внутренний блок:
   у растянутого грид-элемента есть высота, внутри которой sticky работает. */
@media (min-width: 70em) {
  .article {
    display: grid;
    grid-template-columns: 42em 17em;
    grid-template-areas:
      "head aside"
      "body aside"
      "foot aside";
    grid-template-rows: auto auto 1fr;
    justify-content: center;
    column-gap: 3em;
    max-width: none;
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .article__head {
    grid-area: head;
  }

  .article__body {
    grid-area: body;
  }

  .series-nav {
    grid-area: foot;
    align-self: start;
  }

  /* Отступ сверху — колонке, а не .article__aside-inner: у липкой обёртки
     padding вошёл бы в её же бокс и сместил бы её на столько же после
     прокрутки. Здесь он только отодвигает содержимое от полосы с крошками,
     к которой оглавление прижималось вплотную: левая колонка отходит от
     неё сама, за счёт margin у «часть N из M», а правая начиналась впритык.
     Значение подобрано так, чтобы «Части» встали вровень с этой строкой. */
  .article__aside {
    grid-area: aside;
    padding-top: 1.5em;
  }

  .article__aside-inner {
    position: sticky;
    top: 7em;
    max-height: calc(100vh - 9em);
    overflow-y: auto;
    font-size: .9em;
  }

  .article__aside .toc {
    background: none;
    padding: 0;
    margin-bottom: 0;
  }

  .article__aside .series {
    padding-bottom: 1.2em;
    border-bottom: 1px solid #e3e3e3;
  }

  /* В две колонки .wide больше не может расти во всю ширину экрана: справа
     боковина, и картинка подлезала под неё на 54px. Выпускаем на половину
     промежутка в каждую сторону — шире текста, но до оглавления не достаёт. */
  .article__body .wide {
    width: calc(100% + 4em);
    max-width: none;
    margin-left: -2em;
    transform: none;
  }
}

/* ---- карточки разделов на посадочной странице «Технологии» ------------- */

.tech-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16em, 100%), 1fr));
  gap: 1.5em;
  margin-bottom: 1em;
}

.tech-card {
  display: flex;
  flex-direction: column;
  padding-bottom: 1.1em;
  background: #f4f7fa;
  border-radius: .4em;
  overflow: hidden;
  color: inherit;
  transition: box-shadow .3s;
}

.tech-card:hover {
  box-shadow: 0 .3em 1em rgba(0, 0, 0, .12);
  text-decoration: none;
}

.tech-card img {
  width: 100%;
  height: 10em;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}

.tech-card__title {
  margin: .8em 1.1em .3em;
  font-size: 1.15em;
  font-weight: 500;
  color: #145285;
}

.tech-card__text {
  margin: 0 1.1em;
  color: #444;
}