/* ============================================================
   BeEasy Russian · раздел Reading
   Надстройка над assets/css/hub.css — подключается после него.
   Устроена так же, как grammar/_ui/grammar.css у грамматики:
   общие стили сайта плюс то немногое, чего в них нет.

   Здесь всего две вещи: широкая полоса над карточками и ряд
   «что вы будете делать» со значками вместо иконок-svg.

   ВАЖНО: правя файл, поднимите метку ?v=N на страницах.
   ============================================================ */

/* ─── 1. ШАПКА РАЗДЕЛА ─────────────────────────────────── */
/* .ghero.banner в hub.css жёстко прибит к картинке грамматики.
   В Reading полос много и у каждой страницы своя, поэтому имя
   файла задаёт сама страница — переменной --hero в атрибуте
   style. Нет переменной (или файла ещё нет на сервере) — полоса
   просто кремовая, как раньше, и ничего не ломается. */
.ghero.banner{
  background-image:var(--hero,none);
  background-color:#FDF7E7;   /* кремовый самой картинки */
  /* Полоса заполняется целиком и прижата вправо: картинка
     шире полосы, подрезается её пустой левый край — тот, под
     которым всё равно лежит текст. Так не остаётся ни полоски
     фона, ни стыка. */
  background-size:cover;
  background-position:right center;
}
/* Цвет под полосой — тот же --bg, из которого сделано
   растворение слева. В hub.css под картинкой лежит #FFF6E4, и
   на странице без картинки на границе растворения был виден шов. */

/* На телефоне полоса уходит под текст целиком, и горизонтальной
   завесы из hub.css не хватает: текст ложится прямо на девушку.
   Меняем направление — сверху почти непрозрачно, картинка видна
   снизу, где текста уже нет. */
@media (max-width:760px){
  .ghero.banner{ background-position:72% center; background-size:cover }
  .ghero.banner::before{
    background:linear-gradient(180deg,
      rgba(255,249,238,.94) 0, rgba(255,249,238,.92) 58%, rgba(255,249,238,.45) 100%);
  }
}

/* Строка под заголовком переносится раньше, чем доедет до
   картинки: у подводки в hub.css ширина ограничена, у неё — нет. */
.ghero .en{ max-width:20ch }

/* ─── 2. РЯД «ЧТО ВЫ БУДЕТЕ ДЕЛАТЬ» ─────────────────────── */
/* .goals из hub.css рассчитан на svg-иконки; у нас рисованные
   значки, поэтому задаём размер картинке и выравниваем текст
   по левому краю — подпись в две строки по центру читается
   хуже, чем в строку. */
.goals li{ flex-direction:row; align-items:flex-start; text-align:left; gap:12px; padding:4px 16px }
.goals li img{ flex:0 0 auto; width:54px; height:auto }
.goals li b{ display:block; font:800 16px var(--head); color:var(--teal); margin-bottom:2px }
@media (max-width:860px){
  .goals{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 0 }
  .goals li:nth-child(odd){ border-left:0 }
}
@media (max-width:520px){
  .goals{ grid-template-columns:1fr }
  .goals li{ border-left:0; padding-left:0 }
}

/* ─── 3. СТРОЧКА ПЕРЕЧИСЛЕНИЯ В БОЛЬШОЙ ПЛАШКЕ ──────────── */
/* Три приметы модуля через точку — отдельной строкой под
   описанием, помельче: это не предложение, а перечень. */
.pcard .pbul{ margin-top:8px; font-size:13.5px; color:var(--teal-2); opacity:.9 }

/* ─── 4. ЗАВЕСА В ТОН КАРТИНКЕ ──────────────────────────── */
/* В hub.css завеса залита #FFF9EE, а кремовый у нашей картинки
   чуть теплее. На стыке — там, где завеса сходит на нет, —
   была видна вертикальная полоска. Красим тем же цветом. */
.ghero.banner::before{
  background:linear-gradient(90deg,
    rgba(253,247,231,.97) 0, rgba(253,247,231,.94) 38%, rgba(253,247,231,0) 62%);
}
@media (max-width:760px){
  .ghero.banner::before{
    background:linear-gradient(180deg,
      rgba(253,247,231,.94) 0, rgba(253,247,231,.92) 58%, rgba(253,247,231,.45) 100%);
  }
}