body {
  font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
}

.logo {
  display: flex;
  justify-content: center;
  padding: 6px 0;
  /* было 8 px – стало меньше */
  margin-bottom: 6px;
}

.brand-pill {
  display: inline-block;
  background: #014421;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  padding: 6px 28px;
  border-radius: 6px;
}


/* ---------- АДАПТИВНАЯ СЕТКА КАРТОЧЕК ---------- */
#feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 8px;
  margin-top: 0px;

  max-width: 995px;
  /* ⛔️ ограничение по ширине */
  margin-left: auto;
  /* ✅ центрируем */
  margin-right: auto;
}

/* 415-993 px — две колонки */
@media (min-width: 415px) {
  #feed {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ≥994 px — три колонки */
@media (min-width: 994px) {
  #feed {
    grid-template-columns: repeat(3, 1fr);
  }
}



.news-card {
  display: block;
  text-decoration: none;
  color: #000
}

/* ==== ОБЩИЙ стиль всех картинок карточек ==== */
.news-card img,
.card-teaser img,
.teaser.inline img,
.hero {
  /* 🔹 основа для современных браузеров */
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  /* всегда прямоугольник 3:2  */
  object-fit: cover;
  /* красиво обрезаем лишнее   */
  border-radius: 4px;
}

/* 🔸 запасной вариант для старых Android / iOS,
      которые не понимают aspect-ratio                */
@supports not (aspect-ratio: 3 / 2) {

  .news-card img,
  .card-teaser img,
  .teaser.inline img {
    height: 170px;
  }

  /* обычные превью   */

  .hero {
    height: 260px;
  }

  /* большая «шапка»  */
}


.title {
  font-size: 1rem;
  font-weight: 700;
  margin: 4px 0
}

/* Заголовок главной превью */
.hero-link .title {
  font-size: 26px;
  line-height: 1.3;
}

/* ---------- Заголовок карточки ---------- */
.news-card .title {
  font-size: 18px;
  /* 0-414 px */
  line-height: 1.3;
}

/* 415-993 px */
@media (min-width:415px) {
  .news-card .title {
    font-size: 20px;
  }
}

/* ≥994 px */
@media (min-width:994px) {
  .news-card .title {
    font-size: 22px;
  }
}



/* глобальный стиль для карточек-ленты */
.views {
  color: #666;
  font-size: .9rem;
}

/* а под заголовком статьи делаем меньше */
.full .meta .views {
  font-size: inherit !important;
}

/* ---------- PREVIEW hero ---------- */
.hero-wrapper {
  max-width: 650px;
  /* ширина не больше 650 */
  width: 100%;
  /* но на мобиле тянемся на всю */
  position: relative;
  margin: 0 auto;
}

