/* ============================================
   ARTICLE PAGE
   ============================================ */

.article-hero {
  background: var(--color-bg);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-2) var(--space-5);
}

/* Хлебные крошки */

.breadcrumbs {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.breadcrumbs a:hover {
  color: var(--color-orange);
}


/* ============================================================
   ARTICLE HERO — ОСНОВНАЯ СТРУКТУРА
   ============================================================ */

/*
   Верх:
   Главная / Статьи

   Затем:
   Предыдущая статья | Следующая статья

   Затем:
   Заголовок | Картинка
*/

.article-hero .container {
  display: block;
}


/* Категория */

.article-hero .meta {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-3);
}


/* Заголовок */

.article-hero h1 {
  color: var(--color-text);
  font-size: var(--fs-2xl);
  max-width: 24ch;
  margin-top: var(--space-2);
}


/* ============================================================
   ARTICLE TOP NAVIGATION
   ============================================================ */

.article-top-nav {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}


/* Карточки предыдущей / следующей статьи */

.article-top-nav-item {
  display: flex;
  flex-direction: column;
  gap: 6px;

  padding: 18px 20px;

  text-decoration: none;

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

  background: var(--color-bg-white);

  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.article-top-nav-item:hover {
  border-color: var(--color-orange);
  transform: translateY(-2px);

  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.06);
}


/* Выравнивание текста */

.article-top-nav-prev {
  text-align: left;
}

.article-top-nav-next {
  text-align: right;
}


/* Если существует только следующая статья */

.article-top-nav-single-next {
  grid-column: 2;
}


/* Если существует только предыдущая статья */

.article-top-nav-single-prev {
  grid-column: 1;
}


/* Подпись "Предыдущая / Следующая" */

.article-top-nav-label {
  font-size: calc(var(--fs-xs) * 0.8);
  line-height: 1.4;

  text-transform: uppercase;
  letter-spacing: 0.04em;

  color: var(--color-blue);
}


/* Название статьи */

.article-top-nav-item strong {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--color-text);
}


/* Категория, если используется <small> */

.article-top-nav-item small {
  font-family: 'PT Sans', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-muted);
}


/* ============================================================
   ARTICLE HERO MAIN
   Заголовок слева + картинка справа
   ============================================================ */

.article-hero-main {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
  align-items: center;
}


/* Левая часть */

.article-hero-content {
  min-width: 0;
}


/* Правая часть */

.article-hero-image {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
}


/* Изображение */

/* .article-hero-image img {
  display: block;

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

  object-fit: contain;
} */

.article-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;

  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 75%,
    rgba(0, 0, 0, 0.9) 88%,
    transparent 100%
  );

  mask-image: radial-gradient(
    ellipse at center,
    #000 75%,
    rgba(0, 0, 0, 0.9) 88%,
    transparent 100%
  );
}


/* ============================================================
   ARTICLE BODY
   ============================================================ */

.article-body {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
}

.article-body p {
  color: var(--color-text);
  margin-bottom: var(--space-3);
  font-size: var(--fs-base);
  font-family: var(--font-body);
}

.article-body p a,
.article-body li a {
  color: var(--color-blue);

  text-decoration: underline;
  text-decoration-color: rgba(56, 100, 173, 0.35);
  text-underline-offset: 2px;

  transition:
    color 0.2s,
    text-decoration-color 0.2s;
}

.article-body p a:hover,
.article-body li a:hover {
  color: var(--color-orange);
  text-decoration-color: rgba(233, 74, 44, 0.45);
}


/* Заголовки */

.article-body h2 {
  font-size: var(--fs-xl);
  margin: var(--space-5) 0 var(--space-2);
}

.article-body h3 {
  font-size: var(--fs-lg);
}


/* Списки */

.article-body ul,
.article-body ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.3rem;
  font-family: var(--font-body);
}

.article-body li {
  margin-bottom: 0.5rem;
}

.article-body ul {
  list-style: disc;
}

.article-body ol {
  list-style: decimal;
}


