/* ═══ ФИНАЛ «СОКРОВИЩА КРАСНОЙ ПЛОЩАДИ» + ПИРАТСКАЯ ВЕЧЕРИНКА ══════════════
   Источник содержания: макет v3, блок «ФИНАЛ И ВЕЧЕРИНКА». Деньги — из
   ../tickets/_shared/data.js (Краснодар: неделя 12 000, вечеринка 8 000,
   пакет 18 000), подставляются в разметку скриптом кассы: цена в тексте
   финала — решение владельца 28.08, «цена из данных».

   Две шкуры одной секции — выбор владельца глазами:
     data-skin="night" — «своя визуальная территория, темнее и плотнее»
                         (DESIGN.md, раздел «Компоненты»); тёмный корабль
                         из вырезки снят при тёмном свете и живёт на тёмном;
     data-skin="day"   — как в макете v3: небо, красный заголовок, синяя
                         плашка; вместо вырезки — брендовый баннер вечеринки.
   Переключатель — в служебной панели внизу страницы. */

#final{
  --red:#e2000f;      --red-dark:#c4000d;
  --indigo:#2f2482;   --indigo-deep:#141033;
  --yellow:#ffcb00;
  --ink:#1a1633;
  --exp:cubic-bezier(.16,1,.3,1);

  position:relative;
  scroll-margin-top:calc(var(--navreal,116px) + 16px);
  padding:clamp(48px,7vw,104px) 0 clamp(52px,7vw,110px);
  font-family:var(--font-golos), system-ui, sans-serif;
  overflow:hidden;
}
#final *{box-sizing:border-box}

/* ── Раскладка ────────────────────────────────────────────────────────────
   На широком: текст слева, картинка справа во всю высоту секции.
   На узком порядок DOM и есть порядок чтения: заголовок → корабль →
   вечеринка с ценой и кнопкой → партнёры. */
.fin{
  display:grid;
  gap:clamp(20px,3vw,32px);
  grid-template-areas:'head' 'art' 'plate' 'partners';
}
@media (min-width:980px){
  .fin{
    grid-template-columns:minmax(0,1.06fr) minmax(0,1.1fr);
    grid-template-areas:'head art' 'plate art' 'partners art';
    align-content:start;
    column-gap:clamp(28px,4vw,56px);
  }
  .fin__art{grid-area:art;align-self:center}
}
.fin__head{grid-area:head;display:flex;flex-direction:column;gap:clamp(10px,1.4vw,16px)}
.fin__plate{grid-area:plate}
.fin__partners{grid-area:partners}
.fin__art{grid-area:art;margin:0;display:flex;flex-direction:column;gap:12px}

/* ── Шапка секции ─────────────────────────────────────────────────────── */
.fin__kicker{
  align-self:flex-start;
  font-family:var(--display);font-weight:900;
  font-size:clamp(13px,1.5vw,16px);letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--red);border-radius:10px;padding:9px 16px;
  transform:rotate(-1.5deg);
}
.fin__title{
  margin:2px 0 0;font-family:var(--display);font-weight:900;
  font-size:clamp(32px,5.6vw,68px);line-height:.98;letter-spacing:-.02em;
  text-transform:uppercase;text-wrap:balance;
}
.fin__lead{
  margin:0;max-width:44ch;
  font-size:clamp(16px,1.9vw,20px);line-height:1.45;font-weight:500;text-wrap:pretty;
}

