/* Макет C: та же вёрстка, что у A (подключается поверх a.css), но фон и
   фирменный блок взяты из мобильного приложения Casa del Billar —
   вертикальный градиент от почти чёрного к фирменному зелёному (зелёное
   отодвинуто ниже, чем в приложении: у телефона экран узкий и высокий, на
   широком мониторе те же стопы залили бы зеленью половину первого экрана),
   антиква
   в названии, золотая линейка под ним и зелёный акцент вместо золотого. */

.layout-c {
  /* акцент — фирменный зелёный приложения вместо золотого */
  --cdb-gold: #20b957;
  --cdb-gold-soft: #3ed172;
  --cdb-line: rgba(255, 255, 255, 0.12);
}

/* Фон приложения: тёмное вверху, фирменное зелёное внизу.
   Фотографии зала здесь нет намеренно — на градиенте шары читаются ярче.
   Псевдоэлемент описан целиком: в base.css его больше нет, и без своего
   `content` он бы вообще не создался. */
.layout-c .backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    #070c0a 0%,
    #101a16 46%,
    #173b25 82%,
    #0a6a2c 100%
  );
}

.layout-c .backdrop {
  background: none;
}

/* Фирменный блок — знак, название и город — центрируется по видимой ширине
   заголовка, как кикер в макете A и лоскут в макете D. Коробка <h1>
   занимает колонку целиком даже когда строка кончается левее, поэтому
   ширину самой длинной строки меряет alignToTitle() в app.js. */
.layout-c .pitch .lockup {
  width: min(100%, var(--cdb-title-width, 100%));
  justify-items: center;
}

.layout-c .pitch .lockup-sub {
  max-width: 100%;
  justify-content: center;
}

/* --- Правки под светлеющий книзу фон --- */

/* внизу градиент уходит в зелёный, поэтому подвалу нужна своя подложка */
.layout-c .stage-footer {
  background: rgba(6, 11, 9, 0.86);
}

.layout-c .deck-main:hover,
.layout-c .deck-card:hover,
.layout-c .deck-link:hover {
  border-color: rgba(32, 185, 87, 0.7);
}

/* кнопка действия — зелёная, текст на ней тёмный, как в приложении */
.layout-c .btn-primary {
  color: #06110b;
}

@media (max-width: 620px) {
  .lockup-sub {
    max-width: none;
  }
}

/* Низкое окно ноутбука. Фирменный блок макета C выше кикера макета A на
   полторы сотни пикселей, и при высоте окна меньше ~820 подвал уходил под
   сгиб: экран переставал быть одним. Ужимаем знак, название и вертикальные
   отступы — на мониторе от 900 всё остаётся как было. */
@media (max-height: 820px) {
  .layout-c {
    --cdb-mark: 72px;
    --cdb-mark-gap: 10px;
  }

  .layout-c .lockup-name {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
  }

  .layout-c .pitch {
    gap: 12px;
  }

  .layout-c .stage-main {
    gap: 20px;
    padding-bottom: 16px;
  }
}

/* Монитор 1366×768: в браузере остаётся около 660 px, и одного знака с
   названием уже не хватает — ужимаем заголовок и плитки цен. Ниже этого
   в один экран не влезает ничего: дальше пришлось бы выкидывать текст. */
@media (max-height: 700px) {
  .layout-c {
    --cdb-mark: 56px;
  }

  .layout-c .title {
    font-size: clamp(1.6rem, 3vw, 2.5rem);
  }

  .layout-c .deck {
    gap: 8px;
  }

  .layout-c .deck-main {
    gap: 8px;
    padding: 16px;
  }
}