/* Карточки в списке статей.

   Миниатюра была высотой 386 px при ширине колонки около 300 px — почти портрет.
   Обложки статей горизонтальные (1200x630), и такой контейнер срезал им бока
   вместе с половиной заголовка. Приводим миниатюру к пропорции обложки. */

.mp-articles_slider_item_img {
  height: auto !important;
  aspect-ratio: 12 / 7;
  background-size: cover;
  background-position: center;
  border-radius: 14px 14px 0 0;
}

/* карточка: заголовок и текст не должны разъезжаться по высоте */
.mp-articles_slider_item { display: flex; flex-direction: column; height: 100%; }
.mp-articles_slider_item_title { font-size: 18px; line-height: 1.35; }
.mp-articles_slider_item_content {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .mp-articles_slider_item_img { aspect-ratio: 16 / 9; }
}

/* Дата и время чтения в карточке списка. Раньше стояла одна дата курсивом. */
.w2-card-meta{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-style:normal; color:rgba(19,23,39,.5);
}
.w2-card-meta__dot{
  width:3px; height:3px; border-radius:50%; background:rgba(19,23,39,.28);
}



/* ── Журнал: главный материал и разделы по рубрикам ───────────────────────
   Раньше блог был сплошной лентой из 16 карточек, а рубрики жили только
   чипсами-фильтром. Теперь на первой странице: крупный свежий материал,
   затем раздел на каждую рубрику со своими статьями.

   ⚠️ Обложки статей — ровно 1200x630, поэтому все кадры выводим в этой же
   пропорции (40/21). Любое другое соотношение режет композицию: у обложек
   по центру крупная иконка и подпись темы, их срезало по бокам. */
.w2mag-hero,
.w2mag-card{ display: block; text-decoration: none; color: inherit; }

.w2mag-hero{
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0;
    background: #fff;
    border: 1px solid #e6e6ef;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 46px;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.w2mag-hero:hover{ box-shadow: 0 18px 44px rgba(19,23,39,.10); transform: translateY(-2px); border-color: #d9c8f7; }
.w2mag-hero__shot{ display: block; background: #f5f5f5; }
.w2mag-hero__shot img{ display: block; width: 100%; height: 100%; aspect-ratio: 40 / 21; object-fit: cover; }
.w2mag-hero__body{ display: flex; flex-direction: column; justify-content: center; padding: 34px 36px; }
.w2mag-hero__label{
    display: inline-block; margin-bottom: 12px; padding: 5px 11px;
    border-radius: 999px; background: #f3ebfe; color: #8f42ec;
    font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    align-self: flex-start;
}
.w2mag-hero__title{ display: block; font-size: clamp(24px, 2.4vw, 31px); font-weight: 600; line-height: 1.24; letter-spacing: -.015em; }
.w2mag-hero__lead{ display: block; margin: 14px 0 20px; color: #56566a; font-size: 16px; line-height: 1.55; }
.w2mag-hero__more{ display: inline-flex; align-items: center; gap: 8px; color: #8f42ec; font-weight: 600; }
.w2mag-hero__more::after{ content: '→'; }

.w2mag-meta{
    display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
    font-size: 14px; color: rgba(19,23,39,.5);
}
.w2mag-meta i{ width: 3px; height: 3px; border-radius: 50%; background: rgba(19,23,39,.28); }

/* ── Раздел рубрики ──────────────────────────────────────────────────────── */
.w2mag-sec{ margin-bottom: 44px; }
.w2mag-sec__head{
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #e6e6ef;
}
.w2mag-sec__title{ margin: 0 !important; font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.015em; }
.w2mag-sec__all{ flex: 0 0 auto; color: #8f42ec; font-weight: 600; font-size: 15px; text-decoration: none; }
.w2mag-sec__all:hover{ text-decoration: underline; }

/* Первая карточка раздела вдвое шире остальных — раздел не читается таблицей.
   Четыре колонки при четырёх статьях: главный материал занимает две, три
   оставшихся по одной, и ряд закрывается без пустой клетки. При сетке из
   трёх колонок с растяжкой на две строки справа зияла дыра. */
.w2mag-sec__grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}
.w2mag-card{
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e6e6ef; border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.w2mag-card:hover{ box-shadow: 0 14px 34px rgba(19,23,39,.09); transform: translateY(-2px); border-color: #d9c8f7; }
.w2mag-card__shot{ display: block; background: #f5f5f5; }
.w2mag-card__shot img{ display: block; width: 100%; aspect-ratio: 40 / 21; object-fit: cover; }
.w2mag-card__title{ display: block; padding: 16px 18px 0; font-size: 17px; font-weight: 600; line-height: 1.34; }
.w2mag-card .w2mag-meta{ padding: 0 18px 16px; }
.w2mag-card__lead{ display: block; padding: 0 18px 18px; color: #56566a; font-size: 15px; line-height: 1.5; }

.w2mag-card--lead{ grid-column: span 2; }
.w2mag-card--lead .w2mag-card__title{ font-size: 20px; padding-top: 18px; }

@media (max-width: 991px){
    .w2mag-hero{ grid-template-columns: minmax(0, 1fr); }
    .w2mag-hero__body{ padding: 24px; }
    .w2mag-sec__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .w2mag-card--lead{ grid-column: span 2; }
}
@media (max-width: 640px){
    .w2mag-sec__grid{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .w2mag-card--lead{ grid-column: auto; }
    .w2mag-sec__title{ font-size: 21px !important; }
}

/* ── Ширина и отступы журнала ─────────────────────────────────────────────
   Заголовок блога и чипсы рубрик лежат в обычном .container (1270 px), а сама
   лента — в .container--big (1700 px в разделе блога). Из-за этого карточки
   начинались левее заголовка и упирались в края экрана. Сводим ленту к общей
   сетке страницы и отделяем её от чипсов: раньше главный материал начинался
   сразу под ними, без единого отступа. */
.mp-articles_blog .container--big{ max-width: 1270px; }
.w2mag-hero{ margin-top: 40px; }
@media (max-width: 767px){
    .w2mag-hero{ margin-top: 26px; }
}