/* ==========================================================================
   KVANT Capital — страница «Реализованные проекты» и ссылка на неё с главной
   --------------------------------------------------------------------------
   Новый файл. style.css, base.css и app.js не изменялись: всё, что здесь есть,
   добавляет классы с префиксами .pj- и .projlink, чтобы не спорить
   с существующими правилами. Токены берутся из :root в style.css.
   ========================================================================== */

/* ---------- Блок на главной: ссылка на страницу проектов ---------- */
.projlink {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center;
  padding: clamp(var(--space-8), 3.5vw, var(--space-12));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014) 46%, transparent 78%),
    rgba(255, 255, 255, 0.012);
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--transition-interactive), transform var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

.projlink::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -10% auto -10%;
  height: 150%;
  background: radial-gradient(58% 62% at 18% 26%, color-mix(in oklab, var(--color-primary) 13%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.projlink:hover,
.projlink:focus-visible {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.45);
}

.projlink:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.projlink-index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--color-primary);
  text-transform: uppercase;
}

.projlink-kicker {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.projlink-title {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.projlink-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--color-primary), var(--color-primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.projlink-line {
  display: block;
  margin-top: var(--space-5);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 52ch;
}

.projlink-go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.projlink-arrow {
  transition: transform var(--transition-interactive);
}

.projlink:hover .projlink-arrow,
.projlink:focus-visible .projlink-arrow {
  transform: translateX(6px);
}

.projlink-media {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.projlink-media img {
  display: block;
  width: 100%;
  height: clamp(180px, 22vw, 260px);
  object-fit: cover;
  object-position: top center;
}

/* ---------- Страницы проектов: общие обёртки ---------- */
.pj-hero {
  position: relative;
  max-width: var(--content);
  margin-inline: auto;
  padding: calc(var(--space-24) + var(--space-8)) clamp(var(--space-6), 4vw, var(--space-12)) var(--space-12);
}

.pj-hero-text { position: relative; isolation: isolate; }
.pj-hero-text::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14% -10%;
  background: radial-gradient(120% 115% at 24% 45%, rgba(5, 6, 10, 0.62) 0%, rgba(5, 6, 10, 0.3) 55%, transparent 82%);
  filter: blur(8px);
  pointer-events: none;
}

.pj-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pj-title {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  /* min(): на широком экране размер не меняется (--text-3xl меньше 7.4vw),
     на узком — падает ровно настолько, чтобы название осталось одной строкой. */
  font-size: min(var(--text-3xl), 7.4vw);
  line-height: 1.02;
  letter-spacing: -0.01em;
  white-space: nowrap;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.pj-lede {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 58ch;
}

.pj-meta {
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.pj-section { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); }

.pj-section > .section-head,
.pj-section > .section-title,
.pj-section > .section-lede,
.pj-prose {
  position: relative;
  isolation: isolate;
}

.pj-section > .section-head::before,
.pj-section > .section-title::before,
.pj-section > .section-lede::before,
.pj-prose::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -8%;
  background: radial-gradient(120% 130% at 28% 50%, rgba(5, 6, 10, 0.55) 0%, rgba(5, 6, 10, 0.26) 55%, transparent 82%);
  filter: blur(8px);
  pointer-events: none;
}

.pj-prose {
  margin-top: var(--space-6);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 62ch;
}

.pj-prose strong { color: var(--color-text); font-weight: 500; }

/* ---------- Карточка проекта ---------- */
.pj-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(var(--space-8), 5vw, var(--space-20));
  align-items: center;
  padding: clamp(var(--space-8), 3.5vw, var(--space-12));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014) 48%, transparent 80%),
    rgba(255, 255, 255, 0.012);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.pj-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% -10% auto -10%;
  height: 160%;
  background: radial-gradient(52% 58% at 20% 22%, color-mix(in oklab, var(--color-primary) 12%, transparent) 0%, transparent 72%);
  pointer-events: none;
}

.pj-card-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pj-card-title {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.03;
  letter-spacing: -0.01em;
}

