/* Раздел «Медиа». Всё внутри .media-page, чтобы не пересекаться со стилями сайта. */
.media-page{
  --text-primary:#2a2a2a; --text-secondary:#434343; --text-tertiary:#5f5f5f; --text-accent:#d91f1e;
  --bg-accent:#d91f1e; --bg-subtle:#eaeaea; --bg-muted:#f6f6f6;
  --plate-ice:#99f7ff; --blue-100:#e0ebff; --blue-50:#f1f6ff; --border-subtle:#d6d6d6;
  --r-lg:16px; --r-xl:24px; --r-2xl:32px;
  font-family:"Rosmol Sans","Onest",system-ui,sans-serif; color:var(--text-primary); background:#fff; -webkit-font-smoothing:antialiased;
}
:where(.media-page) *,:where(.media-page) *::before,:where(.media-page) *::after{box-sizing:border-box}
:where(.media-page) :is(h1,h2,h3,p){margin:0;padding:0;font-family:inherit;letter-spacing:normal;text-transform:none}
:where(.media-page) a{color:inherit;text-decoration:none}
:where(.media-page) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;margin:0;padding:0}
:where(.media-page) img{display:block;max-width:100%}
.media-page :focus-visible{outline:3px solid #2a6df4;outline-offset:2px}
.media-page .media-rule a{color:var(--text-accent)}
/* Раздел «Медиа». Токены совпадают с deploy/rosmol-site/site/site.css.
   Вёрстка адаптивная (в отличие от макета 1440px), все классы с префиксом .media- */


.media-wrap{max-width:1440px;margin:0 auto;padding:0 clamp(16px,5.5vw,80px)}

/* заголовок */
.media-head{padding:48px 0 32px;display:flex;flex-direction:column;gap:16px}
.media-crumbs{font-size:14px;line-height:20px;color:var(--text-tertiary)}
.media-crumbs a:hover{color:var(--text-accent)}
.media-title{font-size:clamp(36px,5vw,56px);line-height:1.07;font-weight:700}
.media-lead{font-size:18px;line-height:28px;color:var(--text-secondary);max-width:760px}

.media-contact{padding-bottom:64px}
.media-rule{background:var(--blue-50);border-radius:var(--r-xl);padding:20px 24px;font-size:14px;line-height:20px;color:var(--text-secondary)}
.media-rule b{display:block;font-size:16px;line-height:24px;color:var(--text-primary);margin-bottom:4px}

/* фильтры */
.media-filters{position:sticky;top:0;z-index:5;background:#fff;padding:16px 0;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;border-bottom:1px solid var(--border-subtle)}
.media-seg{display:flex;gap:8px;flex-wrap:wrap}
.media-chip{height:40px;padding:0 18px;border-radius:999px;background:var(--bg-subtle);font-size:16px;font-weight:500;transition:.2s}
.media-chip:hover{background:var(--blue-100)}
.media-chip[aria-pressed="true"]{background:var(--bg-accent);color:#fff}
.media-search{height:40px;flex:1 1 200px;max-width:320px;padding:0 16px;border-radius:var(--r-lg);border:1px solid var(--border-subtle);font:inherit;font-size:16px;margin-left:auto}
.media-count{font-size:14px;color:var(--text-tertiary);padding:16px 0 8px}

/* сетка карточек: число колонок подстраивается под ширину экрана */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px 24px;padding-bottom:64px}
.media-card{position:relative;display:flex;flex-direction:column;gap:12px;cursor:pointer}
.media-thumb{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--blue-100)}
.media-thumb{aspect-ratio:4/3}.media-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.media-card:hover .media-thumb img{transform:scale(1.04)}
.media-badge{position:absolute;left:12px;top:12px;background:#fff;border-radius:999px;padding:4px 12px;font-size:14px;line-height:20px;font-weight:500}
.media-badge.video{background:var(--plate-ice)}
.media-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:var(--bg-accent);display:flex;align-items:center;justify-content:center}
.media-play::after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.media-dur{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.7);color:#fff;border-radius:8px;padding:2px 8px;font-size:14px}
.media-card h3{font-size:20px;line-height:26px;font-weight:700}
.media-meta{font-size:14px;line-height:20px;color:var(--text-tertiary)}
.media-dl{position:absolute;right:12px;bottom:12px;opacity:0;transition:.2s}
.media-card:hover .media-dl,.media-card:focus-within .media-dl{opacity:1}

.media-empty{padding:64px 0;text-align:center;color:var(--text-tertiary);font-size:18px}

/* кнопки */
.media-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:var(--r-lg);font-size:16px;font-weight:500;white-space:nowrap;transition:.2s}
.media-btn-primary{background:var(--bg-accent);color:#fff}.media-btn-primary:hover{background:#b81716}
.media-btn-subtle{background:var(--bg-subtle)}.media-btn-subtle:hover{background:var(--blue-100)}
.media-btn-sm{height:36px;padding:0 14px;font-size:14px}

/* просмотр (лайтбокс) */
.media-modal{position:fixed;inset:0;z-index:50;background:rgba(20,20,20,.86);display:flex;align-items:center;justify-content:center;padding:16px}
.media-modal[hidden]{display:none}
.mm-card{background:#fff;border-radius:var(--r-2xl);max-width:1120px;width:100%;max-height:100%;overflow:auto;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}
.mm-view{background:#111;display:flex;align-items:center;justify-content:center;min-height:320px}
.mm-view{position:relative}.mm-view iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.mm-view img,.mm-view video{width:100%;max-height:80vh;object-fit:contain}
.mm-side{padding:32px;display:flex;flex-direction:column;gap:16px}
.mm-side h2{font-size:28px;line-height:34px}
.mm-dl{display:flex;flex-direction:column;gap:8px}
.mm-x{position:absolute;right:24px;top:24px;width:44px;height:44px;border-radius:50%;background:#fff;font-size:22px}
.mm-credit{background:var(--bg-muted);border-radius:var(--r-lg);padding:12px 16px;font-size:14px;line-height:20px}
.mm-credit b{display:block;margin-bottom:2px}
.mm-toast{font-size:14px;color:#0a7a3b;min-height:20px}
@media(max-width:800px){.mm-card{grid-template-columns:1fr}.mm-side{padding:20px}}

/* пагинация */
.media-pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:48px}
.media-pg{min-width:44px;height:44px;padding:0 12px;border-radius:var(--r-lg);background:var(--bg-subtle);font-size:16px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
button.media-pg:hover:not(:disabled){background:var(--blue-100)}
.media-pg[aria-current="page"]{background:var(--bg-accent);color:#fff}
.media-pg:disabled{opacity:.4;cursor:default}
.media-pg.gap{background:none;min-width:24px;padding:0}
/* описание видео */
.mm-desc{font-size:16px;line-height:24px;color:var(--text-secondary)}

/* телефон: карточки по две в ряд */
@media(max-width:600px){
  .media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;padding-bottom:32px}
  .media-thumb{border-radius:16px}
  .media-card{gap:8px}
  .media-card h3{font-size:15px;line-height:20px}
  .media-meta{font-size:12px;line-height:16px}
  .media-badge{left:8px;top:8px;padding:2px 8px;font-size:12px;line-height:16px}
  .media-play{width:40px;height:40px}
  .media-play::after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px;margin-left:3px}
  .media-dur{right:8px;bottom:8px;font-size:12px;padding:1px 6px}
  .media-dl{display:none}
}


/* Иконки шапки (очки, поиск, настройки): в global.css шаблона есть правило path{fill:inherit},
   из-за него заливка из самих svg пропадает и иконки не видны */
.rm-hactions .rm-hi{color:#2a2a2a}
.rm-hactions .rm-hi svg path[fill]{fill:#2a2a2a}   /* заливные иконки */
.rm-hactions .rm-hi svg path[stroke]{stroke:#2a2a2a;stroke-width:1.5}   /* иконка поиска нарисована линией */