/* ================= LANDING PROMO BLOCKS =================
   Блоки под hero/формой входа на главной (#view-landing): мотивация +
   аудитория, демо-альбом, демо-проект, список возможностей, вакансии.
   Переиспользуют реальные компоненты приложения там, где это возможно
   (.gallery-album-row, .case-card.project-case-card, .tiny-tag, .btn),
   чтобы демо-карточки выглядели один в один как настоящие. */

.promo-sections{ background:var(--bg); position:relative; }

.promo-block{
  max-width:1180px; margin:0 auto; padding:64px clamp(20px,4vw,56px);
}
.promo-block:last-child{ padding-bottom:96px; }

/* белые "плашки"-секции чередуются с фоном страницы, как в остальных
   разделах приложения (карточки на var(--bg)) */
.promo-block.promo-surface{
  background:var(--surface); border-radius:var(--radius-lg);
}

.promo-head{ max-width:680px; margin-bottom:38px; }
.promo-head.promo-head-center{ max-width:640px; margin-left:auto; margin-right:auto; text-align:center; }
.promo-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.promo-head-center .promo-eyebrow{ justify-content:center; }
.promo-eyebrow::before{ content:''; width:22px; height:1px; background:var(--ink-soft); display:inline-block; }
.promo-title{
  font-family:'Unbounded',sans-serif; font-size:clamp(26px,3.4vw,38px); line-height:1.15; margin-bottom:14px;
}
.promo-title .hl{ color:var(--coral); }
.promo-sub{ font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:640px; }

.promo-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.promo-head-center + .promo-cta-row{ justify-content:center; }

/* ссылка-продолжение текста (напр. блок "Публикуйте альбомы") — CTA не
   вынесен в отдельную кнопку под/рядом с абзацем (это либо выглядело
   отдельной кнопкой без явной связи с текстом, либо "повисало" в пустом
   месте при многострочном абзаце), а дописан прямо в конец предложения,
   как выделенное цветом кликabelьное продолжение мысли — так CTA явно
   привязан к тексту, который его мотивирует. */
.promo-inline-link{
  display:inline-flex; align-items:center; gap:5px; vertical-align:-3px; background:none; border:none; padding:0; margin:0;
  font-family:inherit; font-size:inherit; font-weight:700; color:var(--coral); cursor:pointer; white-space:nowrap;
}
.promo-inline-link:hover{ text-decoration:underline; }
.promo-inline-link-arrow{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease; }
.promo-inline-link:hover .promo-inline-link-arrow{ transform:translateX(3px); }

/* ---------- Блок 0: "Ловите новые возможности" (ТЗ от 10 сентября) ----------
   Живая лента последних публикаций журнала с тегами "Вакансии", "Заказы",
   "Опен-коллы" — 3 карточки в ряд, одной строкой (см. js/landing-promo.js).
   Карточка — тот же .case-card.project-case-card, что и в журнале/на
   «Проекты» (визуальное единство), но здесь она нужна в ВЕРТИКАЛЬНОЙ
   раскладке (картинка сверху, текст снизу) вместо построчной горизонтальной
   (картинка 70% слева, текст 30% справа) — та раскладка расчитана на один
   широкий столбец, а не на сетку 3 в ряд. Двойной класс-селектор
   (.project-case-card.promo-opportunity-card) нужен, чтобы специфичность
   гарантированно перебивала базовое flex-direction:row из
   css/cards-and-content.css независимо от порядка подключения файлов. */
.promo-opportunities-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:0;
}
.promo-opportunity-card.project-case-card{
  flex-direction:column;
}
.promo-opportunity-card.project-case-card .project-case-card-media{
  width:100%; margin:0;
}
/* Правка от 10 сентября (уточнение пропорций): раньше высота обложки была
   фиксированным пикселем (190px), никак не привязанным к ширине карточки —
   на десктопе карточка ~380px давала соотношение сторон бокса примерно 2:1,
   и в паре с object-fit:cover это обрезало исходники сильнее, чем нужно.
   Меняем на aspect-ratio:4/3 — горизонтальный формат (шире, чем выше;
   применяется и к пустому "no-media" блоку ниже для единообразия), а не
   вертикальный 3:4 — высота бокса теперь всегда считается от реальной
   ширины карточки в моменте (в т.ч. на брейкпоинтах 900/640px, где грид
   уходит на 2 и 1 колонку), поэтому кадрирование остаётся заметно мягче и
   одинаковым для всех карточек независимо от пропорций исходной обложки. */