.pj-card-tagline {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.pj-card-text {
  margin-top: var(--space-6);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 56ch;
}

.pj-card-text strong { color: var(--color-text); font-weight: 500; }

.pj-honest {
  margin-top: var(--space-5);
  padding-left: var(--space-5);
  border-left: 2px solid color-mix(in oklab, var(--color-primary) 45%, transparent);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 56ch;
}

.pj-status {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.pj-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.03);
}

.pj-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 18%, transparent);
}

.pj-actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---------- Корпус телефона ---------- */
.pj-phone-wrap {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
}

.pj-phone {
  position: relative;
  width: min(306px, 78vw);
  padding: 9px;
  border-radius: 36px;
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.02));
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 0 70px color-mix(in oklab, var(--color-primary) 10%, transparent);
  overflow: hidden;
}

.pj-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  background: var(--color-bg-2);
}

.pj-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 36px;
  background: linear-gradient(180deg, transparent 38%, rgba(94, 234, 212, 0.1) 50%, transparent 62%);
  background-size: 100% 240%;
  animation: pj-scan 7s linear infinite;
  pointer-events: none;
}

@keyframes pj-scan {
  from { background-position: 0 -130%; }
  to { background-position: 0 130%; }
}

.pj-phone-caption {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  max-width: 34ch;
  line-height: 1.5;
}

/* ---------- Ролик ---------- */
.pj-video {
  position: relative;
  margin-top: var(--space-10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.pj-video-el {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.pj-video video::cue { font-family: var(--font-body); }

/* ---------- Три шага ---------- */
.pj-steps {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
}

.pj-step {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.018);
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}

.pj-step:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-3px);
}

.pj-step-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--color-primary);
}

.pj-step-media {
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-2);
  color: inherit;
  cursor: zoom-in;
  transition: border-color var(--transition-interactive);
}

.pj-step-media:hover {
  border-color: var(--color-border-strong);
}

.pj-step-media:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.pj-step-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pj-step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.15;
}

.pj-step p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---------- Веса показателей ---------- */
.pj-weights-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
  margin-top: var(--space-10);
}

.pj-weights {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pj-weight-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.pj-weight-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
}

.pj-weight-track {
  margin-top: var(--space-2);
  height: 5px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.pj-weight-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary-deep), var(--color-primary-2));
  transition: width 900ms var(--ease-out);
}

.reveal.in .pj-weight-bar { width: var(--w, 0%); }

.pj-note {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  line-height: 1.6;
}

.pj-limits {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.018);
}

.pj-limits h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.15;
}

.pj-limits ul {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

.pj-limits li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.pj-limits li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-family: var(--font-mono);
}

/* ---------- Галерея экранов ---------- */
.pj-gallery {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-5);
}

.pj-shot {
  display: block;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  overflow: hidden;
  font: inherit;
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}

.pj-shot:hover,
.pj-shot:focus-visible {
  border-color: var(--color-border-strong);
  transform: translateY(-3px);
}

.pj-shot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.pj-shot img {
  display: block;
  width: 100%;
  aspect-ratio: var(--pj-shot-aspect, 9 / 17);
  object-fit: cover;
  object-position: top center;
  background: var(--color-bg-2);
}

.pj-shot-cap {
  display: block;
  padding: var(--space-3) var(--space-4) var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-faint);
}

.pj-shot[hidden] { display: none; }

.pj-gallery-actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---------- Просмотр снимка ----------
   2026-10-01. Было: width: min(92vw, 520px) — жёсткий потолок 520 px, из-за
   которого снимок 1440×900 открывался в четверть экрана. Теперь диалог
   занимает весь экран, а снимок получает всё место, что осталось после
   подписи и панели кнопок. Размер картинки — через max-width/max-height:
   пропорции сохраняются, обрезки нет, увеличения сверх собственного размера
   тоже нет (иначе мыло). */
.pj-lb {
  position: fixed;
  inset: 0;
  margin: 0;
  width: auto;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right))
    max(var(--space-5), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: rgba(5, 6, 10, 0.96);
  color: var(--color-text);
  overflow: hidden;
}

