/*
 * Лонгрид (templates/longread.php) - по «Шаблону лонгрида с темой» и схеме
 * «Серая» старого сайта (config/custom.less: .longread, body[data-view-class*=
 * "gradient-gray"]). Подключается только на лонгридах.
 */
body.is-longread { background: #fff; }

/* == Обложка ============================================================= */
.longread-cover {
  position: relative;
  height: 667px;
  overflow: hidden;
  background: #191919;
  color: #fff;
}
.longread-cover__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .3;
  transition: opacity .5s ease, transform .5s ease;
}
.longread-cover__top {
  position: absolute;
  top: 15px;
  left: 30px;
  z-index: 2;
}
/* логотип тёмный - на обложке белым, как bezymiannyi-1.png старого сайта */
.longread-cover__logo img {
  display: block;
  max-width: 200px;
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(2px 2px 1px rgba(0, 0, 0, .2));
}
.longread-cover__eda {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font: 800 42px/1 var(--sans);
  color: var(--accent);
}
.longread-cover__eda .eda-icon { width: 30px; height: 34px; fill: currentColor; }
.longread-cover__eda:hover { color: #c36a19; }
.longread-cover__inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 191px 15px 0;
  text-align: center;
}
.longread-cover__title {
  margin: 0;
  padding: 0 15%;
  font: 700 50px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 1px 5px rgba(0, 0, 0, .2);
}
.longread-cover__subtitle {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
  font: italic 300 25px/1.4 var(--serif);
  color: #fff;
  text-shadow: 2px 1px 5px rgba(0, 0, 0, .2);
}

/* == Текст =============================================================== */
.site-main--longread { background: #fff; }
.longread {
  max-width: 975px;
  margin: 0 auto;
  padding: 30px 15px 20px;
  color: #222;
}
.longread__meta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--sans);
  font-size: 13px;
  color: #959595;
}
.longread__lead {
  margin: 0 0 22px;
  font: italic 700 20px/1.5 var(--serif);
  color: #222;
}
.longread__cover-credit { margin: -10px 0 20px; font-size: 13px; color: #717171; }
.longread__body { font-size: 20px; line-height: 1.5; }
.longread__body p { margin: 0 0 12px; color: #222; font-size: 20px; }
/* подзаголовки текста - PT Serif жирный, как у старого лонгрида (обложка - PT Sans) */
.longread__body h2,
.longread__body h3 {
  margin: 10px 0 20px;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: #222;
}
.longread__body h2 { font-size: 36px; }
.longread__body h3 { font-size: 28px; }
/* картинки - уже текста (col-md-8 против col-md-10), на светлой подложке */
.longread__body figure,
.longread__body .wp-block-image,
.longread__body .wp-block-gallery,
.longread__body .bp-carousel {
  max-width: 760px;
  margin: 25px auto;
}
.longread__body .wp-block-image,
.longread__body .bp-carousel {
  padding: 5px 0;
  background: rgba(234, 234, 234, .3);
  border-radius: 5px;
}
/* «Во всю ширину» - как блок alder без текста, только со снимком: на весь
   экран кадром 1920×600 (crop), подпись - под ним в колонке; «Широкое» - по
   контейнеру 1140 px. Галерея - карусель (assets/carousel.js оборачивает её
   в .bp-carousel). Ставит редакция кнопкой выравнивания блока, архиву -
   migration/longread_wide.php. */
.site-main--longread { overflow-x: clip; }
.longread__body .alignfull,
.longread__body .bp-carousel:has(> .alignfull) {
  width: 100vw;
  max-width: 100vw;
  margin: 30px 0 30px calc(50% - 50vw);
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.longread__body .alignwide,
.longread__body .bp-carousel:has(> .alignwide) {
  width: min(1140px, 100vw - 30px);
  max-width: none;
  margin: 30px 0 30px calc(50% - min(570px, 50vw - 15px));
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.longread__body .bp-carousel > .alignfull,
.longread__body .bp-carousel > .alignwide { width: auto; max-width: none; margin: 0; }
.longread__body .wp-block-image.alignfull img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 600;
  object-fit: cover;
}
.longread__body .wp-block-image.alignwide img { width: 100%; height: auto; }
.longread__body .alignfull figcaption,
.longread__body .alignwide figcaption { max-width: 945px; margin: 6px auto 0; padding: 0 15px; }
.longread__body figcaption,
.longread__body .photo-caption { color: #717171; text-align: center; }
.longread__body blockquote {
  position: relative;
  margin: 25px 0;
  padding: 20px 10px 20px 70px;
  border: 0;
  border-top: 4px solid #636363c7;
  border-bottom: 4px solid #636363c7;
  background: transparent;
  font-size: 21px;
  font-style: normal;
}
.longread__body blockquote::before {
  content: "\201C";
  position: absolute;
  left: 10px;
  top: 4px;
  font: 700 72px/1 var(--serif);
  color: var(--accent);
}
.longread__body blockquote p { font-weight: 700; font-size: 28px; line-height: 34px; color: #222; }
.longread__body hr { margin: 20px 0; border: 0; border-top: 1px solid #eee; }
.longread .article-share { max-width: none; justify-content: center; text-align: center; }

@media (max-width: 991px) {
  .longread-cover { height: 400px; }
  .longread-cover__inner { padding-top: 100px; }
}
@media (max-width: 767px) {
  .longread-cover__top { left: 15px; }
  .longread-cover__logo img { max-width: 130px; }
  .longread-cover__eda { font-size: 28px; }
  .longread-cover__eda .eda-icon { width: 22px; height: 24px; }
  .longread-cover__inner { padding-top: 160px; }
  .longread-cover__title { padding: 0; font-size: 25px; }
  .longread-cover__subtitle { font-size: 19px; padding: 10px 0; }
  .longread__body,
  .longread__body p { font-size: 18px; }
  .longread__body h2 { font-size: 28px; }
  .longread__body blockquote { padding-left: 50px; }
  .longread__body blockquote p { font-size: 19px; line-height: 28px; }
}