/* Start:/bitrix/templates/new_2016.07/components/bitrix/news/anker_blog/bitrix/news.list/photo2/style.css?17707187733978*/
/* ОБЩИЙ КОНТЕЙНЕР */
.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; }
}

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