/* Блог — список статей и страница статьи
   -------------------------------------- */

/* ---- Общее ---- */
/* Шапки страниц блога используют общий .section-header (public-base.css) —
   те же размеры и отступы заголовков, что и на остальных страницах. */
.blog-section, .blog-article { background: var(--p-bg-alt); padding: 0 0 5rem; }

/* ---- Список статей ---- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
/* Карточка: тонкая фирменная градиентная полоска сверху (::before),
   обрезается по скруглению за счёт overflow:hidden — углы остаются круглыми. */
.blog-card { position: relative; background: var(--p-bg); border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.blog-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, var(--p-brand) 0%, var(--p-brand-2) 100%); border-radius: 12px 12px 0 0; z-index: 1; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.14); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; padding: 1.6rem 1.6rem 1.2rem; text-decoration: none; color: inherit; }
.blog-card-body { flex: 1; }
.blog-card-cat { display: inline-block; margin-bottom: 0.9rem; padding: 0.25rem 0.7rem; font-size: 0.8rem; font-weight: 600; color: var(--p-brand-dark); background: rgba(74,159,202,0.12); border-radius: 999px; }
.blog-card-title { margin: 0 0 0.7rem; font-size: 1.22rem; line-height: 1.35; color: var(--p-text-900); }
.blog-card-excerpt { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--p-text-600); }
.blog-card-meta { display: flex; gap: 1rem; align-items: center; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; font-size: 0.88rem; color: #9ca3af; }
.blog-card-read::before { content: "· "; }

/* ---- Страница статьи ---- */
/* Контейнер статьи — стандартной ширины сайта (.container = 1200px). */
.blog-article-meta .blog-card-cat { margin-bottom: 0; }
.blog-article-meta { display: flex; gap: 1rem; justify-content: center; align-items: center; font-size: 0.92rem; color: #9ca3af; }

.blog-article-body { position: relative; overflow: hidden; background: var(--p-bg); border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); padding: 2.4rem 2.6rem; font-size: 1.08rem; line-height: 1.75; color: var(--p-text-700); }
.blog-article-body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, var(--p-brand) 0%, var(--p-brand-2) 100%); border-radius: 12px 12px 0 0; z-index: 1; }
.blog-article-body .article-lead { font-size: 1.16rem; color: var(--p-text-900); }
.blog-article-body h2 { margin: 2.2rem 0 1rem; font-size: 1.5rem; line-height: 1.3; color: var(--p-text-900); }
.blog-article-body h2:first-child { margin-top: 0; }
.blog-article-body p { margin: 0 0 1.1rem; }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.blog-article-body li { margin-bottom: 0.5rem; }
.blog-article-body a { color: var(--p-brand-dark); font-weight: 600; text-decoration: none; }
.blog-article-body a:hover { text-decoration: underline; }
.blog-article-body strong { color: var(--p-text-900); }

/* Таблицы статьи — стиль сравнительной таблицы гайда:
   градиентная шапка, цветной первый столбец, скруглённая карточка с тенью */
.blog-article-body .table-wrap { margin: 1.6rem 0; overflow-x: auto; border-radius: 12px; box-shadow: 0 8px 18px rgba(0,0,0,0.12); }
.blog-article-body .article-table { width: 100%; background: #fff; border-collapse: collapse; font-size: 0.98rem; }
.blog-article-body .article-table thead { background: linear-gradient(135deg, var(--p-brand) 0%, var(--p-brand-2) 100%); }
.blog-article-body .article-table thead th { padding: 0.9rem 1rem; text-align: left; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; color: #333; }
.blog-article-body .article-table td { padding: 0.85rem 1rem; color: var(--p-text-600); border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.blog-article-body .article-table tbody tr:last-child td { border-bottom: none; }
.blog-article-body .article-table tbody tr:hover { background: #f8f9ff; }
.blog-article-body .article-table td:first-child { color: var(--p-brand-dark); font-weight: 600; }

/* Callout-блок «💡 Совет / Примечание» — как .selection-tip в гайде */
.blog-article-body .article-tip { margin: 1.8rem 0; padding: 1.3rem 1.6rem; background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%); border-left: 4px solid #ffc107; border-radius: 12px; }
.blog-article-body .article-tip p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--p-text-700); }
.blog-article-body .article-tip a { color: var(--p-brand-dark); font-weight: 600; }

/* FAQ-аккордеон (механика — faq-accordion.js, класс .active) */
.blog-article-body .faq-accordion { margin-top: 0.5rem; }
.blog-article-body .faq-item { background: var(--p-bg-alt); border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 0.8rem; overflow: hidden; transition: box-shadow 0.2s ease; }
.blog-article-body .faq-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.blog-article-body .faq-question { width: 100%; background: transparent; border: none; padding: 1rem 1.3rem; text-align: left; font-family: inherit; font-size: 1.05rem; font-weight: 600; color: var(--p-text-900); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.blog-article-body .faq-question:hover { background: rgba(74,159,202,0.06); }
.blog-article-body .faq-icon { font-size: 0.75rem; color: var(--p-brand-dark); transition: transform 0.3s ease; flex-shrink: 0; }
.blog-article-body .faq-item.active .faq-icon { transform: rotate(180deg); }
.blog-article-body .faq-answer { max-height: 0; overflow: hidden; padding: 0 1.3rem; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s cubic-bezier(0.4,0,0.2,1); }
.blog-article-body .faq-item.active .faq-answer { max-height: 600px; padding: 0 1.3rem 1.2rem; }
.blog-article-body .faq-answer p { margin: 0; color: var(--p-text-600); line-height: 1.7; }
.blog-article-body .faq-answer a { color: var(--p-brand-dark); font-weight: 600; }

/* CTA под статьёй — во всю ширину, как на /led-screens-guide и /prices
   (.cta-section led-effect led-effect--subtle из public-services.css).
   Вынесен за пределы .container в разметке, поэтому тянется edge-to-edge. */
.blog-article .cta-section { margin-top: 3rem; }

/* Возврат к списку */
.blog-article-back { margin: 1.5rem 0 0; text-align: center; }
.blog-article-back a { color: var(--p-brand-dark); font-weight: 600; text-decoration: none; }
.blog-article-back a:hover { text-decoration: underline; }