/*
  Типографика для статей (карточки товаров, лонгриды, "истории мастеров").
  Отдельно от style.css — подключается только там, где есть длинный текст.

  Подключение в шаблоне (после fonts.css и style.css):
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/article.css' %}">
*/

:root {
  /* Вертикальный отступ товарного блока [products] — уменьшается на
     мобильном (см. медиа-запрос внизу файла) */
  --product-block-gap: 2.5em;

  /* Отступы подзаголовков h2/h3 — сверху больше, чем снизу (заголовок
     сильнее связан с текстом под собой); уменьшаются на мобильном */
  --h2-gap-top: 2.2em;
  --h2-gap-bottom: 0.75em;
  --h3-gap-top: 1.8em;
  --h3-gap-bottom: 0.6em;
}

/* ===== КОНТЕЙНЕР =====
   Узкая колонка для чтения (68ch) задаётся не здесь, а у детей
   .article-content — чтобы товарные блоки могли "пробить" колонку
   и растянуться на всю ширину страницы (full-bleed). */
.article {
  width: 100%;
}

/* ===== ССЫЛКА "НАЗАД" =====
   Селектор ".article .article-back-link a" специально сделан
   специфичнее ".article a" ниже по файлу — иначе обычное подчёркивание
   ссылки легло бы поверх нашей брендовой линии (border-bottom). */
.article-back-link {
  display: block;
  margin: 32px 0 28px;
  text-align: left;
}

.article .article-back-link a {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink, #1C1A17);
  border-bottom: 1px solid var(--brass, #A9803F);
  padding-bottom: 3px;
}

.article .article-back-link a:hover {
  opacity: 0.7;
}

/* ===== ЗАГОЛОВОК СТАТЬИ ===== */
.article h1 {
  font-family: var(--font-edito);
  font-weight: 400;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.15;
  text-align: center;
  margin: 0 0 1.25rem;
}

/* ===== УЗКАЯ КОЛОНКА ДЛЯ ТЕКСТА СТАТЬИ =====
   Каждый прямой child центрируется и ограничивается 68ch индивидуально. */
.article-content {
  width: 100%;
}

.article-content > * {
  max-width: min(68ch, 100%);
  margin-left: auto;
  margin-right: auto;
  /* страховка для нетипизированных элементов — у обычных тегов (p, h2,
     ul и т.д.) центрирование уже задано явно в их собственных правилах */
}

/* ===== ТОВАРНЫЙ БЛОК ВНУТРИ СТАТЬИ: FULL-BLEED =====
   100vw + отрицательный margin-left растягивает блок на весь экран
   независимо от узкой колонки-родителя (тот же приём, что у .hero-banner
   в home.css).

   ВАЖНО: .article-block__grid в category_artical.css использует такой
   же приём и такую же специфичность — оба класса обязательно исключены
   в медиа-запросе внизу файла, иначе баг центрирования (см. историю). */
.article-content > .product-block__grid {
  max-width: none;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: var(--product-block-gap);
  margin-bottom: var(--product-block-gap);
}

/* ===== РАСКЛАДКА КАРТОЧЕК ТОВАРОВ =====
   Переопределяет .category-page__grid (grid) на flex с расчётом ширины
   через calc(). box-sizing: border-box обязателен — без него паддинг
   .product-card ломает расчёт ширины. Специфичность одинаковая с
   category_detail.css — article.css должен подключаться ПОСЛЕ него. */
.product-block__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.product-block__grid .product-card {
  box-sizing: border-box;
  flex: 0 0 calc(50% - 7.5px);
  max-width: calc(50% - 7.5px);
}

@media (min-width: 900px) {
  .product-block__grid {
    gap: 20px;
  }

  .product-block__grid .product-card {
    flex: 0 0 calc((100% - 2 * 20px) / 3);
    max-width: calc((100% - 2 * 20px) / 3);
  }
}

@media (max-width: 480px) {
  .product-block__grid .product-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ===== МЕТА (рубрика/дата) НАД ЗАГОЛОВКОМ ===== */
.article-meta {
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b665c);
  margin: 0 0 0.75rem;
}

/* ===== ВВОДНЫЙ АБЗАЦ (lede) ===== */
.article .lede {
  font-family: var(--font-edito);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink-soft, #4A463F);
  margin: 0 auto 2rem;
}

/* ===== ОСНОВНОЙ ТЕКСТ ===== */
.article p {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink, #1C1A17);
  margin: 0 auto 1.25em;
  overflow-wrap: break-word;
}

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

/* Manrope не имеет italic-начертания — переключаем на EB Garamond italic,
   чтобы избежать "псевдо-курсива" (наклона) браузера */
.article em {
  font-family: var(--font-edito);
  font-style: italic;
}

.article strong {
  font-weight: 700;
}

/* ===== ПОДЗАГОЛОВКИ ВНУТРИ СТАТЬИ ===== */
.article h2 {
  font-family: var(--font-edito);
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1.25;
  margin: var(--h2-gap-top) auto var(--h2-gap-bottom);
  text-align: center;
}

.article h3 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
  color: var(--ink, #1C1A17);
  opacity: 0.68;
  margin: var(--h3-gap-top) auto var(--h3-gap-bottom);
}

/* Первый заголовок сразу после вводного абзаца — без двойного отступа */
.article .lede + h2,
.article .lede + h3 {
  margin-top: 0;
}

/* ===== СПИСКИ ===== */
.article ul,
.article ol {
  margin: 0 auto 1.25em;
  padding-left: 1.4em;
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink, #1C1A17);
}

.article li {
  margin-bottom: 0.5em;
}

.article li:last-child {
  margin-bottom: 0;
}

.article li > ul,
.article li > ol {
  margin-top: 0.5em;
  margin-bottom: 0;
}

/* ===== ЦИТАТА ===== */
.article blockquote {
  font-family: var(--font-edito);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink, #1C1A17);
  border-left: 2px solid var(--brass, #A9803F);
  padding-left: 1.5em;
  margin: 2em auto;
}

.article blockquote cite {
  display: block;
  font-family: var(--font-secondary);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b665c);
  margin-top: 0.75em;
}

/* ===== ССЫЛКИ ВНУТРИ ТЕКСТА ===== */
.article a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--brass, #A9803F);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.article a:hover {
  text-decoration-color: currentColor;
}

