/* News list + article */

.page--novosti,
.page--article {
  background-color: var(--color-white);
}

.nw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, calc(28 / var(--design-width) * 100vw), 28px);
}

.nw-grid .articles__card {
  width: 100%;
  height: 100%;
}

.nw-grid .articles__card-link {
  height: 100%;
  box-shadow: 0 14px 36px rgba(16, 32, 43, 0.06);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.nw-grid .articles__card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(116, 175, 220, 0.14);
}

/* Article body */
.nw-article-panel .ip-panel__inner {
  background: linear-gradient(180deg, #f1f2f5 0%, #f7fbff 100%);
}

.nw-prose {
  max-width: clamp(280px, calc(780 / var(--design-width) * 100vw), 780px);
  margin-inline: auto;
  padding: clamp(28px, calc(40 / var(--design-width) * 100vw), 40px);
  border-radius: clamp(18px, calc(26 / var(--design-width) * 100vw), 26px);
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 36px rgba(16, 32, 43, 0.05);
  box-sizing: border-box;
}

.nw-prose__lead {
  font-family: var(--font-montserrat);
  font-weight: 500;
  font-size: clamp(18px, calc(22 / var(--design-width) * 100vw), 22px);
  line-height: 1.45;
  color: var(--color-dark);
}

.nw-prose p {
  margin-top: clamp(16px, calc(20 / var(--design-width) * 100vw), 20px);
  font-family: var(--font-inter);
  font-size: clamp(15px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: 1.65;
  color: var(--color-dark);
  opacity: 0.78;
}

.nw-prose p:first-of-type {
  margin-top: clamp(20px, calc(28 / var(--design-width) * 100vw), 28px);
}

.nw-prose h2 {
  margin-top: clamp(28px, calc(36 / var(--design-width) * 100vw), 36px);
  font-family: var(--font-montserrat);
  font-weight: 500;
  font-size: clamp(20px, calc(26 / var(--design-width) * 100vw), 26px);
  line-height: 1.2;
  color: var(--color-dark);
}

.nw-related .ip-section__head {
  margin-bottom: clamp(24px, calc(32 / var(--design-width) * 100vw), 32px);
}

@media (max-width: 1100px) {
  .nw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .nw-grid {
    grid-template-columns: 1fr;
  }
}