/* blog/css/emag.css — стили публичного журнала (emag.html + emag-post.php).
   Использует общие переменные --ink/--coral/--surface из css/base.css и
   готовый паттерн карточки .case-card.project-case-card из
   css/cards-and-content.css (тот же, что и на странице «Проекты» —
   обложка не обрезается: object-fit:contain, высота по реальным
   пропорциям кадра). Здесь — только то, что специфично для журнала:
   hero-обложка на весь экран, вкладки, афиша, облако тегов. */

/* Декоративный заголовок-плашка (кикер+H1+подзаголовок) убран из разметки
   по фидбэку — вкладки переехали в шапку сайта, отдельный вступительный
   блок оказался лишним. Общий верхний отступ на все три вкладки взамен. */
.emag-tab-panel{ padding-top:36px; }

.emag-nav-current{ color:var(--ink) !important; position:relative; }
.emag-nav-current::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--coral); border-radius:2px; }

/* ---------- вкладки разделов — обычные пункты меню (используют .nav-link
   из css/nav.css), а не заливка-переключатель: активный пункт просто
   выделен цветом и подчёркнут коралловой линией снизу — тем же приёмом,
   каким на остальных страницах сайта помечается текущий раздел. ---------- */
.emag-tab-btn{ background:none; border:none; display:inline-flex; align-items:center; gap:6px; }
.emag-tab-btn.active{ color:var(--ink); position:relative; }
.emag-tab-btn.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--coral); border-radius:2px;
}
/* "F Новости" — вместо буквы "F" сам фавикон сайта (маленький значок),
   перед словом "Новости"; размер/скругление подобраны под высоту строки
   текста пункта меню. */
.emag-tab-news-icon{ width:15px; height:15px; border-radius:4px; display:block; flex-shrink:0; }

/* ---------- гамбургер (разделы сайта) — справа от RU/EN ---------- */
.emag-hamburger-btn{
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  width:38px; height:38px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface);
  flex-shrink:0;
}
.emag-hamburger-btn span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:all .25s ease; }
.emag-hamburger-btn:hover{ border-color:var(--coral); }
.emag-hamburger-btn.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.emag-hamburger-btn.open span:nth-child(2){ opacity:0; }
.emag-hamburger-btn.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.emag-hamburger-panel{
  display:none; position:absolute; top:100%; right:clamp(20px,4vw,56px); margin-top:8px; z-index:60;
  min-width:200px; background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); padding:16px; flex-direction:column; gap:12px;
}
.emag-hamburger-panel.open{ display:flex; }
.emag-hamburger-links{ display:flex; flex-direction:column; gap:12px; }
.emag-hamburger-links .nav-link{ font-size:14px; padding:2px 0; }

/* Копия вкладок «Публикации/Афиша/Новости» внутри гамбургер-панели — на
   десктопе не нужна (вкладки и так видны в верхней строке шапки, см.
   .nav-links), показываем её только на мобильном (медиа-запрос ниже). */
.emag-hamburger-tabs{ display:none; }
.emag-hamburger-tabs .emag-tab-btn{
  text-align:left; padding:4px 0; font-size:15px;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--border);
}
.emag-hamburger-tabs .emag-tab-btn:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:none; }
/* Коралловая линия-индикатор под активной вкладкой (::after у .emag-tab-btn)
   рассчитана на горизонтальный ряд — в вертикальном списке гамбургера её
   не показываем, активный пункт и так выделен цветом текста. */
.emag-hamburger-tabs .emag-tab-btn.active::after{ display:none; }

@media (max-width: 640px){
  .emag-hamburger-panel{ right:16px; left:16px; min-width:0; }

  /* ---------- шапка на мобильном ----------
     emag.html не подключает общий css/responsive.css (там его правила для
     #nav-right рассчитаны на другую разметку хедера основного сайта). Здесь —
     свой мобильный набор: ряд "3 вкладки + круглая иконка профиля + RU/EN +
     гамбургер" на мобильном не помещается, поэтому сами вкладки переезжают
     под гамбургер (там их копия — см. .emag-hamburger-tabs выше и разметку
     emag.html), а в верхней строке остаются только иконка профиля,
     переключатель языка и сам гамбургер — их ширина фиксирована
     (flex-shrink:0), поэтому круглая иконка больше не сжимается в овал. */
  #nav{ padding:14px 16px; flex-wrap:nowrap; }
  .logo .flip{ font-size:19px; }
  .logo .app{ font-size:9.5px; margin-top:6px; }
  #nav-right{ gap:10px; }
  .nav-links{ display:none; }
  .heart-nav, .lang-switch, .emag-hamburger-btn{ flex-shrink:0; }
  .emag-hamburger-tabs{ display:flex; flex-direction:column; }
}

