/* ==========================================================================
   ТАЙГА — список новостей /novosti/ (apps/news, news/news_list.html)
   Figma: taiga_brand-components NGl7bHthNDvxauwdpLY9nI, node 5889:10290
   Перенесено 1:1 из сверенного прототипа design/news.html.
   Переиспользует: .arch-crumbs (architects.css), .proj-filter /
   .proj-cta__btn (projects.css), .pd-cta (project.css), шапку и футер.
   .news-badge и форма подписки нужны и странице новости (news-detail.css).
   ========================================================================== */

/* Хвост крошек в Figma — один текстовый слой «СМИ и события /   Новости»
   с тремя пробелами после слэша */
.news-crumbs__tail {
  white-space: pre;
}

/* --- Hero (node 5909:10990) --- */
.news-hero {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  height: 625px; /* 624.69 в Figma */
  padding: 80px calc((100% - 1200px) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Портретное фото 1335×2000 растянуто по ширине: в Figma h=383.71%,
   top=-153.06% → 956px сверху из 1772px запаса = 54% */
.news-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 54%;
}

.news-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 49.038%);
}

.news-hero__content {
  position: relative;
  z-index: 1;
  width: 698px;
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  color: #fff;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
}

.news-hero__title {
  width: 100%;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 70px;
  line-height: 1.1;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.news-hero__text {
  width: 598px;
  font-family: 'DINPro Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
}

/* --- Фильтр рубрик (node 5907:10776): 6 кнопок по 185px, justify-between --- */
.news-filter {
  margin-top: 96px;
}

.news-filter .proj-filter__item {
  width: 185px;
  justify-content: center;
}

.news-filter .proj-filter__item:not(.proj-filter__item--active):hover,
.news-filter__item--outline {
  background: #fff;
  box-shadow: inset 0 0 0 1px #E2480A;
  color: #E2480A;
}

/* --- Сетка новостей (node 5909:11177): 2 колонки 568, gap 64/40 --- */
.news-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 568px);
  column-gap: 64px;
  row-gap: 40px;
}

.news-item {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 410px;
}

.news-item__photo {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 308px;
  padding: 30px 0 0 30px;
}

/* В макете у карточек правой колонки плашка на 20px от угла, у левой — на 30 */
.news-item:nth-child(even) .news-item__photo {
  padding: 20px 0 0 20px;
}

.news-item__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Плашка рубрики — общая для карточек списка и героя новости (news-detail) */
.news-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 50px;
  padding: 0 20px;
  border-radius: 99px;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 46.5px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}

.news-badge--sobytie {
  background: #516B43;
}

.news-badge--novinka {
  background: #E2480A;
}

.news-badge--smi {
  background: #8E9B70;
}

.news-badge--proekt {
  min-width: 183px; /* в Figma шире текста, как и «Корпоративная жизнь» */
  background: #ACC8D2;
}

.news-badge--korporativ {
  min-width: 249px; /* в Figma эта плашка фиксированно шире остальных */
  background: #F6F1E9;
  color: #516B43;
}

.news-item__info {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.news-item__head {
  flex-shrink: 0;
  min-width: 245px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Ряд по ширине текста — стрелка сразу за заголовком. Прижата к нижней
   строке (в Figma у двухстрочных items-end, у однострочных center — при
   trim это одна и та же позиция) */
.news-item__title-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  max-width: 268px;
}

.news-item__title {
  flex: 0 1 auto;
  min-width: 1px;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  color: #000;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Бокс 20×21, сам вектор 21.72×22.69 выступает за него (inset в Figma) */
.news-item__arrow {
  flex-shrink: 0;
  width: 21.72px;
  height: 22.69px;
  max-width: none;
  margin: -1px -1px -0.69px -0.72px;
}

.news-item__date {
  height: 33px;
  font-family: 'DINPro Cond Light', 'Inter', Arial, sans-serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.1;
  color: #000;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.news-item__excerpt {
  flex: 1 0 0;
  min-width: 1px;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.1;
  color: rgba(0, 0, 0, 0.6);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* --- «Показать еще» (node 5909:11337) --- */
.news-more {
  margin-top: 42px;
  height: 33px;
  text-align: center;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #516B43;
  text-transform: uppercase;
}

.news-more__btn {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  text-decoration: underline;
}

.news-more__btn.htmx-request {
  opacity: 0.5;
}

/* --- Подписка + соцсети (node 5916:11600) --- */
.news-subscribe {
  margin-top: 64px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
}

.news-subscribe__card {
  flex-shrink: 0;
  width: 568px;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: #E2480A;
  color: #fff;
}

.news-subscribe__text {
  width: 448px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.news-subscribe__eyebrow,
.news-subscribe__desc {
  font-family: 'DINPro Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.news-subscribe__eyebrow {
  text-transform: uppercase;
}

.news-subscribe__title {
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.news-subscribe__form {
  width: 450px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.news-subscribe__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-subscribe__input {
  width: 100%;
  height: 50px; /* в Figma рамка внутри 50px (py 14 + 22), не 52 */
  padding: 0 20px;
  border: 1px solid #fff;
  border-radius: 0;
  background: transparent;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: #fff;
  outline: none;
}

.news-subscribe__input::placeholder {
  color: #fff;
  opacity: 1;
}

.news-subscribe__btn {
  height: 50px;
  padding: 0 20px;
  background: #fff;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 50px;
  color: #E2480A;
  text-transform: uppercase;
}

.news-subscribe__consent {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  width: 449px;
  cursor: pointer;
}

.news-subscribe__check {
  position: absolute;
  opacity: 0;
  width: 24px;
  height: 24px;
  margin: 0;
}

.news-subscribe__box {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Отмеченного состояния в макете нет — простая белая галочка */
.news-subscribe__check:checked + .news-subscribe__box::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.news-subscribe__check:focus-visible + .news-subscribe__box {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.news-subscribe__consent-text {
  width: 395px;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.8);
}

.news-subscribe__consent-text a {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.news-socials {
  flex-shrink: 0;
  width: 568px;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.news-socials__eyebrow {
  font-family: 'DINPro Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: #E2480A;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.news-socials__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.news-socials__title {
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  color: #E2480A;
  text-transform: uppercase;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.news-socials__links-wrap {
  width: 504px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  line-height: 1.1;
}

.news-socials__links {
  display: flex;
  align-items: center;
  gap: 60px;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #000;
}

/* Ширины подписей — фиксированные боксы из Figma (70/74/84/91 + gap 60),
   иначе браузерный DIN чуть уже и ряд съезжает */
.news-socials__links a:nth-child(1) { width: 70px; }
.news-socials__links a:nth-child(2) { width: 74px; }
.news-socials__links a:nth-child(3) { width: 84px; }
.news-socials__links a:nth-child(4) { width: 91px; }

.news-socials__note {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}

/* --- Призыв (node 5916:11601): общий .pd-cta, но первая строка — не курсив,
   а оранжевая, блок 588px высотой и 130px от подписки --- */
body.is-news-page .pd-cta {
  margin-top: 130px;
  min-height: 588px;
}

.pd-cta__title-line--accent {
  color: #E2480A;
}

/* Ответ формы подписки — static/js/forms.js пишет текст в [data-lead-status] */
.news-subscribe__status {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
}

.news-subscribe__card .news-subscribe__status {
  color: #fff;
}

.news-empty {
  margin-top: 40px;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.6);
}