/* =========================================================
   РАЗДЕЛ «ПОЛЕЗНОЕ»: СВЕТЛАЯ ТЕМА
   Подключается после inner-styles.css.

   В шаблонах обзора и статей:
   <body class="useful-page">
   ========================================================= */


/* =========================================================
   ТЕМА СТРАНИЦЫ
   Общие меню, шапка и футер используют эти переменные.
   ========================================================= */

body.useful-page {
  --primary: #099197;
  --primary-rgb: 9, 145, 151;

  --accent-on-dark: #b5decc;
  --accent-on-dark-rgb: 181, 222, 204;

  --accent-on-light: #762c19;
  --accent-on-light-rgb: 118, 44, 25;

  --accent: #762c19;
  --accent-rgb: 118, 44, 25;
  --on-accent: #ffffff;
  --focus: #762c19;

  /* Совместимость с общими старыми правилами */
  --pink: #762c19;

  /*
    В inner-styles.css эта переменная задаёт
    фон страницы, шапки и мобильного меню.
  */
  --bg-dark: #f5f5f5;
  --bg-card: #ffffff;

  --text-light: #2a2a2a;
  --text-muted: #707070;
  --border: #e0e0e0;

  background: var(--bg-dark);
  color: var(--text-light);
  font-weight: 400;
}


/* Локальные переменные раздела */

body.useful-page,
.useful-main,
.useful-article-main {
  --useful-text: #2a2a2a;
  --useful-body-text: #555555;
  --useful-muted: #707070;
  --useful-gray: #959595;

  --useful-primary: #099197;
  --useful-accent: #762c19;

  /* Совместимость с прежними именами */
  --useful-pink: #762c19;
  --useful-green: #099197;

  --useful-card-background: #ffffff;
  --useful-video-background: #101010;
}


/* Шапка и футер */

.useful-page .site-header {
  background: var(--bg-dark);
}

.useful-page footer {
  background: var(--bg-card);
}


/* =========================================================
   ОБЗОРНАЯ СТРАНИЦА
   ========================================================= */

.useful-main {
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(54px, 7vw, 84px) 24px 96px;
}

.useful-main .useful-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1220px;
  min-width: 0;
  margin: 0 auto;
}

.useful-page-intro {
  margin-bottom: clamp(42px, 6vw, 64px);
}

.useful-main .useful-page-title {
  margin: 0;

  color: var(--useful-primary);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;

  overflow-wrap: anywhere;
}

.useful-page-description,
.useful-page-content {
  color: var(--useful-body-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;

  overflow-wrap: anywhere;
}

.useful-page-description {
  max-width: none;
  margin: 20px 0 0;
}

.useful-page-content {
  margin-bottom: 40px;
}


/* =========================================================
   МОЗАИКА КАРТОЧЕК
   Без JavaScript — обычная сетка.
   ========================================================= */

.useful-grid {
  --useful-columns: 3;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;

  min-width: 0;
}

.useful-grid-item {
  min-width: 0;
  margin: 0;
}


/* Размещение карточек управляется useful-masonry.js */

.useful-grid.is-masonry {
  position: relative;
  display: block;
}

.useful-grid.is-masonry > .useful-grid-item {
  position: absolute;
  top: 0;
  left: 0;
}


/* =========================================================
   КАРТОЧКИ
   ========================================================= */

.useful-card {
  --card-color: var(--useful-accent);
  --card-min-height: 370px;
  --card-image-height: 195px;

  position: relative;

  display: flex;
  flex-direction: column;
  gap: 22px;

  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--card-min-height);
  padding: 26px;

  color: var(--useful-text);
  background: var(--useful-card-background);

  border: 1px solid var(--card-color);
  border-radius: 18px;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.045);
  text-decoration: none;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.useful-card:visited,
.useful-card:hover,
.useful-card:focus-visible {
  color: var(--useful-text);
  text-decoration: none;
}


/*
   Цвета рамок.
   Старые классы сохранены для MIGX:
   pink — коричневый;
   green — бирюзовый;
   gray — серый.
*/