.promo-opportunity-card.project-case-card .project-case-card-media .project-card-media{
  aspect-ratio:4/3; height:auto;
}
/* object-fit:cover: без этого при разных пропорциях исходников (портрет/
   пейзаж/квадрат — в этой ленте они смешаны, в отличие от одной заранее
   известной демо-обложки в блоке 3 ниже) по бокам или сверху/снизу
   карточки просвечивал бы фон .project-card-media (var(--bg), светло-
   серый) — "серые поля", и картинки в трёх карточках одного ряда
   выглядели бы по-разному выровненными. cover полностью заполняет бокс
   (теперь заданный через aspect-ratio выше) и одинаково для всех карточек
   ряда; аккуратное кадрирование при этом ожидаемо и приемлемо — это
   компактные обложки-превью ленты, а не основной просмотр проекта. */
.promo-opportunity-card.project-case-card .project-case-card-media .project-card-media img,
.promo-opportunity-card.project-case-card .project-case-card-media .project-card-media video{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.promo-opportunity-card.project-case-card .project-case-card-media .project-card-media.no-media{
  display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; height:auto;
  background:linear-gradient(135deg, var(--ink), var(--coral));
}
.promo-opportunity-card .promo-opp-no-media-mark{
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:15px; color:#fff; letter-spacing:.02em; opacity:.9;
}
.promo-opportunity-card.project-case-card .case-card-body{ width:100%; padding:18px 20px 20px; }
/* Бейдж "только для пользователей платформы" — тот же паттерн, что и
   .emag-post-card-lock в blog/css/emag.css (тот файл на index.html не
   подключён, поэтому копия минимального правила здесь, под своим именем
   класса, чтобы не тянуть весь журнальный CSS ради одного бейджа). */
.promo-opportunity-card .promo-opp-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;
}

/* Правка от 10 сентября: заголовок "Ловите новые возможности" переносился
   на 2 строки уже на десктопе — не из-за нехватки места на экране, а из-за
   общего .promo-head{max-width:680px}, который у этого конкретно
   заголовка (в Unbounded он визуально шире, чем кажется по числу букв)
   оказался у́же самого текста. На мобилке при этом тот же перенос на 2
   строки как раз ожидаем и нужен — там текст физически не помещается в
   ширину экрана. Снимаем max-width только для этого заголовка и только
   от 641px и выше (планшет/десктоп) — на этих ширинах текста уже
   достаточно, чтобы уместиться в одну строку без переноса; на мобилке
   (≤640px) правило не действует, .promo-head остаётся как есть, и
   заголовок переносится на 2 строки сам, по ширине экрана. */
@media (min-width:641px){
  #promo-opportunities-block .promo-head{ max-width:none; }
  #promo-opportunities-block .promo-title{ white-space:nowrap; }
}

