/*
 * Блоки статьи, которых не было в готовой вёрстке.
 *
 * state.css оформляет только то, что есть в макете страницы статьи:
 * заголовки, абзац и картинку. Редактор умеет больше — списки, чек-лист,
 * цитату, таблицу, код, врезку, разделитель, встраивание видео. Здесь они
 * дописаны под тот же дизайн: шрифт Onest, цвет текста как у абзаца
 * rgba(127,129,135,1), белый для акцентных строк, подложки rgba(28,30,32,1)
 * на карточке rgba(21,22,24,1), скругления 8-14px, оранжевый
 * rgba(255,141,40,1) как у активных элементов остального сайта.
 *
 * Вертикальные отступы между блоками задаёт сам контейнер (.state, gap 30px),
 * поэтому собственных margin у блоков нет.
 */

/* Общая типографика блоков — та же, что у абзаца в state.css. */
.state .article-list,
.state .article-checklist,
.state .article-quote,
.state .article-table,
.state .article-warning,
.state .article-embed,
.state .article-image-caption {
  font-family: Onest;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
  color: rgba(127, 129, 135, 1);
}

/* ── Заголовки, которых нет в вёрстке ──────────────────────────────────── */

/*
 * state.css оформляет только h1-h3. Четвёртый уровень редактор ставить умеет,
 * и без правила он падал на глобальный `h4` из styles.css — тёмно-серым по
 * тёмному фону, то есть в никуда.
 *
 * По размеру места между h3 (16px) и абзацем (14px) уже нет, поэтому уровень
 * отделён начертанием: капитель с разрядкой. h5/h6 в редакторе не предлагаются,
 * но могут прийти со вставкой из буфера — пусть тоже будут видимы.
 */
.state h4,
.state h5,
.state h6 {
  font-family: Onest;
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(178, 180, 186, 1);
}

.state h5,
.state h6 {
  font-size: 12px;
  color: rgba(127, 129, 135, 1);
}

/* ── Ссылки и инлайн-разметка внутри текста ─────────────────────────────── */

/* Абзац серый, поэтому жирный без своего цвета почти не выделяется. */
.state b,
.state strong {
  font-weight: 700;
  color: white;
}

.state a {
  color: rgba(255, 141, 40, 1);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 141, 40, 0.35);
  transition: 0.2s;
}

.state a:hover {
  border-bottom-color: rgba(255, 141, 40, 1);
}

.state mark {
  background-color: rgba(255, 141, 40, 0.15);
  color: white;
  padding: 1px 4px;
  border-radius: 4px;
}

.state code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  background-color: rgba(35, 36, 39, 1);
  color: white;
  padding: 2px 6px;
  border-radius: 6px;
}

/* ── Списки ────────────────────────────────────────────────────────────── */

