/* Quiz Mafia Event — главная, точная копия quiz-mafia-event.ru.
   Значения сняты с живого сайта через прокси (getComputedStyle +
   исходник public/bitrix/templates/landing24/theme.css), не на глаз.
   Сборка секция за секцией — см. docs/QME-HOME-VERSTKA-RULES.md.
   Брейкпоинты как в оригинале (Bootstrap 4): 576 / 768 / 992 / 1200.
   Своя сетка с геометрией Bootstrap 4 (решение 2026-09-06). */

/* Сетка: контейнер, ряд и колонки с гаттерами 15px. */
.qm-container {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}
.qm-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.qm-col-12, .qm-col-md-6, .qm-col-lg-4 {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0 15px;
}
.qm-col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) { .qm-container { max-width: 540px; } }
/* 768: max-width 920, не Bootstrap 4 (720). Сознательно, ТЗ 2026-09-08. */
@media (min-width: 768px) {
  .qm-container { max-width: 920px; }
  .qm-col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
  .qm-container { max-width: 960px; }
  .qm-col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
}
@media (min-width: 1200px) { .qm-container { max-width: 1140px; } }

/* Изоляция от main.css: `.page__content section { padding: 60px 0 }`
   и при max-width 768px — 40px. Специфичность совпадала с `section.qm-*`,
   поэтому секции без своего padding получали чужие 40/60px. Селекторы
   секций ниже — `.page__content section.qm-*` (0,2,1) и всегда задают
   padding явно. */

/* ==========================================================
   1. HERO
   ========================================================== */
.page__content section.qm-hero {
  background: #000;
  padding: 7px 0 16px;
  overflow: visible;
}
.qm-hero__row {
  row-gap: 20px;
}
@media (min-width: 992px) {
  .qm-hero__text {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
    margin-left: 8.333333%;
  }
}

.qm-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
@media (min-width: 768px) {
  .qm-hero__text { text-align: left; }
}

.qm-hero__title {
  font-family: "Oswald", sans-serif;
  font-size: var(--qm-h1);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #fff;
  text-align: right;
  margin: 0 0 20px;
}
@media (min-width: 992px) {
  .qm-hero__title { margin-bottom: 30px; }
}

.qm-hero__lead {
  font-family: "Oswald", sans-serif;
  font-size: var(--qm-copy-size);
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
  text-align: left;
  margin: 0 0 20px;
}
@media (min-width: 992px) {
  .qm-hero__lead { margin-bottom: 35px; }
}

.qm-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 10px 0 12px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .qm-hero__buttons { justify-content: flex-start; }
}

.qm-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #dbdbdb;
  color: #dbdbdb;
  background: transparent;
  font-family: "Oswald", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px;
  white-space: nowrap;
}
.qm-hero__btn:hover,
.qm-hero__btn:focus {
  background: #dbdbdb;
  color: #383838;
  border-color: #dbdbdb;
}

.qm-hero__media {
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 768px) {
  .qm-hero__media { justify-content: flex-end; }
}
.qm-hero__media img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Quiz Mafia Event — секции 2, 3, 4 первой пачки.
   Фрагмент для вставки в public/assets/css/home.css после блока hero.
   Сетку qm-container, qm-row и колонки не дублировать: её даёт ведущий.
   Значения из theme.css при html font-size 14px и снимка home.html.
   В комментариях нет сочетаний, которые закрывают блок раньше времени. */

/* ==========================================================
   2. CLIENT BANNER
   ========================================================== */
.page__content section.qm-client-banner {
  background: hsl(220, 9%, 94%);
  padding: 0;
}
.qm-client-banner__wave {
  height: 70px;
  margin-top: -2px;
  margin-bottom: -2px;
  line-height: 0;
}
.qm-client-banner__wave svg {
  display: block;
  width: 100%;
  height: 100%;
}
.qm-client-banner__fill-a {
  fill: #000;
}
.qm-client-banner__fill-b {
  fill: hsl(220, 9%, 94%);
}
@media (min-width: 768px) {
  .qm-client-banner__wave {
    height: 80px;
  }
}
.qm-client-banner__body {
  padding: 60px 0 30px;
}
.qm-client-banner__text {
  margin: 0;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: inherit;
  color: inherit;
}

/* ==========================================================
   3. GAME FORMATS
   ========================================================== */