/* ---------- Блок 1: аудитория ---------- */
.promo-audience-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.promo-audience-card{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent,var(--coral));
  border-radius:var(--radius-md); padding:24px 24px 26px; transition:transform .18s ease, box-shadow .18s ease;
}
.promo-audience-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); }
.promo-audience-title{ font-family:'Unbounded',sans-serif; font-size:15.5px; margin-bottom:10px; }
.promo-audience-desc{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

/* ---------- Блок 2: демо-альбом ---------- */
.promo-demo-list{ margin-bottom:0; }
.promo-demo-list .gallery-album-row{ cursor:default; }
.promo-demo-list .gallery-album-view-btn{ cursor:pointer; }

/* ---------- Блок 3: демо-проект ---------- */
.promo-demo-project-wrap{ display:flex; flex-direction:column; gap:16px; }
.promo-demo-project-tags{ padding:0 4px; }

/* Правка от 10 сентября: на демо-обложке (пейзажный кадр музейного зала,
   ~1.6:1) при ширине колонки 70% карточки высота по реальным пропорциям
   чуть превышала общий лимит max-height:520px из .project-card-media img
   (cards-and-content.css) — лимит обрезал высоту, а object-fit:contain
   вписывал картинку в получившийся бокс уже ýже, чем сама колонка,
   оставляя по бокам пустые серые поля (просвечивал background:var(--bg)
   у .project-card-media). Общий лимит трогать нельзя — он защищает от
   гигантских обложек в реальных проектах пользователей (см. коммент выше
   про .project-case-card). Для конкретно этой (заведомо некрупной) демо-
   обложки на главной снимаем лимит точечно, только в рамках промо-блока,
   чтобы картинка просто заняла всю ширину колонки по своим реальным
   пропорциям — без обрезки и без серых полей. Селектор специально
   зеркалит полную цепочку классов из cards-and-content.css, чтобы
   специфичность гарантированно перебивала общее правило независимо от
   порядка подключения файлов. */
.promo-demo-project-wrap .project-case-card .project-case-card-media .project-card-media img,
.promo-demo-project-wrap .project-case-card .project-case-card-media .project-card-media video{
  max-height:none;
}

/* ---------- Блок 4: возможности ---------- */
.promo-features-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.promo-feature-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:26px 24px; display:flex; flex-direction:column; gap:14px;
}
.promo-feature-icon{
  width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--tint,var(--coral-tint));
}
.promo-feature-icon svg{ width:22px; height:22px; stroke:var(--accent,var(--coral)); }
.promo-feature-title{ font-family:'Unbounded',sans-serif; font-size:14.5px; }
.promo-feature-desc{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); }

/* ---------- Блок 5: вакансии ---------- */
.promo-vacancies-box{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px clamp(22px,3vw,40px);
}
.promo-vacancies-text{ flex:1 1 320px; min-width:240px; }
.promo-vacancies-title{ font-family:'Unbounded',sans-serif; font-size:17px; margin-bottom:8px; }
.promo-vacancies-sub{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
.promo-vacancies-actions{ display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:900px){
  .promo-audience-grid{ grid-template-columns:repeat(2,1fr); }
  .promo-features-grid{ grid-template-columns:repeat(2,1fr); }
  .promo-opportunities-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .promo-block{ padding:52px 20px; }
  .promo-audience-grid{ grid-template-columns:1fr; }
  .promo-features-grid{ grid-template-columns:1fr; }
  .promo-opportunities-grid{ grid-template-columns:1fr; }
  .promo-cta-row, .promo-vacancies-actions{ flex-direction:column; align-items:stretch; }
  .promo-cta-row .btn, .promo-vacancies-actions .btn{ width:100%; }
  .promo-vacancies-box{ flex-direction:column; align-items:stretch; }
  /* .promo-vacancies-text держит flex:1 1 320px для строчной раскладки на
     десктопе (320px — это ширина). В колоночной раскладке (мобилка) тот же
     flex-basis:320px читается уже как высота по главной оси и растягивает
     блок с текстом на 320px, оставляя пустой промежуток перед кнопками —
     сбрасываем его здесь. */
  .promo-vacancies-text{ flex:0 0 auto; min-width:0; }
}

/* ---- Демо-альбом/демо-проект (промо-блоки 2 и 3) должны показывать
   РАЗНЫЙ реальный контент на RU и EN версиях главной (см. ТЗ от 10 сентября
   — разные демо-профили: RU #/27, EN #/17). setLang() в
   js/nav-and-auth-entry.js синхронно проставляет document.documentElement.lang,
   так что скрытие/показ по [lang] реагирует сразу же при переключении языка,
   без доп. JS. До первого вызова setLang() html имеет lang="ru" (см. index.html),
   что совпадает с дефолтным currentLang='ru' в js/data-i18n.js — обе версии
   не "мигают" при подгрузке. */
html[lang="ru"] .lang-only-en{ display:none; }
html[lang="en"] .lang-only-ru{ display:none; }