/* =========================================================================
   Radeka — доработки 2026
   Правки по ТЗ от 22.07.2026:
     1. Иконка Pinterest в подвале и на главной.
     2. Блок «Похожие статьи» в конце публикации.

   Точки перехода совпадают с сеткой темы (Bootstrap):
     до 575 px   — телефон, одна колонка
     576–991 px  — планшет, две колонки
     от 992 px   — десктоп, три колонки

   Шрифты и цвета взяты из основной темы:
     заголовки — Philosopher 700, текст — Open Sans 400
     основной цвет текста #242424, акцент #794A2D
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Pinterest
   ---------------------------------------------------------------------- */

/* Подвал: иконка рисуется маской, цвет наследуется от соседних значков. */
.footer__socials a.pinterest span {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.9141.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.1692.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.2070 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.9310 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0' fill='white'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.9141.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.1692.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.2070 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.9310 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 24px 24px;
          mask-size: 24px 24px;
}

/* Главная: блок «Наша компания в социальных сетях». */
.h-socials__icons a.pinterest {
  background-image: url("data:image/svg+xml,%3Csvg width='62' height='62' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.9141.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.1692.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.2070 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.9310 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0' fill='white'/%3E%3C/svg%3E");
}

/* Значков в блоке стало два. На узких экранах разрешаем перенос и
   уменьшаем просвет, чтобы строка не выходила за край. */
.h-socials__icons {
  flex-wrap: wrap;
  row-gap: 20px;
}

@media (max-width: 575px) {
  .h-socials__icons {
    gap: 34px;
  }
}

/* -------------------------------------------------------------------------
   2. Блок «Похожие статьи»
   ---------------------------------------------------------------------- */

.related-posts {
  box-sizing: border-box;
  width: 100%;
  max-width: 960px;          /* та же ширина, что у блока «Предыдущая/Следующая» */
  margin: 40px 0 0;
  padding-top: 30px;
  border-top: 1px solid rgba(36, 36, 36, 0.12);
}

.related-posts *,
.related-posts *::before,
.related-posts *::after {
  box-sizing: border-box;
}

.related-posts__title {
  font-family: "Philosopher", serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: #242424;
  margin: 0 0 24px;
  text-align: left;
}

/* Сетка карточек. Grid выбран ради ровных колонок и одинаковой
   высоты рядов — карточки выравниваются автоматически. */
.related-posts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}

.related-posts__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;              /* защита от растягивания сетки длинным словом */
  background: #fff;
  border: 1px solid rgba(36, 36, 36, 0.10);
  overflow: hidden;
  transition: box-shadow 0.25s, border-color 0.25s;
}

.related-posts__card:hover {
  border-color: rgba(121, 74, 45, 0.35);
  box-shadow: 0 6px 20px rgba(36, 36, 36, 0.10);
}

/* Картинка: жёсткое соотношение 3:2 у всех карточек, чтобы заголовки
   начинались на одной линии независимо от размера исходного файла. */
.related-posts__thumb {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 66.66%;       /* запасной вариант для старых браузеров */
  background-color: #f2f0ee;
  overflow: hidden;
  text-decoration: none;
}

.related-posts__thumb img,
.related-posts__thumb-empty {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}

.related-posts__thumb-empty {
  background: #f2f0ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23bdb5ad' stroke-width='1.2'%3E%3Crect x='3' y='4' width='18' height='16'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='9' cy='9' r='1.4'/%3E%3C/svg%3E") center no-repeat;
}

.related-posts__card:hover .related-posts__thumb img {
  transform: scale(1.04);
}

@supports (aspect-ratio: 3 / 2) {
  .related-posts__thumb {
    padding-top: 0;
    aspect-ratio: 3 / 2;
  }
}

/* Тело карточки. Колонка с растяжкой: текст занимает свободное место,
   ссылка «Читать далее» прижимается к низу и выравнивается по всем
   карточкам ряда. */
.related-posts__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 18px 20px;
  text-align: left;
}

.related-posts__card-title {
  font-family: "Philosopher", serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  margin: 0 0 10px;
  color: #242424;

  /* Ограничение в две строки: заголовки разной длины не ломают ряд. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Длинные термины вроде «водосточной» переносятся, а не выпирают. */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.related-posts__card-title a {
  color: #242424;
  text-decoration: none;
  transition: color 0.2s;
}

.related-posts__card-title a:hover,
.related-posts__card-title a:focus-visible {
  color: #794A2D;
  text-decoration: none;
}

.related-posts__text {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #4a4a4a;
  margin: 0 0 16px;

  /* Три строки анонса — карточки остаются одной высоты. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;

  /* Выключка по левому краю: выравнивание по ширине на узких экранах
     даёт рваные пробелы, поэтому не используем. */
  text-align: left;
}

.related-posts__more {
  margin-top: auto;          /* прижимает ссылку к низу карточки */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;          /* удобная зона нажатия на телефоне */
  padding: 10px 0 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: #794A2D;
  text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}

.related-posts__more-arrow {
  width: 18px;
  height: 8px;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='8' viewBox='0 0 18 8'%3E%3Cpath d='M0 4h15.5M13 1l3.5 3-3.5 3' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='8' viewBox='0 0 18 8'%3E%3Cpath d='M0 4h15.5M13 1l3.5 3-3.5 3' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.2s;
}

.related-posts__more:hover,
.related-posts__more:focus-visible {
  color: #5d3822;
  text-decoration: none;
}

.related-posts__more:hover .related-posts__more-arrow {
  transform: translateX(3px);
}

/* Видимый фокус для клавиатуры и скринридеров. */
.related-posts a:focus-visible {
  outline: 2px solid #794A2D;
  outline-offset: 2px;
}

/* --- Планшет: две колонки ------------------------------------------- */
@media (min-width: 576px) {
  .related-posts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* --- Десктоп: три колонки ------------------------------------------- */
@media (min-width: 992px) {
  .related-posts {
    margin-top: 50px;
    padding-top: 40px;
  }

  .related-posts__title {
    font-size: 26px;
    margin-bottom: 30px;
  }

  .related-posts__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
  }

  .related-posts__card-title {
    font-size: 18px;
    line-height: 24px;
  }
}

/* --- Телефон: одна колонка, компактнее ------------------------------- */
@media (max-width: 575px) {
  .related-posts {
    margin-top: 30px;
    padding-top: 24px;
  }

  .related-posts__title {
    font-size: 20px;
    margin-bottom: 18px;
  }

  .related-posts__grid {
    gap: 18px;
  }

  .related-posts__body {
    padding: 16px 16px 18px;
  }

  /* На телефоне карточек три подряд — заголовку можно дать три строки,
     места по вертикали хватает, а обрывов меньше. */
  .related-posts__card-title {
    -webkit-line-clamp: 3;
  }
}

/* Отступ между новым блоком и блоком «Предыдущая / Следующая статья». */
.related-posts + .article__footer,
.article__footer + .related-posts {
  margin-top: 30px;
}

@media (prefers-reduced-motion: reduce) {
  .related-posts__card,
  .related-posts__thumb img,
  .related-posts__more,
  .related-posts__more-arrow {
    transition: none;
  }
}