/* Дополнительные стили раздела «Полезные статьи». Не изменяет catalog.css. */

.article-category-badge{display:inline-block;background:rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:8px 14px;font-weight:850;font-size:14px;margin-top:8px}

.article-container{max-width:840px;margin:0 auto}

.img-placeholder{background:linear-gradient(135deg,#eaf6ff,#dbeefd);border:2px dashed #b6d9f7;border-radius:22px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:800;text-align:center}
.img-placeholder span{padding:10px}
.cover-placeholder{aspect-ratio:16/9;margin-bottom:30px}
.inline-placeholder{aspect-ratio:16/9;margin:26px 0}
.card-img-placeholder{width:100%;aspect-ratio:4/3}

.article-cover{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;border-radius:22px;margin:0 0 30px;background:#eef5fc;box-shadow:var(--shadow)}
.article-inline{display:block;width:100%;height:auto;max-height:480px;object-fit:contain;border-radius:18px;margin:26px auto;background:#eef5fc}

.article-body{font-size:18px;line-height:1.7;color:#233248}
.article-body h2{font-size:clamp(24px,3vw,32px);color:var(--dark);margin:38px 0 16px;letter-spacing:-.02em}
.article-body p{margin:0 0 18px}
.article-body ul{margin:0 0 18px;padding-left:22px}
.article-body li{margin-bottom:8px}
.article-body strong{color:var(--dark)}
.article-body a{color:var(--blue2);font-weight:700;text-decoration:underline}
.article-body a:hover{text-decoration:none}

.article-callout{background:#eef7ff;border:1px solid #cfe4ff;border-radius:20px;padding:22px 24px;margin:24px 0}
.article-callout-title{font-weight:850;color:var(--blue);font-size:18px;margin:0 0 8px}
.article-callout p{margin:0}

.article-table-wrap{overflow-x:auto;margin:24px 0}
.article-table{width:100%;border-collapse:collapse;font-size:16px}
.article-table th,.article-table td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(6,59,131,.12)}
.article-table th{color:var(--dark);font-weight:850;background:#eef7ff;white-space:nowrap}
.article-table td{color:#233248}
.article-table tr:last-child td{border-bottom:none}

.article-faq{margin:8px 0 24px;display:flex;flex-direction:column;gap:14px}
.article-faq-item{background:#fff;border:1px solid rgba(6,59,131,.1);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow)}
.article-faq-item h3{margin:0 0 6px;font-size:17px;color:var(--dark)}
.article-faq-item p{margin:0}

.related-articles{margin-top:48px}
.related-articles h2{font-size:clamp(24px,3vw,32px);color:var(--dark);margin:0 0 18px;letter-spacing:-.02em}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.related-card{display:block;background:#fff;border-radius:20px;padding:20px;box-shadow:var(--shadow);border:1px solid rgba(6,59,131,.07);text-decoration:none}
.related-tag{display:inline-block;color:var(--blue2);font-weight:850;font-size:13px;margin-bottom:6px}
.related-card h3{margin:0;font-size:19px;color:var(--blue)}

.back-to-all{margin-top:40px}

.card img.article-card-image--contain{object-fit:contain;object-position:center;background:var(--blue,#063b83)}

.articles-grid .article-card{text-decoration:none;cursor:pointer;transition:transform .2s;order:2}
.articles-grid .article-card[data-has-image="1"]{order:1}
.articles-grid .article-card:hover{transform:translateY(-4px)}
.articles-grid .article-card,.articles-grid .article-card *{text-decoration:none}
.articles-grid .article-card .btn{margin-top:auto}

@media(max-width:620px){
  .related-grid{grid-template-columns:1fr}
  .article-body{font-size:17px}
  .article-cover{max-height:380px}
  .article-inline{max-height:340px}
  .article-table{font-size:14px}
  .article-table th,.article-table td{padding:9px 10px}
}

/* Навигация внутри статьи: компактный список разделов под шапкой статьи.
   Используется только в разделе «Глубины скважин»; на остальных страницах
   класс не встречается, поэтому их вид не меняется.
   scroll-margin-top нужен из-за sticky-шапки (.nav): без него якорь уводит
   заголовок под неё. */
.article-toc{background:#f7fbff;border:1px solid rgba(6,59,131,.12);border-radius:18px;padding:16px 20px;margin:0 0 26px}
.article-toc-title{margin:0 0 10px;font-size:14px;font-weight:850;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.article-toc ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 20px}
.article-toc li{margin:0;max-width:100%}
.article-toc a{display:inline-block;color:var(--blue2);font-weight:800;line-height:1.45;text-decoration:none;border-bottom:1px solid rgba(11,116,209,.35);overflow-wrap:anywhere}
.article-toc a:hover,.article-toc a:focus-visible{border-bottom-color:currentColor}
.article-body h2[id]{scroll-margin-top:96px}

@media(max-width:620px){
  .article-toc{padding:14px 16px;border-radius:16px}
  .article-toc ul{flex-direction:column;gap:12px}
  .article-toc a{padding:2px 0}
  .article-body h2[id]{scroll-margin-top:84px}
}

/* Таблицы раздела «Глубины скважин»: на узких экранах разрешаем переносы в
   заголовках столбцов, чтобы таблица помещалась без горизонтальной прокрутки.
   Класс используется только в этом разделе, остальные статьи не затронуты. */
@media(max-width:620px){
  .article-table--compact th{white-space:normal}
  .article-table--compact th,.article-table--compact td{padding:8px 8px;font-size:13.5px;vertical-align:top}
}