/* ==========================================================================
   ПЕРЕПЛЁТ · Main — раскладки блоков главной страницы (ключ `b2c`)
   Подключается ПОСЛЕ tokens → base → components → blocks → frames.
   Здесь только то, чего нет на НГ-странице: афиша, «чем отличаемся»,
   дела без переворота, лента эмоций, мостик для компаний, финальная полоса.
   Кегли и интерлиньяжи — только токены (DESIGN-SYSTEM.md, раздел 5).
   ========================================================================== */

/* ==========================================================
   HERO — квадратная афиша дела в первом полароиде (.polaroid--square)
   ========================================================== */
.hero__gallery { min-height: 34rem; }
.hero__photo--1 { width: min(62%, 26rem); left: 0; top: -10%; }
.hero__photo--2 { width: min(76%, 32rem); right: 0; top: 46%; }
.hero__tag { top: 96%; left: -14%; }
.hero__stamp { right: 0; bottom: -14%; }
/* На десктопе обёртка не создаёт бокс: фото и штамп остаются на галерее. */
.hero__strip { display: contents; }
@media (max-width: 1080px) { .hero__gallery { min-height: 30rem; } }
/* На мобилке скроллятся только фото. Записка стоит под ними, перед цифрами. */
@media (max-width: 899px) {
  .hero__gallery {
    display: block !important;
    overflow: visible;
    touch-action: auto;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  .hero__strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 1rem var(--gutter) 0.5rem;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    scrollbar-width: none;
    align-items: flex-start;
  }
  .hero__strip::-webkit-scrollbar { display: none; }
  .hero__gallery .hero__secret {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    width: min(22rem, 100%);
    margin: 0.75rem 0 0;
    transform: rotate(-1deg);
  }
  .hero__gallery .hero__secret.is-open {
    width: min(22rem, 100%);
    transform: rotate(0deg);
  }
}