/* Цитаты */

.article-body blockquote {
  border-left: 3px solid var(--color-orange);

  padding-left: var(--space-3);
  margin: var(--space-4) 0;

  color: var(--color-text-muted);

  font-style: normal;
  font-size: var(--fs-lg);
  font-family: var(--font-display);
  font-weight: 600;
}


/* ============================================================
   TABLES
   ============================================================ */

.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-3) 0 var(--space-4);
    font-family: var(--font-body);
    font-size: 0.92rem;
}

.article-body th,
.article-body td {
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;

    /* Переносим по словам */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.article-body th {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-border-strong);
}

.article-body td:first-child,
.article-body th:first-child {
    font-weight: 700;
}

.article-body .table-scroll {
    overflow-x: auto;
    margin: var(--space-3) 0 var(--space-4);
    -webkit-overflow-scrolling: touch;
}

.article-body .table-scroll table {
    margin: 0;
    min-width: 560px;
}


/* ============================================================
   CALLOUT
   ============================================================ */

.article-body .callout {
  background: var(--color-bg);
  border-radius: var(--radius-md);

  padding: var(--space-3);
  margin: var(--space-4) 0;
}

.article-body .callout h3 {
  margin-top: 0;
}

.article-body .callout p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   ARTICLE CARD IMAGE
   ============================================================ */

.article-card .thumb-img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;
}

.article-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.06),
    0 0 20px rgba(233, 74, 44, 0.15);
}


/* ============================================================
   ARTICLE CTA
   ============================================================ */

.article-cta {
  margin-top: var(--space-6);

  background: var(--color-bg);
  border-radius: var(--radius-lg);

  padding: var(--space-2);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-3);
  flex-wrap: wrap;

  border: 1px solid var(--color-border);

  position: relative;

  transition:
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.article-cta:hover {
  transform: translateY(-3px);

  border-color: var(--color-orange);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.06),
    0 0 20px rgba(233, 74, 44, 0.15);
}

.article-cta h3 {
  font-size: var(--fs-lg);
  margin-bottom: 0.4rem;
}

.article-cta p {
  color: var(--color-text-muted);
  margin: 0;

  font-size: var(--fs-sm);
  font-family: var(--font-body);
}


/* ============================================================
   ARTICLE BOTTOM NAVIGATION
   ============================================================ */

.article-nav {
  max-width: 720px;

  margin: 0 auto;

  padding:
    var(--space-4)
    var(--space-3)
    var(--space-6);

  display: grid;
  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: var(--space-2);

  border-top: 1px solid var(--color-border);
}

.article-nav a {
  font-size: var(--fs-sm);
  font-weight: 700;

  color: var(--color-blue);

  font-family: var(--font-body);
}

.article-nav a:hover {
  color: var(--color-orange);
}

.article-nav a:first-child {
  justify-self: start;
}

.article-nav a.article-nav-all {
  justify-self: center;

  color: var(--color-blue);
  font-weight: 600;
}

.article-nav a.article-nav-all:hover {
  color: var(--color-orange);
}

.article-nav a:last-child {
  justify-self: end;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

  /* Верхняя навигация */

  .article-top-nav {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .article-top-nav-single-next,
  .article-top-nav-single-prev {
    grid-column: 1;
  }

  .article-top-nav-next {
    text-align: left;
  }

  .article-top-nav-item {
    padding: 15px 16px;
  }

  .article-top-nav-item strong {
    font-size: 18px;
  }


  /* Hero */

  .article-hero-main {
    grid-template-columns: 1fr;
  }

  .article-hero-content,
  .article-hero-image {
    grid-column: 1;
  }

  .article-hero-image {
    margin-top: var(--space-4);
  }


  /* Нижняя навигация */

  .article-nav {
    grid-template-columns: 1fr;

    justify-items: center;

    gap: var(--space-1);

    text-align: center;
  }

  .article-nav a:first-child,
  .article-nav a:last-child {
    justify-self: center;
  }

}