.useful-card--pink {
  --card-color: var(--useful-accent);
}

.useful-card--green {
  --card-color: var(--useful-primary);
}

.useful-card--gray {
  --card-color: var(--useful-gray);
}


/* Размеры карточек */

.useful-card--small {
  --card-min-height: 290px;
  --card-image-height: 135px;
}

.useful-card--medium {
  --card-min-height: 370px;
  --card-image-height: 195px;
}

.useful-card--large {
  --card-min-height: 470px;
  --card-image-height: 275px;
}


/* Текст карточки */

.useful-card__text {
  min-width: 0;
}

.useful-card .useful-card__title {
  margin: 0;

  color: var(--useful-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;

  overflow-wrap: anywhere;
}

.useful-card .useful-card__description {
  margin: 14px 0 0;

  color: var(--useful-body-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;

  white-space: pre-line;
  overflow-wrap: anywhere;
}


/* Превью без рамки и отдельной подложки */

.useful-card__media {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  justify-content: center;

  height: var(--card-image-height);
  min-width: 0;
  margin-top: auto;
}

.useful-card__media img {
  display: block;

  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;

  padding: 0;
  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
  filter: none;
  object-fit: contain;
}


/* «Читать материал» — акцент на всех карточках */

.useful-card .useful-card__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 9px;

  max-width: 100%;
  margin-top: auto;

  color: var(--useful-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;

  overflow-wrap: anywhere;
}

.useful-card__arrow {
  display: block;
  flex: 0 0 auto;

  width: 0;
  height: 0;

  border-top: 5px solid transparent;
  border-right: 0;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;

  transition: transform 0.22s ease;
}

.useful-card:focus-visible {
  outline: 2px solid var(--useful-accent);
  outline-offset: 5px;
}


/* =========================================================
   СТРАНИЦА СТАТЬИ
   ========================================================= */

.useful-article-main {
  box-sizing: border-box;
  min-width: 0;
  padding: 48px 24px 80px;
}

.useful-article-main .useful-article-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1220px;
  min-width: 0;
  margin: 0 auto;
}


/* Возврат в раздел */

.useful-article-main .useful-article-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  min-height: 44px;
  max-width: 100%;
  margin: 0 0 28px;
  padding: 6px 0;

  color: var(--useful-accent);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;

  overflow-wrap: anywhere;
}

.useful-article-main .useful-article-back:visited,
.useful-article-main .useful-article-back:hover,
.useful-article-main .useful-article-back:active {
  color: var(--useful-accent);
  text-decoration: none;
}

.useful-article-back__label {
  min-width: 0;
}


/* Треугольник влево */

.useful-article-back .useful-article-back__arrow {
  display: block;
  flex: 0 0 auto;

  width: 0;
  height: 0;

  border-top: 6px solid transparent;
  border-right: 9px solid currentColor;
  border-bottom: 6px solid transparent;
  border-left: 0;

  transition: transform 0.2s ease;
}

.useful-article-main .useful-article-back:focus-visible {
  outline: 2px solid var(--useful-accent);
  outline-offset: 5px;
  border-radius: 2px;
}

.useful-article-back:focus-visible .useful-article-back__label {
  text-decoration: underline;
  text-underline-offset: 5px;
}


/* Заголовок и вступление */

.useful-article-header {
  width: 100%;
  max-width: none;
  margin: 0 0 32px;
}

