/* Макеты F, G и H: стеклянная плашка под колонкой текста.
   Подключается поверх a.css, вёрстка от макета A не меняется.

   В остальных макетах шаров на экране мало, и тексту хватает тени. Здесь их
   гораздо больше и они идут вплотную: в F и G шары закрывают весь экран, в H
   пирамида стоит по центру и после разбоя шары разъезжаются по всей площади.
   Под ними теряются кикер, абзац под заголовком и адрес в подвале — самое
   мелкое и самое светлое.

   Плашка сделана тем же стеклом, что карточки цен: полупрозрачная подложка,
   размытие фона и общий радиус скругления. Раньше здесь лежало мягкое
   градиентное пятно без края — оно решало ту же задачу, но выпадало из
   набора блоков страницы. */

.layout-panel .pitch {
  position: relative;
}

/* z-index: -1 держит плашку позади текста, но внутри .stage — она выше
   холста с шарами и ниже всего, что в колонке. */
.layout-panel .pitch::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -22px -26px -26px;
  border-radius: var(--cdb-radius);
  pointer-events: none;
  background: rgba(7, 12, 10, 0.78);
}

/* Подвал стоит на самой гуще шаров: одной тени адресу тут не хватает. Он
   остаётся полосой во всю ширину, как во всех макетах, — скруглять углы
   полосе, упирающейся в края экрана, некуда. */
.layout-panel .stage-footer {
  background: rgba(7, 12, 10, 0.78);
}

@media (max-width: 620px) {
  /* на телефоне колонка занимает почти всю ширину — растягивать плашку ещё
     и в поля незачем, она упёрлась бы в края экрана */
  .layout-panel .pitch::before {
    inset: -16px -14px -20px;
  }
}

/* Стекло включается только там, где браузер умеет размывать фон.
   Прозрачность и размытие — одна пара: без размытия подложка в 0.4
   пропускает светлый бок шара, и мелкий текст падает до контраста 1.3 при
   норме 4.5. Там, где backdrop-filter не поддержан или отключён (старые
   сборки Firefox, часть Android WebView, принудительная программная
   отрисовка), остаётся плотная подложка — ровно та, что была до стекла. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .layout-panel .pitch::before {
    background: rgba(7, 12, 10, 0.4);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .layout-panel .stage-footer {
    background: rgba(7, 12, 10, 0.4);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }
}