/* ==========================================================
   3-mksd.ru — Глобальные стили сайта
   ========================================================== */

:root{
  /* Бренд */
  --brand-red:#7a0000;
  --brand-red-dark:#4c0000;

  /* Синонимы (для совместимости с шаблонами) */
  --banner: var(--brand-red);
  --banner-dark: var(--brand-red-dark);

  /* Золото / латунь */
  --gold:#d4af37;
  --gold-dark:#b8932e;
  --brass: var(--gold);

  /* Текст и фон */
  --text:#222;
  --muted:#666;
  --bg:#fbf6ec;
  --paper: var(--bg);

  /* Плитки */
  --tile-border:#e5dcc8;
  --tile-grad:linear-gradient(#fff,#f7f1e3);
  --tile-shadow:0 6px 15px rgba(0,0,0,.10);
  --tile-hover-border:rgba(139,0,0,.30);

  /* Акцентный бордовый (ссылки в карточках, постах, алфавите) */
  --accent-dark:#7a0000;
}

/* Базовые */
*{box-sizing:border-box}
html,body{height:100%}

html{
  scroll-behavior:smooth;
  scroll-padding-top:120px;
}

body{
  margin:0;
  font:16px/1.6 "PT Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' opacity='0.05'%3E%3Cpath d='M0,0 L100,100 M100,0 L0,100' stroke='%238B0000' stroke-width='1'/%3E%3C/svg%3E") repeat;
}