.useful-article-main .useful-article-title {
  margin: 0;

  color: var(--useful-accent);
  font-size: clamp(28px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.3px;

  overflow-wrap: anywhere;
}

.useful-article-lead {
  margin: 18px 0 0;

  color: var(--useful-body-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;

  overflow-wrap: anywhere;
}


/* Последовательность блоков MIGX */

.useful-article-blocks {
  display: flex;
  flex-direction: column;
  gap: 32px;

  width: 100%;
  min-width: 0;
}


/* =========================================================
   ТЕКСТ СТАТЬИ
   ========================================================= */

.useful-article-text {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;

  color: var(--useful-body-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;

  overflow-wrap: anywhere;
}


/* Абзацы */

.useful-article-text p,
.useful-page-content p,
.useful-page-description p {
  margin: 0 0 20px;

  color: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}


/* Подзаголовки */

.useful-article-text h2,
.useful-article-text h3,
.useful-article-text h4,
.useful-page-content h2,
.useful-page-content h3,
.useful-page-content h4 {
  margin: 30px 0 16px;

  color: var(--useful-accent);
  font-weight: 600;
  line-height: 1.4;

  overflow-wrap: anywhere;
}

.useful-article-text h2,
.useful-page-content h2 {
  font-size: 25px;
}

.useful-article-text h3,
.useful-page-content h3 {
  font-size: 22px;
}

.useful-article-text h4,
.useful-page-content h4 {
  font-size: 19px;
}


/* Списки */

.useful-article-text ul,
.useful-article-text ol,
.useful-page-content ul,
.useful-page-content ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.useful-article-text li,
.useful-page-content li {
  font-weight: 400;
}

.useful-article-text li + li,
.useful-page-content li + li {
  margin-top: 8px;
}


/* Смысловое выделение */

.useful-article-text strong,
.useful-article-text b,
.useful-page-content strong,
.useful-page-content b {
  color: var(--useful-text);
  font-weight: 600;
}


/* Ссылки */

.useful-article-text a,
.useful-page-content a,
.useful-page-description a {
  color: var(--useful-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.useful-article-text a:hover,
.useful-page-content a:hover,
.useful-page-description a:hover {
  text-decoration-thickness: 2px;
}

.useful-article-text a:focus-visible,
.useful-page-content a:focus-visible,
.useful-page-description a:focus-visible {
  outline: 2px solid var(--useful-accent);
  outline-offset: 4px;
}


/* Цитаты */

.useful-article-text blockquote,
.useful-page-content blockquote {
  margin: 24px 0;
  padding: 8px 0 8px 22px;

  border-left: 3px solid var(--useful-accent);

  color: var(--useful-body-text);
  font-weight: 400;
}

.useful-article-text blockquote > :last-child,
.useful-page-content blockquote > :last-child {
  margin-bottom: 0;
}


/* Изображения внутри редакторского HTML */

.useful-article-text img,
.useful-page-content img {
  max-width: 100%;
  height: auto;
}


/* Краевые отступы */

.useful-article-text > :first-child,
.useful-page-content > :first-child,
.useful-page-description > :first-child {
  margin-top: 0;
}

.useful-article-text > :last-child,
.useful-page-content > :last-child,
.useful-page-description > :last-child {
  margin-bottom: 0;
}


/* =========================================================
   ОДИНОЧНЫЕ ИЗОБРАЖЕНИЯ И ВИДЕО
   ========================================================= */

.useful-article-media {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}


/* Обычный медиаблок */

.useful-article-media--text {
  max-width: 800px;
}


/* Широкий медиаблок */

.useful-article-media--wide {
  max-width: 100%;
}

.useful-article-image {
  display: block;

  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto;

  border: 0;
  border-radius: 8px;
}

.useful-article-video {
  display: block;

  width: 100%;
  height: auto;
  max-height: 80vh;

  background: var(--useful-video-background);
  border: 0;
  border-radius: 8px;

  object-fit: contain;
}

.useful-article-caption {
  margin-top: 12px;

  color: var(--useful-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  text-align: center;

  white-space: pre-line;
  overflow-wrap: anywhere;
}


/* =========================================================
   ДВА ИЗОБРАЖЕНИЯ РЯДОМ
   ========================================================= */

.useful-article-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;

  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}

.useful-article-pair--text {
  max-width: 800px;
}

.useful-article-pair--wide {
  max-width: 100%;
}

.useful-article-pair__item {
  display: flex;
  flex-direction: column;
  align-items: center;

  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
}


/* Маленькие исходники не растягиваются */

.useful-article-pair__image {
  display: block;

  width: auto;
  height: auto;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0;

  border: 0;
  border-radius: 8px;

  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

.useful-article-pair__item .useful-article-caption {
  box-sizing: border-box;
  width: 100%;
  margin: 12px 0 0;
}


/* =========================================================
   ВИДЕО СЛЕВА, ТЕКСТ СПРАВА
   ========================================================= */

.useful-video-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: 32px;

  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.useful-video-text__media {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
}


/* Видео сохраняет собственные пропорции */

.useful-video-text__media .useful-article-video {
  display: block;

  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  margin: 0;

  object-fit: contain;
}


/* Для типографики у текста также нужен useful-article-text */

.useful-video-text .useful-video-text__content {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

.useful-video-text__media .useful-article-caption {
  margin: 12px 0 0;

  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}


/* Если текста нет — узкий плеер по центру */

.useful-video-text--no-text {
  grid-template-columns: minmax(0, 1fr);
}

.useful-video-text--no-text .useful-video-text__media {
  max-width: 320px;
  margin: 0 auto;
}


/* =========================================================
   НАВЕДЕНИЕ
   Только на устройствах с мышью.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .useful-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.09);
  }

  .useful-card:hover .useful-card__arrow {
    transform: translateX(3px);
  }

  .useful-article-back:hover .useful-article-back__label {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }

  .useful-article-back:hover .useful-article-back__arrow {
    transform: translateX(-3px);
  }
}


/* =========================================================
   ПЛАНШЕТ: ДВЕ КОЛОНКИ КАРТОЧЕК
   ========================================================= */

@media (max-width: 1000px) {
  .useful-grid {
    --useful-columns: 2;

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 767px) {

  /* Обзор */

  .useful-main {
    padding: 46px 16px 70px;
  }

  .useful-page-intro {
    margin-bottom: 38px;
  }

  .useful-main .useful-page-title {
    font-size: clamp(26px, 5vw, 34px);
  }

  .useful-page-description,
  .useful-page-content {
    font-size: 15px;
    line-height: 1.8;
  }


  /* Карточки */

  .useful-grid {
    gap: 18px;
  }

  .useful-card {
    gap: 18px;
    padding: 22px;
  }

  .useful-card .useful-card__title {
    font-size: 19px;
  }

  .useful-card--small {
    --card-min-height: 260px;
    --card-image-height: 115px;
  }

  .useful-card--medium {
    --card-min-height: 330px;
    --card-image-height: 165px;
  }

  .useful-card--large {
    --card-min-height: 410px;
    --card-image-height: 225px;
  }


  /* Статья */

  .useful-article-main {
    padding: 32px 16px 56px;
  }

  .useful-article-main .useful-article-back {
    margin-bottom: 22px;
    font-size: 16px;
  }

  .useful-article-header {
    margin-bottom: 26px;
  }

  .useful-article-main .useful-article-title {
    font-size: 26px;
    line-height: 1.35;
    letter-spacing: -0.2px;
  }

  .useful-article-lead,
  .useful-article-text {
    font-size: 15px;
    line-height: 1.8;
  }

  .useful-article-blocks {
    gap: 26px;
  }

  .useful-article-text h2,
  .useful-page-content h2 {
    font-size: 23px;
  }

  .useful-article-text h3,
  .useful-page-content h3 {
    font-size: 20px;
  }


  /* Видео сверху, текст снизу */

  .useful-video-text {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .useful-video-text__media {
    max-width: 320px;
    margin: 0 auto;
  }

  .useful-video-text__media .useful-article-caption {
    margin-top: 10px;
  }
}


/* =========================================================
   УЗКИЕ ЭКРАНЫ
   ========================================================= */

@media (max-width: 600px) {
  .useful-grid {
    --useful-columns: 1;

    grid-template-columns: minmax(0, 1fr);
  }

  .useful-article-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .useful-article-pair__item .useful-article-caption {
    margin-top: 10px;
    font-size: 13px;
  }
}


/* =========================================================
   УМЕНЬШЕНИЕ ДВИЖЕНИЯ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .useful-card,
  .useful-card__arrow,
  .useful-article-back__arrow {
    transition: none;
  }

  .useful-card:hover,
  .useful-card:hover .useful-card__arrow,
  .useful-article-back:hover .useful-article-back__arrow {
    transform: none;
  }
}