/**
 * Blog styles for RedPen application
 * Секция «Блог» на титульной + страницы blog/ (архив и записи).
 * Опирается на .landing/.prose и .btn из титульной; общий каркас — main.css.
 */

/* Кнопка «домой» на страницах блога — как .home-button в просмотрщике. */
.blog-home {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  background-color: #DC143C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: background-color 0.2s;
}
.blog-home:hover { background-color: #b01030; }

/* Страницы блога переиспользуют .landing, но без книжной сетки. */
.blog-index,
.blog-post {
  max-width: 780px;
  margin: 0 auto;
  padding-top: 28px;
  color: #1c1c1c;
  line-height: 1.6;
}
.blog-index h1,
.blog-post h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  margin: 6px 0 14px;
}
.blog-index__lead {
  margin: 0 0 28px;
  font-size: 1.05rem;
  color: #555;
}

/* Дата — одинаково во всех трёх контекстах. */
.blog-latest__date,
.blog-teaser__date,
.blog-post__date {
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.75rem;
  font-weight: 700;
  color: #DC143C;
}

/* Архив: список записей. */
.blog-teaser {
  padding: 18px 0;
  border-top: 1px solid #e6e2dd;
}
.blog-teaser:first-of-type { border-top: none; padding-top: 0; }
.blog-teaser__title {
  margin: 0 0 6px;
  font-size: 1.2rem;
  line-height: 1.3;
}
.blog-teaser__title a {
  color: #1c1c1c;
  text-decoration: none;
}
.blog-teaser__title a:hover { color: #DC143C; }
.blog-teaser__summary {
  margin: 0;
  color: #555;
  font-size: 0.95rem;
}

/* Титульная: карточка последней записи. */
.blog-latest {
  background: #fff;
  border: 1px solid #e6e2dd;
  border-left: 5px solid #DC143C;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 20px;
}
.blog-latest__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  line-height: 1.3;
}
.blog-latest__summary {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: #444;
}
.blog-section__more {
  margin: 14px 0 0;
  font-size: 0.9rem;
}
.blog-section__more a {
  color: #8a3a4a;
  text-decoration: none;
  font-weight: 600;
}
.blog-section__more a:hover { text-decoration: underline; }

/* Тело записи. */
.blog-post__body h2 {
  font-size: 1.3rem;
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #f0d6dc;
}
.blog-post__body h3 { font-size: 1.1rem; margin: 22px 0 8px; }
.blog-post__body p { margin: 0 0 16px; }
.blog-post__body ul,
.blog-post__body ol { margin: 0 0 16px; padding-left: 22px; }
.blog-post__body li { margin-bottom: 8px; }
.blog-post__body a { color: #b01030; }
.blog-post__body code {
  background: #f4f1ee;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.92em;
}
.blog-post__body blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid #e0d3d6;
  color: #555;
}
.blog-post__body hr {
  border: none;
  border-top: 1px solid #e6e2dd;
  margin: 28px 0;
}
.blog-post__back {
  margin-top: 32px;
  padding-top: 14px;
  border-top: 1px solid #e2ded9;
  font-size: 0.9rem;
}
.blog-post__back a {
  color: #8a3a4a;
  text-decoration: none;
  font-weight: 600;
}
.blog-post__back a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .blog-index h1,
  .blog-post h1 { font-size: 1.7rem; }
}