/* ============================================================
   Детальная страница статьи блога.
   Тело статьи приходит из редактора «как есть», поэтому типографика
   задаётся по тегам внутри .article__body.
   Подключается ПОСЛЕ styles.css и pages.css.
   ============================================================ */

/* .section даёт margin-top:100px — для первого блока страницы это много */
.article{margin-top:30px;}
.article__inner{max-width:840px;margin:0 auto;}

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

/* ---------- Шапка статьи ---------- */
.article__title{font-size:44px;line-height:52px;font-weight:500;color:var(--navy);margin-bottom:25px;}
.article__meta{display:flex;flex-wrap:wrap;gap:12px 25px;align-items:center;margin-bottom:25px;}
.article__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:35px;}
.article__cover{border-radius:20px;overflow:hidden;margin-bottom:45px;background:#fff;}
.article__cover img{display:block;width:100%;height:auto;}

/* ---------- Тело статьи ---------- */
.article__body{font-size:17px;line-height:28px;color:var(--navy);}
.article__body > *:first-child{margin-top:0;}
.article__body p{margin:0 0 20px;}
.article__body h2{font-size:32px;line-height:38px;font-weight:500;margin:45px 0 18px;}
.article__body h3{font-size:24px;line-height:30px;font-weight:500;margin:35px 0 14px;}
.article__body h4{font-size:20px;line-height:26px;font-weight:500;margin:30px 0 12px;}
.article__body a{color:var(--reddark);text-decoration:underline;text-underline-offset:3px;}
.article__body a:hover{text-decoration:none;}
.article__body strong,.article__body b{font-weight:600;}
.article__body ul,.article__body ol{margin:0 0 22px;padding-left:0;list-style:none;}
.article__body li{position:relative;padding-left:28px;margin-bottom:10px;}
.article__body ul > li::before{content:'';position:absolute;left:8px;top:11px;
  width:7px;height:7px;border-radius:50%;background:var(--grad);}
.article__body ol{counter-reset:art;}
.article__body ol > li{counter-increment:art;}
.article__body ol > li::before{content:counter(art) '.';position:absolute;left:0;top:0;
  font-weight:600;color:var(--red1);}
.article__body img{display:block;max-width:100%;height:auto;border-radius:15px;margin:30px 0;}
.article__body blockquote{margin:30px 0;padding:25px 30px;border-radius:15px;
  background:var(--gray);font-size:18px;line-height:29px;}
.article__body blockquote p:last-child{margin-bottom:0;}
.article__body hr{border:0;border-top:1px solid rgba(15,22,40,.12);margin:40px 0;}
/* широкие таблицы прокручиваются внутри себя, а не растягивают страницу */
.article__table,.article__body table{display:block;max-width:100%;overflow-x:auto;}
.article__body table{border-collapse:collapse;margin:30px 0;font-size:16px;}
.article__body th,.article__body td{padding:12px 16px;border:1px solid rgba(15,22,40,.15);text-align:left;}
.article__body th{background:var(--gray);font-weight:600;}

/* ---------- Автор ---------- */
.author-card{display:flex;gap:25px;align-items:center;margin-top:50px;padding:30px;
  border:1px solid rgba(15,22,40,.15);border-radius:20px;}
.author-card__img{flex:none;width:110px;height:110px;border-radius:50%;overflow:hidden;background:var(--gray);}
.author-card__img img{width:100%;height:100%;object-fit:cover;}
.author-card__text p{margin:0 0 8px;font-size:16px;line-height:25px;color:rgba(15,22,40,.75);}
.author-card__text p:last-child{margin-bottom:0;}
.author-card__name{font-size:19px;font-weight:600;color:var(--navy);}

/* ---------- Читайте также ---------- */
.article-more{padding-top:70px;}

/* ---------- Адаптив ---------- */
@media (max-width:1024px){
  .article__title{font-size:36px;line-height:43px;}
  .article__body h2{font-size:28px;line-height:34px;}
}
@media (max-width:768px){
  .article{margin-top:20px;}
  .article__title{font-size:27px;line-height:33px;margin-bottom:18px;}
  .article__cover{border-radius:15px;margin-bottom:30px;}
  .article__body{font-size:16px;line-height:26px;}
  .article__body h2{font-size:23px;line-height:29px;margin:35px 0 14px;}
  .article__body h3{font-size:20px;line-height:26px;margin:28px 0 12px;}
  .author-card{flex-direction:column;align-items:flex-start;gap:18px;padding:22px;}
  .author-card__img{width:88px;height:88px;}
  .article-more{padding-top:45px;}
}

/* ============ ТЕКСТОВАЯ СТРАНИЦА ============ */
/* Юридические документы и карта сайта. Списки, заголовки и абзацы уже описаны
   выше правилами .article__body — здесь только ширина колонки и таблицы,
   которых в статьях блога не бывает. */
.text-page__body{max-width:900px;}
.text-page__body table{width:100%;border-collapse:collapse;margin:0 0 22px;}
.text-page__body td,.text-page__body th{border:1px solid rgba(15,22,40,.12);padding:8px 10px;font-size:15px;line-height:22px;vertical-align:top;}
@media (max-width:768px){
  .text-page__body table{display:block;overflow-x:auto;}
}