.page__content section.qm-game-formats {
  background: #000;
  padding: 30px 0 50px;
}
.qm-game-formats .qm-col-12 {
  display: flex;
  margin-bottom: 30px;
}
.qm-game-formats__card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  text-decoration: none;
}
.qm-game-formats__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qm-game-formats__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 10px;
  pointer-events: none;
}
.qm-game-formats__overlay::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.qm-game-formats__dim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(49, 53, 62, 0.8);
  opacity: 0;
  transition: opacity 0.2s ease-in;
}
.qm-game-formats__card:hover .qm-game-formats__dim,
.qm-game-formats__card:focus-within .qm-game-formats__dim {
  opacity: 1;
}
.qm-game-formats__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 20px;
}
.qm-game-formats__badge {
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  background: #31353e;
  padding: 4px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.qm-game-formats__badge--lead {
  font-size: 14px;
  font-weight: 500;
}
.qm-game-formats__badge span {
  color: #ff1f2a;
}
.qm-game-formats__title {
  margin: 0 0 10px;
  font-family: "Oswald", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}
.qm-game-formats__text {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  text-transform: none;
  color: rgba(255, 255, 255, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .qm-game-formats__dim {
    transition: none;
  }
}

/* ==========================================================
   4. PACKAGES
   ========================================================== */
.page__content section.qm-packages {
  padding: 100px 0;
  background-color: #000;
  background-image: url("/upload/landing/dce/uc71c2byq82e140ha15eoi015ozkaiji.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
}
@media (min-width: 768px) {
  .page__content section.qm-packages {
    background-attachment: fixed;
  }
}

/* Карточки пакетов Мафии переведены на общий компонент 11.09.2026
   (пункт 2 правок владельца): разметку даёт site/partials/tariff-card.blade.php,
   стили — секция «ЕДИНЫЕ КАРТОЧКИ САЙТА» в конце этого файла. Прежний набор
   .qm-packages__row / __col / __frame / __card / __title / __subtitle / __rule /
   __price / __list / __action / __btn вместе с мобильной раскладкой «полосой»
   (заголовок и цена в строку, подпись «2 часа» была скрыта) удалён: эта
   раскладка и была расхождением с оригиналом, на которое пожаловался владелец.

   Ниже остались только .qm-tariff-btn / .qm-tariff-action: на них ещё держится
   карточка /veduschij_i_dj, которая живёт в чужой зоне (unique/partials/bodies). */
.qm-tariff-btn {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  padding: 8px 35px;
  color: #111;
  background: transparent;
  border: 1px solid #ff1f2a;
  border-radius: 0;
  transition: 0.2s ease;
  cursor: pointer;
}
.qm-tariff-btn:hover,
.qm-tariff-btn:focus {
  color: #fff;
  background: #ff1f2a;
  border-color: #ff1f2a;
}
.qm-tariff-action {
  margin-top: auto;
  padding-top: 16px;
}

/* 5. Рекомендации. Сохранён ручной паттерн карточек оригинала.
   Серый фон восстановлен по согласованному решению от 2026-09-06.
   Внешние отступы секции сняты по ТЗ 2026-09-08: между блоками
   отдельных полей не нужно. padding секции задан явно, чтобы не
   всплыли 40/60px из main.css (.page__content section). */
.page__content section.qm-recommendations {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  font-family: "Oswald", sans-serif;
}
.qm-recommendations__body {
  background: #eeeff1;
  padding: 50px 20px;
  margin: 0;
}
.qm-recommendations__title {
  margin: 0 0 30px;
  color: #000;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}
.qm-recommendations .quiz-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.qm-recommendations .quiz-service-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "title" "text" "price" "btn";
  justify-items: center;
  min-width: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  padding: 30px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform .3s, box-shadow .3s;
}
.qm-recommendations .quiz-service-card:hover,
.qm-recommendations .quiz-service-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 6px 28px rgba(220, 53, 69, 0.16);
}
.qm-recommendations .quiz-service-card h3 {
  grid-area: title;
  margin: 0 0 15px;
  min-height: 1.2em;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  text-transform: uppercase;
}
.qm-recommendations .quiz-service-card p {
  grid-area: text;
  margin: 0 0 20px;
  justify-self: stretch;
  color: #444;
  font-size: 16px;
  line-height: 1.6;
}
.qm-recommendations .price {
  grid-area: price;
  align-self: end;
  color: #28a745;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.qm-recommendations .quiz-btn {
  grid-area: btn;
  display: inline-block;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  color: #dc3545;
  border: 2px solid #dc3545;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  transition: background .3s, color .3s;
}
.qm-recommendations .quiz-btn:hover,
.qm-recommendations .quiz-btn:focus-visible {
  background: #dc3545;
  color: #fff;
}
.qm-recommendations .quiz-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}
.qm-recommendations__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .qm-recommendations .quiz-services-grid { grid-template-columns: 1fr; gap: 20px; }
  .qm-recommendations__body { padding: 30px 15px; margin: 0; }
  .qm-recommendations__title { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .qm-recommendations .quiz-service-card,
  .qm-recommendations .quiz-btn { transition: none; }
  .qm-recommendations .quiz-service-card:hover,
  .qm-recommendations .quiz-service-card:focus-within { transform: none; }
}

/* 6. Баннер ведущих и исходные переходы фона. */
.page__content section.qm-hosts-banner { background: hsl(220, 9%, 94%); font-family: "Oswald", sans-serif; padding: 0; }
.qm-hosts-banner__spacer { height: 70px; background: #000; }
.qm-hosts-banner__wave { height: 70px; margin: -2px 0; line-height: 0; }
.qm-hosts-banner__wave svg { display: block; width: 100%; height: 100%; }
.qm-hosts-banner__black { fill: #000; }
.qm-hosts-banner__gray { fill: hsl(220, 9%, 94%); }
.qm-hosts-banner__body { padding: 0; }
.qm-hosts-banner__title {
  margin: 0;
  padding-bottom: 1px;
  color: #000;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
@media (min-width: 768px) {
  .qm-hosts-banner__spacer, .qm-hosts-banner__wave { height: 80px; }
}

/* Quiz Mafia Event — секции 7 и 8.
   Фрагмент для вставки в public/assets/css/home.css после уже перенесённых секций.
   Общую сетку qm-container / qm-row / колонки не дублировать.
   Значения из theme.css (html 14px) и снимка home.html.
   Классы только qm-: не пересекаются с .overlay, .lightbox и data-gallery движка. */

/* ==========================================================
   7. HOSTS
   ========================================================== */
.page__content section.qm-hosts {
  background: #000;
  padding: 30px 0;
}
.qm-hosts__row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.qm-hosts__col {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .qm-hosts__row {
    justify-content: center;
  }
  .qm-hosts__col {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}
.qm-hosts__card {
  text-align: center;
  padding-top: 10px;
}
.qm-hosts__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 30px;
}
.qm-hosts__name {
  margin: 0 0 20px;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
}
.qm-hosts__text {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 1px;
  color: #fff;
}

/* ==========================================================
   8. GALLERY
   ========================================================== */
.page__content section.qm-gallery {
  background: #000;
  padding: 0;
}
.qm-gallery__triple {
  display: flex;
  flex-wrap: wrap;
}
.qm-gallery__cell {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
  line-height: 0;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.qm-gallery__cell:focus {
  outline: 2px solid #ff1f2a;
  outline-offset: -2px;
  z-index: 1;
}
.qm-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.qm-gallery__cell:hover .qm-gallery__img,
.qm-gallery__cell:focus .qm-gallery__img {
  transform: scale(1.1);
}

.qm-gallery__triple .qm-gallery__cell {
  aspect-ratio: 1080 / 718;
}
@media (min-width: 576px) {
  .qm-gallery__triple .qm-gallery__cell {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

.qm-gallery__mosaic {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.qm-gallery__stack,
.qm-gallery__tall {
  width: 100%;
}
.qm-gallery__cell--half {
  aspect-ratio: 1080 / 810;
}
.qm-gallery__cell--tall {
  aspect-ratio: 1080 / 722;
}
@media (min-width: 768px) {
  .qm-gallery__mosaic {
    min-height: 540px;
    max-height: 810px;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .qm-gallery__stack,
  .qm-gallery__tall {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .qm-gallery__cell--half,
  .qm-gallery__cell--tall {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 0;
    height: 50%;
  }
  .qm-gallery__cell--tall {
    height: 100%;
  }
}

html.qm-gallery-is-open {
  overflow: hidden;
}

/* 9. Помощь с выбором игры. Геометрия исходных колонок lg-3 / lg-6. */
.page__content section.qm-call-help { background: #000; padding: 100px 0 50px; color: #fff; }
.qm-call-help__row { align-items: center; justify-content: center; }
.qm-call-help__media img { display: block; width: 200px; max-width: 100%; height: auto; margin: 0 auto 30px; }
.qm-call-help__copy { text-align: center; }
.qm-call-help__copy h2 { margin: 0 0 10px; font: 700 30px/1.2 "Oswald", sans-serif; text-transform: uppercase; color: #fff; }
.qm-call-help__phone { margin: 0 0 10px; font: 700 30px/1.2 "Oswald", sans-serif; }
.qm-call-help__phone a { color: #d32f2f; text-decoration: none; }
.qm-call-help__phone a:hover { text-decoration: underline; }
.qm-call-help__phone a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.qm-call-help__text { margin: 0 0 25px; font: 400 30px/1.2 "Oswald", sans-serif; }
@media (min-width: 992px) {
  .qm-call-help__media { flex: 0 0 25%; max-width: 25%; margin-left: 8.333333%; }
  .qm-call-help__media img { width: auto; margin-bottom: 0; }
  .qm-call-help__copy { flex: 0 0 50%; max-width: 50%; text-align: left; }
}

/* 10. Кнопки связи. Цвета и размеры из исходного блока b509. */
.page__content section.qm-contact-actions { background: #000; padding: 0; }
.qm-contact-actions__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; padding-top: 20px; padding-bottom: 25px; }
.qm-contact-actions__button { display: inline-block; box-sizing: border-box; max-width: 100%; padding: 8px 35px; border: 1px solid transparent; border-radius: 3px; font: 700 15px/1.4 "Oswald", sans-serif; text-align: center; text-transform: uppercase; text-decoration: none; transition: background-color .2s; }
.qm-contact-actions__button--phone { background: hsl(0, 0%, 86%); color: hsl(0, 0%, 22%); }
.qm-contact-actions__button--phone:hover { background: hsl(0, 0%, 96%); }
.qm-contact-actions__button--max { background: hsl(259, 100%, 61%); color: hsl(259, 100%, 99%); }
.qm-contact-actions__button--max:hover { background: hsl(259, 100%, 71%); }
.qm-contact-actions__button--telegram { background: hsl(212, 100%, 64%); color: #fff; }
.qm-contact-actions__button--telegram:hover { background: hsl(212, 100%, 74%); }
.qm-contact-actions__button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .qm-contact-actions__button { transition: none; } }

/* 11. Комбинации: исходный ручной список и согласованный серый фон. */
/* 2026-09-08 (правка владельца): секция сама была прозрачной, а
   padding:50px 0 на ней + margin:50px 0 на __body давали 100px белой
   полосы сверху/снизу (просвечивал фон страницы, не секции) — тот же
   класс бага, что уже чинили в qm-recommendations. Секция — 0, серый фон
   и его собственный padding остаются только на __body. */
.page__content section.qm-game-combos { padding: 0; }
.qm-game-combos__body { padding: 50px 20px; margin: 0; background: #eeeff1; }
.qm-game-combos h2 { margin: 0 0 30px; color: #000; font: 700 32px/1.2 "Oswald", sans-serif; text-align: center; text-transform: uppercase; }
.qm-game-combos__list { list-style: none; padding: 0; max-width: 800px; margin: 0 auto; }
.qm-game-combos__list li { background: #fff; padding: 25px; margin: 20px 0; border: 1px solid #e0e0e0; color: #333; font: 400 16px/1.6 "Oswald", sans-serif; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.qm-game-combos__list strong { color: #000; font-size: 18px; }
.qm-game-combos__list a { color: #ff1f2a; text-decoration: underline; font-weight: 600; }
.qm-game-combos__list a:hover { color: #d40000; text-decoration: none; }
.qm-game-combos__list a:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
@media (max-width: 768px) {
  .qm-game-combos__body { padding: 30px 15px; margin: 0; }
  .qm-game-combos h2 { font-size: 28px; }
}

.qm-gallery-lb {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
}
.qm-gallery-lb[hidden] {
  display: none;
}
.qm-gallery-lb__dialog {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  outline: none;
}
.qm-gallery-lb__figure {
  margin: 0;
  max-width: 90vw;
  max-height: 90vh;
}
.qm-gallery-lb__img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.qm-gallery-lb__close,
.qm-gallery-lb__prev,
.qm-gallery-lb__next {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 28px;
  padding: 0;
}
.qm-gallery-lb__close:hover,
.qm-gallery-lb__prev:hover,
.qm-gallery-lb__next:hover,
.qm-gallery-lb__close:focus,
.qm-gallery-lb__prev:focus,
.qm-gallery-lb__next:focus {
  background: rgba(255, 255, 255, 0.28);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.qm-gallery-lb__close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  z-index: 2;
}
.qm-gallery-lb__prev,
.qm-gallery-lb__next {
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  z-index: 2;
}
.qm-gallery-lb__prev {
  left: 12px;
}
.qm-gallery-lb__next {
  right: 12px;
}

@media (max-width: 576px) {
  .qm-gallery-lb__prev,
  .qm-gallery-lb__next {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  .qm-gallery-lb__prev {
    left: 6px;
  }
  .qm-gallery-lb__next {
    right: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qm-gallery__img {
    transition: none;
  }
  .qm-gallery__cell:hover .qm-gallery__img,
  .qm-gallery__cell:focus .qm-gallery__img {
    transform: none;
  }
}

/* ==========================================================
   ФРАГМЕНТ для public/assets/css/home.css — секции 12 и 13.
   Вставлять ПОСЛЕ блока сетки и секций 1–11, порядок секций в файле
   тот же, что на странице. Сетку (qm-container, qm-row, qm-col-N)
   фрагмент только использует и НЕ переопределяет — она за ведущим.

   Значения сняты с оригинала, не на глаз:
   - цвета и размеры — из инлайновых custom properties снимка
     resources/orig-site/home.html (блоки b345, b353, b357, b363,
     b365, b369, b371, b373, b375, b389);
   - утилиты g-N переведены в пиксели по базе rem: в
     kernel_landing_grid ровно одно правило html с font-size 14px,
     медиазапросов и JS-пересчёта базы в снимке нет, поэтому
     g-pa-30 это 30px, g-font-size-26 это 26px и так далее;
   - брейкпоинт 576px взят из правил l-d-xs-none и l-d-md-none,
     которыми оригинал переключает две копии блока FAQ.

   Собственный CSS блоков landing-block-faq в локальном зеркале
   отсутствует (нет ни в theme.css, ни в трёх файлах bitrix cache,
   ни в 14 инлайновых style снимка) — геометрия иконки, анимация
   раскрытия и отступы карточек здесь реконструированы. Список
   непроверенного — в RESULT-12-13.md.
   ========================================================== */

/* ==========================================================
   12. ПРАВИЛА ИГРЫ МАФИЯ
   ========================================================== */
.page__content section.qm-rules {
  background: #000;
  padding: 0;
}

.qm-rules__band {
  background: #eeeff1;
  padding: 30px 0;
}

.qm-rules__heading {
  font-family: "Oswald", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  text-align: center;
  margin: 0;
}

.qm-rules__body {
  background: #000;
}

.qm-rules__intro {
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  padding: 60px 0 30px;
  margin: 0;
}

.qm-rules__cards {
  padding-bottom: 20px;
}

/* Карточка правил: фон и внутренние отступы как в оригинале,
   позиционирование нужно иконке в правом верхнем углу. */
.qm-rules__card {
  position: relative;
  background: #4a4a4a;
  padding: 30px;
  margin: 20px auto;
}

.qm-rules__title {
  margin: 0;
}

.qm-rules__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.qm-rules__toggle:hover .qm-rules__label {
  color: #000;
}

.qm-rules__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.qm-rules__label {
  display: block;
}

/* Иконка-кружок: в оригинале два знака Font Awesome (шеврон и крест)
   в сером кружке. Font Awesome страница не грузит, поэтому знаки
   нарисованы инлайновым SVG и переключаются по aria-expanded. */
.qm-rules__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #b5b5b5;
}

.qm-rules__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qm-rules__toggle[aria-expanded="true"] .qm-rules__icon-more,
.qm-rules__toggle[aria-expanded="false"] .qm-rules__icon-less {
  display: none;
}

.qm-rules__panel {
  margin-top: 35px;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.qm-rules__panel p {
  margin: 0 0 14px;
}

.qm-rules__panel ol,
.qm-rules__panel ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.qm-rules__panel li {
  margin-bottom: 4px;
}

.qm-rules__panel > :last-child {
  margin-bottom: 0;
}

.qm-rules__subhead {
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  margin: 0;
}

/* ==========================================================
   13. ОТВЕТЫ НА ЧАСТЫЕ ВОПРОСЫ
   ========================================================== */
.page__content section.qm-faq {
  background: #000;
  padding: 0;
}

.qm-faq__band {
  background: #eeeff1;
  padding: 30px 0;
}

.qm-faq__heading {
  font-family: "Oswald", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  text-align: center;
  margin: 0;
}

.qm-faq__body {
  background: #000;
  padding: 30px 0;
}

.qm-faq__item + .qm-faq__item {
  margin-top: 10px;
}

.qm-faq__item {
  border: 1px solid #2a2a2a;
  background: #111;
}

.qm-faq__question {
  margin: 0;
}

/* До 576px оригинал показывал вторую копию блока: Montserrat 18.
   От 576px — первую: Oswald 26. 14.09.2026 владелец: семейство одно
   на всех ширинах — Oswald; лесенка 18→26 как у остальных FAQ. */
.qm-faq__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: #e6e6e6;
  font-family: "Oswald", sans-serif;
  font-size: var(--qm-faq);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.qm-faq__toggle:hover,
.qm-faq__toggle:hover .qm-faq__label {
  color: #fff;
}

.qm-faq__toggle:focus-visible {
  outline: 2px solid #ff1f2a;
  outline-offset: 2px;
}

.qm-faq__toggle[aria-expanded="true"] {
  color: #fff;
  background: #1a1a1a;
}

.qm-faq__num {
  flex: 0 0 auto;
  color: #ff1f2a;
  font-weight: 700;
}

.qm-faq__label {
  flex: 1 1 auto;
  min-width: 0;
}

.qm-faq__caret {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid #ff1f2a;
  border-bottom: 2px solid #ff1f2a;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
  pointer-events: none;
}

/* flex-start, а не center: в вопросах FAQ номер и текст — разные узлы
   (`<span>1.</span>` + голый текстовый узел), голый текст во flex становится
   анонимным элементом. При align-items:center на вопросе в три строки номер
   и стрелка уезжали к средней строке — блок выглядел кривым
   (скриншот владельца, /standup на 430px). Теперь оба держатся первой строки. */
button:has(> .qm-faq__caret),
summary:has(> .qm-faq__caret) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* Оптическая привязка стрелки к середине первой строки: половина кегля.
   В em, чтобы не разъезжалось при разных размерах шрифта у пакетов. */
button:has(> .qm-faq__caret) > .qm-faq__caret,
summary:has(> .qm-faq__caret) > .qm-faq__caret {
  margin-top: 0.55em;
}

.qm-faq__toggle[aria-expanded="true"] .qm-faq__caret,
[aria-expanded="true"] > .qm-faq__caret,
details[open] > summary > .qm-faq__caret {
  transform: translateY(2px) rotate(225deg);
}

.qm-faq__panel {
  border-top: 1px solid #2a2a2a;
}

/* Вопрос и ответ FAQ — одно семейство Oswald на всех ширинах. */
.qm-faq__answer {
  padding: 16px 16px 20px;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: var(--qm-copy-size);
  line-height: 1.5;
}

@media (min-width: 576px) {
  .qm-faq__toggle {
    font-family: "Oswald", sans-serif;
  }

  .qm-faq__answer {
    font-family: "Oswald", sans-serif;
  }
}

/* ==========================================================
   Волны-переходы между фонами секций 12 и 13
   ========================================================== */
.qm-wave {
  display: block;
  height: 70px;
  margin: -2px 0;
  line-height: 0;
  overflow: hidden;
}

.qm-wave__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.qm-wave--to-light .qm-wave__first {
  fill: #000;
}

.qm-wave--to-light .qm-wave__second {
  fill: #eeeff1;
}

.qm-wave--to-dark .qm-wave__first {
  fill: #eeeff1;
}

.qm-wave--to-dark .qm-wave__second {
  fill: #000;
}

@media (min-width: 768px) {
  .qm-wave {
    height: 80px;
  }

  .qm-wave--tall {
    height: 150px;
  }
}

/* ==========================================================
   Раскрытие панелей — общее для секций 12 и 13
   ========================================================== */

/* FAQ в разметке закрыт (hidden + aria-expanded false). Правила секции 12
   без JS по-прежнему открыты, скрипт сворачивает их при инициализации.
   hidden не должен перебиваться display у панелей. */
.qm-rules__panel[hidden],
.qm-faq__panel[hidden] {
  display: none;
}

.qm-rules__panel:not([hidden]),
.qm-faq__panel:not([hidden]) {
  animation: qm-disclosure-in 0.2s ease-out;
}

@keyframes qm-disclosure-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qm-rules__panel:not([hidden]),
  .qm-faq__panel:not([hidden]) {
    animation: none;
  }
  .qm-faq__caret {
    transition: none;
  }
}

/* Quiz Mafia Event — секции 14 и 15.
   Фрагмент для вставки в public/assets/css/home.css после уже перенесённых секций.
   Общую сетку qm-container / qm-row / колонки не дублировать.
   Значения из theme.css при html 14px и снимка home.html.
   Классы только qm-: не пересекаются с data-carousel и s-reviews движка. */

/* ==========================================================
   14. REVIEWS (Yandex Maps widget)
   ========================================================== */
.page__content section.qm-reviews {
  background: #000;
  padding: 0;
}
.qm-reviews__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}
.qm-reviews__box {
  width: 560px;
  max-width: 100%;
  height: 800px;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
}
.qm-reviews__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-sizing: border-box;
  background: #fff;
}
.qm-reviews__credit {
  box-sizing: border-box;
  text-decoration: none;
  color: #b3b3b3;
  font-size: 10px;
  font-family: sans-serif;
  padding: 0 16px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-height: 14px;
  white-space: nowrap;
}
.qm-reviews__credit:hover,
.qm-reviews__credit:focus {
  color: #d0d0d0;
  outline: 1px solid #d0d0d0;
  outline-offset: 2px;
}

/* ==========================================================
   15. CLIENTS CAROUSEL
   ========================================================== */
.page__content section.qm-clients {
  background: #fff;
  padding: 0;
}
.qm-clients__title {
  color: #111;
  font-family: "Oswald", sans-serif;
  margin: 0 0 40px;
  padding-top: 30px;
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.6;
  color: #000;
}
.qm-container.qm-clients__frame {
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 35px;
  padding-right: 35px;
}
.qm-clients__slider {
  position: relative;
}
.qm-clients__viewport {
  overflow: hidden;
  outline: none;
}
.qm-clients__viewport:focus {
  outline: 2px solid #ff0a0a;
  outline-offset: 2px;
}
.qm-clients__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  transform: translate3d(var(--qm-clients-x, 0px), 0, 0);
  transition: transform 0.2s ease-in;
}
.qm-clients__track.is-jump {
  transition: none;
}
.qm-clients__slide {
  box-sizing: border-box;
  flex: 0 0 var(--qm-clients-slide-w, 50%);
  width: var(--qm-clients-slide-w, 50%);
  max-width: var(--qm-clients-slide-w, 50%);
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qm-clients__img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid transparent;
  transition: border-color 0.2s ease-in;
}
.qm-clients__img:hover,
.qm-clients__slide:focus-within .qm-clients__img {
  border-color: #bbb;
}
.qm-clients__prev,
.qm-clients__next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 45px;
  height: 45px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #bbb;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 0.2s ease-in;
}
.qm-clients__prev {
  left: -35px;
}
.qm-clients__next {
  right: -35px;
}
.qm-clients__prev:hover,
.qm-clients__next:hover,
.qm-clients__prev:focus,
.qm-clients__next:focus {
  color: #ff0a0a;
  outline: 2px solid #ff0a0a;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .qm-clients__track,
  .qm-clients__img,
  .qm-clients__prev,
  .qm-clients__next {
    transition: none;
  }
}

/* Quiz Mafia Event — hardening лайтбокса секции 8.
   Дописать в конец public/assets/css/home.css (после текущих правил .qm-gallery-lb).
   Не заменяет сетку, hover-zoom и внешний вид контролов.
   Позже по каскаду перекрывает только z-index: 260 у .qm-gallery-lb. */

html.qm-gallery-is-open,
html.qm-gallery-is-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

.qm-gallery-lb {
  z-index: 1120;
}

.qm-gallery-lb__img.is-error {
  display: none;
}
.qm-gallery-lb__status {
  margin: 0;
  padding: 24px 16px;
  color: #fff;
  font: 400 18px/1.4 "Oswald", sans-serif;
  text-align: center;
}
.qm-gallery-lb__status[hidden] {
  display: none;
}

/* Quiz Mafia Event — адаптив секций 14–15 (карусель клиентов).
   Дописать в public/assets/css/home.css ПОСЛЕ текущего фрагмента секции 15
   (или заменить одноимённые правила из OUTPUT/next-14-15/sections.css).
   Не трогает .qm-container / .qm-row / колонки контракта и шапку.
   Глобального overflow-x: hidden нет. */

/* Стрелки 45px стоят left/right: -35px от трека.
   В снимке с 768px рамка g-px-0--md, поле контейнера на 768 и 992
   меньше 35px — кнопки вылезают за вьюпорт.
   Оставляем горизонтальный паддинг 35px на всех ширинах: стрелки
   остаются в поле рамки, лента чуть уже, чем у g-px-0--md. */
@media (min-width: 768px) {
  .qm-container.qm-clients__frame {
    padding-left: 35px;
    padding-right: 35px;
  }
}

/* На 390px левый край стрелки совпадает с краем вьюпорта.
   outline-offset: 2px давал бы вылет кольца фокуса. */
.qm-clients__prev:hover,
.qm-clients__next:hover,
.qm-clients__prev:focus,
.qm-clients__next:focus {
  outline-offset: -2px;
}

/* ==========================================================
   ЕДИНЫЕ КАРТОЧКИ САЙТА — волна 4, поток 3, 11.09.2026
   ----------------------------------------------------------
   Пункт 2 правок владельца: карточки цен на главной привести к виду
   оригинала (resources/orig-site/home.html, block-11-three-cols-fix-tariffs),
   отступы между строк сделать плотнее оригинала, длительность вывести
   красным. Получившаяся карточка объявлена эталоном и применена ко всем
   тарифным блокам сайта (пункты 5, 7, 34 того же списка).

   Файл home.css подключён в layouts/app.blade.php на всех страницах, поэтому
   набор живёт здесь, а не в CSS отдельной страницы. Разметку рисуют партиалы
   site/partials/tariff-card.blade.php и site/partials/service-card.blade.php.

   Ряд выравнивается через subgrid: карточка занимает фиксированное число
   строк родительской сетки, поэтому заголовок, цена, список и кнопка стоят
   на одной высоте у всех карточек ряда (правило 6 чек-листа
   docs/QME-WORKING-RULES.md). До этой правки на /quiz цена карточки
   МУЗЫКАЛЬНОЕ ЛОТО стояла на 51px выше, чем у соседней COMEDY QUIZ SHOW.
   Там, где subgrid не поддержан, карточки просто перестают выравниваться
   между собой — вёрстка не ломается.

   Зазор между рядами даёт margin-bottom карточки, а не row-gap сетки:
   row-gap у subgrid-родителя раздвинул бы и строки внутри карточки.
   ========================================================== */

/* Длительность красным: «2 часа», «1,5-2 часа», «3 ЧАСА ИГРЫ».
   Подставляет партиал site/partials/qm-hours.blade.php. */
.qm-hours {
  color: #ff1f2a;
}

/* ---------- Карточка цены ---------- */
.qm-tcards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}
.qm-tcard {
  grid-row: span 7;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  margin-bottom: 20px;
  /* Прозрачная рамка плюс background-clip повторяют рамку оригинала
     (article.g-brd-around.g-pa-10 вокруг серого g-bg-gray-light-v5),
     но одним элементом: subgrid работает только у прямого потомка сетки. */
  padding: 20px 18px 16px;
  border: 8px solid transparent;
  background: #eff0f2;
  background-clip: padding-box;
  box-shadow: 0 0 0 1px #f7f7f7, 1px 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #111;
  font-family: "Oswald", sans-serif;
}
.qm-tcard__title {
  margin: 0 0 4px;
  font: 600 21px/1.2 "Oswald", sans-serif;
  text-transform: uppercase;
  color: #111;
}
.qm-tcard__hours {
  margin: 0;
  font: 500 15px/1.35 "Oswald", sans-serif;
  color: #ff1f2a;
}
.qm-tcard__rule {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid #d5d8dd;
  margin: 7px 0;
}
.qm-tcard__rule--tight {
  margin: 7px 0 0;
}
.qm-tcard__pricebox {
  margin: 7px 0;
}
.qm-tcard__price {
  margin: 0;
  font: 700 32px/1.1 "Oswald", sans-serif;
  color: #111;
}
/* «по договорённости», «обсуждается» — цифры нет, кегль цены не нужен. */
.qm-tcard__price--soft {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: #4a4a4a;
}
.qm-tcard__price-note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #555;
}
.qm-tcard__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.qm-tcard__list li {
  margin: 0;
  padding: 7px 2px;
  border-bottom: 1px solid #d5d8dd;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: #2b2b2b;
}
.qm-tcard__list li:last-child {
  border-bottom: 0;
}
/* Кнопка тянется на всю высоту своей строки сетки: иначе подпись в две
   строки («Заказать ведущего и диджея») делает одну кнопку выше соседних,
   и верхние края в ряду расходятся на 20px — правило 6 чек-листа
   docs/QME-WORKING-RULES.md. Ширина остаётся по содержимому. */
.qm-tcard__action {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 0;
  padding-top: 13px;
}
.qm-tcard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%;
  padding: 9px 22px;
  border: 1px solid #ff1f2a;
  border-radius: 0;
  background: transparent;
  color: #111;
  font: 600 14px/1.35 "Oswald", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.qm-tcard__btn:hover,
.qm-tcard__btn:focus-visible {
  background: #ff1f2a;
  color: #fff;
}
.qm-tcard__btn:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .qm-tcards--n2,
  .qm-tcards--n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .qm-tcards--n3,
  .qm-tcards--n5,
  .qm-tcards--n6,
  .qm-tcards--n7,
  .qm-tcards--n8,
  .qm-tcards--n9 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .qm-tcards--n1 {
    max-width: 460px;
  }
  .qm-tcard {
    padding: 26px 22px 20px;
  }
  .qm-tcard__title {
    font-size: 24px;
  }
  .qm-tcard__hours {
    font-size: 16px;
  }
  .qm-tcard__price {
    font-size: 36px;
  }
  .qm-tcard__list li {
    font-size: 16px;
    padding: 8px 2px;
  }
}

/* Ряд пакетов главной повторяет сетку оригинала: первые две карточки
   по 50 процентов, остальные три по 33 (col-lg-6 и col-lg-4 у Bitrix).
   Шесть колонок дают обе ширины без второго контейнера. */
@media (min-width: 992px) {
  .qm-tcards--packages {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .qm-tcards--packages .qm-tcard--wide {
    grid-column: span 3;
  }
  .qm-tcards--packages .qm-tcard--third {
    grid-column: span 2;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .qm-tcards--packages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Карточка услуги: иконка, текст, цена, кнопка ----------
   Эталон — карточки оригинала .quiz-service-card и .quiz-super-card
   (см. resources/orig-site/quiz.html, стили в resources/orig-site/bunker.html).
   Пять строк сетки: иконка, заголовок, текст, цена, кнопка. Пустая строка
   схлопывается в ноль, если её нет ни у одной карточки ряда. */
.qm-scards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 30px;
  row-gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .qm-scards {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}
.qm-scard {
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  margin-bottom: 30px;
  padding: 25px 15px;
  background: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-family: "Oswald", sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 768px) {
  .qm-scard {
    padding: 30px 20px;
  }
  .qm-scard--icon {
    padding: 32px 18px 28px;
  }
}
.qm-scard:hover,
.qm-scard:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 6px 28px rgba(255, 31, 42, 0.16);
}
.qm-scard__icon {
  margin: 0 0 14px;
  font-size: 38px;
  line-height: 1;
}
.qm-scard__title {
  margin: 0 0 12px;
  font: 700 22px/1.2 "Oswald", sans-serif;
  text-transform: uppercase;
  color: #000;
}
@media (min-width: 768px) {
  .qm-scard__title {
    font-size: 24px;
  }
  .qm-scard--icon .qm-scard__title {
    font-size: 22px;
  }
}
.qm-scard__text {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #444;
}
@media (min-width: 768px) {
  .qm-scard__text {
    font-size: 16px;
  }
  .qm-scard--icon .qm-scard__text {
    font-size: 15px;
  }
}
/* Цена карточки услуги. Отдельный класс и никакого правила вида
   «.…-cards__card p»: раньше цена проигрывала общему правилу абзаца по
   специфичности и вместо 20px печаталась 16px серым
   (жалоба владельца по /kubinskaya-vecherinka, пункт 34).
   Цвет — акцент сайта, а не бутстраповский success #28a745 из оригинала:
   так уже было решено 2026-09-08 (правило 13.3, см. комментарий в
   qme-wave3-chatgpt1.css) для тех же карточек на страницах chatgpt1. */
.qm-scard__price {
  margin: 0 0 18px;
  font: 700 20px/1.3 "Oswald", sans-serif;
  color: var(--accent, #ff1f2a);
}
.qm-scard__action {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 0;
}
.qm-scard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%;
  padding: 12px 26px;
  border: 2px solid #ff1f2a;
  border-radius: 0;
  background: transparent;
  color: #ff1f2a;
  font: 600 15px/1.35 "Oswald", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.qm-scard__btn:hover,
.qm-scard__btn:focus-visible {
  background: #ff1f2a;
  color: #fff;
}
.qm-scard__btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}
.qm-scards-cta {
  margin: 6px 0 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .qm-tcard__btn,
  .qm-scard,
  .qm-scard__btn {
    transition: none;
  }
  .qm-scard:hover,
  .qm-scard:focus-within {
    transform: none;
  }
}