/*
 * sup-shop.ru — стили статей блога
 * Файл: /local/templates/supshop/css/blog-articles.css
 *
 * Подключить в /local/templates/supshop/header.php перед </head>:
 * <link rel="stylesheet" href="/local/templates/supshop/css/blog-articles.css">
 *
 * Обновлено: апрель 2026
 */


/* ============================================================
   ЗАГОЛОВКИ СТАТЕЙ БЛОГА
   Селекторы покрывают стандартные обёртки Битрикс для блога.
   Если ни один не сработал — добавь свой класс обёртки по образцу.
   ============================================================ */

.news-detail-text h2,
.news-detail h2,
.blog-post h2,
.blog-article h2,
.article-detail h2,
.bx-blog-post-body h2,
.landing-block h2 {
  border-bottom: 2px solid #ffdc00;
  padding-bottom: 6px;
  margin-top: 40px;
}

/* ============================================================
   БАЗОВЫЕ ЭЛЕМЕНТЫ — оригинальные стили gl- (работают хорошо)
   ============================================================ */

.gl-note {
  font-size: 0.88em;
  color: #6b7280;
  font-style: italic;
}

.gl-quote {
  border-left: 4px solid #ffdc00;
  padding: 14px 18px;
  margin: 24px 0;
  font-style: italic;
  background: #fffce6;
  color: #333;
}

/* Синоним */
.art-quote {
  border-left: 4px solid #ffdc00;
  padding: 14px 18px;
  margin: 24px 0;
  font-style: italic;
  background: #fffce6;
  color: #333;
}

.art-note {
  font-size: 0.88em;
  color: #6b7280;
  font-style: italic;
}

.art-highlight {
  background: #fffce6;
  border-radius: 3px;
  padding: 1px 4px;
}


/* ============================================================
   КНОПКИ
   ============================================================ */

