/* views/landing-page.ejs — public SEO landing page.
   Использует токены сайта (--nt-*) и стандартный layout (.wrap, --page-gutter,
   --content-max) чтобы выглядеть как остальные публичные страницы (game, custom-order, search).
   Hero / content / CTA — карточки на --nt-card-bg.
   Breadcrumbs приходят из partials/breadcrumbs.ejs со своими стилями. */

/* ===== Page tokens (mirror game.css / custom-order.css) ===== */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.page--landing {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #121212;
  color: #e8e8e8;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.page--landing main { flex: 1 0 auto; }

/* Same layout tokens as game.css (defined here too — page is standalone) */
:root {
  --content-max: 1654px;
  --page-gutter: clamp(16px, (100vw - var(--content-max)) / 2, 160px);
  --nt-primary: #7709FF;
  --nt-primary-hover: #8d3bff;
  --nt-border: rgba(255,255,255,.08);
  --nt-card-bg: #1b1e28;
  --nt-text: #e8e8e8;
  --nt-text-dim: #b0b3c7;
  --nt-radius: 8px;
  --nt-radius-lg: 12px;
  --nt-shadow: 0 4px 12px rgba(0,0,0,.45);
}

/* ===== Page layout container.
       Standard NextTier pattern: layout class is full-width with gutters,
       same `padding-inline: var(--page-gutter)` as `.header-desktop` →
       content edges align with the header. NO max-width here — the page
       stretches edge-to-edge (minus gutters) just like the header does.
       Mirrors .guide-main / .game-layout / .header-desktop pattern.
       The outer <div class="wrap"> stays unstyled (just a marker for
       compatibility with cross-page CSS that targets `.wrap`). ===== */
.page--landing .lp-main {
  width: 100%;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  padding-bottom: 3rem;
  box-sizing: border-box;
}

/* ===== Breadcrumbs — site-wide standard.
       Duplicated here (and in game.css / custom-order.css / news.css / etc.)
       because we don't yet have a shared breadcrumbs CSS file. When such a
       file is created (e.g. public/css/layout/breadcrumbs.css), drop these
       rules and link it from app-head-base or each page. ===== */
.breadcrumbs {
  font-size: 14px;
  margin: 20px 0 0;
  white-space: nowrap;
  overflow-x: auto;
  color: #9aa0a6;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: "›";
  margin: 0 6px;
  color: #c9c9c9;
}
.breadcrumbs a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
}
.breadcrumbs a:hover { text-decoration: underline; }

/* Admin preview banner styles moved to public/css/admin-preview-banner.css
   (shared across landing/guide/news/product). Class is now .nt-admin-banner. */

/* ===== Hero ===== */
.lp-hero {
  background: var(--nt-card-bg);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  overflow: hidden;
  margin-top: 18px;
  margin-bottom: 24px;
  box-shadow: var(--nt-shadow);
}
.lp-hero--with-image {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 900px) {
  .lp-hero--with-image { grid-template-columns: 1fr 1fr; }
}
.lp-hero__image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.lp-hero__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lp-hero__content {
  padding: 28px 28px 32px;
}
@media (min-width: 900px) {
  .lp-hero__content { padding: 36px 40px; }
}
.lp-title {
  margin: 0 0 12px;
  font: 800 32px/1.2 Inter, system-ui, sans-serif;
  color: #fff;
}
@media (min-width: 900px) {
  .lp-title { font-size: 40px; }
}
.lp-subtitle {
  margin: 0 0 14px;
  font: 500 17px/1.45 Inter, system-ui, sans-serif;
  color: var(--nt-text-dim);
}
.lp-lead {
  font: 400 15px/1.6 Inter, system-ui, sans-serif;
  color: #c9d2e6;
}
.lp-lead p:first-child { margin-top: 0; }
.lp-lead p:last-child  { margin-bottom: 0; }

/* ===== Article body (SunEditor output) ===== */
.lp-content {
  background: var(--nt-card-bg);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 28px;
  margin-bottom: 24px;
  color: #d5dbeb;
  font-size: 16px;
  line-height: 1.7;
  box-shadow: var(--nt-shadow);
}
@media (min-width: 900px) {
  .lp-content { padding: 36px 40px; }
}

.lp-content h2 {
  margin: 32px 0 12px;
  font: 700 26px/1.25 Inter, system-ui, sans-serif;
  color: #fff;
}
.lp-content h2:first-child { margin-top: 0; }

.lp-content h3 {
  margin: 24px 0 10px;
  font: 700 20px/1.3 Inter, system-ui, sans-serif;
  color: #fff;
}

.lp-content p { margin: 0 0 16px; }