/* ── Плашка вечеринки ─────────────────────────────────────────────────── */
.fin__plate{
  display:flex;flex-direction:column;gap:clamp(12px,1.8vw,18px);
  border-radius:22px;padding:clamp(18px,2.6vw,28px);
}
.party__t{
  margin:0;font-family:var(--display);font-weight:900;
  font-size:clamp(22px,3.2vw,34px);line-height:1.05;
  text-transform:uppercase;color:#fff;
}
.party__chips{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:7px;
}
.party__chips li{
  border-radius:11px;padding:9px 12px;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:0;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);
}
.party__when{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(18px,2.3vw,24px);color:#fff}
.party__where,.party__what{margin:0;font-size:15px;line-height:1.45;font-weight:500;color:#d5d1f2}
.party__price{margin:0;font-size:15.5px;line-height:1.45;font-weight:500;color:#d5d1f2}
.party__price b{color:#fff;font-weight:700;white-space:nowrap}

.fin__cta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;
  font-family:var(--display);font-weight:900;font-size:clamp(14px,1.5vw,16px);
  text-transform:uppercase;letter-spacing:.02em;text-align:left;
  color:#fff;background:var(--red);border:none;border-radius:14px;
  padding:16px 22px;cursor:pointer;
  transition:background .16s, transform .16s var(--exp);
}
.fin__cta-t{text-wrap:balance}
.fin__cta-p{font-weight:900;white-space:nowrap;font-size:1.06em}
.fin__cta:hover{background:var(--red-dark)}
.fin__cta:active{transform:translateY(1px)}
.fin__next{margin:0;font-size:13.5px;line-height:1.45;color:#a49dd0}
.fin__save{white-space:nowrap}

#final :where(button,a,[tabindex]):focus-visible{
  outline:3px solid var(--yellow);outline-offset:3px;border-radius:8px;
}

/* ── Партнёры ─────────────────────────────────────────────────────────── */
.fin__partners{display:flex;flex-wrap:wrap;gap:clamp(14px,2.2vw,24px);align-items:center}
.fin__partners-t{
  width:100%;margin:0;font-family:var(--display);font-weight:800;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
.fin__partners img{width:auto;display:block;opacity:.92}
.fin__partners img[data-fin-logo="krasnaya-ploshchad"]{height:58px}
.fin__partners img[data-fin-logo="red-point"]{height:46px}
.fin__partners img[data-fin-logo="babushkin-kaver"]{height:32px}

/* ── Картинка ─────────────────────────────────────────────────────────── */
.fin__art img{
  width:100%;height:auto;display:block;
  animation:jamShip 9s ease-in-out infinite;
}
/* Корабль — главный предмет финала: на широком экране ему отдаём и поля
   контейнера, иначе правая половина секции стоит пустой. */
@media (min-width:1200px){
  .fin__art img{width:calc(100% + clamp(0px,6vw,110px));max-width:none;margin-right:calc(-1 * clamp(0px,6vw,110px))}
}
.fin__art figcaption{
  font-size:13.5px;line-height:1.4;font-weight:500;text-align:center;
}

/* ═══ ШКУРА «НОЧЬ» — своя территория, темнее и плотнее ══════════════════ */
#final[data-skin="night"]{
  background:
    radial-gradient(58% 46% at 72% 40%, rgba(96,72,208,.34) 0%, rgba(26,20,66,0) 70%),
    linear-gradient(180deg,#1a1442 0%,#141033 58%,#100c28 100%);
  color:#fff;
}
#final[data-skin="night"] .fin__title{color:var(--yellow)}
#final[data-skin="night"] .fin__lead{color:#cdc7ec}
#final[data-skin="night"] .fin__plate{
  background:linear-gradient(180deg,#251d60,#1b1546);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 46px rgba(6,4,22,.5);
}
#final[data-skin="night"] .fin__art figcaption,
#final[data-skin="night"] .fin__partners-t{color:#a49dd0}   /* 6.80 к фону секции */
#final[data-skin="night"] .fin__art img{filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))}
#final[data-skin="night"] .fin__partners img{filter:none}

/* ═══ ШКУРА «ДЕНЬ» — как в макете v3 ═══════════════════════════════════ */
#final[data-skin="day"]{
  background:linear-gradient(180deg,#eaf7fd 0%,#b6e6fa 42%,#79d0f2 100%);
  color:var(--ink);
}
#final[data-skin="day"] .fin__title{color:var(--red)}
#final[data-skin="day"] .fin__lead{color:var(--ink)}
#final[data-skin="day"] .fin__plate{
  background:var(--indigo);
  box-shadow:0 14px 34px rgba(20,60,90,.28);
}
#final[data-skin="day"] .fin__art figcaption,
#final[data-skin="day"] .fin__partners-t{color:var(--indigo)}   /* 8.22 к небу */
#final[data-skin="day"] .fin__art img{
  border-radius:22px;
  box-shadow:0 18px 40px rgba(20,60,90,.28);
  animation:none;                       /* баннер — не вырезка, не качаем */
}

/* Узкий экран: плашка и кнопка во всю ширину, картинка не давит */
@media (max-width:560px){
  .fin__cta{gap:12px;padding:15px 16px;font-size:13.5px}
  .fin__partners img[data-fin-logo="krasnaya-ploshchad"]{height:44px}
  .fin__partners img[data-fin-logo="red-point"]{height:36px}
  .fin__partners img[data-fin-logo="babushkin-kaver"]{height:26px}
}