/* =====================================================================
   МАДХО — надстройка над темой (единственный подключённый файл стилей).
   Принцип: пишем по классам и понятным блокам. Никаких правил «в ответ»
   на другие файлы и никаких вычислений отступов — выравнивание даёт
   разметка (кнопка и содержимое меню стоят в том же контейнере, что лого).
   ===================================================================== */

/* ---------- 1. Палитра и типографика ---------- */
:root{
  --madho-ink:#404041;
  --madho-gold:#e6b02e;
  --madho-gold-dark:#c9971f;
  --madho-line:#e6e6e6;
  --madho-muted:#777;
}
body{ color:var(--madho-ink); }
h1,h2,h3,h4,.site-title,.navbar a{ font-family:Georgia,'PT Serif','Times New Roman',Times,serif; letter-spacing:.2px; }
h1{ font-size:2.1rem; line-height:1.25; }
h2{ font-size:1.6rem; margin-top:1.4em; }
a{ color:var(--madho-gold-dark); }
a:hover{ color:var(--madho-ink); }
hr{ border:none; border-top:1px solid var(--madho-line); margin:1.8em 0; }

/* ---------- 2. Шапка ---------- */
#header{ background:#fff; border-bottom:3px solid var(--madho-gold); }
#header .navbar{ box-shadow:none; display:flex; align-items:center; gap:1rem; flex-wrap:nowrap; }
.site-logo img{ max-height:74px; width:auto; }
.navbar .nav-item > a{ font-size:.98rem; text-transform:none; }
.navbar .nav-item > a:hover{ color:var(--madho-gold-dark); }
#header .dropdown-menu a:hover{ background:var(--madho-gold); color:#fff; }
#header .navbar-brand.madho-brand{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; max-width:none; padding:0; margin:0; text-decoration:none; }
#header .madho-emblem{ height:44px; width:44px; object-fit:contain; flex:0 0 auto; }
#header .madho-brand-name{ font-family:Georgia,'PT Serif',serif; font-size:1.3rem; line-height:1; color:var(--madho-ink); letter-spacing:1px; white-space:nowrap; }
/* переключатель темы и вход на сайте не используем */
#header .theme-toggle, #header .theme-toggle-wrapper, #header .login-status-wrapper{ display:none; }

/* ---------- 3. Меню ----------
   Логика одна: обычного меню в шапке нет, справа в той же строке стоит
   кнопка — она открывает меню-оверлей. Кнопка и содержимое меню лежат
   в том же контейнере, что и лого, поэтому отступы совпадают сами,
   при любой ширине экрана. */
#header .navbar-section.desktop-menu{ display:none; }
#header .navbar-section.menu-button{ margin-left:auto; display:flex; align-items:center; }
.mobile-container{ display:block; }
.overlay{ padding-left:0; padding-right:0; }
/* у меню своя прокрутка; резервируем полосу с обеих сторон, чтобы содержимое
   встало ровно по линии шапки, как и кнопка */
.overlay{ scrollbar-gutter:stable; }
@media (min-width:1101px){
  /* на широком экране меню центрируется так же, как шапка */
  .overlay{ scrollbar-gutter:stable both-edges; }
}

/* ---------- 4. Заглавная картинка страницы: справа, текст обтекает ---------- */
img.madho-lead{ float:right; max-width:320px; height:auto; margin:0 0 14px 22px; border-radius:6px; }
article::after{ content:""; display:table; clear:both; }
@media (max-width:700px){
  img.madho-lead{ max-width:45%; margin:0 0 10px 14px; }
}

/* ---------- 5. Портреты персон ---------- */
img.madho-persona{ float:right; margin:.2rem 0 1rem 1.5rem; max-width:280px; width:auto; height:auto; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.12); }
@media (max-width:640px){
  img.madho-persona{ float:none; display:block; margin:0 auto 1rem; max-width:100%; }
}

/* ---------- 6. Видео: одна плашка, один размер на всех страницах ---------- */
.madho-video{ position:relative; display:block; width:100%; max-width:720px; margin:1.4rem 0; font-size:0; text-decoration:none; }
.madho-video img{ display:block; width:100%; height:auto; border-radius:10px; }
.madho-video:before{
  content:"▶"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:66px; height:66px; line-height:66px; text-align:center; padding-left:5px;
  border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:27px;
}
.madho-video:after{
  content:"▶  Смотреть на YouTube";
  position:absolute; left:12px; bottom:12px; padding:.4rem .75rem; border-radius:8px;
  background:rgba(0,0,0,.7); color:#fff; font-size:.88rem; white-space:nowrap;
}
.madho-video:hover:after{ background:rgba(179,38,30,.95); }
.madho-videos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4rem; margin-top:1rem; }
.madho-videos .madho-video{ max-width:100%; }

