/*
 * «Своя вёрстка (HTML)» (templates/html.php) - классы старой темы, которыми
 * свёрстаны лонгриды 2015-2017 прежнего движка: обложка .cover, секции
 * .section > .container > .row > .col-md-*, .promo-box, .flexslider.
 * Размеры сняты с живого сайта (24691, 2026-10-02) и из
 * project_src/config/custom.less (.cover, .filteropacity, .section-inner,
 * .subhead) и alder/assets/less/base.less (LONGREAD STYLES).
 * Подключается только на таких статьях.
 */
body.is-html-layout { background: #fff; }
.site-main--html { background: #fff; }
.html-layout { position: relative; }
.html-layout .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* логотип в углу (картинка старого logo_150.png в тексте не перенесена,
   пустой div.logo текста прячем); на обложке - белый */
.html-layout__logo {
  position: absolute;
  z-index: 10;
  top: 15px;
  left: 30px;
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, .2));
}
.html-layout__logo img { display: block; width: 150px; height: auto; }
.html-layout:has(.cover) .html-layout__logo img { filter: brightness(0) invert(1); }
.html-layout__body .logo { display: none; }

/* == Текст: PT Serif 18/1.6 чёрным, как у старой темы ==================== */
.html-layout__body {
  font: 18px/1.6 var(--serif);
  color: #222;
}
.html-layout__body .longread { margin-bottom: 30px; background: #fff; }
.html-layout__body p { margin: 0 0 12px; }
.html-layout__body a { color: var(--accent); }
.html-layout__body iframe { display: block; max-width: 100%; }

/* == Bootstrap-сетка старой темы (только то, что встречается в текстах) == */
.html-layout__body .container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  background: transparent;
  box-shadow: none;
}
.html-layout__body .row { margin: 0 -15px; }
.html-layout__body .row::after { content: ""; display: table; clear: both; }
.html-layout__body [class*="col-"] { position: relative; min-height: 1px; padding: 0 15px; }
@media (min-width: 992px) {
  .html-layout__body [class*="col-md-"] { float: left; }
  .html-layout__body .col-md-12 { width: 100%; }
  .html-layout__body .col-md-10 { width: 83.3333%; }
  .html-layout__body .col-md-8 { width: 66.6667%; }
  .html-layout__body .col-md-6 { width: 50%; }
  .html-layout__body .col-md-4 { width: 33.3333%; }
  .html-layout__body .col-md-offset-1 { margin-left: 8.3333%; }
  .html-layout__body .col-md-offset-2 { margin-left: 16.6667%; }
  .html-layout__body .col-md-offset-3 { margin-left: 25%; }
}
.html-layout__body .text-center { text-align: center; }
.html-layout__body .img-responsive { display: block; max-width: 100%; height: auto; }
@media (max-width: 767px) {
  .html-layout__body .hidden-xs { display: none !important; }
}

/* == Обложка ============================================================= */
.html-layout__body .cover { position: relative; background-color: #191919; }
.html-layout__body .cover .bg {
  position: relative;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}
.html-layout__body .filteropacity {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, .3);
}
.html-layout__body .section-inner { position: absolute; top: 0; width: 100%; }
/* заголовок обложки: в тексте был h1, импорт сделал h2 */
.html-layout__body .section-inner h1,
.html-layout__body .section-inner h2 {
  margin-bottom: 21px;
  padding: 0 15%;
  font: 700 50px/1.3 var(--sans);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 1px 5px rgba(0, 0, 0, .2);
}
.html-layout__body .subhead {
  margin: 0 0 12px;
  padding: 0 5%;
  font-size: 25px;
  line-height: 1.6;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
}

/* == Секции ============================================================== */
.html-layout__body .section .row,
.html-layout__body .longread > .container > .row { padding: 30px 0; }
.html-layout__body h2 {
  margin: 10px 0 20px;
  font: 600 64px/1.23 var(--sans);
  letter-spacing: 0;
  color: #222;
}
.html-layout__body h3 { font-family: var(--sans); color: #222; }
.html-layout__body blockquote {
  position: relative;
  margin: 0 0 12px;
  padding: 20px 10px 20px 70px;
  border: 0;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
  background: transparent;
  font: 21px/1.5 var(--sans);
}
.html-layout__body blockquote::before {
  content: "\201C";
  position: absolute;
  left: 10px;
  top: 8px;
  font: 700 72px/1 var(--serif);
  color: var(--accent);
}
.html-layout__body blockquote p { margin: 0; font-size: 28px; font-weight: 700; line-height: 34px; color: #222; }
.html-layout__body blockquote small { display: block; padding-top: 30px; font-size: 22px; line-height: 32px; color: #aaa; }
/* пустые абзацы-отбивки вокруг цитат старого редактора */
.html-layout__body p:empty { display: none; }

/* картинка-разделитель во всю ширину (в обычной статье .promo-box прячется) */
.html-layout__body .promo-box {
  display: block;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eaeaea;
  text-align: center;
}
.html-layout__body .promo-box img { display: inline; max-width: 100%; max-height: 500px; width: auto; height: auto; }

/* слайдер - карусель темы (assets/carousel.js), кадр как у старого: до 650 px */
.html-layout__body .flexslider { margin: 0 0 40px; }
.html-layout__body .flexslider img { max-width: 100%; max-height: 650px; width: auto; height: auto; }

@media (max-width: 991px) {
  .html-layout__body .cover .bg { background-attachment: scroll; }
}
@media (max-width: 767px) {
  .html-layout__logo { left: 15px; }
  .html-layout__logo img { width: 120px; }
  .html-layout__body .cover .bg,
  .html-layout__body .filteropacity { height: 400px !important; }
  .html-layout__body .section-inner h1,
  .html-layout__body .section-inner h2 { margin-top: 160px !important; padding: 0; font-size: 25px; }
  .html-layout__body .subhead { padding: 0; font-size: 21px; }
  .html-layout__body h2 { font-size: 34px; }
  .html-layout__body blockquote { padding-left: 50px; }
  .html-layout__body blockquote p { font-size: 19px; line-height: 28px; }
}