/* Цифры как в макете Коли: крупная строка, короткая подпись снизу */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(38px, 4vw, 72px);
  margin: 0 0 1.75rem;
}
.hero__facts li {
  display: flex;
  min-width: 130px;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.hero__facts b {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.1vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
}
.hero__facts span {
  max-width: 9rem;
  color: var(--fg-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .hero__facts { gap: 20px 34px; }
  .hero__facts li { min-width: 105px; }
  .hero__facts b { font-size: 38px; }
  .hero__facts span { max-width: 130px; font-size: 10px; }
}

/* Записка раскрывается по клику. Вид бирки остаётся тёмным. */
.hero__secret {
  width: 15rem;
  text-align: left;
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.hero__secret.is-open {
  width: 22rem;
  transform: rotate(0deg);
}
.hero__secret.is-open .evidence-tag__barcode { display: none; }
.hero__secret .evidence-tag__text { text-transform: none; letter-spacing: 0; }

/* Лента ограждения: вся волна, уменьшенная пропорционально, одна и та же на всех стыках */
.crime-tape {
  position: relative;
  z-index: 5;
  height: 6.5rem;
  margin: -3.25rem -6vw;
  pointer-events: none;
  background: url("/ny/assets/ui/crime-tape.webp") repeat-x center / auto 100%;
  transform: rotate(-1.35deg);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}
.crime-tape--alt { transform: rotate(1.35deg) scaleX(-1); }
.crime-tape img { display: none; }

/* ==========================================================
   АФИША (schedule) — светлая секция, карточки-листы
   ========================================================== */
.schedule__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.schedule__head .lead { max-width: none; }
.schedule__more {
  display: flex;
  justify-content: flex-start;
  margin: -0.75rem 0 0.35rem;
  color: var(--paper-fg-muted);
}

/* Переключатель города — две «клавиши» из компонента кнопок */
.city-switch { display: inline-flex; gap: 0.5rem; padding: 0.35rem; border: 1px solid var(--paper-line, rgba(0,0,0,0.18)); background: var(--paper-100); }
.city-switch__btn {
  padding: 0.6rem 1.1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: var(--lh-ui);
  color: var(--ink-900);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.city-switch__btn:hover { background: var(--paper-200); }
.city-switch__btn.is-active { background: var(--ink-900); color: #fff; }

/* Лента: дат может быть много — горизонтальный скролл на всех ширинах.
   Пока карточек мало, ряд центрируется (safe center → при переполнении прижимается к началу). */
.schedule__strip-wrap { position: relative; }
.schedule__grid {
  display: flex;
  gap: 1.75rem;
  justify-content: safe center;
  padding: 0.75rem var(--gutter) 2rem;
  scroll-padding-left: var(--gutter);
}
.schedule__grid .event { flex: 0 0 auto; width: clamp(18rem, 24vw, 22rem); }
/* Записаться: Telegram — голубой из .btn--tg на НГ, ВКонтакте — пастельный фирменный синий */
.btn--vk {
  --btn-bg: #7fa6e6;
  --btn-fg: var(--ink-900);
  --btn-bg-hover: #93b6ee;
  --btn-edge: #4f78b8;
  border-color: #c3d6f4;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
  padding-inline: 1.1rem;
  letter-spacing: 0.06em;
}
.event__actions .btn { justify-content: center; }
.event {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.5rem;
  transition: transform var(--dur-base) var(--ease-out);
}
.event:hover { transform: translateY(-4px); }
.event__img {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  aspect-ratio: 4 / 3;
}
.event__img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.2) contrast(1.05); transition: transform var(--dur-slow) var(--ease-out); }
.event:hover .event__img img { transform: scale(1.04); }
.event__num {
  position: absolute;
  left: 0.75rem; top: 0.75rem;
  padding: 0.35rem 0.6rem;
  background: var(--paper-100);
  color: var(--ink-900);
}
.event__status {
  position: absolute;
  right: 0; bottom: 0.9rem;
  padding: 0.4rem 0.75rem 0.4rem 0.9rem;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: var(--lh-flat);
  color: #fff;
  background: var(--red-600);
  transform: rotate(-1.5deg) translateX(0.35rem);
}
.event__status--sold {
  background: #ff1f1f;
  box-shadow: 0 2px 12px rgba(255, 31, 31, 0.45);
}
.event__sold-note {
  margin: 0;
  color: var(--paper-fg);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.35;
}
.event__announce {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.event__announce .btn {
  width: auto;
  min-height: 2.15rem;
  padding: 0.35rem 0.3rem;
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  gap: 0.28em;
}
.event__body { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.1rem; flex: 1; }
.event__title { font-size: var(--fs-h3); }
.event__when {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: var(--lh-compact);
}
.event__time { color: var(--paper-fg-muted); font-weight: 400; }
.event__place { color: var(--paper-fg-muted); line-height: var(--lh-compact); }
.event__price { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-body); margin-top: 0.25rem; }
.event__actions { display: grid; gap: 0.6rem; margin-top: auto; padding-top: 1rem; }
.event__actions .btn { width: 100%; }
.event[hidden] { display: none; }

@media (max-width: 640px)  { .schedule__head { align-items: stretch; } .city-switch { align-self: flex-start; } .schedule__grid .event { width: 80vw; } }

/* ==========================================================
   ЧЕМ ОТЛИЧАЕМСЯ (why) — 2×2 как fresh, без фото
   ========================================================== */
.why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 4rem;
  max-width: 64rem;
}
.why__item { position: relative; padding-left: 3.25rem; }
.why__item .num-plain { position: absolute; left: 0; top: 0.2rem; }
.why__item h3 { font-size: var(--fs-h3-lg); line-height: var(--lh-display-lg); margin-bottom: 0.6rem; }
.why__item p { font-size: var(--fs-small); color: var(--fg-muted); max-width: 36ch; }
@media (max-width: 700px) { .why__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ==========================================================
   РЕКВИЗИТ — на главной без кнопки под ящиками
   ========================================================== */
.mechanics .section__foot { display: none; }

/* ==========================================================
   ДЕЛА (b2c) — пять листов без переворота + карточка «к афише»
   ========================================================== */
.cases--b2c .cases__grid--five {
  display: grid;                 /* frames.css на десктопе делает .cases__grid флексом под переворот — здесь сетка */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem 1.75rem;
  margin-left: 0;
}
.case-b2c {
  --rot: 0deg;
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 1rem 1rem 1.5rem;
  transform: rotate(var(--rot));
  transition: transform var(--dur-base) var(--ease-out);
}
.case-b2c:hover { transform: rotate(0) translateY(-4px); }
.case-b2c__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-950);
}
.case-b2c__img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.25) contrast(1.05); transition: transform var(--dur-slow) var(--ease-out); }
.case-b2c:hover .case-b2c__img img { transform: scale(1.05); }
.case-b2c__num {
  position: absolute; left: 0.75rem; top: 0.75rem;
  padding: 0.35rem 0.6rem;
  background: var(--paper-100);
  color: var(--ink-900);
}
.case-b2c__body { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.1rem; }
.case-b2c__title { font-size: var(--fs-h3-lg); line-height: var(--lh-display-lg); }
.case-b2c__place { margin-bottom: 0.25rem; }
.case-b2c__body .small { line-height: var(--lh-compact); color: var(--paper-fg); }
.cases__cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 1.75rem;
}
.cases__cta h3 { font-size: var(--fs-h3); }
.cases__cta .btn { margin-top: 0.5rem; }
@media (max-width: 1000px) { .cases--b2c .cases__grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cases--b2c .cases__grid--five { grid-template-columns: 1fr; } }

