/* ---------------------------------------------------------------------------
   МП 07.09.2026. Главная страница.

   Разметка — /index.php, вся обёрнута в .mpmain. Обёртка обязательна: макет
   переопределяет глобальные теги (img, h1–h3, a), и без неё правило
   img{width:100%;height:100%;object-fit:cover} поехало бы по всему сайту.

   Сетка .mpmain .wrap повторяет .container шаблона сайта — 1600 / 90px,
   ниже 1600 — 40px, ниже 1199 — 10px, — чтобы левый край контента совпадал
   с логотипом и меню в шапке.
   --------------------------------------------------------------------------- */
.mpmain{
  font:400 16px/1.55 Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:#141414;-webkit-font-smoothing:antialiased;
  --ink:#141414;--ink-2:#5a5a5a;--line:#e6e3e0;--bg-2:#f6f4f2;--accent:#fe693a;--accent-dark:#e2532a;
}
.mpmain *{box-sizing:border-box}
.mpmain img{display:block;width:100%;height:100%;object-fit:cover}
.mpmain a{color:inherit;text-decoration:none}

.mpmain .wrap{max-width:1600px;margin:0 auto;padding:0 90px}
@media(max-width:1600px){.mpmain .wrap{padding:0 40px}}
@media(max-width:1199px){.mpmain .wrap{padding:0 10px}}

