/* Оформление блога и новостей mirpersonal.ru.
   Отдельный файл: site.css собирается скриптом gen_css.py из index.html,
   и правки в нём затёрлись бы при следующей пересборке.
   Подключается только на страницах блога и новостей. */

/* ---------------------------------------------- недостающие утилиты
   site.css собран из классов, встречающихся на главной странице, и этих
   пяти в нём нет. Определяем их здесь — иначе, например, кнопка
   «Позвонить» показывалась бы и на компьютере, и на телефоне. */
.mt-16{margin-top:4rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.text-\[15px\]{font-size:15px}
.h-\[76px\]{height:76px}
@media (min-width:768px){.md\:hidden{display:none}}

/* ------------------------------------------------------------- каркас */
.skip-link{position:absolute;left:-9999px;top:0;background:#111827;color:#fff;
  padding:.6rem 1rem;border-radius:0 0 .5rem 0;z-index:100}
.skip-link:focus{left:0}

.site-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid #E5E7EB}

.article-wrap{max-width:46rem;margin:0 auto;padding:1.5rem 1.25rem 0}
.list-wrap{max-width:60rem;margin:0 auto;padding:1.5rem 1.25rem 0}
@media (min-width:640px){
  .article-wrap,.list-wrap{padding-left:2rem;padding-right:2rem}
}

/* --------------------------------------------------------- хлебные крошки */
.crumbs{font-size:.8125rem;color:#9CA3AF;margin:.5rem 0 1.5rem}
.crumbs a{color:#4B5563}
.crumbs a:hover{color:#DC2626}
.crumbs span{margin:0 .35rem}

/* ------------------------------------------------------ заголовок статьи */
.article-wrap h1,.list-wrap h1{
  font-family:var(--font-display);font-weight:800;color:#111827;
  letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(1.65rem,4.2vw,2.5rem)}

.art-meta{margin-top:.9rem;font-size:.8125rem;color:#9CA3AF;
  padding-bottom:1.5rem;border-bottom:1px solid #E5E7EB}

.list-lead{margin-top:.9rem;color:#4B5563;font-size:1.0625rem;line-height:1.65;max-width:42rem}

/* --------------------------------------------------------- текст статьи
   Крупнее, чем legal-body: тот сделан под юридические документы,
   а статью читают подряд, и мелкий шрифт здесь утомляет. */
.article-body{margin-top:2rem;color:#374151;font-size:1.0625rem;line-height:1.75}
.article-body > *:first-child{margin-top:0}

.article-body h2{font-family:var(--font-display);font-weight:700;color:#111827;
  font-size:1.5rem;line-height:1.25;letter-spacing:-.01em;
  margin:2.5rem 0 .9rem;scroll-margin-top:6rem}
.article-body h3{font-family:var(--font-display);font-weight:700;color:#111827;
  font-size:1.175rem;line-height:1.35;margin:1.9rem 0 .6rem}

.article-body p{margin:0 0 1.15rem}
.article-body strong{color:#111827;font-weight:600}
.article-body a{color:#DC2626;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(220,38,38,.35)}
.article-body a:hover{text-decoration-color:#DC2626}

.article-body ul,.article-body ol{margin:0 0 1.15rem 1.25rem}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin-bottom:.5rem;padding-left:.2rem}
.article-body li::marker{color:#EF4444}

.article-body blockquote{margin:1.6rem 0;padding:.25rem 0 .25rem 1.15rem;
  border-left:3px solid #EF4444;color:#4B5563;font-style:italic}

.article-body hr{margin:2.2rem 0;border-top:1px solid #E5E7EB}

/* врезка для важного: закон, предостережение, вывод */
.article-body .callout{margin:1.6rem 0;padding:1rem 1.15rem;background:#FEF2F2;
  border:1px solid #FECACA;border-radius:.75rem;color:#7F1D1D;font-size:1rem;line-height:1.65}

.article-body table{width:100%;margin:1.5rem 0;font-size:.9375rem;
  border-collapse:collapse;display:block;overflow-x:auto}
.article-body th,.article-body td{border:1px solid #E5E7EB;padding:.6rem .75rem;
  text-align:left;vertical-align:top}
.article-body th{background:#F9FAFB;color:#111827;font-weight:600;white-space:nowrap}

/* ------------------------------------------------------------ призыв */
.cta-box{margin:3rem 0 0;padding:1.75rem;border-radius:1rem;
  background:#111827;color:#fff;
  background-image:radial-gradient(115% 85% at 100% 0%,rgba(239,68,68,.35),transparent 62%)}
.cta-title{font-family:var(--font-display);font-weight:700;font-size:1.25rem}
.cta-text{margin:.6rem 0 1.25rem;color:#D1D5DB;font-size:.9375rem;line-height:1.6;max-width:32rem}
.cta-btn{display:inline-block;background:#EF4444;color:#fff;font-weight:600;
  padding:.7rem 1.4rem;border-radius:.75rem;transition:background .2s}
.cta-btn:hover{background:#DC2626}

/* --------------------------------------------------------- читайте также */
.also{margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid #E5E7EB}
.also-title{font-family:var(--font-display);font-weight:700;color:#111827;
  font-size:1rem;margin-bottom:.75rem}
.also ul{list-style:none;margin:0;padding:0}
.also li{margin-bottom:.5rem}
.also a{color:#4B5563;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:#E5E7EB}
.also a:hover{color:#DC2626;text-decoration-color:#DC2626}

/* ------------------------------------------------------- список статей */
.cards{margin-top:2rem;display:grid;gap:1rem}
@media (min-width:768px){.cards{grid-template-columns:1fr 1fr}}

.card{border:1px solid #E5E7EB;border-radius:1rem;background:#fff;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.card:hover{border-color:#FCA5A5;box-shadow:0 8px 24px rgba(17,24,39,.07);transform:translateY(-2px)}
.card-link{display:block;padding:1.5rem}
.card-date{display:block;font-size:.75rem;color:#9CA3AF;text-transform:uppercase;letter-spacing:.04em}
.card-title{font-family:var(--font-display);font-weight:700;color:#111827;
  font-size:1.175rem;line-height:1.3;margin:.6rem 0 .5rem}
.card-desc{color:#4B5563;font-size:.9375rem;line-height:1.6;margin:0 0 1rem}
.card-more{font-size:.875rem;font-weight:600;color:#DC2626}

.list-empty{margin-top:2rem;color:#4B5563}

/* ------------------------------------------------------------- печать */
@media print{
  .site-head,.cta-box,.also,.crumbs,footer{display:none}
  .article-wrap{max-width:none}
  .article-body a{text-decoration:none;color:inherit}
}