/* ==========================================================
   ЭМОЦИИ — лента полароидов во всю ширину + рилсы из блока proof
   ========================================================== */
.emotions { overflow: hidden; }
.emotions__strip-wrap { position: relative; }
.emotions__strip {
  display: flex;
  gap: 1.5rem;
  justify-content: safe center;
  padding: 1.5rem var(--gutter) 2.5rem;
  scroll-padding-left: var(--gutter);
}
.emotions__photo { flex: 0 0 auto; width: clamp(16rem, 24vw, 22rem); margin: 0; }
.emotions__photo img { aspect-ratio: 3 / 2; object-fit: cover; }
.emotions__reels { margin-top: 1.5rem; }
.emotions__reels-title { font-size: var(--fs-h3); margin-bottom: 1.25rem; }
.emotions .proof__ugc { max-width: 52rem; }
.emotions .proof__follow .proof__socials { max-width: 30rem; }

/* ==========================================================
   ЭМОЦИИ — вторая лента: рилсы (6), тот же скроллер, что и фото
   ========================================================== */
.emotions__reels .scroller-hint { margin-top: -0.5rem; margin-bottom: 0; }
.emotions__reels-strip {
  display: flex;
  gap: 1.25rem;
  justify-content: safe center;
  padding: 1rem var(--gutter) 2rem;
  scroll-padding-left: var(--gutter);
}
.emotions__reels-strip .ugc { flex: 0 0 auto; width: clamp(11rem, 14vw, 13rem); }
.emotions__follow .proof__follow { margin-top: 0.5rem; text-align: center; }
.emotions__follow .proof__follow .proof__socials { max-width: 30rem; margin-inline: auto; }

/* ==========================================================
   ДЛЯ КОМПАНИЙ — блок manager с НГ, фото Даши квадратное
   ========================================================== */
.manager .manager__photo .host__photo { aspect-ratio: 1; }
.manager__text .kicker { display: block; margin-bottom: 0.75rem; }

/* ==========================================================
   О НАС — выдержка: текст слева, два полароида справа (как hero на /o-nas/)
   ========================================================== */
.teaser__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.teaser__text .kicker { display: block; margin-bottom: 1rem; }
.teaser__text h2 { margin-bottom: 1.25rem; }
.teaser__text .lead { max-width: none; }
.teaser__text .lead + .lead { margin-top: 1rem; }
.teaser__text .btn { margin-top: 1.75rem; }
.teaser__gallery { position: relative; min-height: 34rem; }
.teaser__photo { position: absolute; margin: 0; }
.teaser__photo--1 { width: min(84%, 30rem); left: 0; top: 0; z-index: 2; }
.teaser__photo--2 { width: min(72%, 26rem); right: 0; top: 60%; z-index: 1; }
@media (max-width: 1080px) {
  .teaser__grid { grid-template-columns: 1fr; }
  .teaser__gallery { min-height: 26rem; max-width: 34rem; }
}
@media (max-width: 600px) {
  .teaser__gallery { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; max-width: none; }
  .teaser__photo { position: static; width: auto; }
  .teaser__photo--2 { margin-top: 2.5rem; }
  .teaser__text .btn { width: 100%; }
}

/* ==========================================================
   ШАПКА — выпадающее меню поверх тёмных секций
   ========================================================== */
.nav__menu { color: var(--ink-900); }