/* ---------- 7. Галерея и подписи ---------- */
.madho-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin:18px 0; }
.madho-gallery a{ display:block; }
.madho-gallery img{ width:100%; height:170px; object-fit:cover; border-radius:6px; display:block; background:#f2f2f2; }
.madho-gallery figure{ margin:0 0 .4rem 0; }
.madho-gallery figcaption{ font-size:.8rem; line-height:1.25; color:#555; margin-top:.3rem; }
article img{ max-width:100%; height:auto; }
/* в просмотрщике название работы показываем один раз */
.glightbox-container .gslide-desc,
.glightbox-container .gslide-description .gslide-desc{ display:none; }

/* ---------- 8. Текст статей ---------- */
/* пустая строка между абзацами */
article p + p, article ul + p, article ol + p{ margin-top:.85em; }
article, article p, article li{ hyphens:none; -webkit-hyphens:none; word-break:normal; overflow-wrap:normal; }
article p, article li, article div{ text-indent:0; }
article p{ margin-top:0; }

/* ---------- 9. Списки разделов (карточки) ---------- */
/* ---------- 15. Карточки категорий: одинаковый размер ---------- */
.madho-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); grid-auto-rows:1fr; gap:18px; margin:26px 0; align-items:stretch; }
.madho-card{
  display:flex; flex-direction:column; height:100%;
  border:1px solid var(--madho-line); border-radius:10px; overflow:hidden; background:#fff;
  transition:box-shadow .15s,transform .15s; text-decoration:none;
}
.madho-card:hover{ box-shadow:0 6px 20px rgba(0,0,0,.09); transform:translateY(-2px); }
/* место под картинку есть всегда — поэтому карточки одинаковой высоты */
.madho-card .pic{ display:block; aspect-ratio:4/3; background:#f2f2f2; flex:0 0 auto; }
.madho-card .pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.madho-card .name{
  display:flex; align-items:center; justify-content:center;
  flex:1 1 auto; min-height:3.6rem;
  padding:12px 14px; text-align:center;
  font-family:Georgia,'PT Serif',serif; font-size:1.15rem; line-height:1.3;
  color:var(--madho-ink);
}
.madho-video-badge{ font-size:.8rem; color:var(--madho-muted); white-space:nowrap; margin-left:.35rem; }

/* ---------- 10. Главная ---------- */
.madho-hero{ position:relative; margin:0 0 26px; }
.madho-slider{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:6px; border-radius:12px; }
.madho-slider figure{ margin:0; min-width:100%; scroll-snap-align:start; position:relative; }
.madho-slider img{ width:100%; max-height:520px; object-fit:cover; display:block; border-radius:12px; }
.madho-slider figcaption{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px; background:linear-gradient(transparent,rgba(0,0,0,.55)); color:#fff; font-family:Georgia,serif; border-radius:0 0 12px 12px; }
.madho-blocks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:26px 0; }
.madho-block{ border-top:4px solid var(--madho-gold); background:#fafafa; padding:16px 18px; border-radius:8px; }
.madho-news{ margin:26px 0; }
.madho-news li{ margin-bottom:8px; }

/* ---------- 11. Подвал ---------- */
#footer{ border-top:1px solid var(--madho-line); color:var(--madho-muted); font-size:.9rem; }
.madho-foot{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; text-align:center; }
.madho-foot > div{ text-align:center; }

/* ---------- 12. Узкие экраны ---------- */
@media (max-width:900px){
  #header .nav{ gap:.2rem .7rem; font-size:.92rem; }
  .madho-cards{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
  h1{ font-size:1.6rem; }
}

/* ---------- 13. Библиотека: выделенные блоки, интервал ---------- */
/* аннотация и ключевые слова — отдельным блоком, текст курсивом, метка жирная прямая */
.madho-note{
  background:#faf7f0;
  border-left:3px solid var(--madho-gold);
  padding:.7rem 1rem;
  margin:0 0 1rem;
  border-radius:0 6px 6px 0;
  font-style:italic;
}
.madho-note strong{ font-style:normal; font-weight:700; display:inline; }
/* межстрочный интервал в статьях */
article p, article li, article .madho-note{ line-height:1.65; }

/* ---------- 14. Конкурсы: работа крупно по центру, по клику — на весь экран ---------- */
.madho-work{ display:block; text-align:center; margin:1.4rem 0 .6rem; }
.madho-work img{
  display:inline-block; width:auto; height:auto;
  max-width:min(100%, 900px); max-height:80vh;
  border-radius:8px;
}
@media (max-width:700px){
  .madho-work{ margin:1rem 0 .5rem; }
}