/* ============================================================================
   BizFlow — САЙТ, презентація CRM кадрами Довідника (SITE-PRESENTATION, 13.10.2026). Окремий файл поверх site-v2.css (і скіну SITE-WOW).
   Підключає partials/v2/page.php ЛИШЕ на сторінках, де є data-pres (хаб, 11 ніш, головна). Токени — лише --bf-* мови v2 і --wow-* скіну
   (із запасними значеннями, якщо скін вимкнено); власних токенів немає. Неймспейс pres-*. Без бібліотек; 3D — CSS perspective.
   Рух: нахил від вказівника (лише hover:hover + pointer:fine), автопрогін «Сценарію» — лише коли немає prefers-reduced-motion.
   ============================================================================ */

/* ── Секція: фон на всю ширину вікна (секція — прямий нащадок main; свічення — власний градієнт секції, без обрізаних боків) ── */
.pres { position: relative; isolation: isolate; }
.pres::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, color-mix(in srgb, var(--wow-g1, var(--bf-accent)) 12%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 100%, color-mix(in srgb, var(--wow-g2, var(--bf-accent)) 10%, transparent), transparent 70%);
}
.pres .crm-container, .pres .bf2-container { min-width: 0; }

/* ── Рамка кадру ── */
.pres-shot { margin: 0; min-width: 0; position: relative; }
.pres-frame {
  display: block; position: relative; overflow: hidden; background: var(--bf-card);
  border: 1px solid var(--bf-border); border-radius: var(--bf-radius-xl);
  box-shadow: var(--bf-shadow-lg), 0 24px 60px var(--wow-glow, transparent);
}
.pres-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bf-bg-elevated); box-shadow: inset 0 -1px 0 var(--bf-hairline); }
.pres-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--bf-border-input, var(--bf-fill-hover)); flex: none; }
.pres-pill { margin-left: 10px; padding: 3px 14px; border-radius: 9999px; background: var(--bf-fill); color: var(--bf-text-muted); font-size: 12px; line-height: 1.4; }
.pres-img { display: block; width: 100%; height: auto; }
.pres-frame--phone { max-width: 300px; margin-inline: auto; border-radius: 34px; padding: 8px; background: var(--bf-fill-hover); }
.pres-frame--phone .pres-img { border-radius: 26px; }
.pres-notch { position: absolute; z-index: 1; top: 12px; left: 50%; width: 76px; height: 6px; margin-left: -38px; border-radius: 6px; background: var(--bf-text); opacity: .16; }
.pres-shot--mobile { max-width: 320px; margin-inline: auto; }
.pres-demo {
  position: absolute; z-index: 2; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; line-height: 1.5;
  background: color-mix(in srgb, var(--bf-card) 86%, transparent); color: var(--bf-text-muted); border: 1px solid var(--bf-border);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none;
}
.pres-shot--mobile .pres-demo { position: static; display: block; width: fit-content; margin: 10px auto 0; white-space: nowrap; }
.pres-cap { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; justify-content: center; text-align: center; }
.pres-cap__t { color: var(--bf-text); font-size: 15px; line-height: 1.45; max-width: 62ch; }
.pres-tariff { padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; color: var(--bf-accent-ink); background: var(--bf-accent-soft, var(--bf-fill)); white-space: nowrap; }
.pres-zoom { display: block; cursor: zoom-in; color: inherit; text-decoration: none; border-radius: var(--bf-radius-xl); }
.pres-zoom:focus-visible, .pres-tab:focus-visible, .pres-thumb:focus-visible, .pres-step:focus-visible, .pres-lb button:focus-visible { outline: 2px solid var(--bf-accent-ink, var(--bf-accent)); outline-offset: 3px; }

/* ── Нахил 3D (лише hover + точний вказівник; на дотик/reduced-motion — плоско) ── */
.pres-tilt, .pres-home { perspective: 1400px; }
.pres-tilt .pres-shot { transform-style: preserve-3d; transform: rotateY(var(--pry, 0deg)) rotateX(var(--prx, 0deg)); transition: transform 260ms var(--bf-ease, ease); will-change: transform; }

/* ── Hero панель сторінки ніші (праворуч у герої) ── */
.pres-hero { min-width: 0; }
.pres-hero .pres-shot { max-width: 100%; }
@media (max-width: 899px) { .pres-hero { display: none; } }   /* на телефоні кадри — у галереї нижче; hero-зображення не вантажиться (partials/pres.php, nomobile) */
@media (min-width: 900px) { .pres-hero .pres-shot--hero { --pry: -7deg; --prx: 3deg; } }