.lp-content a {
  color: var(--nt-primary-hover);
  text-decoration: underline;
}
.lp-content a:hover { color: #b292ff; }

.lp-content ul, .lp-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
}
.lp-content li { margin-bottom: 6px; }

.lp-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--nt-radius);
  margin: 16px 0;
}

.lp-content blockquote {
  margin: 16px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--nt-primary);
  background: rgba(119, 9, 255, .08);
  color: #c4b3ff;
  border-radius: 0 8px 8px 0;
}

.lp-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.lp-content th, .lp-content td {
  padding: 10px 12px;
  border: 1px solid var(--nt-border);
  text-align: left;
}
.lp-content th {
  background: rgba(255,255,255,.04);
  font-weight: 700;
  color: #fff;
}

.lp-content code {
  padding: 2px 6px;
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 13px;
}

/* ===== Game CTA at the bottom ===== */
.lp-game-cta {
  background: linear-gradient(135deg, #2a1a3f 0%, #1d1d50 100%);
  border: 1px solid rgba(167, 149, 255, .25);
  border-radius: var(--nt-radius-lg);
  padding: 28px;
  text-align: center;
}
.lp-game-cta__title {
  margin: 0 0 8px;
  font: 700 22px/1.3 Inter, system-ui, sans-serif;
  color: #fff;
}
.lp-game-cta__text {
  margin: 0 0 16px;
  color: var(--nt-text-dim);
  font-size: 15px;
}
.lp-game-cta__btn {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(90deg, #2563EB 0%, #720FFE 51.92%, #9900FF 100%);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--nt-radius);
  transition: filter .15s, transform .05s;
}
.lp-game-cta__btn:hover  { filter: brightness(1.1); }
.lp-game-cta__btn:active { transform: translateY(1px); }

/* ===== Block constructor (text / feature / banner / trust) =====
   Rendered after .lp-content from landing_blocks table. Server-side
   resolves CTA URLs from real entities (game/category/subcategory/offer)
   so slug renames don't break links.
   ============================================================== */

/* --- text block (rich HTML from SunEditor or markdown-lite fallback) --- */
.lp-text-block {
  background: var(--nt-card-bg);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 28px;
  margin-bottom: 24px;
  color: #d5dbeb;
  font-size: 16px;
  line-height: 1.7;
  box-shadow: var(--nt-shadow);
}
@media (min-width: 900px) {
  .lp-text-block { padding: 32px 36px; }
}

/* --- Generic .sun-content typography (used for text block AND for
       feature/banner body which are also SunEditor output). All HTML
       elements that SunEditor produces are styled here. --- */
.sun-content h1,
.sun-content h2,
.sun-content h3,
.sun-content h4 {
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
}
.sun-content h2 {
  margin: 24px 0 12px;
  font-size: 26px;
}
.sun-content h2:first-child { margin-top: 0; }
.sun-content h3 {
  margin: 20px 0 10px;
  font-size: 20px;
}
.sun-content h3:first-child { margin-top: 0; }
.sun-content p { margin: 0 0 14px; }
.sun-content p:last-child { margin-bottom: 0; }
.sun-content ul,
.sun-content ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.sun-content li { margin-bottom: 6px; }
.sun-content a {
  color: var(--nt-primary-hover);
  text-decoration: underline;
}
.sun-content a:hover { color: #b292ff; }
.sun-content strong { color: #fff; font-weight: 700; }
.sun-content em { font-style: italic; }
.sun-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--nt-radius);
  margin: 14px 0;
}
.sun-content blockquote {
  margin: 14px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--nt-primary);
  background: rgba(119, 9, 255, .08);
  color: #c4b3ff;
  border-radius: 0 8px 8px 0;
}
.sun-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
}
.sun-content th, .sun-content td {
  padding: 10px 12px;
  border: 1px solid var(--nt-border);
  text-align: left;
}
.sun-content th {
  background: rgba(255,255,255,.04);
  font-weight: 700;
  color: #fff;
}

