/* штатная иллюстрация новости */
.news-img {
  display: block;
  width: 545px;
  max-width: 100%;
  height: auto;
  margin: 16px 0 6px 0;
  border-radius: 6px;
}

/* иллюстрация по ширине текста — когда снимок не должен выступать */
.news-img--text {
  width: 526px;
}

/* СТРАХОВКА ДЛЯ АРХИВА.
   В старых новостях попадается жёстко заданная ширина 550 px —
   такая картинка перекрывает вертикальный пунктир и вылезает
   за колонку. Правило ограничивает любую картинку внутри тела
   новости, не меняя ничего другого. */
.news-page-item-body img {
  max-width: 545px;
}

/* подпись под снимком */
.news-cap {
  display: block;
  margin: 0 0 18px 0;
  font-size: 12px;
  line-height: 16px;
  color: #6b7378;
}

/* два снимка в ряд */
.news-row {
  width: 526px;
  max-width: 100%;
  border: none;
  border-collapse: collapse;
  margin: 16px 0 18px 0;
  background: transparent;
}

.news-row td {
  width: 50%;
  vertical-align: top;
  padding: 0 8px 0 0;
  border: none;
  background: transparent;
}

.news-row td:last-child {
  padding: 0 0 0 8px;
}

.news-row img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}


/* ------------------------------------------------------------
   2. ТАБЛИЦЫ
   Те же цвета, что в статьях журнала, но по ширине колонки новости.
   Разметка: table.jtable
   ------------------------------------------------------------ */

.jtable {
  width: 100%;
  max-width: 545px;
  border: none;
  border-collapse: collapse;
  color: #181716;
  margin: 16px 0 20px 0;
}

.jtable th {
  background: #dbe3e8;
  color: #181716;
  font-weight: bold;
  text-align: left;
  border: none;
  padding: 8px 10px;
}

.jtable td {
  color: #181716;
  border: none;
  padding: 8px 10px;
  vertical-align: top;
}

.jtable tbody tr:nth-child(odd) td {
  background: #e8edf0;
}

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

.jtable tbody td:first-child {
  font-weight: bold;
}

/* подпись к таблице — сверху, как в журнале */
.jtable-cap {
  display: block;
  margin: 16px 0 6px 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: bold;
  color: #181716;
}


/* ------------------------------------------------------------
   3. ВРЕЗКА С ПОЯСНЕНИЕМ
   Короткий блок «что это значит», справка по термину, цифры.
   Разметка: <div class="news-note">…</div>
   ------------------------------------------------------------ */

.news-note {
  width: 526px;
  max-width: 100%;
  box-sizing: border-box;
  background: #f2f5f7;
  border-left: 3px solid #3b8aa8;
  border-radius: 0 6px 6px 0;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: 14px;
  line-height: 21px;
  color: #181716;
}

.news-note p {
  margin: 0 0 8px 0;
}

.news-note p:last-child {
  margin: 0;
}

.news-note strong {
  color: #181716;
}


/* ------------------------------------------------------------
   4. ИСТОЧНИК
   Ставится в конце переводной новости.
   Разметка: <p class="news-src">Источник: …</p>
   ------------------------------------------------------------ */

.news-src {
  margin: 18px 0 0 0;
  font-size: 12px;
  line-height: 17px;
  color: #6b7378;
}

.news-src a {
  color: #6b7378;
  text-decoration: underline;
}

.news-src a:hover {
  color: #265a99;
}


/* ------------------------------------------------------------
   5. МОБИЛЬНАЯ ВЕРСИЯ
   ------------------------------------------------------------ */

@media (max-width: 767px) {

  .news-img,
  .news-img--text,
  .news-note,
  .news-row,
  .jtable {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .news-page-item-body img {
    max-width: 100%;
  }

  /* два снимка в ряд — в столбик */
  .news-row,
  .news-row > tbody,
  .news-row > tbody > tr,
  .news-row td {
    display: block;
    width: 100% !important;
  }

  .news-row td,
  .news-row td:last-child {
    padding: 0 0 10px 0;
  }

  /* широкая таблица — с горизонтальной прокруткой */
  .jtable {
    display: block;
    overflow-x: auto;
  }
}