/* обёртка вкладок «Публикации»/«Новости»: section-pad из catalog.css уже
   даёт отступы, здесь — только нижний отступ секции целиком */
.emag-posts-section{ margin-bottom:8px; }
/* Лента публикаций/новостей — как и у «Проекты» (#view-projects .listing-main),
   ограничена по ширине для комфортного чтения; облако тегов — в соседней
   sticky-колонке (.listing-aside), их ширину задаёт .listing-layout. */
#emag-panel-posts .listing-main, #emag-panel-news .listing-main{ max-width:760px; }

/* Облако тегов-фильтров (.listing-aside) на мобильном/планшете — тот же
   порог, что и у самой двухколоночной раскладки в css/catalog.css
   (@media(min-width:881px)). Ниже него теги идут одним блоком над лентой
   постов. Раньше тут была принудительная одна горизонтально прокручиваемая
   строка (чтобы не "тонуть" под высоким мобильным hero) — но теперь на
   мобильном hero сам стал обычными карточками (см. .emag-pinned-mobile
   ниже), той же высоты, что и остальная лента, так что эта причина отпала:
   при однострочном скролле чипы обрезались по правому краю и выглядели
   как баг вёрстки. Возвращаем обычное поведение — перенос на несколько
   строк (см. базовое .tags-row{flex-wrap:wrap} в css/catalog.css). */
@media (max-width: 880px){
  #emag-tagcloud, #emag-news-tagcloud{ margin-bottom:24px; }
}

/* ---------- hero-блок «Публикаций»: филмстрип ----------
   Обычные карточки списка ниже (.project-card-media) — ФИКСИРОВАННАЯ
   ширина (100% карточки), высота по реальным пропорциям картинки; так и
   остаётся, не трогали. У hero — наоборот: фиксированная ВЫСОТА строки, а
   ширина каждого кадра берётся из пропорций его собственной картинки (см.
   правило .emag-hero-frame img/video ниже: height:100%; width:auto — сама
   картинка задаёт ширину кадра, без единой строчки JS на подсчёт). Кадры
   стоят впритык друг к другу без зазора — как плёнка/филмстрип, — с
   горизонтальным скроллом (scroll-snap). При ОДНОЙ закреплённой публикации
   это просто одинокий кадр без стрелок/точек (.emag-hero-carousel-single);
   при нескольких — кадр "в фокусе" ярко освещён и с текстом, остальные,
   в очереди, — затемнены (см. .emag-hero-frame / .active ниже). */
.emag-hero-carousel{
  margin: 0 0 56px; padding: 0 clamp(20px,4vw,56px);
}
/* .emag-hero-viewport — отдельная позиционируемая обёртка ИМЕННО вокруг
   ленты кадров (без внешнего page-gutter отступа карусели) — иначе
   стрелки/точки, будучи position:absolute, отсчитывали бы отступ от
   padding-карусели ДОПОЛНИТЕЛЬНО к своему собственному и оказывались
   заметно дальше от реального края филмстрипа, чем нужно. */
.emag-hero-viewport{ position:relative; }
.emag-hero-strip{
  display:flex; height: clamp(360px, 44vw, 580px); overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  border-radius: var(--radius-lg); overflow-y:hidden; background:var(--ink);
}
.emag-hero-strip::-webkit-scrollbar{ display:none; }
/* при одном кадре центрируем его в строке, если он уже видимой области */
.emag-hero-carousel-single .emag-hero-strip{ justify-content:center; }

