/* ============================================================================
   home.mobile.css — mobile-first слой ГЛАВНОЙ Росмолодёжи (только страница «/»).
   Строится с нуля поверх сброшенного десктоп-холста. Десктоп >1024 живёт в
   home.css и сюда НЕ заходит (всё под @media max-width:1024px).
   Принципы (ui-ux-pro-max): touch ≥44px, body 16px, 4pt-спейсинг, честная
   типо-шкала (не clamp от 72), content-priority, чередование плотности,
   no fixed-px, aspect-ratio под картинки (CLS).
   Сброс холста (#rm-scaler→100%, header/footer, бургер) — в home.css, блок
   «АДАПТИВ: шапка/подвал Медиа» (общий для / и /media/). Здесь — только контент.
   ============================================================================ */

@media (max-width:1024px){
  .rm-page .rm-home{
    --m-fs-h1:30px;  --m-lh-h1:34px;
    --m-fs-h2:24px;  --m-lh-h2:28px;
    --m-fs-h3:19px;  --m-lh-h3:24px;
    --m-fs-body:16px;--m-lh-body:23px;
    --m-fs-sm:14px;  --m-lh-sm:20px;
    --m-fs-cap:12px;
    --m-pad:16px; --m-gap:12px; --m-sec:32px;
    --m-r-card:16px; --m-r-inner:12px;
    font-size:var(--m-fs-body);
  }

  /* честная мобильная типо-шкала поверх десктопной */
  .rm-page .rm-display-xl{font-size:var(--m-fs-h1);line-height:var(--m-lh-h1)}
  .rm-page .rm-display-l{font-size:var(--m-fs-h2);line-height:var(--m-lh-h2)}
  .rm-page .rm-h3{font-size:var(--m-fs-h3);line-height:var(--m-lh-h3)}
  .rm-page .rm-body-l{font-size:var(--m-fs-body);line-height:var(--m-lh-body)}
  .rm-page .rm-body-m{font-size:var(--m-fs-sm);line-height:var(--m-lh-sm)}
  /* десктопные фикс-ширины текстов (inline + из home.css) на мобиле не нужны */
  .rm-page .rm-sub,.rm-page .rm-mission,.rm-page .rm-ask-text .rm-body-l,
  .rm-page .rm-ask-text .rm-display-l{width:auto!important;max-width:100%}
  .rm-page .rm-rail{display:none}

  /* вертикальный ритм секций */
  .rm-page .rm-sec-opp,.rm-page .rm-sec-news,.rm-page .rm-sec-stories{
    padding:var(--m-sec) var(--m-pad);gap:20px}
  .rm-page .rm-sec-title{gap:6px}

  /* =========================== ГЕРОЙ =========================== */
  .rm-page .rm-hero{height:auto;padding:16px var(--m-pad) 0;gap:16px}
  .rm-page .rm-hero-row{height:auto;display:flex;flex-direction:column;gap:14px}
  .rm-page .rm-plate-tilt,.rm-page .rm-plate-warp,.rm-page .rm-hero-red,
  .rm-page .rm-banner-controls,.rm-page .rm-hero-arrows{display:none!important}

  .rm-page .rm-plate-front{position:relative;width:100%;height:auto;padding:24px 20px;
    transform:none!important;background:var(--plate-ice);border-radius:var(--m-r-card);
    display:flex;flex-direction:column;gap:14px;overflow:visible}
  .rm-page .rm-f9 .rm-overline,.rm-page .rm-f41 .rm-overline{position:static!important;
    transform:none!important;top:auto!important;margin:0!important;width:fit-content;
    padding:5px 12px;border-radius:999px;background:#fff;font-size:var(--m-fs-cap)}
  .rm-page .rm-f41 .rm-plate-front>:not(.rm-overline){top:auto!important}
  .rm-page .rm-plate-front h1{width:100%}
  .rm-page .rm-mission{font-size:var(--m-fs-body);line-height:var(--m-lh-body)}

  /* chip-фильтры «Что ищешь?» на мобиле скрыты (как и на десктопе) — по просьбе владельца */
  .rm-page .rm-actions{display:flex;flex-direction:column;gap:10px}
  .rm-page .rm-actions .rm-btn{width:100%;height:52px;border-radius:14px}
  /* вторичное действие — текст-ссылка, а не вторая огромная кнопка */
  .rm-page .rm-btn-outline-white{border:0;background:none;height:auto;padding:4px;
    color:var(--text-primary);text-decoration:underline;text-underline-offset:4px;font-weight:500}

  /* баннер: карточка-картинка 16:10 с подписью-оверлеем снизу */
  .rm-page .rm-side-banner{position:relative;left:auto;top:auto;width:100%;height:auto;
    aspect-ratio:16/10;transform:none!important;padding:0;border-radius:var(--m-r-card);
    overflow:hidden;touch-action:pan-y;display:block}
  .rm-page .rm-sb-img,.rm-page .rm-sb-img2{border-radius:0}
  .rm-page .rm-f133 .rm-sb-prog{top:10px;left:12px;right:12px}
  .rm-page .rm-sb-plate{position:absolute;left:12px;right:12px;bottom:12px;width:auto;
    padding:12px 14px;border-radius:var(--m-r-inner);gap:6px;background:rgba(255,255,255,.95);
    backdrop-filter:blur(4px)}
  .rm-page .rm-sb-plate .rm-h4{font-size:var(--m-fs-h3);line-height:var(--m-lh-h3)}
  .rm-page .rm-sb-plate .rm-lnk{font-size:var(--m-fs-sm)}

  /* ======================== ВОЗМОЖНОСТИ ========================
     Два типа плотности: 4 фичер-карточки (фото сверху, full-width) +
     5 компактных тайлов (иконка+заголовок) в 2 колонки. Классы rm-opp-feat /
     rm-opp-tile проставлены в home.php; order группирует их (десктоп >1024
     не видит этих правил — там .rm-grid это flex). */
  .rm-page .rm-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--m-gap);
    align-items:start;overflow:visible}
  .rm-page .rm-opp{width:auto!important;height:auto!important;min-height:0!important;
    flex-direction:column;justify-content:flex-start;gap:10px;overflow:hidden;
    border-radius:var(--m-r-card);transition:transform .15s}
  .rm-page .rm-opp:active{transform:scale(.98)}
  .rm-page .rm-opp .rm-ogo{display:none}

  /* --- компактные тайлы (grant/learn/biz/care/proj) --- */
  .rm-page .rm-opp-tile{order:1;padding:16px;min-height:150px!important;
    justify-content:space-between}
  /* 5 тайлов (нечётно) → последний (proj) орфанит в сетке. Растягиваем его на всю
     ширину горизонтальной плиткой (иконка | заголовок | стрелка), чтобы не было дырки */
  .rm-page .rm-opp-tile[data-op=proj]{grid-column:1/-1;flex-direction:row;align-items:center;
    gap:14px;min-height:0!important;padding:16px 18px}
  .rm-page .rm-opp-tile[data-op=proj] .rm-ico{order:0;margin:0}
  .rm-page .rm-opp-tile[data-op=proj] .rm-oc{flex:1;order:1}
  .rm-page .rm-opp-tile[data-op=proj] .rm-lnk{order:2}
  .rm-page .rm-opp-tile .rm-oplate,
  .rm-page .rm-opp-tile .rm-body-m,
  .rm-page .rm-opp-tile .rm-pill{display:none!important}
  .rm-page .rm-opp-tile .rm-oc{width:auto;gap:12px;order:1}
  .rm-page .rm-opp-tile .rm-h4{width:auto!important;max-width:none!important;
    font-size:16px!important;line-height:21px!important}
  .rm-page .rm-opp-tile .rm-lnk{order:2;font-size:13px}
  .rm-page .rm-opp-tile .rm-lnk span{display:none}  /* на тайле — только стрелка */
  /* иконка тайла: ~56px, натуральная, без десктоп-трансформа (спрайт near-square — ок) */
  .rm-page .rm-opp-tile .rm-ico{position:relative!important;order:-1;
    left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
    width:56px!important;height:56px!important;transform:none!important;opacity:1!important;margin:0}
  .rm-page .rm-opp-tile .rm-prof-art,
  .rm-page .rm-opp-tile .rm-trip-img,
  .rm-page .rm-opp-tile .rm-fam-img,
  .rm-page .rm-opp-tile .rm-comm-img{display:none!important}

  /* --- фичер-карточки (prof/trip/fam/comm): фото сверху 16:9 + текст --- */
  .rm-page .rm-opp-feat{order:2;grid-column:1/-1;padding:0 0 18px;gap:12px}
  .rm-page .rm-opp-feat .rm-oc{width:auto;gap:8px;order:2;padding:0 18px}
  .rm-page .rm-opp-feat .rm-lnk{order:3;margin:0 18px;font-size:var(--m-fs-sm)}
  .rm-page .rm-opp-feat .rm-h4{width:auto!important;max-width:none!important;
    font-size:var(--m-fs-h3)!important;line-height:var(--m-lh-h3)!important}
  .rm-page .rm-opp-feat .rm-body-m{width:auto!important;max-width:none!important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rm-page .rm-opp-feat .rm-oplate{height:24px;margin:0 18px}
  .rm-page .rm-opp-feat .rm-pill{align-self:flex-start;margin:0 18px}
  .rm-page .rm-opp-feat .rm-trip-img,
  .rm-page .rm-opp-feat .rm-fam-img,
  .rm-page .rm-opp-feat .rm-comm-img{position:relative!important;order:1;
    left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;object-position:center 22%}
  .rm-page .rm-opp-feat .rm-prof-art{position:relative!important;order:1;
    left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;height:auto!important;aspect-ratio:16/9;transform:none!important;overflow:hidden}
  .rm-page .rm-opp-feat .rm-prof-art .rm-pa-main{position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;object-fit:cover;object-position:center 18%}
  .rm-page .rm-opp-feat .rm-prof-art .rm-pa-patch{display:none}
  /* у фото-фичеров лого/pill поверх картинки не нужен сверху — он идёт в .rm-oc */
  .rm-page .rm-opp-feat .rm-ico{display:none!important}

  /* =========================== НОВОСТИ =========================== */
  .rm-page .rm-ngrid{flex-direction:column;overflow:visible;gap:16px}
  .rm-page .rm-feat{width:100%}
  .rm-page .rm-quote-plate{height:auto;min-height:0;aspect-ratio:4/3}
  /* малые карточки — горизонтальная snap-лента (не стопка плашек).
     ВАЖНО: база даёт .rm-nlist{flex:1 0 0} → в колоночном ngrid он схлопывается по
     высоте; сбрасываем flex и задаём высоту по контенту. Ширину карточки — в vw
     (definite), а не %, чтобы не зависеть от кривого резолва контейнера. */
  .rm-page .rm-nlist{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    flex:none!important;width:100%!important;height:auto!important;align-items:stretch;
    gap:12px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
    margin:0 calc(-1*var(--m-pad));padding:0 var(--m-pad) 4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rm-page .rm-nlist::-webkit-scrollbar{display:none}
  .rm-page .rm-ncard{flex:0 0 76vw!important;width:76vw!important;max-width:320px;
    scroll-snap-align:start;height:auto}
  /* контент из оверлея (десктоп) → под фото, тёмным */
  .rm-page .rm-f35 .rm-ngrid-old .rm-nmedia{position:relative;width:100%;height:auto;
    aspect-ratio:16/10;background:var(--bg-muted)}
  .rm-page .rm-f35 .rm-ngrid-old .rm-ncontent{position:static;opacity:1;height:auto;
    padding:12px 2px 0;background:none;display:flex;flex-direction:column;gap:8px;cursor:auto}
  .rm-page .rm-f35 .rm-ngrid-old .rm-ncontent .rm-h4{color:var(--text-primary);
    font-size:17px;line-height:22px}
  .rm-page .rm-f35 .rm-ngrid-old .rm-ncontent .rm-lnk{color:var(--text-accent)}
  .rm-page .rm-f35 .rm-ngrid-old .rm-ncontent .rm-lnk img{filter:none}
  .rm-page .rm-sec-news .rm-action{margin-top:4px}
  .rm-page .rm-sec-news .rm-action .rm-btn{width:100%;height:52px;border-radius:14px}

  /* =========================== ФОРУМ ===========================
     Full-bleed фото-баннер с красным градиентом, текст поверх. */
  .rm-page .rm-forum-sec{height:auto;padding:0 var(--m-pad)}
  .rm-page .rm-forum{height:auto;min-height:340px;padding:28px 20px;border-radius:var(--r-2xl);
    display:flex;flex-direction:column;justify-content:flex-end;gap:12px;overflow:hidden;
    background:
      linear-gradient(0deg,rgba(201,24,23,.96) 0%,rgba(201,24,23,.78) 38%,rgba(201,24,23,.30) 100%),
      url("assets/forum-b.webp");
    background-size:cover;background-position:center top}
  .rm-page .rm-forum-title,.rm-page .rm-forum-sub,.rm-page .rm-forum-actions{
    position:static!important;width:auto!important;left:auto!important;top:auto!important}
  .rm-page .rm-forum-title{order:1}
  .rm-page .rm-forum-sub{order:2}
  .rm-page .rm-forum-actions{order:3;margin-top:6px}
  .rm-page .rm-forum-actions .rm-btn{height:52px;padding:0 28px;border-radius:14px}
  .rm-page .rm-spray,.rm-page .rm-fshape,.rm-page .rm-forum-art,
  .rm-page .rm-forum-photo{display:none!important}

  /* =========================== ИСТОРИИ =========================== */
  .rm-page .rm-stories-head{height:auto}
  .rm-page .rm-stories-head h2{position:static!important;white-space:normal}
  .rm-page .rm-f111 .rm-cview{-webkit-mask-image:none!important;mask-image:none!important}
  .rm-page .rm-f111 .rm-cards{padding-left:0;scroll-snap-type:x mandatory}
  .rm-page .rm-f111 .rm-story{flex-basis:230px;scroll-snap-align:start}
  /* портрет истории: на десктопе внутренности заданы фикс-px (pmedia 240px, plate-wrap 277px) —
     на узкой карточке вылезают за портрет и НАЕЗЖАЮТ на имя. Задаём геометрию в % внутри бокса 3:4 */
  .rm-page .rm-portrait{width:100%;height:auto;aspect-ratio:3/4;overflow:visible}
  .rm-page .rm-plate-wrap{position:absolute!important;left:auto!important;right:0!important;
    top:50%!important;transform:translateY(-50%)!important;width:84%!important;height:90%!important}
  .rm-page .rm-plate{width:100%!important;height:100%!important}
  .rm-page .rm-pmedia{position:absolute!important;left:0!important;top:3%!important;
    width:84%!important;height:94%!important}
  .rm-page .rm-f110 .rm-story .rm-go{left:auto!important;right:8px!important;top:auto!important;bottom:8px!important}

  /* =========================== CTA =========================== */
  .rm-page .rm-ask-sec{padding:0 var(--m-pad) var(--m-sec)}
  .rm-page .rm-ask{height:auto;border-radius:var(--r-2xl)}
  .rm-page .rm-horse{display:none}
  .rm-page .rm-ask-text{position:static!important;width:auto!important;padding:28px 20px;gap:16px}
  .rm-page .rm-ask-text .rm-display-l{width:auto!important}
  .rm-page .rm-ask-btn{width:100%;height:52px;border-radius:14px}
  .rm-page .rm-ask-link{white-space:normal;font-size:var(--m-fs-sm)}
}

/* ПЛАНШЕТ 601–1024: возможности в 3 колонки в естественном DOM-порядке
   (9 карточек = 3×3 без дырок; order-группировку и спаны телефона отключаем).
   Тайлы и фичеры — равные ячейки, фичеры тоже с фото сверху. */
@media (min-width:601px) and (max-width:1024px){
  .rm-page .rm-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .rm-page .rm-opp{order:0!important}
  .rm-page .rm-opp-feat{grid-column:auto}
  .rm-page .rm-opp-tile{min-height:160px!important}
  .rm-page .rm-opp-tile[data-op=proj]{grid-column:auto;flex-direction:column;
    align-items:flex-start;min-height:160px!important;padding:16px;justify-content:space-between}
  .rm-page .rm-opp-tile[data-op=proj] .rm-oc{flex:none;order:1}
  .rm-page .rm-opp-tile[data-op=proj] .rm-lnk{order:2}
  /* новости: не супер-широкие карточки в ленте */
  .rm-page .rm-ncard{flex:0 0 300px!important;width:300px!important}
  /* герой: баннер не во всю высоту, текст-карточка и баннер рядом смотрятся ок и в колонку */
  .rm-page .rm-side-banner{max-width:560px}
}

/* на совсем узких (кириллица) — тайлы могут тесниться: заголовок мельче */
@media (max-width:360px){
  .rm-page .rm-opp-tile .rm-h4{font-size:15px!important;line-height:19px!important}
  .rm-page .rm-ncard{width:82%!important;flex:0 0 82%}
}

/* touch: у большой карточки «Новость дня» оверлей показывается всегда — прячем
   двойной (ghost) заголовок на самой картинке */
@media (hover:none){
  .rm-f35 .rm-ngrid-old .rm-quote-plate>.rm-h4,
  .rm-f35 .rm-ngrid-old .rm-quote-plate>.rm-body-m{opacity:0}
}