.gl-btn {
  background: #ffdc00;
  color: #000;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  margin: 8px 6px 8px 0;
  border: 2px solid transparent;
  font-size: 0.95em;
  border-radius: 5px;
}
.gl-btn:hover { border-color: #000; color: #000; text-decoration: none; }

.gl-btn-green {
  background: #25D366;
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  margin: 8px 6px 8px 0;
  border: 2px solid transparent;
  font-size: 0.95em;
  border-radius: 5px;
}
.gl-btn-green:hover { color: #fff; text-decoration: none; }

/* Синонимы art- */
.art-btn {
  background: #ffdc00;
  color: #000;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  margin: 8px 6px 8px 0;
  border: 2px solid transparent;
  font-size: 0.95em;
  border-radius: 5px;
}
.art-btn:hover { border-color: #000; color: #000; text-decoration: none; }

.art-btn-green {
  background: #25D366;
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  margin: 8px 6px 8px 0;
  border: 2px solid transparent;
  font-size: 0.95em;
  border-radius: 5px;
}
.art-btn-green:hover { color: #fff; text-decoration: none; }


/* ============================================================
   ОГЛАВЛЕНИЕ
   ============================================================ */

.gl-toc,
.art-toc {
  background: #f9f9f9;
  border: 1px solid #e5e7eb;
  padding: 18px 22px;
  margin: 24px 0 36px;
}
.gl-toc ul,
.art-toc ul { margin: 8px 0 0; padding-left: 20px; }
.gl-toc li,
.art-toc li { margin-bottom: 5px; }


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

.gl-figure,
.art-figure {
  margin: 24px 0;
  text-align: center;
}
.gl-figure img,
.art-figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.gl-figure figcaption,
.art-figure figcaption {
  font-size: 0.85em;
  color: #888;
  margin-top: 8px;
  font-style: italic;
}

/* Устаревший плейсхолдер — совместимость */
.gl-img-placeholder {
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 32px 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.9em;
  margin: 20px 0;
}


/* ============================================================
   БЛОКИ ЛИНЕЕК / БРЕНДОВ
   ============================================================ */

.gl-lineup-block,
.art-block {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 28px 28px 24px;
  margin: 28px 0;
}
.gl-lineup-block > h3,
.art-block > h3 { margin-top: 20px; }

/* Метки */
.gl-lineup-label,
.art-label {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
  line-height: 1.4;
}
.label-one,    .art-label-gray   { background: #f3f4f6; color: #374151; }
.label-origin, .art-label-green  { background: #d1fae5; color: #065f46; }
.label-pro,    .art-label-blue   { background: #dbeafe; color: #1e40af; }
.label-elite,  .art-label-purple { background: #ede9fe; color: #5b21b6; }
.label-summit, .art-label-red    { background: #fee2e2; color: #991b1b; }
.art-label-yellow { background: #fef9c3; color: #854d0e; }


/* ============================================================
   ТЕГИ МОДЕЛЕЙ
   ============================================================ */

.gl-models-list,
.art-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
}
.gl-model-tag,
.art-tag {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  padding: 5px 12px;
  font-size: 0.85em;
  color: #374151;
}


/* ============================================================
   СЕТКА ТЕХНОЛОГИЙ
   ============================================================ */

.gl-tech-grid,
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.gl-tech-item,
.art-card {
  border: 1px solid #e5e7eb;
  padding: 16px 18px;
}
.gl-tech-item strong,
.art-card strong { display: block; margin-bottom: 6px; font-size: 0.95em; }
.gl-tech-item p,
.art-card p { margin: 0; font-size: 0.88em; color: #555; line-height: 1.5; }


/* ============================================================
   ТАБЛИЦЫ
   ============================================================ */

.gl-compare-table,
.art-table-compare {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.92em;
}
.gl-compare-table th,
.art-table-compare th { background: #1a1a1a; color: #fff; padding: 11px 12px; text-align: left; }
.gl-compare-table td,
.art-table-compare td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.gl-compare-table tr:nth-child(even) td,
.art-table-compare tr:nth-child(even) td { background: #f9fafb; }

.gl-compare-table .line-one    td:first-child { font-weight: 600; color: #4b5563; }
.gl-compare-table .line-origin td:first-child { font-weight: 600; color: #059669; }
.gl-compare-table .line-pro    td:first-child { font-weight: 600; color: #2563eb; }
.gl-compare-table .line-elite  td:first-child { font-weight: 600; color: #7c3aed; }
.gl-compare-table .line-summit td:first-child { font-weight: 600; color: #dc2626; }

.gl-who-table,
.art-table-who {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.92em;
}
.gl-who-table th,
.art-table-who th { background: #f3f4f6; padding: 9px 12px; text-align: left; font-weight: 600; }
.gl-who-table td,
.art-table-who td { padding: 9px 12px; border-bottom: 1px solid #e5e7eb; }


/* ============================================================
   ТАБЛИЦА РАЗМЕРОВ (статья "Как выбрать")
   ============================================================ */

.art-size-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.art-size-table th {
  background: #ffdc00;
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
}
.art-size-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.art-size-table tr:nth-child(even) td { background: #fafafa; }


/* ============================================================
   CTA БЛОК
   ============================================================ */

.gl-cta,
.art-cta {
  background: #fffce6;
  border: 2px solid #ffdc00;
  border-radius: 8px;
  padding: 24px 28px;
  margin: 36px 0;
}
.gl-cta h3,
.art-cta h3 { margin-top: 0; margin-bottom: 10px; }


/* ============================================================
   FAQ
   ============================================================ */

.gl-faq-item,
.art-faq-item { margin-bottom: 22px; }
.gl-faq-q,
.art-faq-q { font-weight: 600; margin-bottom: 6px; }
.gl-faq-a,
.art-faq-a { color: #444; }


/* ============================================================
   КАРТОЧКИ БРЕНДОВ
   ============================================================ */

.art-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.art-brand-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px 18px;
}
.art-brand-card h4   { margin: 0 0 6px 0; }
.art-brand-card .art-price { font-size: 0.85em; color: #888; margin-bottom: 6px; }
.art-brand-card p    { margin: 0; color: #444; }

.art-segment {
  display: inline-block;
  font-size: 0.8em;
  padding: 3px 9px;
  border-radius: 10px;
  font-weight: bold;
  margin-bottom: 8px;
}
.art-segment-budget  { background: #e8f5e9; color: #2e7d32; }
.art-segment-mid     { background: #e3f2fd; color: #1565c0; }
.art-segment-premium { background: #fce4ec; color: #880e4f; }
.art-segment-traffic { background: #f3e5f5; color: #6a1b9a; }