.emag-hero-frame{
  position:relative; display:block; flex:0 0 auto; height:100%;
  scroll-snap-align:start; overflow:hidden; cursor:pointer;
}
.emag-hero-frame img, .emag-hero-frame video{
  height:100%; width:auto; max-width:none; display:block; object-fit:cover;
}
.emag-hero-frame model-viewer{ height:100%; width:auto; }
/* Пост без обложки — своей картинки нет, откуда брать пропорции; кадру
   задаём условное соотношение сторон (в паре с фикс. высотой строки это
   так же, как и у остальных, даёт auto-ширину) и градиентный фон вместо
   картинки. */
.emag-hero-frame-nomedia{ aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--ink), #2a2b33); }
/* Невидимая распорка после последнего кадра — см. подробный комментарий в
   emag.js (initHeroCarousel/syncSpacer): без неё последний кадр (если он
   узкий) физически недостижим для scroll-snap — браузер не даёт скроллить
   дальше правого края контента. Ширина выставляется в JS. */
.emag-hero-strip-spacer{ flex:0 0 auto; height:100%; }

/* Затемнение "кадров в очереди" — по умолчанию каждый кадр притушен,
   активный (в фокусе) высветляется собственным лёгким градиентом снизу,
   нужным только для читаемости текста поверх. */
.emag-hero-frame-shade{
  position:absolute; inset:0; background:rgba(6,6,10,.6);
  transition: background .35s ease;
}
.emag-hero-frame.active .emag-hero-frame-shade{
  background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,0) 100%);
}
.emag-hero-frame:not(.active):hover .emag-hero-frame-shade{ background:rgba(6,6,10,.4); }

.emag-hero-overlay{
  position:absolute; left:28px; right:28px; bottom:28px; z-index:2; color:#fff; max-width:640px;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition: opacity .3s ease, transform .3s ease;
}
.emag-hero-frame.active .emag-hero-overlay{ opacity:1; transform:none; pointer-events:auto; }
/* Пост без обложки: overlay в нём — тот же градиентный фон вместо
   картинки, но дальше подчиняется тем же правилам фокуса/очереди, что и
   кадры с картинкой (см. .emag-hero-frame.active выше) — иначе на общей
   ленте он бы всегда выделялся ярче остальных, не в очереди со всеми. */
.emag-hero-frame-nomedia .emag-hero-overlay{ max-width:480px; }
/* Когда рядом есть карусельная капсула счётчика (см. .emag-hero-nav ниже,
   она тоже прибита к нижнему правому углу) — на случай, если активный
   кадр окажется настолько широким, что почти во всю ширину карусели
   (тогда правый край текстового блока и капсула оказались бы в одной
   зоне) — резервируем справа чуть больше места, чем без карусели. На
   реальных пропорциях кадров текст (max-width сильно меньше типичной
   ширины кадра) до этой границы обычно не дотягивает, но так — с запасом. */
.emag-hero-carousel:not(.emag-hero-carousel-single) .emag-hero-overlay{ right:132px; }

