/* ──────────────────────────────────────────────────────────────────────────
   Vice Neon (.vn) — етап 3a: головна сторінка (views/_home_vn.erb, Main.dc.html).
   Токени й базові компоненти — public/css/vn.css (етап 1), оболонка — vn-shell.css
   (етап 2). Усе тут — під html.vn:not([data-section="admin"]) .vn-home, щоб не
   зачепити інші .vn-сторінки (поки на них свого прототипу не прийшло, ROUTES.md).
   ────────────────────────────────────────────────────────────────────────── */

html.vn:not([data-section="admin"]) .vn-home { display: flex; flex-direction: column; gap: 60px; }

/* ─── Герой ──────────────────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vh-hero {
  position: relative; padding: 48px 32px; border-radius: var(--vn-radius-section); display: flex; flex-wrap: wrap;
  gap: 32px; align-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(520px circle at 70% 20%, rgba(255, 79, 163, .16), transparent 60%),
              radial-gradient(70% 60% at 85% 10%, rgba(46, 230, 214, .1), transparent 70%), rgba(255, 255, 255, .02);
}
html.vn:not([data-section="admin"]) .vh-hero__col { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
html.vn:not([data-section="admin"]) .vh-hero__pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px;
  border-radius: var(--vn-radius-pill); border: 1px solid rgba(46, 230, 214, .35); background: rgba(46, 230, 214, .08);
  color: var(--vn-cyan); font-size: 13px; font-weight: 700;
}
html.vn:not([data-section="admin"]) .vh-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vn-cyan); animation: bPulse 1.6s infinite; }
html.vn:not([data-section="admin"]) .vh-hero__h {
  margin: 0; font-family: var(--vn-font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: -.035em; display: flex; flex-direction: column;
}
html.vn:not([data-section="admin"]) .vh-hero__hl {
  background: linear-gradient(90deg, var(--vn-pink), var(--vn-orange), var(--vn-cyan), var(--vn-pink));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bHue 8s ease-in-out infinite; padding-bottom: 6px;
}
html.vn:not([data-section="admin"]) .vh-hero__p { margin: 0; max-width: 44ch; font-size: 17px; line-height: 1.6; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vh-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
html.vn:not([data-section="admin"]) .vh-hero__ghost {
  height: 46px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: var(--vn-radius-pill);
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); color: var(--vn-text);
  font-weight: 700; text-decoration: none;
}
html.vn:not([data-section="admin"]) .vh-hero__art { flex: 1 1 360px; min-width: 260px; position: relative; height: 320px; }
html.vn:not([data-section="admin"]) .vh-hero__card {
  position: absolute; border-radius: 10px; border: 6px solid var(--vn-text); box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
  animation: bIn .9s var(--vn-ease) both;
}
html.vn:not([data-section="admin"]) .vh-hero__card--1 {
  left: 2%; top: 10px; width: 56%; height: 230px; transform: rotate(-6deg);
  background: linear-gradient(180deg, #2A1450 0%, var(--vn-pink) 58%, var(--vn-orange) 78%, #2A1450 78.5%);
}
html.vn:not([data-section="admin"]) .vh-hero__card--2 {
  right: 0; top: 0; width: 44%; height: 170px; transform: rotate(5deg); animation-delay: .12s;
  background: linear-gradient(180deg, #0F1A3A, #2C1A5C);
}
html.vn:not([data-section="admin"]) .vh-hero__card--3 {
  right: 4%; bottom: 0; width: 52%; height: 150px; transform: rotate(-2deg); animation-delay: .24s;
  background: linear-gradient(160deg, var(--vn-cyan) 0%, #3B2A8C 70%);
}
@media (max-width: 760px) { html.vn:not([data-section="admin"]) .vh-hero__art { display: none; } }

/* ─── Стрічка-марківка (декор) ───────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vh-marquee {
  overflow: hidden; border-radius: var(--vn-radius-pill); padding: 14px 0; background: var(--vn-pink);
}
html.vn:not([data-section="admin"]) .vh-marquee__track {
  display: flex; gap: 40px; white-space: nowrap; animation: bMarq 30s linear infinite;
  font-family: var(--vn-font-display); font-weight: 900; text-transform: uppercase; font-size: 20px; color: var(--vn-ink);
}
@keyframes bMarq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { html.vn:not([data-section="admin"]) .vh-marquee__track { animation: none; } }

/* ─── Спільні заголовки секцій ───────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vh-sec { display: flex; flex-direction: column; gap: 16px; }
html.vn:not([data-section="admin"]) .vh-h2 {
  margin: 0; font-family: var(--vn-font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em;
}

/* ─── Добірка дня: .vh-picks ─────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vh-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
html.vn:not([data-section="admin"]) .vh-pick { position: relative; padding: 0 0 14px; gap: 0; overflow: hidden; }
html.vn:not([data-section="admin"]) .vh-pick__media { position: relative; display: flex; height: 140px; background: var(--vn-surface-2); align-items: center; justify-content: center; }
html.vn:not([data-section="admin"]) .vh-pick__media img { max-width: 72%; max-height: 72%; object-fit: contain; }
html.vn:not([data-section="admin"]) .vh-pick__ph { display: none; align-items: center; justify-content: center; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vh-pick__badge {
  position: absolute; left: 10px; top: 10px; height: 24px; padding: 0 9px; display: inline-flex; align-items: center;
  border-radius: var(--vn-radius-pill); background: var(--vn-ink); color: var(--vn-cyan); font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
html.vn:not([data-section="admin"]) .vh-pick__badge--sale { color: var(--vn-pink); }
html.vn:not([data-section="admin"]) .vh-pick__t {
  display: block; margin: 12px 14px 0; font-family: var(--vn-font-display); font-weight: 800; font-size: 15px;
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.vn:not([data-section="admin"]) .vh-pick__s { display: block; margin: 4px 14px 0; font-size: 13px; color: var(--vn-muted); }

/* ─── Категорії (бенто) ──────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vh-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
html.vn:not([data-section="admin"]) .vh-cat {
  position: relative; overflow: hidden; min-height: 110px; padding: 20px; display: flex; flex-direction: column;
  justify-content: space-between; border-radius: var(--vn-radius-card); background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08); text-decoration: none; color: var(--vn-text); transition: transform .3s var(--vn-ease), border-color .3s;
}
html.vn:not([data-section="admin"]) .vh-cat:hover { transform: translateY(-4px); border-color: var(--vh-cat-c); }
@media (hover: none) { html.vn:not([data-section="admin"]) .vh-cat:hover { transform: none; } }
html.vn:not([data-section="admin"]) .vh-cat__ic { width: 28px; height: 28px; color: var(--vh-cat-c); }
html.vn:not([data-section="admin"]) .vh-cat__t { font-family: var(--vn-font-display); font-weight: 800; text-transform: uppercase; font-size: 17px; letter-spacing: -.01em; }

/* ─── Топ серверів + «Авто тижня» ────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vh-sec--row { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 20px; }
html.vn:not([data-section="admin"]) .vh-board {
  flex: 1 1 480px; min-width: 0; padding: 22px; border-radius: var(--vn-radius-section); background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 14px;
}
html.vn:not([data-section="admin"]) .vh-board__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
html.vn:not([data-section="admin"]) .vh-board__live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vn-cyan); font-weight: 700; }
html.vn:not([data-section="admin"]) .vh-board__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vn-cyan); animation: bPulse 1.6s infinite; }
html.vn:not([data-section="admin"]) .vh-board__list { display: flex; flex-direction: column; }
html.vn:not([data-section="admin"]) .vh-board__row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 100px 64px; gap: 12px; align-items: center;
  padding: 10px 8px; border-radius: 12px; text-decoration: none; color: var(--vn-text);
}
html.vn:not([data-section="admin"]) .vh-board__rank { font-family: var(--vn-font-display); font-weight: 900; font-size: 17px; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vh-board__name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.vn:not([data-section="admin"]) .vh-board__bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .07); overflow: hidden; }
html.vn:not([data-section="admin"]) .vh-board__fill { display: block; height: 100%; border-radius: 8px; background: var(--vn-grad-brand); }
html.vn:not([data-section="admin"]) .vh-board__num { text-align: right; font-family: var(--vn-font-mono); font-weight: 700; font-size: 13px; }
html.vn:not([data-section="admin"]) .vh-vow { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
@media (max-width: 760px) {
  html.vn:not([data-section="admin"]) .vh-board__row { grid-template-columns: 28px minmax(0, 1fr) 64px; }
  html.vn:not([data-section="admin"]) .vh-board__bar { display: none; }
}

/* ─── ARZDATA у цифрах ───────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
html.vn:not([data-section="admin"]) .vh-stat {
  padding: 16px 18px; border-radius: var(--vn-radius-card); background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 2px;
}
html.vn:not([data-section="admin"]) .vh-stat__n { font-family: var(--vn-font-mono); font-weight: 900; font-size: 24px; }
html.vn:not([data-section="admin"]) .vh-stat__l { font-size: 13px; color: var(--vn-muted); }

/* ─── Популярні категорії + останні коментарі ────────────────────────────── */
html.vn:not([data-section="admin"]) .vh-cols { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
html.vn:not([data-section="admin"]) .vh-cols__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
html.vn:not([data-section="admin"]) .vh-col {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07); color: var(--vn-text); text-decoration: none;
}
html.vn:not([data-section="admin"]) .vh-col__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
html.vn:not([data-section="admin"]) .vh-col__t { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.vn:not([data-section="admin"]) .vh-col__n { font-family: var(--vn-font-mono); font-size: 12px; color: var(--vn-muted-2); }
html.vn:not([data-section="admin"]) .vh-comments { display: flex; flex-direction: column; gap: 8px; }
html.vn:not([data-section="admin"]) .vh-comment {
  display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07); color: var(--vn-text); text-decoration: none;
}
html.vn:not([data-section="admin"]) .vh-comment__meta { font-size: 12.5px; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vh-comment__meta b { color: var(--vn-text); }
html.vn:not([data-section="admin"]) .vh-comment__body { font-size: 14px; line-height: 1.45; }