/* cn3-plus / magazine: оформление списка выпусков журнала и страницы выпуска.
   Разметка и логика остаются в magazine.php и magazine_content.php; здесь только вид.
   Селекторы с .cn3x-mag сильнее встроенных в шаблоны стилей. */

/* ---------- Список выпусков ---------- */
.cn3x-mag .re-archive-header { padding: 6px 0 18px; margin: 0; }
.cn3x-mag .re-archive-description {
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: var(--lh-read, 1.7);
  color: var(--cn3Muted, var(--greyColor));
}

/* 4 журнала в строке на широких экранах, 3 на средних, 2 на планшетах и телефонах, 1 на самых узких */
.cn3x-mag .magazine-issues-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.2rem 1.8rem;
  margin-bottom: 3rem;
}
@media (max-width: 1199px) { .cn3x-mag .magazine-issues-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 799px)  { .cn3x-mag .magazine-issues-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; } }
@media (max-width: 340px)  { .cn3x-mag .magazine-issues-grid { grid-template-columns: minmax(0, 1fr); } }

/* на огромных мониторах страница не растягивается шире 1400px, иначе обложки превращаются в плакаты */
.cn3x-mag.re-single,
.cn3x-mag.magazine-container {
  /* .site-wrapper — flex-колонка, а у блока margin: 0 auto: без width блок сжимается по содержимому,
     и на большом мониторе журналы выстраиваются узкой колонкой */
  width: 100%;
  max-width: min(var(--width, 1100px), 1400px);
}

.cn3x-mag .magazine-issue-card {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.cn3x-mag .magazine-issue-card:hover { transform: none; box-shadow: none; }

/* обложка: портретная, как у печатного журнала */
.cn3x-mag .magazine-issue-cover {
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  background: linear-gradient(145deg, #1f2937, #4b5563);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .12);
  transition: transform .35s ease, box-shadow .35s ease;
}
.cn3x-mag .magazine-issue-card:hover .magazine-issue-cover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .3);
}
.cn3x-mag .magazine-issue-cover img { width: 100%; height: 100%; object-fit: cover; }
.cn3x-mag .magazine-issue-card:hover .magazine-issue-cover img { transform: none; }
.cn3x-mag .magazine-issue-cover-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: .5;
  color: #fff;
}
.cn3x-mag .magazine-issue-cover-placeholder svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.4; }

.cn3x-mag .magazine-issue-content { padding: .9rem 0 0; }
.cn3x-mag .magazine-issue-title {
  margin: 0 0 .3rem;
  font-family: var(--headFont, var(--primeFont));
  font-size: var(--fs-lg, 1.15rem);
  font-weight: var(--bold, 600);
  line-height: var(--lh-snug, 1.3);
}
.cn3x-mag .magazine-issue-card:hover .magazine-issue-title { color: var(--hoverColor); }
.cn3x-mag .magazine-issue-description { display: none; } /* в плотной сетке описание лишнее */
.cn3x-mag .magazine-issue-meta {
  padding: 0;
  border: 0;
  font-size: var(--fs-sm, .85rem);
  font-weight: var(--regular, 400);
  color: var(--cn3Muted, var(--greyColor));
}

/* пагинация */
.cn3x-mag .magazine-pagination a,
.cn3x-mag .magazine-pagination span.page-numbers {
  border-radius: 999px;
  background: transparent;
  border-color: var(--borderColor, rgba(128, 128, 128, .35));
  color: var(--mainColor);
}
.cn3x-mag .magazine-pagination a:hover { background: var(--mainColor); border-color: var(--mainColor); color: var(--lightColor, #fff); box-shadow: none; }
.cn3x-mag .magazine-pagination span.page-numbers.current {
  background: var(--mainColor) !important;
  border-color: var(--mainColor) !important;
  color: var(--lightColor, #fff) !important;
}

/* ---------- Страница выпуска ---------- */
.cn3x-mag.magazine-container { padding-top: 1.4rem; }

.cn3x-mag .issue-header {
  gap: 3rem;
  margin-bottom: 3rem;
  padding: 1rem 0 2.4rem;
  border-bottom: 1px solid var(--borderColor, rgba(128, 128, 128, .28));
}
.cn3x-mag .issue-cover img {
  width: 300px;
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}
.cn3x-mag .issue-meta h1 {
  margin: 0 0 1rem;
  font-family: var(--headFont, var(--primeFont));
  font-size: var(--fs-3xl, clamp(1.8rem, 4vw, 3rem));
  font-weight: var(--bold, 600);
  line-height: var(--lh-tight, 1.15);
}
.cn3x-mag .issue-authors,
.cn3x-mag .issue-tags { color: var(--cn3Muted, var(--greyColor)); margin-bottom: .5rem; }
.cn3x-mag .issue-authors strong,
.cn3x-mag .issue-tags strong { color: var(--mainColor); }

.cn3x-mag .section-title {
  margin: 2.6rem 0 1.4rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--borderColor, rgba(128, 128, 128, .28));
  font-family: var(--headFont, var(--primeFont));
  font-size: var(--fs-2xl, 1.8rem);
  font-weight: var(--bold, 600);
}

.cn3x-mag .issue-content { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem 1.6rem; }
.cn3x-mag .article-card { border: 0; background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.cn3x-mag .article-card:hover { transform: none; box-shadow: none; }
.cn3x-mag .article-card .thumb { aspect-ratio: 3 / 2; height: auto; border-radius: 10px; margin-bottom: .7rem; }
.cn3x-mag .article-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cn3x-mag .article-card h3 {
  font-family: var(--headFont, var(--primeFont));
  font-size: var(--fs-lg, 1.15rem);
  font-weight: var(--bold, 600);
  line-height: var(--lh-snug, 1.3);
}
.cn3x-mag .article-card h3 a { color: inherit; text-decoration: none; }
.cn3x-mag .article-card h3 a:hover { color: var(--hoverColor); text-decoration: none; }
.cn3x-mag .article-card .meta { font-size: var(--fs-sm, .85rem); color: var(--cn3Muted, var(--greyColor)); }
.cn3x-mag .article-card .excerpt { font-size: .92rem; color: var(--cn3Muted, var(--greyColor)); }
.cn3x-mag .more-article-item a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(128, 128, 128, .4); }
.cn3x-mag .more-article-item a:hover { color: var(--hoverColor); border-bottom-color: currentColor; }

@media (max-width: 800px) {
  .cn3x-mag .issue-header { gap: 1.6rem; }
  .cn3x-mag .issue-cover img { width: 240px; }
}