/* display задаём только открытому диалогу: безусловное правило перебило бы
   браузерное «закрытый диалог не показывать». */
.pj-lb[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-4);
}

.pj-lb::backdrop {
  background: rgba(5, 6, 10, 0.86);
  backdrop-filter: blur(6px);
}

.pj-lb figure {
  margin: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-3);
  /* Клик по пустому месту вокруг снимка закрывает просмотр (обработчик в
     projects.js срабатывает на самом диалоге). Без этого фигура перехватывала
     бы клики, и закрыть можно было бы только рамкой в 16–20 px. */
  pointer-events: none;
}

.pj-lb img,
.pj-lb figcaption {
  pointer-events: auto;
}

.pj-lb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  justify-self: center;
  align-self: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-2);
}

/* Подпись приходит из разметки и бывает длинной: своя прокрутка нужна, чтобы
   она не выдавливала снимок и кнопки за пределы экрана. Первое значение —
   запасной вариант для браузеров без единицы lh. */
.pj-lb figcaption {
  max-height: 6rem;
  max-height: min(3lh, 18dvh);
  overflow: auto;
  overscroll-behavior: contain;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.pj-lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Низкий экран в горизонтальной ориентации (телефон лёг боком): кнопки уходят
   в правую колонку, снимку достаётся вся высота. */
@media (max-height: 560px) and (orientation: landscape) {
  .pj-lb[open] {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "shot bar";
  }

  .pj-lb figure { grid-area: shot; }

  .pj-lb-bar {
    grid-area: bar;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .pj-lb-nav { flex-direction: column; }

  .pj-lb figcaption { max-height: min(2lh, 32dvh); }
}

.pj-lb-nav {
  display: inline-flex;
  gap: var(--space-3);
}

.pj-lb-btn {
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--transition-interactive), color var(--transition-interactive);
}

.pj-lb-btn:hover,
.pj-lb-btn:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- Факты и призыв к действию ---------- */
.pj-facts {
  margin-top: var(--space-10);
  display: grid;
  gap: var(--space-5);
  max-width: 52ch;
}

.pj-facts > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.pj-facts > div:last-child { border-bottom: none; padding-bottom: 0; }

.pj-facts dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pj-facts dd {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.pj-cta {
  margin-top: var(--space-12);
  padding: clamp(var(--space-8), 3.5vw, var(--space-12));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 46%, transparent 78%),
    rgba(255, 255, 255, 0.01);
}

.pj-cta h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.1;
}

.pj-cta p {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 52ch;
}

.pj-cta-actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.pj-next {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  line-height: 1.7;
}

/* ---------- Прокрутка к якорям ---------- */
.pj-section,
.pj-hero,
.projlink-section { scroll-margin-top: calc(var(--space-20) + var(--space-4)); }

/* ---------- Адаптив ---------- */
@media (max-width: 980px) {
  .projlink,
  .pj-card,
  .pj-weights-grid {
    grid-template-columns: 1fr;
  }

  .projlink-media { order: -1; }
  .pj-phone-wrap { justify-items: start; }
  .pj-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .pj-steps { grid-template-columns: 1fr; }
  .pj-hero { padding-top: calc(var(--space-20) + var(--space-6)); }
  .pj-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pillars { grid-template-columns: 1fr; }
  .pj-facts > div { grid-template-columns: 1fr; gap: var(--space-2); }
  .pj-phone { width: min(306px, 86vw); }
  .pj-actions .btn,
  .pj-gallery-actions .btn,
  .pj-cta-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .projlink,
  .pj-step,
  .pj-shot,
  .pj-play { transition: none; }
  .pj-phone::after { animation: none; opacity: 0.28; }
  .pj-weight-bar { transition: none; }
}

/* ==========================================================================
   Альбом проектов и лента-тизер (добавлено 30.09.2026)
   Новые классы: .pj-tiles/.pj-tile*, .pj-crumbs, .pj-next-links,
   .teaser-grid/.teaser-card. Существующие правила не меняются.
   ========================================================================== */