.hero {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.cta {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: #fff;
  color: #000;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

@media(min-width:1024px) {

  /* ПК-сетка: 3-колоночный masonry */
  main#feed {
    column-count: 3;
    column-gap: 16px;
    margin-top: 0px;
  }

  .news-card {
    break-inside: avoid-column;
    margin-bottom: 20px
  }
}

/* clickable hero */
.hero-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.hero-link .title {
  margin-bottom: 8px;
  color: #000;

  /* --- фикс: заголовок не шире картинки (макс 650) --- */
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;

  word-wrap: break-word;
  /* переносим слишком длинные слова      */
  overflow-wrap: anywhere;
  /* и в Safari ≤ iOS 14 / Android 4-5    */
}

/* убираем подзаголовок (его больше нет) => .more просто flex/grid */
/* картинки внутри .more — прямоугольник 3:2 */
.more .news-card img {
  width: 100%;
  aspect-ratio: 3 / 1.84;
  /* держим пропорцию */
  object-fit: cover;
  /* аккуратно обрезаем лишнее */
  border-radius: 4px;
}

/* fallback: вдруг браузер не умеет aspect-ratio */
@supports not (aspect-ratio: 3 / 2) {
  .more .news-card img {
    height: 90px;
    /* ~3:2 при min-width 160px */
  }
}


/* ===========================================
   «Ещё новости» — Grid под ТЗ
   =========================================== */
.more {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  max-width: 650px;
  /* не шире обложки */
  margin-left: auto;
  /* центрируем */
  margin-right: auto;

  /* по умолчанию (мобильный <600 px) ─ одна колонка */
  grid-template-columns: 1fr;
}

/* 600-979 px  → 2 карточки */
@media (min-width:415px) and (max-width:994px) {
  .more {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ≥ 995 px: четыре карточки, контейнер шире  ───────────────────── */
@media (min-width:995px) {
  .more {
    max-width: 995px;
    /* шире, чем 650 */
    grid-template-columns: repeat(4, 1fr);
    /* 4 одинаковых колонки */
  }
}



/* Карточка внутри сетки */
.more .news-card {
  display: block;
  /* ← нужен для grid-gap */
  position: relative;
  /* для бейджа ::after */
  border-radius: 4px;
  transition: transform .2s ease;
  /* лёгкий ховер-эффект */
}

.more .news-card:hover {
  transform: translateY(-4px);
}



.more .news-card::after {
  content: "Популярное";
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  /* ← ЧЁРНЫЙ с прозрачностью */
  color: #fff;
  /* ← БЕЛЫЙ текст */
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  /* ← По желанию — ВСЕ БУКВЫ БОЛЬШИЕ */
}

#feed .news-card {
  position: relative;
}

#feed .news-card::after {
  content: "Популярное";
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}



/* ---------- INLINE TEASERS universal ---------- */
.teasers {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0
}

.teaser.inline {
  flex: 0 0 100%;
  /* ← было 50 %, стало 100 %  */
  max-width: 100%;
  /* ← новая строка            */
  display: flex;
  gap: 8px;
  text-decoration: none;
  color: #000;
  align-items: flex-start;
  flex-wrap: nowrap;
}


.teaser.inline p {
  flex: 1;
  font-size: 18px;
  line-height: 1.25em;
  font-weight: 600;
}

/* с 520px — увеличиваем размер шрифта */
@media (min-width: 520px) {
  .teaser.inline p {
    font-size: 22px;
    line-height: 1.40em;
  }
}

/* с 620px и шире — ещё больше */
@media (min-width: 620px) {
  .teaser.inline p {
    font-size: 24px;
    line-height: 1.5em;
  }
}

/* --- десктоп ≥1024 px: один тизер в строке --- */
@media (min-width:1024px) {
  .teasers {
    gap: 16px;
    /* расстояние между блоками оставляем */
  }

  .teaser.inline {
    /* каждый тизер занимает всю ширину контейнера */
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.article-text {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 2px;
}

@media (min-width:1024px) {
  .article-text {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* размер основного текста статьи */
.article-text p {
  font-size: 18px;
  line-height: 1.6;
}


/* ---------- FULL ARTICLE STYLE FIX ---------- */

.full h1.title {
  margin: 8px 0 8px;
  font-size: 26px;
  line-height: 1.3;
}

.full .meta {
  font-size: 12px !important;
}

.meta {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #777;
  font-size: 12px;
}

.meta time::before,
.t-meta time::before {
  content: "🕐";
  margin-right: 4px;
}

.meta .views::before,
.t-meta .t-views::before {
  content: "👁";
  margin-right: 4px;
}

/* hero-картинка: мобайл под картинкой, десктоп — над */
.hero {
  width: 100%;
  aspect-ratio: 3 / 1.8;
  /* фиксируем 3:2 */
  max-width: 650px;
  /* не шире обложки */
  object-fit: cover;
  border-radius: 4px;
  order: 2;
}

@supports not (aspect-ratio: 3 / 2) {
  .hero {
    height: 170px;
    /* запасная высота, если aspect-ratio не работает */
  }
}

@media screen and (max-width: 600px) {

  .news-card img,
  .card-teaser img,
  .hero {
    min-height: 120px;
  }
}

@media (min-width: 768px) {
  .hero {
    order: 0;
  }
}

.teaser.inline {
  border-bottom: 1px solid #eee;
  /* одна линия снизу каждого */
  padding: 6px 0;
}

.teaser.inline:first-child {
  border-top: 1px solid #eee;
  padding-top: 6px;
  /* ещё одна сверху самого первого */
}

.teaser.inline img {
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* до 389 — 100x100 */
@media (max-width: 389px) {
  .teaser.inline img {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
  }
}

/* от 390 до 619 — 130x130 */
@media (min-width: 390px) and (max-width: 619px) {
  .teaser.inline img {
    width: 130px;
    height: 130px;
    flex: 0 0 130px;
  }
}

/* от 620 и шире — 150x150 */
@media (min-width: 620px) {
  .teaser.inline img {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
  }
}


/* планшеты и шире: сами тизеры — в одну колонку */
@media (min-width:600px) {
  .teasers {
    /* контейнер */
    flex-direction: column;
  }

  .teaser.inline {
    /* каждый тизер занимает 100 % */
    flex: 0 0 100%;
    max-width: 100%;
  }
}


.teaser.inline {
  align-items: flex-start;
}


.t-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #777;
  margin-top: auto;
}


.t-meta time::before {
  content: "🕐";
}

.t-meta .t-views::before {
  content: "👁";
}

.hero-block {
  display: flex;
  flex-direction: column;
}

.hero {
  order: 0;
  /* на мобайле картинка первая */
}

.hero-block .title {
  order: 2;
  /* на мобайле заголовок под картинкой */
}

@media (min-width: 768px) {
  .hero-block .title {
    order: 0;
    /* на ПК — заголовок наверху */
  }

  .hero {
    order: 1;
    /* на ПК — картинка под заголовком */
  }
}

.teaser.inline {
  align-items: flex-start;
}

.teaser.inline img {
  display: block;
  margin-top: 0;
}

.teaser-txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 0;
  padding-top: 0;
  height: auto;
  min-height: 0;
}

/* выравниваем заголовок по верху квадрата */
.t-title {
  margin: 0
}

/* убираем стандартный margin p   */
.teaser-txt {
  min-height: 96px
}

/* меньший отступ после блока inline-тизеров сверху */
.teaser.inline:last-child {
  margin-bottom: 0;
}

.t-teaser-wrap {
  margin-top: 8px;
}

.meta.final {
  margin: 8px 0 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #777;
  font-size: 12px;
}

.meta.final time::before {
  content: "🕐"
}

.meta.final .views::before {
  content: "👁"
}

.page {
  padding-left: 6px;
  padding-right: 6px;
}

@media (min-width:1024px) {
  .page {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: #fff;
  text-align: center;
  padding: 16px 8px 24px;
  font-size: 14px;
  color: #333;
}

.site-footer hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 0 0 16px;
}

.site-footer p {
  margin: 4px 0;
}

/* десктоп ≥1024px: текст слева, тизеры справа */
@media (min-width:1024px) {
  main.article-text {
    display: flex;
    /* две колонки */
    gap: 32px;
  }

  .article-text .teasers {
    /* кол-во тизеров в статье */
    flex: 0 0 300px;
    /* фиксированная ширина сайдбара */
  }

  .article-text .text {
    /* сам контент статьи */
    flex: 1;
    min-width: 0;
    /* чтобы не расползался */
  }
}

/* ---------- Дата + просмотры под заголовком (ширина ≥600px) ---------- */
@media (min-width:600px) {

  /* порядок элементов внутри .hero-block */
  .hero-block .title {
    order: 0;
  }

  /* 1 — заголовок               */
  .hero-block .meta {
    order: 1;
    /* 2 — дата и просмотры        */
    margin: 8px 0 16px;
  }

  .hero {
    order: 2;
  }

  /* 3 — картинка hero           */
}

/* мобильный вид (<600px) остаётся прежним:
   сначала картинка hero, затем заголовок, затем метадата */

/* ---------- МОБИЛЬНЫЙ порядок внутри .hero-block ---------- */
@media (max-width:599px) {
  .hero-block {
    /* колонка сверху-вниз */
    display: flex;
    flex-direction: column;
  }

  .hero-block .hero {
    order: 0;
  }

  /* 1 — картинка  */
  .hero-block .title {
    order: 1;
  }

  /* 2 — заголовок */
  .hero-block .meta {
    order: 2;
  }

  /* 3 — дата      */
}

.card-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #000;
  margin: 6px 0 0;
}

/* ========== Новый стиль скролл-тизеров ========== */
#scroll-teasers {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 1 тизер в строку (до 415px) */
@media (max-width: 414px) {
  #scroll-teasers {
    grid-template-columns: 1fr;
  }

  .card-teaser {
    width: 100%;
  }
}

/* 2 тизера в строку начиная с ширины 415px и выше */
@media (min-width: 415px) {
  #scroll-teasers {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card-teaser {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.card-teaser {
  position: relative;
  /* обязательно для ::after */
}

.card-teaser::after {
  content: "Популярное";
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}

.card-teaser img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.c-title {
  margin: 6px 0 0;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  color: #000;
}

.c-thumb {
  width: 100%;
  aspect-ratio: 292 / 182;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
}

/* ========== Сетка для страницы MARKET ========== */
#market-scroll {
  display: grid;
  gap: 16px;
  margin-top: 8px;
  max-width: 995px;
  margin-left: auto;
  margin-right: auto;
}

/* 1 тизер до 414px */
@media (max-width: 414px) {
  #market-scroll {
    grid-template-columns: 1fr;
  }
}

/* 2 тизера от 415px до 993px */
@media (min-width: 415px) and (max-width: 993px) {
  #market-scroll {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 тизера от 994px и шире */
@media (min-width: 994px) {
  #market-scroll {
    grid-template-columns: repeat(3, 1fr);
  }
}