.emag-badge{
  display:inline-block; background:var(--coral); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.08em; padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.emag-hero-card-title{ font-size: clamp(20px, 2.6vw, 32px); margin:0 0 10px; line-height:1.18; color:#fff; }
.emag-hero-card-excerpt{ font-size:14.5px; opacity:.92; margin:0 0 12px; line-height:1.5; max-width:560px; }
.emag-hero-tag{ background:rgba(255,255,255,.16); color:#fff; border-color:transparent; }

/* Навигация карусели — раньше были отдельные большие стрелки по бокам (по
   центру высоты) и точки-индикатор внизу по центру: стрелки перекрывали
   заголовок/теги/бейдж "Главное" (тот тоже снизу слева), а точки поверх
   картинки читались плохо. Потом перенесли компактную капсулу «‹ N/M ›» в
   верхний правый угол — здесь она снова, но снизу справа (см. правку ниже
   right:132px у .emag-hero-overlay, специально оставляющую капсуле место,
   чтобы они гарантированно не пересекались с текстом даже на широком
   активном кадре). */
.emag-hero-nav{
  position:absolute; bottom:20px; right:20px; z-index:6;
  display:flex; align-items:center; gap:2px; padding:4px;
  background:rgba(10,10,14,.62); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.3); backdrop-filter:blur(6px);
}
.emag-hero-nav-btn{
  width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:transparent; color:#fff; display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
}
.emag-hero-nav-btn:hover{ background:rgba(255,255,255,.2); }
.emag-hero-nav-btn svg{ width:16px; height:16px; }
.emag-hero-nav-count{
  min-width:34px; text-align:center; font-size:12px; font-weight:700; color:#fff;
  letter-spacing:.02em; font-variant-numeric: tabular-nums;
}

@media (max-width: 900px){
  .emag-hero-overlay{ left:20px; right:20px; bottom:20px; }
  .emag-hero-carousel:not(.emag-hero-carousel-single) .emag-hero-overlay{ right:20px; bottom:64px; }
  .emag-hero-frame-nomedia .emag-hero-overlay{ padding:32px 20px; }
  .emag-hero-nav{ bottom:12px; right:12px; }
}
@media (max-width: 620px){ .emag-hero-strip{ height: clamp(300px, 78vw, 420px); } }

/* ---------- hero на мобильном (≤640px, тот же порог, что и переход на
   гамбургер-меню) — весь филмстрип на такой ширине не имеет смысла:
   разноширинные кадры, плавающая капсула счётчика поверх текста и т.п.
   выглядят криво. Ниже порога emag.js вообще не строит карусель, а рендерит
   закреплённые публикации теми же карточками, что и обычная лента (см.
   .emag-post-list ниже) — просто оказываются наверху, перед остальными.
   #emag-pinned-wrap лежит СНАРУЖИ .section-pad (это намеренно — десктопный
   филмстрип полноширинный, сам себе задаёт отступы), поэтому на мобильном
   карточкам нужно явно задать те же боковые отступы, что и у
   .section-pad ниже (тот же clamp(20px,4vw,56px)) — иначе они, в отличие
   от остальных карточек ленты, упирались бы прямо в края экрана. */
.emag-pinned-mobile{
  display:flex; flex-direction:column; gap:20px;
  padding: 24px clamp(20px,4vw,56px) 8px;
}

/* ---------- лента публикаций/новостей: ОДНА колонка, карточки как на
   странице «Проекты» (.case-card.project-case-card из css/cards-and-content.css) ---------- */
.emag-post-list{ display:flex; flex-direction:column; gap:20px; }
.emag-post-card{ text-decoration:none; }
/* Базовое правило .case-card-title (css/cards-and-content.css) обрезает
   заголовок в 3 строки через -webkit-line-clamp + min-height:4.05em —
   рассчитано на карточки «Проекты», где важна одинаковая высота карточек
   в сетке. Лента журнала — одна колонка (см. .emag-post-list выше), таких
   ограничений по сетке нет, поэтому снимаем обрезку: заголовок показывается
   полностью, каким бы длинным он ни был. */
.emag-post-card .case-card-title{
  display:block; -webkit-line-clamp:unset; line-clamp:unset; -webkit-box-orient:unset;
  overflow:visible; min-height:0;
}
/* Эйбрау (автор) + дата — раньше были в один ряд (space-between), из-за
   длинной русской даты ("22 августа 2026 г.") текст наезжал на "FOLIOAPP"
   в узкой колонке карточки. Ставим их друг под другом — надёжно работает
   при любой длине даты и на любой ширине экрана. */
.emag-post-card .case-card-top{ flex-direction:column; align-items:flex-start; gap:3px; }
.emag-post-card .case-card-year{ font-size:11px; }

/* На «Проекты» пропорция обложка/текст — 70%/30% (.project-case-card в
   css/cards-and-content.css), но в журнале при такой узкой белой части
   длинные заголовки постов резались на десктопе (webkit-line-clamp:3 не
   спасал — не хватало ширины строки). Расширяем текстовую часть карточки
   публикации/новости в ~1.6 раза (30% → 48%) — только для .emag-post-card,
   карточки «Проекты» это правило не затрагивает. Брейкпоинт (761px) —
   ровно граница мобильной раскладки в колонку из cards-and-content.css
   (@media max-width:760px), чтобы не спорить с ней по specificity. */
@media (min-width: 761px){
  .emag-post-card .project-case-card-media{ width:52%; }
  .emag-post-card .case-card-body{ width:48%; }
}

/* заглушка для постов без иллюстрации — не ломает раскладку карточки:
   тот же блок project-card-media, просто с фирменным градиентом и меткой */
.emag-no-media{
  display:flex; align-items:center; justify-content:center; min-height:180px;
  background: linear-gradient(135deg, var(--ink), var(--coral));
}
.emag-no-media-mark{ font-family:'Unbounded',sans-serif; font-weight:800; font-size:15px; color:#fff; letter-spacing:.02em; opacity:.9; }
.emag-post-card .project-card-media model-viewer{ width:100%; height:260px; }

.emag-empty{ text-align:center; color:var(--ink-faint); padding:60px 0; }
.emag-loadmore-wrap{ text-align:center; margin-top:8px; }

/* ---------- афиша: мини-календарь + хронологическая лента ----------
   Раньше вся вкладка жила в узком .emag-section (max-width:900px, по центру)
   — на широких экранах получалась одна тонкая колонка посреди пустого поля.
   Теперь обёртка — тот же full-bleed .section-pad, что и у «Публикации»/
   «Новости» (только отступы по краям, без ограничения ширины), а сама
   раскладка — честная 12-колоночная сетка: календарь занимает 3 колонки
   (sticky), хронология событий — оставшиеся 9 и использует всю ширину. */
.emag-calendar-section{ margin-bottom:8px; }
.emag-calendar-layout{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:40px; align-items:start; margin-bottom: 8px;
}
.emag-mini-calendar{ grid-column: span 3; position:sticky; top:28px; }
.emag-event-timeline{ grid-column: span 9; }
@media (max-width: 1100px){
  .emag-mini-calendar{ grid-column: span 4; }
  .emag-event-timeline{ grid-column: span 8; }
}
@media (max-width: 760px){
  .emag-calendar-layout{ grid-template-columns: 1fr; gap:28px; }
  .emag-mini-calendar{ grid-column: auto; position:static; }
  .emag-event-timeline{ grid-column: auto; }
}

.emag-mini-calendar{
  background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:20px;
}
.emag-mini-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:8px; }
.emag-mini-cal-title{ font-size:13px; font-weight:700; text-transform:capitalize; text-align:center; flex:1; }
.emag-mini-cal-nav{ background:none; border:1px solid var(--border); border-radius:8px; width:28px; height:28px; flex-shrink:0; color:var(--ink-soft); }
.emag-mini-cal-nav:hover{ border-color:var(--coral); color:var(--coral); }
.emag-mini-cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.emag-mini-cal-dow{ text-align:center; font-size:10px; color:var(--ink-faint); font-weight:700; padding-bottom:4px; }
.emag-mini-cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:11.5px;
  border-radius:8px; color:var(--ink-soft); position:relative;
}
.emag-mini-cal-day.today{ border:1px solid var(--ink); font-weight:700; color:var(--ink); }
.emag-mini-cal-day.has-event{ background:var(--coral-tint); color:var(--coral); font-weight:700; }
.emag-mini-cal-day.has-event::after{
  content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--coral);
}