.pj-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.pj-crumbs a { color: var(--color-primary); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.8rem; margin-block: -0.8rem; }
.pj-crumbs a:hover, .pj-crumbs a:focus-visible { text-decoration: underline; }

.pj-tiles {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(var(--space-5), 2.5vw, var(--space-8));
}

.pj-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: clamp(var(--space-6), 2.4vw, var(--space-8));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014) 48%, transparent 80%),
    rgba(255, 255, 255, 0.012);
  color: inherit;
  text-decoration: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.45s ease, box-shadow 0.45s ease;
}

.pj-tile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60% -20% auto -20%;
  height: 150%;
  background: radial-gradient(46% 52% at 22% 18%, color-mix(in oklab, var(--color-primary) 14%, transparent) 0%, transparent 72%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

a.pj-tile:hover, a.pj-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: 0 34px 70px -46px rgba(0, 0, 0, 0.95);
}

a.pj-tile:hover::before, a.pj-tile:focus-visible::before { opacity: 1; }

.pj-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.pj-tile-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-border-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.pj-tile-logo img { display: block; width: auto; height: auto; max-width: 36px; max-height: 36px; }

.pj-tile-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--color-text-faint);
}

.pj-tile-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in oklab, var(--color-primary) 34%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}

.pj-tile-status--soon {
  border-color: var(--color-border-strong);
  color: var(--color-text-faint);
}

.pj-tile-cat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-2);
}

.pj-tile-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.pj-tile-line {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 46ch;
}

.pj-tile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.pj-tile-facts b {
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  font-weight: 500;
}

.pj-tile-go {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pj-tile--soon { cursor: default; }

.pj-tile-go--soon {
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: var(--text-xs);
}

.teaser-card--soon .teaser-status { color: var(--color-text-faint); }

.pj-next-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  margin-top: var(--space-10);
}

.pj-next-card {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.012);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.4s ease, transform 0.4s ease;
}

a.pj-next-card:hover, a.pj-next-card:focus-visible {
  border-color: var(--color-border-strong);
  transform: translateY(-3px);
}

.pj-next-card .pj-tile-name { font-size: var(--text-lg); }
.pj-next-card .pj-tile-line { font-size: var(--text-sm); }
.pj-next-card--soon { opacity: 0.72; }

/* ---------- Тизер «Реализованные проекты» на главной ---------- */
.teaser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.teaser-grid {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(var(--space-5), 2.5vw, var(--space-8));
}

.teaser-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  min-width: 0;
  padding: clamp(var(--space-5), 2.2vw, var(--space-7));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014) 48%, transparent 80%),
    rgba(255, 255, 255, 0.012);
  color: inherit;
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.45s ease;
}

a.teaser-card:hover, a.teaser-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
}

.teaser-card--soon { cursor: default; opacity: 0.78; }

.teaser-top {
  display: flex;
  flex-wrap: wrap;      /* длинное имя проекта уходит на свою строку, а не рвётся посередине слова */
  align-items: center;
  gap: var(--space-4);
}

.teaser-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.teaser-icon img { display: block; max-width: 34px; max-height: 34px; width: auto; height: auto; }

