/* Mobile First - Flex карусель */
.dp-views-container > div {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--dp-cards-gap);
  padding: 15px 0px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.dp-views-container > div::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.dp-paragraph.views .views-row {
  flex: 0 0 calc(47% - 8px); /* 2 элемента в ряд */
  scroll-snap-align: start;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  padding: var(--dp-cards-gap);
}

#dp-paragraph-26 .views-row {
    flex: 0 0 calc(90% - 8px);
}

.dp-paragraph.views .views-field-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Количество строк */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* Для Firefox и современных браузеров */
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-line-clamp: 2;
  
  /* Альтернатива для поддержки в новых браузерах */
  display: block;
  max-height: 2.8em; /* примерно 2 строки */
  line-height: 1.4em;
  text-decoration: none;
  margin-bottom: var(--sp0-25);
}

.dp-views-container::after {
    content: "← Свайпните →";
    display: block;
    height: 10px;
    width: 100%;
    z-index: 999;
    margin-bottom: 1rem;
    text-align: center;
}

/* Десктоп - CSS Grid */
@media (min-width: 992px) {
  .dp-views-container > div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: var(--container-padding);
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
  }
  
  .dp-paragraph.views .views-row {
    flex: none;
    width: 100%;
    padding: var(--container-padding);
  }
  
  .dp-views-container::after {
      display: none;
  }
}