.emag-event-timeline{ min-width:0; }
.emag-timeline-month{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);
  margin: 30px 0 14px;
}
.emag-timeline-month:first-child{ margin-top:0; }
/* Строго 3 равные колонки на десктопе — auto-fit/минмакс-подход отсюда
   убран: он и создавал "дырку" справа, потому что limit по max-ширине
   (380px) не давал колонкам растянуться до края контейнера. Три колонки
   по 1fr всегда делят контейнер поровну и заполняют его на 100% —
   дырки быть не может по определению grid. На более узких экранах
   (планшет/телефон) число колонок уменьшается медиа-запросами ниже,
   иначе карточки стали бы слишком узкими для фото 4:3 и текста. */
.emag-event-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
@media (max-width: 1040px){
  .emag-event-list{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .emag-event-list{ grid-template-columns: 1fr; gap:16px; }
}
/* Раньше единственная карточка в последнем неполном ряду растягивалась на
   всю ширину (.emag-event-card-full, класс добавлял JS в
   renderEventTimeline) — на практике давало гигантский постер вместо
   карточки афиши (баг). Больше не растягиваем: все карточки всегда
   одного размера, неполный ряд остаётся неполным. */

/* Карточка-постер мероприятия: фото сверху (4:3, с датой-бейджем поверх
   левого верхнего угла), заголовок/место/ссылка "Подробнее" — под фото.
   Не переиспользует project-case-card — тому нужен object-fit:contain
   и другие пропорции; здесь афишный постер с обрезкой кадра (cover). */
.emag-event-card{
  display:flex; flex-direction:column; border-radius: var(--radius-lg);
  border:1px solid var(--border); background:var(--surface); text-decoration:none; overflow:hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.emag-event-card:hover{ border-color:var(--coral); box-shadow: var(--shadow-card); transform:translateY(-2px); }

.emag-event-media-wrap{ position:relative; width:100%; aspect-ratio: 4/3; background:var(--bg); }
.emag-event-media{ width:100%; height:100%; }
.emag-event-media img, .emag-event-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.emag-event-media model-viewer{ width:100%; height:100%; }
.emag-event-media.no-media{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--ink), var(--coral));
}
.emag-event-media.no-media span{ font-family:'Unbounded',sans-serif; font-weight:800; font-size:13px; color:#fff; }

.emag-event-date-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:52px; height:52px; padding:0 6px; border-radius: var(--radius-md);
  background:#fff; box-shadow: var(--shadow-card); line-height:1.1;
}
.emag-event-date-badge .emag-event-day{ font-family:'Unbounded',sans-serif; font-weight:800; font-size:17px; color:var(--coral); }
.emag-event-date-badge .emag-event-month{ font-size:9.5px; color:var(--ink-soft); text-transform:uppercase; margin-top:1px; }