.teaser-name {
  min-width: 0;
  white-space: nowrap;
  hyphens: none;
  overflow-wrap: normal;
  font-family: var(--font-display);
  /* было var(--text-lg): «Криптоинформер» не влезал рядом со знаком и рвался на две строки */
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.teaser-line {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.teaser-status {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

@media (max-width: 700px) {
  .teaser-actions .btn, .pj-cta-actions .btn { width: 100%; }
  .teaser-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Очень узкие экраны (320–380 px): длинные слова в заголовках не влезают в строку
   и выходят за край. Уменьшаем кегль заголовка и ширину макета телефона —
   только на этих ширинах, вид на обычных экранах не меняется. */
@media (max-width: 380px) {
  /* только блоки, которые добавила эта сборка: правила для старых секций не трогаем */
  .projlink-section .section-title,
  .pj-section .section-title { font-size: var(--text-xl); }
  .pj-title { font-size: var(--text-2xl); }
  .pj-phone { width: min(306px, 76vw); }
  .pj-tile-name { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-tile, .teaser-card, .pj-next-card { transition: none; }
  a.pj-tile:hover, a.teaser-card:hover, a.pj-next-card:hover { transform: none; }
}

/* ==========================================================================
   2026-10-01 · Альбом проектов: правки по заданию владельца
   1) широкие снимки сайта — пять в одну линию;
   2) карточка перехода на внешний сайт в финале страницы проекта;
   3) абзац призыва во всю ширину (было 52ch).
   ========================================================================== */

.pj-gallery { --pj-shot-aspect: 640 / 1422; }

/* Кадр другой ориентации занимает всю строку и показывается целиком. */
.pj-shot--wide {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  --pj-shot-aspect: 1080 / 486;
}

.pj-gallery--wide {
  --pj-shot-aspect: 16 / 10;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pj-gallery--wide .pj-shot-cap {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-wrap: balance;
}

/* Ниже 1200 px пять кадров в строку не помещаются: одна линия сохраняется,
   но становится прокручиваемой — иначе кадры превращаются в нечитаемые марки. */
@media (max-width: 1199px) {
  .pj-gallery--wide {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
    scrollbar-width: thin;
  }

  .pj-gallery--wide .pj-shot {
    flex: 0 0 clamp(240px, 62vw, 420px);
    scroll-snap-align: start;
  }
}

/* ---------- Карточка перехода (финал страницы проекта) ---------- */
.project-exit {
  display: block;
  margin-top: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014) 48%, transparent 80%),
    rgba(255, 255, 255, 0.012);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}

.project-exit:hover,
.project-exit:focus-visible {
  border-color: var(--color-border-strong);
  transform: translateY(-3px);
}

.project-exit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.project-exit-body {
  display: block;
  padding: clamp(var(--space-8), 3.5vw, var(--space-12));
}

.project-exit-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.project-exit-title {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  /* min(): название проекта остаётся целым словом и на самой узкой ширине */
  font-size: min(var(--text-xl), 6.6vw);
  line-height: 1.05;
  overflow-wrap: normal;
  word-break: normal;
}

/* Полоса под текстом: настоящий экран сайта thaveora.com — секция «Лучшее из
   каталога». Показана целиком, без обрезки.
   2026-10-01. Было: обрезанная полоса карты 1440×432 (map-band.webp) — владелец
   назвал её непродающей. Пропорции заданы через aspect-ratio отдельно под
   каждый размер, чтобы полоса не «прыгала» при загрузке. */
.project-exit-shot {
  display: block;
  padding: var(--space-4) var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border);
}

.project-exit-shot picture {
  display: block;
}

.project-exit-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2140 / 1514;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-2);
}

@media (max-width: 900px) {
  .project-exit-shot img { aspect-ratio: 1380 / 1290; }
}

@media (max-width: 560px) {
  .project-exit-shot img { aspect-ratio: 960 / 1796; }
}

.project-exit-more {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}

.project-exit-more a {
  display: inline-block;
  padding: var(--space-3) 0;
  color: var(--color-primary);
  text-decoration: none;
}

.project-exit-more a:hover { text-decoration: underline; }

/* ---------- Абзац призыва во всю ширину ---------- */
.pj-cta--wide p { max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .project-exit { transition: none; }
}

/* Открыт просмотр снимка: страница под ним не прокручивается (важно для iOS). */
html.pj-lb-open { overflow: hidden; }

/* ==========================================================================
   Общие правила страниц проектов (перенесены из krypto.css, версия 01.10.2026).
   Здесь только то, что одинаково на всех страницах проектов: единый ролик
   и текст на всю ширину колонки.
   ========================================================================== */

/* ---------- Ролик проекта: 16:9 на большом экране, 9:16 на телефоне ----------
   В разметке два <video>, у каждого своя обложка (poster) и свой файл.
   Видим всегда ровно один: второй скрыт медиазапросом. У обоих preload="none" —
   до нажатия воспроизведения ни один файл не скачивается. Обложку через CSS
   подменить нельзя: браузер рисует на <video> без poster свою серую заглушку. */
.pj-video-switch { margin-top: var(--space-10); }

.pj-video--tall { display: none; }

.pj-video--wide .pj-video-el,
.pj-video--tall .pj-video-el { display: block; }

@media (max-width: 767px) {
  .pj-video--wide { display: none; }

  /* Оболочка занимает всю ширину колонки и работает рамкой: вертикальный кадр
     внутри неё центрирован, а по бокам остаётся спокойная подложка, а не чёрные полосы. */
  .pj-video--tall {
    display: block;
    width: 100%;
    margin-inline: auto;
    border-radius: var(--radius-md);
    background: var(--color-bg-2);
  }

  /* Ограничение стоит на ширине кадра 9:16 — так высота не может превысить 60% экрана.
     Сначала запасное значение в vh (старые браузеры), затем svh. */
  .pj-video--tall .pj-video-el {
    aspect-ratio: 9 / 16;
    width: min(100%, 405px, calc(60vh * 9 / 16));
    width: min(100%, 405px, calc(60svh * 9 / 16));
    margin-inline: auto;
  }
}

/* ---------- Текст на всю ширину: лид + две колонки ----------
   Владелец: текст занимал узкую полосу из-за общего правила base.css
   p,li{max-width:60ch} и .pj-prose{max-width:62ch}. Здесь полоса снята:
   короткий лид идёт во всю ширину, длинные абзацы встают рядом в две колонки. */
.pj-prose--editorial { max-width: none; }
.pj-prose--editorial p { max-width: none; }

.pj-prose--editorial .pj-prose-lead {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.5;
}

.pj-prose-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-12);
  row-gap: var(--space-6);
  margin-top: var(--space-6);
}