/* ── Галерея: вкладки → сцена → перемикач ── */
.pres-gal { margin-top: 28px; }
.pres-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.pres-tab {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 9999px; text-decoration: none; font-weight: 600; font-size: 15px;
  color: var(--bf-text); background: var(--bf-fill); border: 1px solid var(--bf-border); transition: background-color 160ms, color 160ms, box-shadow 160ms;
}
.pres-tab:hover { background: var(--bf-fill-hover); }
.pres-tab[aria-selected="true"] { background: var(--bf-inverse); color: var(--bf-on-inverse); border-color: transparent; box-shadow: 0 6px 18px var(--wow-glow, transparent); }
.pres-panel[hidden], .pres-shot[hidden] { display: none; }
.pres-stage { max-width: 1040px; margin-inline: auto; }
.pres-stage .pres-shot--mobile { max-width: 300px; }
.pres-thumbs { list-style: none; margin: 22px auto 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 1040px; }
.pres-thumb {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: var(--bf-radius-md); text-decoration: none; font-size: 14px; color: var(--bf-text-muted);
  background: transparent; border: 1px solid var(--bf-border); transition: color 160ms, background-color 160ms, border-color 160ms;
}
.pres-thumb:hover { color: var(--bf-text); background: var(--bf-fill); }
.pres-thumb[aria-current="true"] { color: var(--bf-accent-ink); border-color: var(--wow-line, var(--bf-accent-ink)); background: var(--bf-accent-soft, var(--bf-fill)); font-weight: 600; }
.pres-note { margin: 22px auto 0; max-width: 720px; text-align: center; color: var(--bf-text-muted); font-size: 14px; }
.pres-note a { color: var(--bf-accent-ink); }

/* ── Хаб: композиція з 3 кадрів ніші ── */
.pres-hub__stack { position: relative; max-width: 1040px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) {
  .pres-hub__stack { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "a b" "a c"; align-items: start; }
  .pres-hub__f1 { grid-area: a; } .pres-hub__f2 { grid-area: b; } .pres-hub__f3 { grid-area: c; }
}
.pres-hub__f2 .pres-shot, .pres-hub__f3 .pres-shot { max-width: 100%; }
.pres-hub__link { text-align: center; margin: 26px 0 0; }
.pres-tabs--wrap { max-width: 1040px; margin-inline: auto; }

/* ── Головна: тизер 3 кадрів у перспективі ── */
.pres-home { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 1040px; margin: 28px auto 0; }
@media (min-width: 900px) {
  .pres-home { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto; align-items: center; }
  .pres-home__f1 { grid-area: 1 / 1 / 2 / span 5; transform: rotateY(12deg) translateZ(-30px); }
  .pres-home__f2 { grid-area: 1 / 4 / 2 / span 6; z-index: 2; }
  .pres-home__f3 { grid-area: 1 / 8 / 2 / span 5; transform: rotateY(-12deg) translateZ(-30px); }
  .pres-home .pres-shot { transform-style: preserve-3d; }
}
.pres-home + .bf2-actions { margin-top: 28px; justify-content: center; }

/* ── «Сценарій»: кроки + сцена ── */
.pres-flow__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; align-items: center; }
@media (min-width: 900px) { .pres-flow__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.pres-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; order: 2; }
.pres-flow__stage { order: 1; min-width: 0; }
@media (min-width: 900px) { .pres-steps { order: 1; } .pres-flow__stage { order: 2; } }
.pres-step {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--bf-radius-lg, 16px); text-decoration: none; color: var(--bf-text);
  background: var(--bf-card); border: 1px solid var(--bf-border); transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.pres-step:hover { border-color: var(--wow-line, var(--bf-border)); }
.pres-step[aria-current="step"] { border-color: var(--wow-line, var(--bf-accent-ink)); box-shadow: 0 10px 28px var(--wow-glow, transparent); }
.pres-step__n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; font-weight: 700; color: var(--bf-on-accent); background: var(--wow-grad-btn, var(--bf-accent)); }
.pres-step__t { font-size: 15px; line-height: 1.5; padding-top: 4px; }
.pres-flow__stage .pres-shot { max-width: 100%; }
.pres-flow__stage .pres-shot--mobile { max-width: 300px; }
.pres-flow__stage .pres-shot:not([hidden]) { animation: pres-fade 360ms var(--bf-ease, ease) both; }
@keyframes pres-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Лайтбокс ── */
.pres-lb { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: 1fr auto; padding: 16px; background: rgba(8, 6, 28, 0.86); }
.pres-lb[hidden] { display: none; }
.pres-lb__img { align-self: center; justify-self: center; max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: var(--bf-radius-lg, 12px); background: var(--bf-card); box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
.pres-lb__bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding-top: 12px; color: #fff; font-size: 15px; text-align: center; }
.pres-lb__cap { max-width: 70ch; }
.pres-lb button { min-width: 44px; min-height: 44px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; cursor: pointer; }
.pres-lb button:hover { background: rgba(255, 255, 255, .22); }
.pres-lb__x { position: absolute; top: 12px; right: 12px; }

@media (prefers-reduced-motion: reduce) {
  .pres-tilt .pres-shot, .pres-home .pres-shot { transition: none; }
  .pres-flow__stage .pres-shot:not([hidden]) { animation: none; }
}
@media (hover: none), (pointer: coarse) {
  .pres-tilt .pres-shot { transform: none !important; }
}
html.wow-flat .pres-tilt .pres-shot, html.wow-flat .pres-home .pres-shot { transform: none !important; }
@media print { .pres-lb { display: none; } }