/* ============================================
   Publications Page Styles
   ============================================ */

.pub-hero {
  padding: var(--space-xl) 0 72px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}
.pub-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 20px; }
.pub-lead { color: var(--text-muted); font-size: 1.05rem; max-width: 540px; margin: 0 auto; line-height: 1.75; }

.pub-grid-section { padding: 80px 0 120px; }
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 36px; }

.pub-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden;
  background: var(--white); cursor: pointer; text-align: left;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  font-family: inherit; width: 100%;
}
.pub-card:hover { box-shadow: 0 16px 48px rgba(12,66,97,0.1); transform: translateY(-4px); }
.pub-card-image { aspect-ratio: 1/1; width: 100%; }
.pub-card-body { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.pub-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.pub-card-body h3 { font-size: 1.05rem; line-height: 1.3; color: var(--navy); }

.article-nav-bar { padding: 40px 0 0; }

.article { padding-bottom: 112px; }
.article-header { padding: 56px 0 40px; max-width: 760px; margin: 0 auto; }
.article-header .pub-tag { display: block; margin-bottom: 16px; }
.article-header h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 20px; line-height: 1.18; }
.article-meta { font-size: 0.88rem; color: var(--text-muted); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.meta-dot { color: var(--gold); }

.article-cover {
  width: 100%; 
  aspect-ratio: 16/7; 
  max-width: 720px; /* Изменили это значение, чтобы оно было равно ширине текста */
  margin: 0 auto 72px; 
  border-radius: 6px; 
  overflow: hidden;
}
.article-cover img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.article-body { max-width: 720px; margin: 0 auto; font-size: 1.08rem; line-height: 1.9; color: #263542; }
.article-body h2 {
  font-size: 1.5rem; color: var(--navy);
  margin: 56px 0 20px; padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.article-body p { margin-bottom: 28px; }
.article-body ol, .article-body ul { margin: 8px 0 28px 28px; }
.article-body li { margin-bottom: 10px; padding-left: 4px; }
.article-body blockquote {
  border-left: 3px solid var(--gold); padding: 8px 0 8px 28px;
  margin: 40px 0; font-style: italic; color: var(--navy);
  font-size: 1.08rem; line-height: 1.75;
}
.article-body em { font-style: italic; }
.article-body strong { font-weight: 700; color: var(--navy-dark); }

.article-img-row { 
  display: flex; 
  gap: 24px; 
  margin: 48px auto; 
  max-width: 720px; /* Чтобы ширина ряда строго совпадала с шириной текста статьи */
  flex-wrap: wrap; 
}

/* Новый контейнер для каждой картинки с подписью */
.article-img-container {
  flex: 1 1 300px; /* Картинки будут делить место поровну, но на телефонах встанут друг под друга */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Стили для самой картинки внутри статьи */
.article-img-container img {
  width: 100%;
  aspect-ratio: 4/3; /* Сохраняем приятное аккуратное соотношение сторон */
  object-fit: cover; /* Картинка заполнит область без искажения пропорций */
  border-radius: 6px; /* Легкое скругление углов для соответствия общему дизайну сайта */
}

/* Красивый шрифт для подписи под картинкой */
.img-caption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
}
.article-img-placeholder {
  flex: 1 1 200px; aspect-ratio: 4/3; min-height: 180px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-soft); border: 1px dashed var(--border-soft); border-radius: 6px; gap: 10px;
}
.article-img-placeholder span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); text-align: center; padding: 0 16px; }

.article-credits {
  max-width: 720px; margin: 56px auto 0; padding-top: 28px;
  border-top: 1px solid var(--border-soft); font-family: var(--font-mono);
  font-size: 0.78rem; color: var(--text-muted); display: flex; gap: 24px; flex-wrap: wrap;
}

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  padding: 0; transition: color 0.2s;
}
.back-link:hover { color: var(--navy); }

@media (max-width: 900px) {
  .pub-hero { padding: 64px 0 48px; }
  .pub-grid-section { padding: 56px 0 80px; }
  .pub-grid { grid-template-columns: 1fr; gap: 24px; }
  .article-cover { margin-bottom: 48px; }
  .article-img-row { flex-direction: column; gap: 16px; }
  .article-body h2 { margin-top: 40px; }
}