/* Бейдж с диапазоном ("с 26" / "до 3") — предлог "с"/"до" + число не
   помещаются в тот же квадрат 52×52, что и обычная дата, вплотную слипаясь
   и вылезая за границы бейджа (из-за чего "съезжал" и месяц под ним).
   Даём бейджу расти по ширине по контенту вместо фиксированной, а предлог
   с числом кладём в строку с явным зазором между ними; число чуть мельче,
   чтобы строка гарантированно помещалась в одну высоту с обычным бейджем. */
.emag-event-date-badge-range{ width:auto; min-width:52px; padding:0 10px; }
.emag-event-date-row{ display:flex; align-items:baseline; gap:3px; white-space:nowrap; }
.emag-event-date-prefix{
  font-size:11px; font-weight:600; color:var(--ink-soft); text-transform:lowercase; line-height:1.1;
}
.emag-event-date-badge-range .emag-event-day{ font-size:15px; }
.emag-event-date-badge-range .emag-event-month{ width:100%; text-align:center; }

.emag-event-info{ padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.emag-event-title{
  font-family:'Unbounded',sans-serif; font-size:16px; line-height:1.32; margin:0 0 8px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
}
.emag-event-loc{ font-size:13px; color:var(--ink-soft); margin:0 0 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emag-event-more{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--coral);
}
.emag-event-arrow{ flex-shrink:0; width:16px; height:16px; transition: transform .18s ease; }
.emag-event-card:hover .emag-event-arrow{ transform:translateX(3px); }

/* ---------- прошедшие мероприятия — отдельный блок под хроникой ---------- */
.emag-past-events-wrap{ margin-top:56px; }
.emag-past-events-divider{
  display:flex; align-items:center; gap:14px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:18px;
}
.emag-past-events-divider::after{ content:''; flex:1; height:1px; background:var(--border); }
/* Та же карточка-постер, но приглушённая: фото чуть тусклее, бейдж даты
   нейтрально-серый вместо коралловых акцентов — так прошедшее визуально
   не соперничает с актуальными мероприятиями выше. */
.emag-event-card-past{ opacity:.72; }
.emag-event-card-past:hover{ opacity:1; }
.emag-event-card-past .emag-event-media img,
.emag-event-card-past .emag-event-media video{ filter:grayscale(.55); }
.emag-event-card-past .emag-event-date-badge{ background:var(--bg); }
.emag-event-card-past .emag-event-date-badge .emag-event-day,
.emag-event-card-past .emag-event-date-badge .emag-event-month,
.emag-event-card-past .emag-event-date-badge .emag-event-date-prefix{ color:var(--ink-soft); }
.emag-event-card-past .emag-event-more{ color:var(--ink-soft); }
.emag-past-badge{
  position:absolute; top:12px; right:12px; z-index:2;
  background:rgba(0,0,0,.6); color:#fff; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; padding:4px 9px; border-radius:20px;
}

/* ---------- страница одного поста (emag-post.php) ---------- */
.emag-post-wrap{ max-width: 820px; margin: 40px auto 80px; padding: 0 24px; }
.emag-post-back{ display:inline-block; margin-bottom:24px; font-size:13.5px; color:var(--ink-soft); }
.emag-post-back:hover{ color:var(--coral); }
.emag-post-kicker{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.emag-post-title{ font-size: clamp(26px, 4.4vw, 44px); line-height:1.1; margin: 0 0 18px; }
.emag-post-meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; color:var(--ink-soft); font-size:13.5px; margin-bottom:28px; }

/* Обложка поста и медиа галереи — БЕЗ обрезки (object-fit:contain), как и
   .project-case-card-media на странице «Проекты»: показываем кадр целиком,
   вписанным в рамку, а не куском. Нейтральный фон — «подложка» под letterbox. */
.emag-post-cover{
  width:100%; border-radius: var(--radius-lg); overflow:hidden; margin-bottom:32px;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
}
.emag-post-cover-el{ width:100%; max-height:600px; object-fit:contain; display:block; }
.emag-post-cover model-viewer{ width:100%; height:480px; }

.emag-post-body{ font-size:17px; line-height:1.75; color:var(--ink); }
.emag-post-body p{ margin: 0 0 20px; }
.emag-post-body h2{ font-size:24px; margin: 36px 0 14px; }
.emag-post-body h3{ font-size:19px; margin: 28px 0 12px; }
.emag-post-body a{ color:var(--coral); text-decoration:underline; }
.emag-post-body ul, .emag-post-body ol{ padding-left:22px; margin:0 0 20px; }
.emag-post-body blockquote{
  margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--coral); color:var(--ink-soft); font-style:italic;
}

