/* Start:/bitrix/templates/new_2016.07/components/bitrix/news/anker_blog/style.css?17930157181553*/
/*
 * Blog (component news, template anker_blog): breadcrumbs and the list header from /news/index.php.
 * The file is loaded on the list and on article pages.
 */

/* breadcrumbs: small and quiet, "Glavnaya / Blog" */
.nl-crumbs {
	margin: 28px 0 0;
	color: #8a8f98;
	font-size: 13px;
	line-height: 1.4;
}

.nl-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nl-crumbs li + li::before {
	margin: 0 8px;
	color: #c5c9d0;
	content: "/";
}

.nl-crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color .2s;
}

.nl-crumbs a:hover {
	color: #1e2432;
}

/* list header: the site sets every h1 to 24px uppercase-like spacing with !important - the journal title is its own */
.nl-head {
	margin: 20px 0 28px;
}

.nl-head .nl-head__title {
	margin: 0;
	color: #1e2432;
	font-family: "Manrope", sans-serif !important;
	font-size: 40px !important;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.01em;
	text-transform: none;
}

.nl-head__lead {
	margin: 10px 0 0;
	color: #6b819b;
	font-size: 17px;
	line-height: 1.45;
}

@media (max-width: 640px) {
	.nl-crumbs {
		margin-top: 16px;
	}

	.nl-head {
		margin: 14px 0 20px;
	}

	.nl-head .nl-head__title {
		font-size: 28px !important;
	}

	.nl-head__lead {
		font-size: 15px;
	}
}

/* one left edge for breadcrumbs, title, section buttons and the grid: the site container (.g-wrapper) already sets the width */
.g-wrapper .nl-sections {
	justify-content: flex-start;
	padding: 0;
}

.g-wrapper .nl-wrap {
	padding-right: 0;
	padding-left: 0;
}

/* End */


/* Start:/bitrix/templates/new_2016.07/components/bitrix/news/anker_blog/bitrix/news.list/photo2/style.css?17927854694795*/
/* ОБЩИЙ КОНТЕЙНЕР */
.nl-wrap{
  max-width: 1440px; /* Растянули до 1440px для широких экранов */
  margin: 0 auto;
  padding: 60px 40px 100px;
  box-sizing: border-box;
  background-color: transparent; /* Убрали серый фон (или поставьте #fff) */
}

/* СЕТКА: больше расстояние между картами */
.nl-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Чуть шире карточки */
  grid-auto-flow: dense; /* Убирает дыры */
  gap: 30px; /* Было 18px -> стало 30px (много воздуха) */
  align-items: stretch;
}

/* КАРТОЧКА */
.nl-card{
  --nl-bg: none;
  position: relative;
  display: block;
  min-height: 360px; /* Выше карточки */
  border-radius: 20px; /* Более мягкие углы */
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background-image: var(--nl-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #eee; /* Светлая заглушка пока грузится фото */
  
  /* Тени мягче и воздушнее */
  box-shadow: 0 15px 35px rgba(0,0,0,0.06);
  transform: translateZ(0);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Если картинки нет - делаем нейтральный серый градиент вместо черного */
.nl-card[style=""], .nl-card:not([style]){
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); /* Пример светлого градиента */
}

.nl-card:hover{
  transform: translateY(-8px); /* Сильнее всплывает */
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* ЗАТЕМНЕНИЕ: Только снизу! Верх остается светлым */
.nl-card__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg, 
    rgba(0,0,0,0) 0%, 
    rgba(0,0,0,0.2) 50%, 
    rgba(0,0,0,0.85) 100%
  );
  /* Верх картинки теперь чистый и яркий */
}

/* КОНТЕНТ */
.nl-card__content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px; /* Больше отступы внутри */
  z-index: 1;
}

/* РАЗДЕЛ (Тег) */
.nl-card__section{
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.2); /* Полупрозрачный белый */
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.3);
}

/* ЗАГОЛОВОК */
.nl-card__title{
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 24px; /* Крупнее шрифт */
  line-height: 1.2;
  margin: 0 0 12px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ТЕКСТ (Анонс) */
.nl-card__excerpt{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 15px; /* Читабельнее */
  line-height: 1.5;
  color: rgba(255,255,255,0.9); /* Светлее текст */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
}

/* Широкая карточка */
.nl-card.is-wide{
  grid-column: span 2;
  min-height: 400px;
}

/* ПЕЙДЖИНГ */
.nl-pagination {
    margin-top: 60px; /* Отступ от сетки */
    text-align: center;
}
.nl-pagination a, .nl-pagination .modern-page-current {
    display: inline-block;
    padding: 10px 18px;
    margin: 0 6px;
    border: 1px solid #ddd;
    border-radius: 50px; /* Круглые кнопки - моднее */
    text-decoration: none;
    color: #333;
    font-size: 15px;
    background: #fff;
    transition: all 0.2s;
}
.nl-pagination a:hover {
    border-color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.nl-pagination .modern-page-current {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* АДАПТИВ */
@media (max-width: 900px){
  .nl-wrap{ padding: 40px 20px; }
  .nl-grid{ gap: 20px; grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); } /* На планшете в 1 колонку или 2 */
  .nl-card.is-wide{ grid-column: span 1; }
}

/* Blog sections (All / Articles / Reviews / News): links above the grid, rendered in /news/index.php */
.nl-sections{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.nl-sections + .nl-wrap,
.nl-sections ~ div .nl-wrap{
  padding-top: 32px;
}
.nl-sections__item{
  padding: 9px 18px;
  border: 1px solid #ddd;
  border-radius: 999px;
  color: #111;
  font-size: 15px;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.nl-sections__item:hover{
  border-color: #111;
}
.nl-sections__item.is-active{
  background: #111;
  border-color: #111;
  color: #fff;
}
@media (max-width: 600px){
  .nl-sections{
    justify-content: flex-start;
    padding: 0 16px;
  }
}

/* End */
/* /bitrix/templates/new_2016.07/components/bitrix/news/anker_blog/style.css?17930157181553 */
/* /bitrix/templates/new_2016.07/components/bitrix/news/anker_blog/bitrix/news.list/photo2/style.css?17927854694795 */