.state .article-list {
  width: 100%;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.state .article-list li::marker {
  color: rgba(255, 141, 40, 1);
  font-weight: 700;
}

/* Вложенный уровень — свой отступ и меньший интервал. */
.state .article-list .article-list {
  margin-top: 10px;
  gap: 8px;
}

/* ── Чек-лист ──────────────────────────────────────────────────────────── */

.state .article-checklist {
  width: 100%;
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.state .article-checklist-item {
  position: relative;
  padding-left: 30px;
}

/* Квадрат-галочка рисуется псевдоэлементом: настоящий input здесь не нужен,
   значение приходит из статьи и менять его читатель не может. */
.state .article-checklist-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(45, 46, 50, 1);
  background-color: rgba(28, 30, 32, 1);
}

.state .article-checklist-item--checked::before {
  border-color: rgba(255, 141, 40, 1);
  background-color: rgba(255, 141, 40, 1);
}

.state .article-checklist-item--checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 6px;
  height: 10px;
  border: solid rgba(50, 32, 17, 1);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.state .article-checklist-item--checked {
  color: white;
}

/* ── Цитата ────────────────────────────────────────────────────────────── */

.state .article-quote {
  width: 100%;
  padding: 18px 20px;
  border-radius: 14px;
  border-left: 3px solid rgba(255, 141, 40, 1);
  background-color: rgba(28, 30, 32, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.state .article-quote-text {
  font-size: 16px;
  line-height: 26px;
  color: white;
}

.state .article-quote-caption {
  font-size: 13px;
  line-height: 18px;
  color: rgba(108, 109, 112, 1);
}

.state .article-quote--center {
  text-align: center;
  border-left: 0;
  border-top: 3px solid rgba(255, 141, 40, 1);
}

/* ── Таблица ───────────────────────────────────────────────────────────── */

.state .article-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(29, 31, 34, 1);
}

.state .article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.state .article-table th,
.state .article-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(29, 31, 34, 1);
  border-right: 1px solid rgba(29, 31, 34, 1);
}

.state .article-table th:last-child,
.state .article-table td:last-child {
  border-right: 0;
}

.state .article-table tbody tr:last-child td {
  border-bottom: 0;
}

.state .article-table th {
  background-color: rgba(28, 30, 32, 1);
  color: white;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Код ───────────────────────────────────────────────────────────────── */

.state .article-code {
  width: 100%;
  overflow-x: auto;
  padding: 16px 18px;
  border-radius: 14px;
  background-color: rgba(28, 30, 32, 1);
  border: 1px solid rgba(29, 31, 34, 1);
}

.state .article-code code {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 13px;
  line-height: 22px;
  color: rgba(200, 202, 208, 1);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Врезка ────────────────────────────────────────────────────────────── */

.state .article-warning {
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  background-color: rgba(255, 141, 40, 0.1);
  border: 1px solid rgba(255, 141, 40, 0.35);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.state .article-warning-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  color: rgba(255, 141, 40, 1);
}

.state .article-warning-message {
  color: rgba(178, 180, 186, 1);
}

/* ── Разделитель ───────────────────────────────────────────────────────── */

.state .article-delimiter {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    rgba(29, 31, 34, 0) 0%,
    rgba(45, 46, 50, 1) 50%,
    rgba(29, 31, 34, 0) 100%
  );
}

/* ── Встраивание (видео и т.п.) ────────────────────────────────────────── */

.state .article-embed {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.state .article-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  display: block;
}

.state .article-embed-caption {
  font-size: 13px;
  line-height: 18px;
  color: rgba(108, 109, 112, 1);
  text-align: center;
}

/* ── Картинка: подпись и состояния из редактора ────────────────────────── */

.state .article-image-caption {
  width: 100%;
  font-size: 13px;
  line-height: 18px;
  color: rgba(108, 109, 112, 1);
  text-align: center;
}

/*
 * Ширину задаёт редактор (её тянут мышью), поэтому 500px из state.css здесь
 * снимаем — иначе картинку нельзя было бы сделать шире макетной.
 */
.state > img.article-image--sized {
  max-width: 100%;
}

.state > img.article-image--stretched {
  max-width: 100%;
  width: 100%;
}

.state > img.article-image--bordered {
  border: 1px solid rgba(45, 46, 50, 1);
}

.state > img.article-image--background {
  padding: 14px;
  background-color: rgba(28, 30, 32, 1);
}

/* ── Служебные подписи вне тела статьи ─────────────────────────────────── */

.content-blog-list-empty,
.article-draft-notice {
  font-family: Onest;
  font-weight: 600;
  font-size: 14px;
  color: rgba(127, 129, 135, 1);
  padding: 16px;
  background-color: rgba(21, 22, 24, 1);
  border-radius: 16px;
}

.article-draft-notice {
  color: rgba(255, 141, 40, 1);
  background-color: rgba(255, 141, 40, 0.1);
}

/*
 * Табы рубрик в Blade — это <a>, а в вёрстке были <div>. Мобильное правило в
 * blog.css выбирает `.content-blog-nav-list > div`, поэтому для ссылок его
 * приходится продублировать здесь (сам blog.css оставлен как в вёрстке).
 */
@media (max-width: 650px) {
  .content-blog-nav-list > a {
    width: 100%;
  }
}

@media (max-width: 750px) {
  .state .article-quote-text {
    font-size: 15px;
    line-height: 24px;
  }

  .state .article-table th,
  .state .article-table td {
    padding: 10px 12px;
  }

  /* На узком экране тянутая ширина не имеет смысла — картинка во всю колонку. */
  .state > img.article-image--sized {
    width: 100% !important;
  }
}

/* ── Обложки карточек ──────────────────────────────────────────────────── */

/*
 * В вёрстке все карточки были заглушены одной и той же картинкой 16:9, поэтому
 * кадрирование там не задано вовсе. На реальных обложках произвольных
 * пропорций (вертикальный арт, скриншот 4:3) карточки разъезжались по высоте.
 *
 * Приводим к пропорции макетных обложек — 389x220 в слайдере и 500x281 в
 * списке, то есть 16:9 — и кадрируем по центру вместо растягивания.
 */
.state-card > img,
.content-blog-list-item > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

/* Скругление у обложки слайдера — только сверху: снизу к ней примыкает текст. */
.state-card > img {
  border-radius: 16px 16px 0 0;
}

/* Карточки слайдера тянутся на общую высоту, текстовый блок занимает остаток,
   иначе строка даты «прилипала» бы к заголовку разной длины. */
.reviews-state .state-card {
  display: flex;
  flex-direction: column;
}

.reviews-state .state-card-content {
  flex: 1 1 auto;
}

.state .article-product {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin: 8px 0;
  padding: 16px;
  border: 1px solid rgba(255, 141, 40, 0.28);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255, 141, 40, 0.1) 0%, rgba(255, 141, 40, 0.02) 55%), rgba(21, 22, 24, 1);
}

.state .article-product a {
  border-bottom: 0;
}

.state .article-product-image {
  flex-shrink: 0;
  width: 140px;
  aspect-ratio: 227 / 325;
  overflow: hidden;
  border-radius: 12px;
}

.state .article-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.state .article-product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.state .article-product-label {
  font-family: Onest;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 141, 40, 1);
}

.state .article-product-name {
  font-family: Onest;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: white;
}

.state .article-product-name:hover {
  color: rgba(255, 141, 40, 1);
}

.state .article-product-summary {
  font-family: Onest;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: rgba(160, 162, 168, 1);
}

.state .article-product-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.state .article-product-price {
  font-family: Onest;
  font-weight: 800;
  font-size: 20px;
  color: rgba(255, 141, 40, 1);
}

.state .article-product-price span {
  font-weight: 600;
  font-size: 14px;
  color: rgba(160, 162, 168, 1);
}

.state .article-product-button {
  padding: 12px 24px;
  border-radius: 12px;
  background: rgba(255, 141, 40, 1);
  color: rgba(50, 32, 17, 1);
  font-family: Onest;
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  transition: background 0.2s;
}

.state .article-product-button:hover {
  background: rgba(255, 160, 75, 1);
  color: rgba(50, 32, 17, 1);
}

@media (max-width: 600px) {
  .state .article-product {
    gap: 14px;
    padding: 12px;
  }

  .state .article-product-image {
    width: 96px;
  }

  .state .article-product-name {
    font-size: 16px;
    line-height: 22px;
  }

  .state .article-product-summary {
    display: none;
  }

  .state .article-product-button {
    flex: 1;
    text-align: center;
  }
}