.emag-post-gallery{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin: 36px 0; }
.emag-post-gallery-item{
  border-radius: var(--radius-md); overflow:hidden; background:var(--bg); cursor:zoom-in;
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
}
.emag-post-gallery-item img, .emag-post-gallery-item video{ width:100%; height:auto; display:block; object-fit:contain; max-height:360px; flex:0 0 auto; }
.emag-post-gallery-item model-viewer{ width:100%; height:340px; flex:0 0 auto; }
.emag-post-gallery-caption{ font-size:12.5px; color:var(--ink-soft); padding:10px 12px 12px; text-align:left; }
.emag-post-gallery-full{ grid-column: 1 / -1; }
@media (max-width: 640px){ .emag-post-gallery{ grid-template-columns: 1fr; } }

.emag-post-event-box{
  background: var(--coral-tint); border-radius: var(--radius-md); padding: 20px 22px; margin: 0 0 28px;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
}
.emag-post-event-info{ font-size:14px; color:var(--ink); }
.emag-post-event-info strong{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--coral); margin-bottom:4px; }

.emag-post-tags{ display:flex; flex-wrap:wrap; gap:8px; margin: 32px 0; }
.emag-post-share{ display:flex; align-items:center; gap:12px; margin: 32px 0 0; font-size:13.5px; color:var(--ink-soft); }

/* ---------- посты "только для пользователей платформы" ---------- */
/* Бейдж-замочек в шапке поста (рядом с тегами) и на карточках ленты —
   акцентный цвет (--coral), тот же язык, что и у .emag-badge («Главное»)
   выше, чтобы сразу бросался в глаза без отдельной иконочной системы, но
   не выглядел инвертированной чёрной плашкой. Стилизован полностью сам —
   .emag-tag-chip (базовый класс обычных тег-чипов) размеров/паддингов не
   задаёт, так что здесь всё нужное (padding/radius/шрифт) описано явно. */
.emag-lock-chip{
  display:inline-flex; align-items:center; gap:5px;
  background: var(--coral); color:#fff; border-color:transparent;
  padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:700;
  letter-spacing:.02em; white-space:nowrap;
}
.emag-post-card-lock{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  letter-spacing:.02em; color:#fff; background:var(--coral); padding:4px 10px; border-radius:999px;
  margin-bottom:6px; white-space:nowrap;
}

/* Заглушка вместо оборванного текста — та же "плашка" стилистика, что и
   .emag-post-event-box выше (тот же фон/скругление), но по центру и с CTA. */