.mpmain .sec{padding:78px 0}
.mpmain .sec.tight{padding:56px 0}
.mpmain .sec.grey{background:var(--bg-2)}
.mpmain .eyebrow{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.mpmain h1,.mpmain h2,.mpmain h3{margin:0;font-weight:300;letter-spacing:-.015em;line-height:1.1}
.mpmain h1{font-size:clamp(34px,4.2vw,60px)}
.mpmain h2{font-size:clamp(27px,3vw,44px)}
.mpmain h3{font-size:20px;font-weight:500;letter-spacing:0;line-height:1.25}
.mpmain .lead{font-size:18px;line-height:1.6;color:#3a3a3a;max-width:70ch}

.mpmain .btn{display:inline-block;padding:14px 30px;border-radius:999px;font-size:15px;line-height:1.2;
  background:var(--accent);color:#fff;transition:background .16s}
.mpmain .btn:hover{background:var(--accent-dark);color:#fff}
.mpmain .btn-o{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.mpmain .btn-o:hover{background:var(--ink);color:#fff}
.mpmain .btn-w{background:#fff;color:var(--ink)}
.mpmain .btn-w:hover{background:#eee;color:var(--ink)}

/* --- первый экран ---------------------------------------------------------- */
.mpmain .hero{padding:64px 0 20px}
.mpmain .hero .htx{max-width:24ch}
.mpmain .hero p.lead{margin:20px 0 0;max-width:62ch}

.mpmain .doors{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.mpmain .door{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:16/11;color:#fff}
.mpmain .door .ph{position:absolute;inset:0}
.mpmain .door .ph:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.12) 62%)}
.mpmain .door .tx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 38px}
.mpmain .door .tx b{display:block;font-size:clamp(23px,2.4vw,34px);font-weight:300;letter-spacing:-.01em}
.mpmain .door .tx span{display:block;margin-top:9px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.82);max-width:44ch}
.mpmain .door .go{display:inline-block;margin-top:18px;font-size:15px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}

/* --- популярные серии ------------------------------------------------------ */
/* Карточка «фото + текст» в строку. Кадр заполняет скруглённый квадрат
   целиком (cover): фотографии здесь живые, с костровой зоной, и белые поля
   вокруг них давали «квадрат в квадрате». */
.mpmain .series{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mpmain .serie{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:20px;align-items:center;
  border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px 22px 18px 18px;
  transition:box-shadow .18s}
.mpmain .serie:hover{box-shadow:0 10px 30px rgba(0,0,0,.07)}
.mpmain .serie .ph{background:var(--bg-2);border-radius:10px;aspect-ratio:1/1;display:block;overflow:hidden}
.mpmain .serie .ph img{width:100%;height:100%;object-fit:cover;display:block}
.mpmain .serie .tx b{display:block;font-size:19px;font-weight:500;margin-bottom:8px}
.mpmain .serie .tx span{display:block;font-size:15px;line-height:1.55;color:var(--ink-2)}
.mpmain .serie .go{margin-top:12px;font-size:15px;color:var(--accent)}

/* --- ряд проектов ---------------------------------------------------------- */
.mpmain .sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:30px}
.mpmain .sechead .l{max-width:62ch}
.mpmain .sechead h2{margin-top:10px}
.mpmain .sechead .lead{margin-top:14px;font-size:17px}

.mpmain .shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mpmain .shotlink{display:block}
.mpmain .shot{display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--bg-2)}
.mpmain .shotcap{display:block;margin-top:10px;font-size:14.5px;color:var(--ink-2);transition:color .15s}
.mpmain .shotlink:hover .shotcap{color:var(--accent)}

/* --- возможности ----------------------------------------------------------- */
.mpmain .caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:8px}
.mpmain .cap{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px}
.mpmain .cap b{display:block;font-size:19px;font-weight:500;margin-bottom:9px}
.mpmain .cap p{margin:0;font-size:15.5px;line-height:1.6;color:#3a3a3a}
/* Плитки-ссылки: те же карточки, но кликабельные. Стрелка внизу нужна,
   чтобы отличать их от соседних информационных плиток. */
.mpmain .cap-link{display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}
.mpmain .cap-link:hover{border-color:#d8d3ce;box-shadow:0 10px 30px rgba(0,0,0,.07)}
.mpmain .cap-link .go{display:block;margin-top:auto;padding-top:14px;font-size:15px;color:var(--accent)}

/* --- партнёрам ------------------------------------------------------------- */
.mpmain .b2b{background:var(--ink);color:#fff;border-radius:18px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.mpmain .b2b .tx{padding:52px 54px}
.mpmain .b2b h2{color:#fff}
.mpmain .b2b .sub{margin:14px 0 0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.72);max-width:52ch}
.mpmain .b2b ul{list-style:none;margin:22px 0 26px;padding:0}
.mpmain .b2b li{position:relative;padding:7px 0 7px 22px;color:rgba(255,255,255,.78);font-size:15.5px}
.mpmain .b2b li:before{content:"—";position:absolute;left:0;color:var(--accent)}
.mpmain .b2b .ph{min-height:320px}

/* --- полезное -------------------------------------------------------------- */
.mpmain .arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mpmain .art{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  transition:box-shadow .18s}
.mpmain .art:hover{box-shadow:0 10px 30px rgba(0,0,0,.07)}
.mpmain .art .ph{aspect-ratio:4/3;background:var(--bg-2)}
.mpmain .art .bd{padding:20px 22px 24px}
.mpmain .art h3{margin-bottom:8px}
.mpmain .art p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}

/* --- условия --------------------------------------------------------------- */
.mpmain .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mpmain .fact b{display:block;font-size:18px;font-weight:500;margin-bottom:7px}
.mpmain .fact p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

/* --- мобильная ------------------------------------------------------------- */
@media(max-width:900px){
  /* Две двери — лентой со свайпом. В столбик они занимали два экрана подряд,
     и до «Как это выглядит на участке» приходилось долго листать.
     Отрицательные поля равны padding'у .wrap на этой ширине: лента идёт
     от края до края, а карточки стоят по сетке страницы. */
  .mpmain .doors{
    display:flex;gap:10px;margin-top:28px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:-10px;margin-right:-10px;padding:0 10px;
  }
  .mpmain .doors::-webkit-scrollbar{display:none}
  .mpmain .doors>.door{flex:0 0 90%;min-width:0;scroll-snap-align:center}
  .mpmain .door{aspect-ratio:4/3}
  .mpmain .door .tx{padding:24px 22px}
  /* Описание и «Перейти в раздел» закрывали кадр целиком: на карточке
     остаётся только название, ссылкой служит вся карточка. */
  .mpmain .door .tx span{display:none}
  /* Затемнение было рассчитано на три строки текста — под одно название
     хватает узкой полосы у нижнего края, кадр остаётся видимым. */
  .mpmain .door .ph:after{background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0) 38%)}
  /* Две серии — лентой со свайпом, как двери и материалы «Полезного»:
     в столбик карточка с фотографией занимает почти экран. */
  .mpmain .series{
    display:flex;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:-10px;margin-right:-10px;padding:0 10px;
  }
  .mpmain .series::-webkit-scrollbar{display:none}
  .mpmain .series>.serie{flex:0 0 86%;min-width:0;scroll-snap-align:center}
  .mpmain .shots{grid-template-columns:1fr 1fr;gap:12px}
  .mpmain .caps{grid-template-columns:1fr 1fr}
  .mpmain .b2b{grid-template-columns:1fr}
  .mpmain .b2b .tx{padding:34px 26px}
  /* Кадр над текстом занимал целый экран и ничего не добавлял к блоку:
     на телефоне остаётся только текст со списком и кнопкой. */
  .mpmain .b2b .ph{display:none}
  /* Три материала «Полезного» — лентой со свайпом: в столбик каждая карточка
     занимала по экрану перед блоком условий. Кнопка «Все материалы» на
     телефоне убрана: в раздел ведут сами карточки и пункт меню. */
  .mpmain .sechead .btn{display:none}
  .mpmain .arts{
    display:flex;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:-10px;margin-right:-10px;padding:0 10px;
  }
  .mpmain .arts::-webkit-scrollbar{display:none}
  .mpmain .arts>.art{flex:0 0 86%;min-width:0;scroll-snap-align:center}
  .mpmain .facts{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .mpmain .sec{padding:46px 0}
  .mpmain .hero{padding:34px 0 10px}
  /* На телефоне фото уходит наверх: в строку 150 px картинки и текст
     рядом не помещаются, подпись ломается на пять строк. */
  .mpmain .serie{grid-template-columns:1fr;gap:14px;padding:16px}
  .mpmain .serie .ph{aspect-ratio:16/10}
  .mpmain .caps{grid-template-columns:1fr}
  .mpmain .facts{grid-template-columns:1fr}
  /* длинная подпись кнопки должна переноситься, а не распирать страницу */
  .mpmain .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.3}
}


/* ---------------------------------------------------------------------------
   МП 07.09.2026. Форма «Стать партнёром»: список направлений.

   Само окно лежит вне .mpmain (см. комментарий в index.php), поэтому селекторы
   здесь без обёртки — они привязаны к собственному классу .mppartner-kinds
   и за пределы этой формы не выходят. Классы .checkbox / .checkbox__label
   свои у шаблона сайта, их не трогаем.
   --------------------------------------------------------------------------- */
.mppartner-kinds .hint{
    display:block;
    margin-top:-4px;
    font-size:13.5px;
    color:#8c8c8c;
}
.mppartner-kinds .kinds{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 20px;
    margin-top:12px;
}
.mppartner-kinds .kinds .checkbox{align-items:flex-start}
/* мельче, чем в остальных полях: длинные подписи должны укладываться
   в колонку одной строкой, иначе список едет по высоте */
.mppartner-kinds .kinds .checkbox__label{font-size:13.5px;line-height:1.3}
.mppartner-kinds .kinds .checkbox__label:before{margin-right:11px;transform:translateY(2px)}

@media (max-width:640px){
    .mppartner-kinds .kinds{grid-template-columns:1fr;gap:12px}
}