/* === Управление шириной контента === */
:root{
  --content-w-rem: 50rem;   /* желаемая ширина уже в rem */
  --content-min-rem: 20rem; /* минимум */
  --content-max-rem: 90rem; /* максимум */
}

/* ширина: не меньше минимума, стремимся к --content-w, но не больше max и не шире окна */
.post-content,
.post-excerpt{
  /* запираем в рамках окна и макс-ширины */
  width: min(100vw - 32px,
             clamp(var(--content-min-rem),
                   var(--content-w-rem),
                   var(--content-max-rem)));
  margin-inline: auto;
  transition: width .25s ease;
}

/* Картинки и медиа растягиваются по контейнеру */
.post-content picture,
.post-excerpt picture,
.post-content img,
.post-excerpt img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin: 20px auto; /* ← вернули вертикальный отступ */
  transition: width .25s ease, max-width .25s ease;
}

/* Заголовки — по центру, ТЕКСТ — слева (читаемее) */
.post-title{ text-align:center; }

.post-content p,
.post-excerpt p{
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.65;
  text-align: justify;          /* ← ключевое: возвращаем выравнивание слева */
  margin: 0 0 20px;
  text-justify: inter-word;
}

/* Отступы между элементами на главной */
ul{ margin-top: 40px; }
ul li:not(:last-child){ margin-bottom: clamp(24px, 2vw, 48px); }

/* Общие стили для постов */
.post {
  display: flex;
  flex-direction: column;   /* Располагаем элементы вертикально */
  margin-bottom: 40px;      /* Отступ между постами */
  margin-top: 40px;         /* Увеличиваем расстояние между шапкой и списком */
  background-color: transparent; /* Убираем серый фон */
}

.post-excerpt p {
  font-size: 16px;
  color: var(--main-color);
  margin: 20px 0 0;
}

.post-title {
  display: block;             /* Устанавливаем блочный контекст */
  text-align: center;         /* Центрируем текст */
  font-size: 24px;            /* Размер шрифта */
  font-weight: bold;          /* Жирный шрифт */
  margin-bottom: 2px;        /* Отступ под заголовком */
  text-decoration: none;      /* Убираем подчёркивание */
  color: var(--main-color);   /* Основной цвет текста */
  transition: color 0.3s ease; /* Плавное изменение цвета при наведении */
}

.post-title:hover {
  color: var(--accent-color); /* Цвет при наведении */
}

/* центрируем дату и в списке, и внутри .post */
.post-date,
.post .post-date,
ul li .post-date {
  text-align: center;
  display: block;
  margin: 0 0 20px;
  font-size: 14px;
  color: #666;
}

ul {
  margin-top: 40px; /* Увеличиваем расстояние между шапкой и списком */
}

ul li {
  margin-bottom: 40px; /* Увеличиваем расстояние между постами */
}

.post-content p {
  font-size: 16px;
  color: var(--main-color);
  margin: 0 0 20px;
}

.post-content h1{
  text-align: center;
}

.blog-links {
  list-style-type: none;   /* Убираем маркеры списка */
  padding: 0;
  margin: 20px 0;
  text-align: center;     /* Центрируем список */
}

.blog-links li {
  margin-bottom: 10px;    /* Отступ между ссылками */
}

.blog-links a {
  color: var(--accent-color);  /* Цвет ссылок */
  text-decoration: none;       /* Убираем подчёркивание */
  font-size: 18px;
  font-weight: bold;
}

.blog-links a:hover {
  text-decoration: underline;  /* Добавляем подчёркивание при наведении */
}