a{color:var(--gold);text-decoration:none}
a:hover{color:#f0d76c;text-decoration:underline}

.container{max-width:1440px;margin:0 auto;padding:0 24px}

.sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* Заголовки */
h1,h2,h3{font-family:"Oswald",sans-serif;margin:24px 0 12px}
h1{font-size:40px}
.section-title {
  font-size: 32px;
  margin-top: 40px;
  margin-bottom: 24px;
  text-align: center;
}

/* ==========================================================
   Header (V2)
   ========================================================== */

.site-header{
  position:sticky; top:0; z-index:1000;
  background: radial-gradient(circle at top center, #a30000, var(--banner-dark));
  color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.site-header .header-inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
}
.menu-toggle{
  background:transparent; border:0; cursor:pointer; width:36px; height:36px;
  display:inline-grid; place-content:center;
}
.menu-toggle span{display:block;width:20px;height:2px;background:#fff;margin:3px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-star{width:44px;height:44px;filter:drop-shadow(0 0 6px rgba(0,0,0,.5))}
.brand-title{
  font-family:"Oswald",sans-serif; font-size:26px; line-height:1.05;
  letter-spacing:.5px; text-transform:uppercase; margin:0; text-shadow:1px 1px 3px rgba(0,0,0,.35);
}
.brand-sub{color:var(--brass); font-style:italic; font-size:14px; margin-top:2px}
.icon-btn{background:transparent;border:0;color:#fff;cursor:pointer}

/* Поиск в шапке */
.search-panel{display:none; background:#5d0000; border-top:1px solid rgba(255,255,255,.12)}
.search-panel.open{display:block}
.search-inner{max-width:900px;margin:0 auto;padding:10px 16px;display:flex;gap:8px}
.search-input{
  flex:1; padding:10px 12px; border-radius:6px; border:1px solid #c7a63a;
  background:#fff; color:#111;
}
.search-submit{
  padding:10px 14px; border:0; border-radius:6px;
  background:var(--brass); color:#2E2E2E; font-weight:700; cursor:pointer
}

/* Primary nav (золотая полоса) */
nav.primary{
  background:linear-gradient(90deg,var(--brass),#e6c763);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);
  color:#2E2E2E;
  position:sticky; top: 60px; z-index:999;
}
nav.primary .nav-inner{max-width:1200px;margin:0 auto;padding:0}
nav.primary .navbar-nav{
  display:flex !important; flex-wrap:wrap; gap:10px;
  margin:0; padding:0; list-style:none;
}
nav.primary .navbar-nav > li > a{
  display:block; padding:0 14px;
  font:700 16px/1.2 "Oswald",sans-serif; border-radius:0;
  text-decoration:none !important; color:inherit !important;
}
nav.primary a:hover{background:rgba(0,0,0,.06); color:#4c0000 !important}

/* Мобильное меню */
@media (max-width:900px){
  .menu-toggle{
    display:flex !important; flex-direction:column; justify-content:center;
    width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001
  }
  .menu-toggle span{width:24px;height:2px;background:#fff;margin:3px 0;transition:all .3s ease}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}

  /* прячем любые ul в меню до открытия */
  nav.primary .nav,
  nav.primary .navbar-nav,
  nav.primary > .nav-inner > ul,
  nav.primary ul{
    display:none !important; flex-direction:column; gap:0; width:100%; padding:10px 0;
  }
  nav.primary.open .nav,
  nav.primary.open .navbar-nav,
  nav.primary.open > .nav-inner > ul,
  nav.primary.open ul{ display:flex !important; }
  nav.primary.open li{ margin:0 }
  nav.primary.open a{
    display:block; padding:12px 16px; border-bottom:1px solid rgba(0,0,0,.08);
    text-decoration:none !important; color:inherit !important;
  }

  /* Учитываем фиксированную шапку */
  html{ scroll-padding-top:70px; }
}

/* Десктоп: списки всегда видны строкой; скрываем кнопку */
@media (min-width:901px){
  .menu-toggle{display:none !important}
  nav.primary .nav,
  nav.primary .navbar-nav,
  nav.primary > .nav-inner > ul{
    display:flex !important; flex-direction:row; gap:12px;
  }
}

/* Отмена подчёркиваний в шапке/меню */
.site-header a, nav.primary a{ text-decoration:none !important; color:inherit !important; }
.site-header a:hover, .site-header a:focus,
nav.primary a:hover, nav.primary a:focus{ text-decoration:none !important; background:transparent !important; }

/* ==========================================================
   Контентные таблицы / утилиты
   ========================================================== */

.content{padding:16px 0 32px}
.content .breadcrumb{color:#777;font-size:.9rem;margin-top:6px}
.content h2{margin-top:8px}
.content .dash{list-style:none;padding-left:0}
.content .dash li{position:relative;padding-left:18px}
.content .dash li:before{content:"—";position:absolute;left:0;color:#777}

.table-wrap{overflow:auto;margin:12px 0 20px}
.content table{border-collapse:collapse;width:100%;min-width:720px;background:#fff}
.content thead th{position:sticky;top:0;background:#222;color:#eee;font-weight:600}
.content th,.content td{border:1px solid #ddd;padding:6px 8px;vertical-align:top}
.content tbody tr:nth-child(even){background:#fafafa}

/* Футер */
footer{background:#0f0f0f;color:#ddd;margin-top:32px}
.footer-inner{
  display:grid;gap:24px;grid-template-columns:1.2fr 1fr 1fr 1fr;
  max-width:1140px;margin:0 auto;padding:28px 24px
}
.footer-logo{display:flex;gap:12px;align-items:center}
.footer-logo svg{width:30px;height:30px}
.footer-nav h3{font-family:"Oswald";font-weight:600;margin:0 0 8px}
.menu.footer{list-style:none;margin:0;padding:0}
.menu.footer li{margin:6px 0}
.menu.footer a{color:#e8d48a}
.menu.footer a:hover{color:#fff}
.footer-bottom{
  grid-column:1/-1;border-top:1px solid #222;margin-top:8px;padding-top:10px;
  display:flex;justify-content:space-between;align-items:center
}
.back-to-top{color:#e8d48a}
.back-to-top:hover{color:#fff}

/* ==========================================================
   BLOG INDEX / QUICK-LINK STYLE — v2
   Категории, алфавит, плитки записей
   ========================================================== */

/* Сетки */
.cat-grid,
.post-grid{
  list-style:none;
  padding:0;
  margin:1rem 0 2rem;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.cat-grid > li,
.post-grid > li{ display:flex; }

/* Карточка-ссылка (категории и общий вид плитки) */
.quick-link{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  background:var(--tile-grad);
  border:1px solid var(--tile-border);
  border-radius:12px;
  color:var(--accent-dark);
  text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
  min-height:120px;
  flex:1;
}
.quick-link:hover{
  transform:translateY(-2px);
  box-shadow:var(--tile-shadow);
  border-color:var(--tile-hover-border);
}

.quick-link-icon{
  flex:0 0 44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(139,0,0,.08);
  border-radius:10px;
}
.quick-link-icon svg{ width:24px; height:24px; color:var(--accent-dark); }

.quick-link-text{ flex:1 1 auto; min-width:0; }
.cat-title{
  display:block;
  font-family:"Oswald",sans-serif;
  color:var(--accent-dark);
  margin-bottom:4px;
}
.muted{ display:block; color:#555; font-size:14px; line-height:1.35; }

/* Список постов (обычные категории) — ссылки бордовые */
.post-list{ list-style:none; padding:0; margin:0; }
.post-list li{ padding:.5rem 0; border-bottom:1px solid #efe7d5; }
.post-list a{ color:var(--accent-dark); text-decoration:none; font-weight:600; }
.post-list a:hover{ text-decoration:underline; }

/* Книга памяти: алфавит как плитки */
.alpha-grid{
  list-style:none; padding:0; margin:1rem 0 1.25rem;
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
}
.alpha-grid > li{ display:flex; }
.quick-link--alpha{
  align-items:center; justify-content:center;
  min-height:64px; flex:1;
  font-weight:700;
}
.quick-link--alpha .alpha-letter{
  font-family:"Oswald",sans-serif;
  font-size:22px;
}
.quick-link--alpha.is-active{
  background:var(--accent-dark);
  color:#fff;
  border-color:var(--accent-dark);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

/* Книга памяти: плитки записей — бордовые и в одну строку */
.post-grid a{
  color:var(--accent-dark);
  text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:block;
}
.post-grid a:hover{ text-decoration:underline; }

/* Пагинация */
.pager{
  display:flex; gap:1rem; align-items:center; justify-content:center;
  margin:1rem 0 2rem;
}
.pager a{ text-decoration:none; }

/* Фокус для доступности */
.quick-link:focus,
.quick-link--alpha:focus,
.post-grid a:focus{
  outline:3px solid var(--gold-dark);
  outline-offset:2px;
}

/* ==========================================================
   Home page specific styles
   ========================================================== */

/* Compact Hero Section */
.home-hero {
  /* Полностью перенимаем стили "плитки" */
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 32px 40px;
  background: var(--tile-grad);
  border: 1px solid var(--tile-border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.home-hero__title {
  font-size: 2.5rem;
  font-weight: bold;
  text-shadow: none;
  margin-bottom: 8px;
  color: var(--brand-red-dark); /* Обновление: заголовок стал бордовым */
  line-height: 1.2;
}
.home-hero__subtitle {
  font-size: 1.1rem;
  font-style: italic;
  text-shadow: none;
  line-height: 1.6;
  max-width: 900px;
  margin: 0;
  color: var(--muted);
}

.about-content {
  text-align: center;
  max-width: 800px;
  margin: 40px auto;
  padding: 24px;
  border-radius: 12px;
  background: #f7f1e3;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.about-content p {
  font-size: 1.1rem;
  line-height: 1.8;
}
.about-content strong {
  color: var(--brand-red-dark);
}

/* Main grid layout */
.masonry-grid {
    columns: 3 260px;
    column-gap: 40px;
    margin-top: 40px;
    margin-bottom: 60px;
}

/* Teaser cards grid */
.teasers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.teaser-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 20px;
    background: var(--tile-grad);
    border: 1px solid var(--tile-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    transition: transform .2s ease, box-shadow .2s ease;
    /* Styles for the "masonry" effect */
    break-inside: avoid;
    margin-bottom: 40px;
}
.teaser-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tile-shadow);
}
.teaser-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.teaser-title {
    font-family: "Oswald", sans-serif;
    color: var(--accent-dark);
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}
.teaser-title:hover {
    text-decoration: underline;
}
.teaser-icon {
  /* Новый стиль для иконок в карточках-тизерах */
    flex: 0 0 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(139,0,0,.08);
}
.teaser-icon svg {
    color: var(--accent-dark);
}
.teaser-desc {
    font-size: 0.95rem;
    color: var(--muted);
}
.teaser-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.teaser-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--tile-border);
}
.teaser-list li:last-child {
    border-bottom: none;
}
.teaser-list a {
    color: var(--accent-dark);
    text-decoration: none;
    display: block;
}
.teaser-list a:hover .teaser-item__title {
    text-decoration: underline;
}
.teaser-item__title {
    font-weight: 600;
}
.teaser-item__excerpt {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 4px;
}
.teaser-foot {
    margin-top: 16px;
    text-align: right;
}
.teaser-more {
  display: inline-block;
  padding: 8px 16px; /* Уменьшаем отступы для компактности */
  background-color: var(--brand-red);
  color: #fff !important; /* Устанавливаем белый цвет текста для читабельности */
  border-radius: 6px;
  text-decoration: none !important; /* Убираем подчеркивание */
  font-weight: bold;
  transition: background-color .2s ease, transform .2s ease;
}
.teaser-more:hover {
  background-color: var(--brand-red-dark);
  transform: translateY(-2px);
}
.teaser-more svg {
  display: inline-block;
  margin-left: 6px;
  width: 1rem;
  height: 1rem;
  color: #fff;
  vertical-align: top;
  margin-top: 2px;
}

.call-to-action {
  /* Обновляем стили для бордового фона и компактности */
  background: var(--brand-red-dark);
  color: #fff;
  text-align: center;
  padding: 24px 32px;
  margin-top: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.cta-inner {
  max-width: 800px;
}
.call-to-action h2 {
  color: var(--brass);
  margin-bottom: 16px;
}
.call-to-action p {
  font-size: 1.1rem;
  line-height: 1.6;
}
.button {
  display: inline-block;
  padding: 12px 24px;
  background: var(--gold);
  color: #2E2E2E;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  margin-top: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.button--red {
  background: #fff;
  color: var(--brand-red-dark);
}

/* New style for the latest posts list */
.latest-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fff;
    border: 1px solid var(--tile-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.latest-posts-list li {
    padding: 12px 20px;
    border-bottom: 1px dashed var(--tile-border);
}
.latest-posts-list li:last-child {
    border-bottom: none;
}
.latest-posts-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--accent-dark);
    text-decoration: none;
    transition: color .2s ease;
}
.latest-posts-list a:hover {
    color: var(--brand-red-dark);
}
.post-list-title {
    font-weight: 600;
}
.post-list-date {
    font-size: 0.85rem;
    color: var(--muted);
}


/* New styles for card titles and spacing */
.card-title {
  font-family: "Oswald", sans-serif;
  color: var(--accent-dark);
  font-size: 1.25rem;
  margin-top: 0;
}
.card-title a {
  text-decoration: none !important;
  color: var(--accent-dark) !important;
}
.card-title a:hover {
  text-decoration: underline !important;
}


/* ==========================================================
   Адаптивные правки
   ========================================================== */

@media (min-width:1200px){
  .container{ max-width:1440px; }
}

@media (max-width:900px){
  .masonry-grid {
    columns: 1;
    column-gap: 0;
  }
}

@media (min-width: 768px) {
  .full-width-section {
    grid-column: 1 / -1; /* Занимает всю ширину сетки */
  }
}

@media (max-width:768px){
  h1{font-size:32px}
  .cat-grid, .post-grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
  .quick-link{ min-height:110px; }
  .home-hero { padding: 60px 24px; }
  .home-hero__title { font-size: 2.5rem; }
  .home-hero__subtitle { font-size: 1.2rem; }
}
@media (max-width:480px){
  .cat-grid, .post-grid, .teasers-grid {
    grid-template-columns:1fr;
  }
  .quick-link{ min-height:100px; }
}

/* ==== iOS safe-area + футер ==== */

/* 1) корректный отступ под нижнюю системную панель */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }
body { padding-bottom: max(0px, var(--safe-bottom)); }

/* 2) футер не должен «залипать» к самому низу экрана */
footer .footer-inner {
  /* обычный паддинг + приплата под safe-area */
  padding-bottom: calc(12px + var(--safe-bottom));
}

/* 3) нижняя строка футера — не ломать строки и не упираться в край */
footer .footer-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;           /* разрешаем перенос на новую строку */
}
footer .footer-bottom > * { margin: 0; }

footer .back-to-top {
  margin-left: auto;         /* уезжает вправо на широких */
  padding: 6px 10px;
  border-radius: 10px;
  display: inline-block;
  text-decoration: none;
}
@media (max-width: 520px) {
  footer .back-to-top {
    margin-left: 0;          /* на узких — отдельной строкой */
    width: 100%;
    text-align: center;
  }
}

/* 4) чтобы контент не «прятался» за скруглениями/краем контейнера */
.container { padding-left: 14px; padding-right: 14px; }

/* ==== Мобильный футер: только "Разделы", а "Контакты" сразу под ними ==== */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 640px) {
  footer .footer-inner{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    padding: 12px 14px calc(12px + var(--safe-bottom));
  }

  /* порядок блоков */
  footer .footer-logo { order: 0; }
  footer .footer-nav:nth-of-type(1) { order: 1; }               /* Разделы */
  footer .footer-nav:nth-of-type(2) { display: none !important; }/* Материалы — скрыть */
  footer .footer-nav:nth-of-type(3) { order: 2; }               /* Контакты — под Разделами */
  footer .footer-bottom { order: 3; }

  /* типографика и интервалы поуже */
  footer .footer-nav h3 { margin: 0 0 6px; font-size: 16px; }
  footer .menu.footer li { margin: 6px 0; }
  footer .back-to-top {
    margin-left: 0;
    width: 100%;
    text-align: center;
    padding: 8px 10px;
    border-radius: 10px;
  }
}

/* чтобы контент/кнопки не упирались в нижнюю панель iOS */
body { padding-bottom: max(0px, var(--safe-bottom)); }
footer .footer-inner { padding-bottom: calc(12px + var(--safe-bottom)); }

/* --- Ричтекст-изображения в постах: без апскейла --- */
.content img,
.richtext img,
.richtext-image {
  max-width: 100%;           /* только уменьшаем при переполнении */
  height: auto !important;   /* сохраняем пропорции */
}

/* Полноширинные картинки — без форсированного растяжения */
.richtext-image.full-width {
  display: block;
  /* width:100%;  — убрано, чтобы не апскейлить маленькие картинки */
  max-width: 100%;
  margin: 12px 0 16px;
}

/* Обтекание слева/справа + отступы от текста (не растягиваем) */
.richtext-image.left,
img.align-left {
  float: left;
  margin: 4px 16px 12px 0;
  max-width: min(50%, 320px);
}

.richtext-image.right,
img.align-right {
  float: right;
  margin: 4px 0 12px 16px;
  max-width: min(50%, 320px);
}

/* Импорт из Word мог навесить width:100% — отключаем апскейл */
img[style*="width: 100%"],
img[style*="width:100%"] {
  width: auto !important;
  max-width: 100% !important;
}

/* На узких экранах убираем float, но не растягиваем сверх исходного */
@media (max-width: 768px) {
  .richtext-image.left,
  .richtext-image.right,
  img.align-left,
  img.align-right,
  img[style*="float:left"],
  img[style*="float: right"] {
    float: none !important;
    display: block;
    margin: 10px auto 14px !important;
    max-width: 100% !important; /* по-прежнему без апскейла */
  }
}

/* Контейнер "подчищает" обтекание */
.content::after {
  content: "";
  display: block;
  clear: both;
}

/* Нежные подписи сразу после <img> */
.richtext-image + p,
img + p {
  text-align: center;
  font-size: 0.95rem;
  color: #666;
  margin-top: 6px;
}