/* ===== ИЗОБРАЖЕНИЯ И ПОДПИСИ ===== */
.article figure {
  margin: 2.5em auto;
}

.article img {
  display: block;
  width: 100%;
  height: auto;
}

.article figcaption {
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  text-align: center;
  color: var(--ink-soft, #6b665c);
  margin-top: 0.75em;
}

/* ===== РАЗДЕЛИТЕЛЬ ===== */
.article hr {
  width: 48px;
  height: 1px;
  border: none;
  background: var(--line, #D8D1C0);
  margin: 3em auto;
}

/* ===== АДАПТИВ (≤640px) ===== */
@media (max-width: 640px) {

  :root {
    --product-block-gap: 1.5em;
    --h2-gap-top: 1.4em;
    --h2-gap-bottom: 0.6em;
    --h3-gap-top: 1.2em;
    --h3-gap-bottom: 0.5em;
  }

  .article-content > .product-block__grid {
    padding: 0 16px;
  }

  /* :not(.article-block__grid) обязателен — иначе это правило перебивает
     max-width у блока фото статей, но не трогает его width:100vw/
     margin-left от full-bleed-приёма, и блок съезжает влево */
  .article h1,
  .article-content > *:not(.product-block__grid):not(.article-block__grid) {
    max-width: calc(100% - 32px);
  }

  .article p,
  .article ul,
  .article ol {
    font-size: 1rem;
  }

  .article blockquote {
    font-size: 1.125rem;
    padding-left: 1.1em;
  }
}