/* --- feature block (image + title + body + bullets + CTA) --- */
.lp-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: var(--nt-card-bg);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--nt-shadow);
}
@media (min-width: 900px) {
  .lp-feature {
    /* Image-left layout: image in narrow (5fr) slot, body in wide (7fr).
       Image gets ~40%, text ~60% — image no longer dominates the row. */
    grid-template-columns: 5fr 7fr;
    gap: 32px;
    padding: 32px;
    align-items: center;
  }
  /* Image-right: mirror the columns so the image still lands in the
     narrow 5fr slot (now on the right), not the wide 7fr one. Without
     this flip + order:2, order would only move the image visually right
     but keep it in the 7fr slot — making image-right blocks appear with
     a much bigger image than image-left. */
  .lp-feature--image-right {
    grid-template-columns: 7fr 5fr;
  }
  .lp-feature--image-right .lp-feature__image { order: 2; }
}
.lp-feature__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--nt-radius-lg);
  aspect-ratio: 16 / 10;
}
.lp-feature__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Both anchor (navigation CTA) and button (chat CTA) variants. */
.lp-feature__image-link,
.lp-feature__image-trigger {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.lp-feature__body {
  color: var(--nt-text-dim);
  font-size: 15px;
  line-height: 1.6;
}
.lp-feature__title {
  margin: 0 0 12px;
  font: 800 24px/1.25 Inter, system-ui, sans-serif;
  color: #fff;
}
@media (min-width: 900px) {
  .lp-feature__title { font-size: 28px; }
}
.lp-feature__desc {
  margin: 0 0 14px;
  color: #c9d2e6;
}
.lp-feature__bullets {
  margin: 0 0 18px;
  padding-left: 22px;
  color: #c9d2e6;
}
.lp-feature__bullets li { margin-bottom: 6px; }

/* --- CTA button (used in feature and banner) ---
   Class is shared between <a> (navigation CTAs) and <button> (chat CTAs).
   Need explicit border:0, cursor:pointer, font:inherit чтобы <button>
   не получал серую рамку и системный шрифт из браузера. */
.lp-cta-btn {
  display: inline-block;
  padding: 11px 22px;
  background: linear-gradient(90deg, #2563EB 0%, #720FFE 51.92%, #9900FF 100%);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: var(--nt-radius);
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.lp-cta-btn:hover  { filter: brightness(1.1); }
.lp-cta-btn:active { transform: translateY(1px); }
.lp-cta-btn--light {
  background: #fff;
  color: #1d1d50;
}
.lp-cta-btn--light:hover { background: #eef0ff; filter: none; }

/* --- banner block (billboard with bg + hero + text + CTA) ---
   Layout: bg_image_path → background cover. image_path → hero PNG
   absolute-positioned (left or right). Text + CTA over the bg with
   dim-gradient overlay для читаемости.
   Fallback: без bg_image — gradient покрытие. Без hero — текст на всю ширину.
   ---------------------------------------------------------------- */

.lp-banner {
  position: relative;
  overflow: hidden;
  padding: 26px;
  margin-bottom: 24px;
  /* Replaced the old border with an inset box-shadow. A 1px translucent
     purple border was nearly invisible against bright bg-image regions
     (giving a broken-up look) and ran into sub-pixel rounding artifacts
     at the rounded corners. An inset shadow paints inside the padding-
     box, so overflow:hidden + border-radius can't clip it unevenly, and
     a soft white tint reads consistently over any background. */
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  border-radius: var(--nt-radius-lg);
  background: linear-gradient(135deg, #2a1a3f 0%, #1d1d50 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
@media (min-width: 900px) {
  .lp-banner {
    padding: 40px 44px;
  }
}

/* Dim/gradient overlay поверх bg image — улучшает читаемость текста.
   Только когда есть bg_image (gradient fallback сам по себе тёмный). */
.lp-banner__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(15, 12, 35, .82) 0%,
    rgba(15, 12, 35, .55) 35%,
    rgba(15, 12, 35, .15) 65%,
    rgba(15, 12, 35, 0)   100%
  );
  z-index: 1;
}
/* Когда hero слева — затемнение зеркалим */
.lp-banner--hero-left .lp-banner__overlay {
  background: linear-gradient(
    270deg,
    rgba(15, 12, 35, .82) 0%,
    rgba(15, 12, 35, .55) 35%,
    rgba(15, 12, 35, .15) 65%,
    rgba(15, 12, 35, 0)   100%
  );
}

/* Body — текст + CTA. Position relative + z-index чтобы поверх overlay. */
.lp-banner__body {
  position: relative;
  z-index: 2;
  max-width: 60%;
}
@media (max-width: 899px) {
  /* На мобилке текст занимает всю ширину, hero становится background-decoration */
  .lp-banner__body { max-width: 100%; }
}
/* Если hero слева — body уходит вправо */
.lp-banner--hero-left .lp-banner__body {
  margin-left: auto;
  text-align: right;
}
.lp-banner__title {
  margin: 0 0 12px;
  font: 800 26px/1.2 Inter, system-ui, sans-serif;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .01em;
}
@media (min-width: 900px) {
  .lp-banner__title { font-size: 32px; }
}
.lp-banner__desc {
  margin: 0 0 18px;
  color: #d4dbf0;
  font-size: 14px;
  line-height: 1.55;
}

/* Banner CTA — больше и заметнее, чем default .lp-cta-btn в feature.
   Scoping через .lp-banner — переопределяет padding/font-size. */
.lp-banner .lp-cta-btn {
  padding: 13px 28px;
  font-size: 15px;
  border-radius: 8px;
}

/* Hero PNG — absolute поверх bg. Отступ от края + от низа, чтобы
   персонаж не упирался в углы карточки (брать пример с overgear). */
.lp-banner__hero {
  position: absolute;
  bottom: 0;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  pointer-events: none;       /* image-link включит pointer обратно */
  padding: 16px 16px 0;
}
@media (min-width: 900px) {
  .lp-banner__hero { padding: 20px 28px 0; }
}
.lp-banner--hero-right .lp-banner__hero { right: 0; }
.lp-banner--hero-left  .lp-banner__hero { left: 0; }
.lp-banner__hero img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 60vw;            /* не залезает дальше середины на широких экранах */
  object-fit: contain;
  object-position: bottom;
}
.lp-banner__hero-link,
.lp-banner__hero-trigger {
  display: inline-block;
  height: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;       /* возвращает clickability */
}

/* На узких экранах — спрячем body шире, hero смягчим */
@media (max-width: 700px) {
  .lp-banner__hero {
    opacity: .35;
    z-index: 1;
  }
  .lp-banner__body { max-width: 100% !important; text-align: left !important; }
}

/* --- FAQ block — same visual style as .product-spoilers on product page
   (see public/css/product.css:1141+). Уровнем выше использует <details>/
   <summary> с native [open] селектором (без JS toggle класса) — поэтому
   selector подстроен под .lp-faq__item[open], а не .is-open.
   Schema.org FAQPage emit'ится server-side через JSON-LD @graph
   (см. views/landing-page.ejs). */

.lp-faq {
  margin-top: 28px;
  margin-bottom: 24px;
}
.lp-faq__title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.lp-faq__list {
  margin: 0;
}

/* Каждый Q/A — карточка-аккордеон */
.lp-faq__item {
  border-radius: 16px;
  border: 2px solid var(--nt-border);
  margin-bottom: 12px;
  overflow: hidden;
  background: transparent;
}
.lp-faq__item:last-child { margin-bottom: 0; }

/* Summary (question row) */
.lp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  padding-right: 40px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  list-style: none;
  outline: none;
  position: relative;
  user-select: none;
}
.lp-faq__q::-webkit-details-marker,
.lp-faq__q::marker {
  display: none;
  content: '';
}
.lp-faq__q:hover { background: rgba(255,255,255,.03); }

/* Plus icon → rotates to X (cross) on open */
.lp-faq__q::after {
  content: '+';
  font-size: 25px;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .22s ease;
  color: inherit;
}
.lp-faq__item[open] .lp-faq__q::after {
  transform: translateY(-50%) rotate(45deg);
}

/* Answer body */
.lp-faq__a {
  padding: 0 18px 14px;
  font-size: .95rem;
  line-height: 1.6;
  color: #c9d2e6;
  white-space: pre-wrap;   /* preserve newlines from textarea */
}

/* --- trust block (row of icon+title+body items) --- */
.lp-trust {
  margin-bottom: 24px;
  padding: 28px 0;
  text-align: center;
}
.lp-trust__title {
  margin: 0 0 22px;
  font: 700 22px/1.3 Inter, system-ui, sans-serif;
  color: #fff;
}
.lp-trust__items {
  display: grid;
  /* Responsive ladder: 1 column on phones (<600px), 2 on small tablets
     (600-999px), 4 on desktop (≥1000px). Tight 4-in-a-row at 1000px
     because cards have small padding and short labels — wider gives
     plenty of room. */
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 600px) {
  .lp-trust__items { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .lp-trust__items { grid-template-columns: repeat(4, 1fr); }
}
.lp-trust__item {
  background: var(--nt-card-bg);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 22px 18px;
  text-align: center;
}
.lp-trust__icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 10px;
}
.lp-trust__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: inline-block;
}
.lp-trust__item-title {
  margin: 0 0 8px;
  font: 700 16px/1.3 Inter, system-ui, sans-serif;
  color: #fff;
}
.lp-trust__item-body {
  margin: 0;
  color: var(--nt-text-dim);
  font-size: 14px;
  line-height: 1.5;
}

/* ===== Mobile tweaks ===== */
@media (max-width: 600px) {
  .lp-content { padding: 20px 16px; font-size: 15px; }
  .lp-hero__content { padding: 22px 20px 24px; }
  .lp-title { font-size: 28px; }
  .lp-subtitle { font-size: 16px; }
  .lp-game-cta { padding: 22px 18px; }
}