/* ==========================================================================
   Блог «Новини та поради»: список статей і сторінка статті.
   Картки статей — .ncard з news.css; тексти, примітки, зміст — з info.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Список статей: головна стаття на всю ширину, далі по дві в ряд
   -------------------------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

.blog-grid .ncard--featured {
  grid-row: auto;
  grid-column: 1 / -1;
}

.blog-grid .ncard--featured .ncard__mediawrap {
  flex: none;
  aspect-ratio: 21 / 9;
  min-height: 0;
}

/* «Інші статті» під статтею — три в ряд */
.blog-grid--row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   Стаття
   -------------------------------------------------------------------------- */
.article {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-8);
  border-radius: var(--r-2xl);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}

.article__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 760px;
}

.article__head .ncard__meta {
  font-size: var(--fs-13);
}

.article__head .badge {
  transition: filter var(--t-fast);
}

.article__head .badge:hover {
  filter: brightness(0.95);
}

.article__title {
  font-size: var(--fs-26);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.article__lead {
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--c-text-2);
}

/* Фото: те саме оформлення, що в картці (підпис автора — обов'язковий) */
.article__figure .ncard__mediawrap {
  margin: 0;
  aspect-ratio: 16 / 9;
}

.article__figure .ncard__badge {
  display: none;
}

/* Текст статті: зручна ширина рядка, ритм відступів — від батька (П4) */
.article__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 760px;
  font-size: var(--fs-16);
  line-height: 1.7;
  color: var(--c-text-2);
}

.article__body h2 {
  margin-top: var(--s-3);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-text);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}

.article__body b {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.article__body a {
  color: var(--c-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}

.article__body a:hover {
  color: var(--c-accent);
}

.article__body ul,
.article__body ol {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-left: var(--s-6);
}

.article__body ul {
  list-style: disc;
}

.article__body ol {
  list-style: decimal;
}

.article__body li::marker {
  color: var(--c-accent);
  font-weight: var(--fw-semibold);
}

.article__body .inote {
  font-size: var(--fs-15);
}

.article--sk .sk {
  border-radius: var(--r-xl);
}

.blog-section {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.is-article-missing .panel--toc {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   Адаптивність
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  .article {
    padding: var(--s-6);
  }
}

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

  .blog-grid--row .ncard:nth-child(3) {
    display: none;
  }
}

@media (max-width: 767px) {
  .blog-grid,
  .blog-grid--row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }

  .blog-grid--row .ncard:nth-child(3) {
    display: flex;
  }

  /* На сторінці блогу картки — стовпчиком (не стрічкою, як на головній) */
  .blog-grid .ncard,
  .blog-grid .ncard--featured {
    flex: none;
  }

  .blog-grid .ncard--featured .ncard__mediawrap {
    aspect-ratio: 16 / 9;
  }

  .blog-grid .ncard__title {
    min-height: 0;
  }

  .article {
    gap: var(--s-4);
    padding: var(--s-4);
  }

  .article__title {
    font-size: var(--fs-22);
  }

  .article__lead,
  .article__body {
    font-size: var(--fs-15);
  }

  .article__body {
    gap: var(--s-3);
  }

  .article__body h2 {
    margin-top: var(--s-2);
    font-size: var(--fs-18);
  }


  /* Список статей: заголовок на телефоні візуально схований (назва — у крихтах, як у каталозі),
     тож його рядок не займає місця */
  .shell--blog .page-head {
    display: contents;
  }

  /* Назва статті — у заголовку під крихтами; на телефоні в крихтах її не дублюємо */
  .shell--blog .crumbs__current#crumb-article,
  .shell--blog .crumbs > svg.lucide:has(+ #crumb-article) {
    display: none;
  }
}