.pj-prose-cols p { margin: 0; }

@media (max-width: 1023px) {
  .pj-prose-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Список терминов и описаний на всю ширину ----------
   Колонка термина 130 px не вмещала слово «ДОСТОВЕРНОСТИ» — оно ломалось
   по буквам. Ниже предел колонки термина и возврат в одну колонку на телефоне. */
.pj-facts { max-width: none; }

.pj-facts > div {
  grid-template-columns: minmax(15rem, 30%) minmax(0, 1fr);
}

@media (max-width: 700px) {
  .pj-facts > div { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   2026-10-01 · Раздел «Экраны» на страницах «Предсказателя»: ровно пять кадров
   в одну линию (решение владельца). Базовый класс .pj-gallery не меняется —
   правка живёт в модификаторе --row5 и подключена только на двух страницах
   Предсказателя, поэтому галерея Thaveora (.pj-gallery--wide) не затрагивается.
   Выше 1200 px — пять равных колонок, один ряд без переноса и без второго ряда.
   Ниже 1200 px — та же линия, но прокручиваемая: пять портретных кадров (9:19,9)
   в 350 px телефона дали бы по 64 px ширины, то есть значки вместо экранов.
   ========================================================================== */

.pj-gallery--row5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1199px) {
  .pj-gallery--row5 {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
    scrollbar-width: thin;
  }

  .pj-gallery--row5 .pj-shot {
    flex: 0 0 clamp(200px, 52vw, 260px);
    scroll-snap-align: start;
  }
}
/* RuStore download CTA */
.pj-store{margin-top:var(--space-8);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.pj-store-btn{display:inline-block;line-height:0;transition:transform var(--transition-interactive), box-shadow var(--transition-interactive)}
.pj-store-btn img{display:block;height:56px;width:auto}
.pj-store-btn:hover,.pj-store-btn:focus-visible{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 30px color-mix(in oklab,var(--color-primary) 18%,transparent)}
.pj-store-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.pj-store-note{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--color-text-faint)}
@media (prefers-reduced-motion: reduce){.pj-store-btn{transition:none}}