.emag-locked-box{
  background: var(--coral-tint); border-radius: var(--radius-md);
  padding: 32px 28px; margin: 8px 0 36px; text-align:center;
}
.emag-locked-icon{ font-size:26px; margin-bottom:10px; }
.emag-locked-title{ font-size:19px; margin:0 0 10px; color:var(--ink); }
.emag-locked-text{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 20px; max-width:520px; margin-left:auto; margin-right:auto; }
/* ---------- раздел "Подписки" (blog/js/emag-subscribe.js) ---------- */
.emag-subscribe-section{ max-width:640px; margin:0 auto; }
.emag-sub-title{ font-size:28px; margin:0 0 10px; }
.emag-sub-intro{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 28px; }

.emag-sub-form{ display:flex; flex-direction:column; gap:20px; }
.emag-sub-field{ display:flex; flex-direction:column; gap:8px; }
.emag-sub-field > span:first-child{ font-size:13px; font-weight:700; color:var(--ink); }
.emag-sub-field input[type="text"],
.emag-sub-field input[type="email"]{
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 14px;
  font-size:14.5px; font-family:inherit; color:var(--ink); background:var(--surface);
}
.emag-sub-field input[type="text"]:focus,
.emag-sub-field input[type="email"]:focus{ outline:2px solid var(--coral); outline-offset:1px; }

/* два поля (Имя / Фамилия) в один ряд на широких экранах */
.emag-editor-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .emag-editor-row{ grid-template-columns:1fr; } }

/* переиспользуем .spec-picker-field из css/cabinet.css (та же модалка
   "сфера деятельности", что и "Специализации" в Профиле) — здесь только
   недостающие мелочи для чипов с крестиком-удалением. */
.emag-sub-field .spec-picker-field .skill-chip{ display:inline-flex; align-items:center; gap:6px; }
.emag-sub-field .spec-picker-field .skill-chip button{
  border:none; background:none; cursor:pointer; color:inherit; opacity:.6; font-size:11px; line-height:1; padding:0;
}
.emag-sub-field .spec-picker-field .skill-chip button:hover{ opacity:1; }
.emag-sub-field .spec-picker-field .skill-chip em{ font-style:normal; opacity:.65; font-size:11px; }

.emag-sub-radio-row{ display:flex; flex-wrap:wrap; gap:10px; }
.emag-sub-radio{
  display:flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:999px;
  padding:8px 14px; font-size:13.5px; cursor:pointer; user-select:none;
}
.emag-sub-radio:has(input:checked){ border-color:var(--coral); background:var(--coral-tint); color:var(--coral); font-weight:700; }

.emag-sub-checkbox-list{ display:flex; flex-direction:column; gap:10px; }
.emag-sub-checkbox{ display:flex; align-items:flex-start; gap:9px; font-size:14px; cursor:pointer; line-height:1.4; }
.emag-sub-checkbox input{ margin-top:3px; }

.emag-sub-disclaimer{
  font-size:12.5px; line-height:1.55; color:var(--ink-soft); background:var(--bg);
  border-radius:var(--radius-sm); padding:12px 14px; margin:0;
}

.emag-sub-consent{ font-size:13px; color:var(--ink-soft); }
.emag-sub-consent a{ color:var(--coral); text-decoration:underline; }

.emag-sub-error{ color:var(--coral); font-size:13.5px; margin:0; }

.emag-sub-submit{ align-self:flex-start; }

.emag-sub-register-cta{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:28px; padding-top:24px; border-top:1px solid var(--border);
  font-size:13.5px; color:var(--ink-soft);
}

.emag-sub-success{ text-align:center; padding:48px 20px; }
.emag-sub-success p{ font-size:15.5px; color:var(--ink); margin:0 0 20px; }

@media (max-width:560px){
  .emag-subscribe-section{ padding-left:4px; padding-right:4px; }
  .emag-sub-title{ font-size:23px; }
}

/* ---------- CTA под постом: "Подписаться" (всегда) + "Создать аккаунт"
   (только гостю, см. emag-post.php isLoggedIn()) ---------- */
.emag-post-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 0; }
@media (max-width:480px){ .emag-post-cta-row{ flex-direction:column; } .emag-post-cta-row .btn{ text-align:center; } }