/* Три напрями як одна плита: назви стоять у шаховому порядку (ліворуч → праворуч → ліворуч),
   а між блоками замість щілини — хвиля, та сама, що на sonapro.app над клонованими голосами.
   Підключається ПІСЛЯ voice-image-sections.css і video-studio.css і лише перекриває їх. */

/* ── на всю ширину, як секції на sonapro.app: без коробки навколо, без рамок і заокруглень.
      Фон блоку йде від краю до краю, а вміст лишається тієї ширини, що була в картці ── */
.sona-directions { max-width:none; margin:0; padding:0 }
.sona-directions #voice,
.sona-directions #images,
.sona-directions #video { margin:0; border:0; border-radius:0; box-shadow:none }
/* як у проді між смугою мов і першою секцією — одна тонка лінія згори, і все */
.sona-directions #voice { border-top:1px solid #e3eef7 }
.sona-directions :is(#voice, #images) > :is(.section-topline, .voice-layout, .section-bottom),
.sona-directions #video > :is(.sv-topline, .sv-layout, .sv-bottomline) { max-width:1340px; margin-inline:auto }
/* хвиля звисає з верхнього блоку в нижній, тож нижньому треба місце, щоб вона не лягла на текст */
.sona-directions #images,
.sona-directions #video { padding-top:calc(clamp(78px,7.6vw,128px) + 6px) }

/* ── хвилі: розмітка й рух як у проді (.fwave), тут лише кольори й шар ── */
/* передній шар гойдається на кілька пікселів униз і відкриває над собою задній — на проді цей
   край ховається над межею секції; тут секція обрізає все, що вище, тож піднімаємо хвилю так само */
.sona-directions .fwave { top:-10px; z-index:1 }
/* фони блоків лишаються тими, що були. Передній шар хвилі — суцільний колір верхнього блоку, щоб стик
   не мав шва; задній — градієнт, що розчиняється в нижній блок: після озвучки це блакитне сяйво,
   між зображеннями й відео — ледь помітна маска */
.sona-directions #images .fwave .w2 { fill:#f6fbff }
.sona-directions #images .fwave .w1 { fill:url(#waveVoice) }
.sona-directions #video .fwave .w2 { fill:#fff }
.sona-directions #video .fwave .w1 { fill:url(#waveImage) }
@media (prefers-reduced-motion:reduce) { .sona-directions .fwave .w1, .sona-directions .fwave .w2 { animation:none } }

/* ── шахівниця: у зображень слайдер ліворуч, назва праворуч. Колонка опису завширшки з її
      найдовше слово («зображень»), але не вужча за 340px; решта — слайдеру, проміжок ширший ── */
.sona-directions .image-section .image-layout { grid-template-columns:minmax(0,1fr) minmax(min-content,340px) }
.sona-directions .image-section .image-showcase { order:-1 }
@media (min-width:981px) {
  /* вікно каруселі мало −28px і залазило в проміжок до тексту — з цього боку прибираємо */
  .sona-directions .image-section .image-viewport { margin-right:0 }
  .sona-directions .image-section .image-layout { column-gap:clamp(64px,6vw,104px) }
  /* заголовок того ж розміру, що «для озвучки»: на 58px «зображень» тримав колонку у 400px
     і не пускав її праворуч */
  .sona-directions .image-section h2.solo .title-rest { font-size:clamp(34px,3.4vw,52px) }
}
@media (max-width:1190px) {
  .sona-directions .image-section .image-layout { grid-template-columns:minmax(0,1.5fr) minmax(0,.65fr); column-gap:clamp(44px,4.6vw,72px) }
}
/* у одну колонку назва знову йде першою — це правило має стояти після попереднього */
@media (max-width:980px) {
  .sona-directions .image-section .image-layout { grid-template-columns:1fr }
  .sona-directions .image-section .image-showcase { order:0 }
}

/* ── картинки 16:9, як вікно відео: були майже квадратні (410×342) й обрізали кадр з боків.
      Висота картки — одна змінна, ширина й висота вікна каруселі рахуються від неї ── */
.sona-directions .image-section { --card-h:clamp(300px,22vw,340px) }
.sona-directions .image-section .image-frame { width:calc(var(--card-h) * 16 / 9); height:var(--card-h) }
/* 22px згори + 43px зсуву другої картки + 35px під тінь */
.sona-directions .image-section .image-viewport { height:calc(var(--card-h) + 100px) }
.sona-directions .image-section .image-frame strong { max-width:none }
/* карток у групі три, тож «вгору-вниз» на стику груп дає дві верхні поруч; третя стає посередині —
   ритм 0 / 43 / 21 повторюється рівно й не ламає безшовну петлю */
.sona-directions .image-section .image-frame:nth-child(3) { margin-top:21px }
@media (max-width:1190px) { .sona-directions .image-section { --card-h:270px } }
@media (max-width:980px) { .sona-directions .image-section { --card-h:290px } }
@media (max-width:620px) {
  .sona-directions .image-section { --card-h:180px }
  /* на телефоні 16px згори, 34px зсуву, 35px знизу */
  .sona-directions .image-section .image-viewport { height:calc(var(--card-h) + 85px) }
  .sona-directions .image-section .image-frame:nth-child(3) { margin-top:17px }
}
@media (max-width:360px) { .sona-directions .image-section { --card-h:168px } }

/* ── «SONA» лишається тільки в першому блоці: далі назви читаються як продовження речення,
      золотом і фіолетом — тими самими, що «арт» і «відео» в головному екрані ── */
.sona-directions h2.solo .title-rest,
.sona-video-section h2.solo .sv-title {
  display:block; margin:0; font-size:clamp(40px,3.9vw,58px); font-weight:600; line-height:1.04;
  letter-spacing:-.045em; white-space:normal; color:transparent;
  -webkit-background-clip:text; background-clip:text }
.sona-directions h2.solo.gold .title-rest { background-image:linear-gradient(110deg,#f5b301,#e0a006 60%,#7a5406) }
.sona-video-section h2.solo.veo .sv-title { background-image:linear-gradient(110deg,#a78bfa,#5b3fe0 60%,#4b2fc9) }
@media (max-width:620px) {
  .sona-directions h2.solo .title-rest,
  .sona-video-section h2.solo .sv-title { font-size:clamp(34px,10vw,46px) }
}

/* ── озвучка: «для озвучки» крупніше й жирніше, одним рядком під SONA, синім градієнтом —
      як «голос» у головному екрані, у парі до золота зображень і фіолету відео ── */
.sona-directions #voice .title-rest {
  font-size:clamp(34px,3.4vw,52px); font-weight:600; letter-spacing:-.045em; color:transparent;
  background-image:linear-gradient(110deg,#2f9bf0,#1577cf 60%,#0e63b8);
  -webkit-background-clip:text; background-clip:text }

/* ── заголовки колонок голосів: були 12px/9px і губилися — тепер шрифтом заголовків сайту,
      кожен кольором своєї категорії, з помітнішою крапкою й читабельним підписом ── */
.sona-directions #voice .collection-heads { gap:16px; margin-bottom:8px }
.sona-directions #voice .collection-heads > span {
  font:600 clamp(16px,1.35vw,20px)/1.2 'Unbounded',sans-serif; letter-spacing:-.02em;
  color:#0d2235; padding:0 13px 12px }
.sona-directions #voice .collection-heads > span:first-child { font-weight:700; color:#a27d38 }
.sona-directions #voice .collection-heads > span:nth-child(2) { color:#1577cf }
.sona-directions #voice .collection-heads small {
  font:500 12.5px/1.4 'Manrope',sans-serif; letter-spacing:0; margin-top:7px; color:#5d758a }
.sona-directions #voice .collection-heads .category-dot { width:7px; height:7px; margin-right:9px; vertical-align:3px }

/* у підвалі озвучки лишився один напис — тепер він і first-, і last-child, тож правило для правого
   напису (9px, розрідка, а на телефоні display:none) чіпляло б і його; повертаємо йому власний вигляд */
.sona-directions #voice .section-bottom > span:only-child { display:inline; font-size:11px; letter-spacing:0 }

/* ── «800+ голосів» — великий нахилений знак з головної версії блоку, тепер клікабельний:
      веде в бібліотеку й відгукується на наведення, як кнопка ── */
.sona-directions #voice .showcase-footer { align-items:center; min-height:0 }
.sona-directions #voice .vmini-all { flex:none; margin:0 4px 0 6px; cursor:pointer; text-decoration:none;
  transition:transform .3s var(--ease) }
.sona-directions #voice .vmini-all:hover { transform:rotate(-1.5deg) translateY(-3px) scale(1.04) }
.sona-directions #voice .vmini-all .tx b { font-size:15px }
.sona-directions #voice .vmini-all .tx em { font-size:11.5px; color:#5d758a }

/* ── «Відкрити бібліотеку голосів» — окрема помітна кнопка в один ряд зі «Спробувати озвучку» ── */
.sona-directions #voice .copy-actions { flex-wrap:wrap; gap:10px }
.sona-directions #voice .copy-actions .primary { padding:0 18px; font-size:12.5px }
.sona-directions #voice .copy-actions .lib {
  display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 18px; border-radius:100px;
  border:1.5px solid #2f9bf0; background:#fff; color:#1577cf; font:800 12.5px/1 'Manrope',sans-serif;
  text-decoration:none; box-shadow:0 12px 26px -20px rgba(21,119,207,.7);
  transition:transform .25s var(--ease), background .25s, color .25s }
.sona-directions #voice .copy-actions .lib:hover { transform:translateY(-3px); background:#eaf5fe }
/* трохи ширша колонка тексту, щоб дві кнопки стали поруч, а не одна під одною */
@media (min-width:1191px) {
  .sona-directions #voice .voice-layout { grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) }
}
@media (max-width:620px) {
  /* на телефоні знак не вміщається поруч із підказкою — переносимо його на власний рядок */
  .sona-directions #voice .showcase-footer { flex-wrap:wrap; row-gap:14px }
  .sona-directions #voice .vmini-all { margin:2px auto 0 }
}

/* ═══════════ темна тема трьох напрямів ═══════════
   voice-image-sections.css задає власні світлі токени прямо на .sona-directions, тому глобальна темна
   тема сюди не доходила й «для озвучки» та «для зображень» лишались білими. Токени повертаємо до
   теми сайту (inherit бере значення з :root[data-theme="dark"] у theme.css), а жорстко зашиті світлі
   кольори отримують темні пари. Палітра — графіт із холодним відтінком, синій лишається акцентом. */
:root[data-theme="dark"] .sona-directions {
  --ink:inherit; --text:inherit; --muted:inherit; --line:inherit; --surface:inherit;
  --sky:inherit; --sky-2:inherit; --sky-deep:inherit; --sky-ink:inherit;
  --pro:#e7c46f; --clone:#7fd3bd }
:root[data-theme="dark"] .sona-directions :is(button,a,summary):focus-visible { outline-color:var(--sky-deep) }

/* фони блоків чергуються, як у світлій темі: озвучка й відео — нижча поверхня з крапками, зображення — вища */
:root[data-theme="dark"] .sona-directions #voice {
  background-color:var(--surface-2); border-color:var(--line-2);
  background-image:radial-gradient(rgba(150,175,205,.075) .8px,transparent 1.3px) }
:root[data-theme="dark"] .sona-directions #voice { border-top-color:var(--line-2) }

/* хвилі між блоками: передній шар — колір блоку згори, задній — ледь блакитне сяйво, що тане вниз */
:root[data-theme="dark"] .sona-directions #images .fwave .w2 { fill:var(--surface-2) }
:root[data-theme="dark"] .sona-directions #video .fwave .w2 { fill:var(--surface) }
:root[data-theme="dark"] .sona-directions #waveVoice stop { stop-color:#1c2835 }
:root[data-theme="dark"] .sona-directions #waveImage stop { stop-color:#1b222b }

/* написи, що були зашиті світло-сірим/синім */
:root[data-theme="dark"] .sona-directions :is(.section-topline,.section-bottom,.eyebrow,.listen-label,.motion-toggle,
  .language,.voice-description,.sample-label,.showcase-footer,.image-reel-label,.image-reel-footer,.reel-footnote,
  .image-uses) { color:var(--muted) }
:root[data-theme="dark"] .sona-directions .section-topline span:first-child { color:#a9b8c6 }
:root[data-theme="dark"] .sona-directions .showcase-footer>span:last-child,
:root[data-theme="dark"] .sona-directions .image-reel-label>span:last-child { color:#76828e }
:root[data-theme="dark"] .sona-directions .collections .sona-word {
  background-image:linear-gradient(104deg,#f2f5f8,#c9d3dd 58%,#8fb7de) }
:root[data-theme="dark"] .sona-directions .voice-facts>div { border-left-color:var(--line) }
:root[data-theme="dark"] .sona-directions .voice-facts>div>span { color:var(--muted) }
:root[data-theme="dark"] .sona-directions .secondary { border-bottom-color:var(--line) }
:root[data-theme="dark"] .sona-directions :is(.footer-line,.reel-rule) { background:var(--line) }
:root[data-theme="dark"] .sona-directions .image-uses span+span::before { color:#56616d }

/* заголовки колонок голосів (кольори категорій — світліші пари тих самих відтінків) */
:root[data-theme="dark"] .sona-directions #voice .collection-heads > span { color:var(--ink) }
:root[data-theme="dark"] .sona-directions #voice .collection-heads > span:first-child,
:root[data-theme="dark"] .sona-directions .collection-heads>span:first-child,
:root[data-theme="dark"] .sona-directions .collections .voice-lane:first-child .lane-mobile-title { color:#e0bd6a }
:root[data-theme="dark"] .sona-directions #voice .collection-heads > span:nth-child(2) { color:var(--sky-deep) }
:root[data-theme="dark"] .sona-directions #voice .collection-heads small,
:root[data-theme="dark"] .sona-directions #voice .vmini-all .tx em { color:var(--muted) }
:root[data-theme="dark"] .sona-directions :is(.collection-heads>span,.collections .lane-mobile-title) { border-bottom-color:var(--line) }
:root[data-theme="dark"] .sona-directions #voice .collection-heads .clone-dot { background:#8f9aa6 }

/* картки голосів — піднята поверхня, мітки категорій — прозорі підкладки їхніх кольорів */
:root[data-theme="dark"] .sona-directions :is(.voice-card,.collections .voice-card) {
  background:var(--raised); border-color:var(--line); box-shadow:0 10px 22px -18px #000 }
:root[data-theme="dark"] .sona-directions .voice-card:hover { border-color:#3d5873; box-shadow:0 10px 26px -18px rgba(79,172,245,.45) }
:root[data-theme="dark"] .sona-directions .voice-card.is-playing { background:#232a33; border-color:var(--sky); box-shadow:0 0 0 2px rgba(79,172,245,.18) }
:root[data-theme="dark"] .sona-directions .source-label.pro { background:rgba(231,196,111,.13); color:var(--pro) }
:root[data-theme="dark"] .sona-directions .source-label.library { background:rgba(79,172,245,.15); color:#8fd0ff }
:root[data-theme="dark"] .sona-directions .source-label.clone { background:rgba(127,211,189,.13); color:var(--clone) }
:root[data-theme="dark"] .sona-directions .voice-name { color:var(--ink) }
:root[data-theme="dark"] .sona-directions .play-circle { background:#262d36; border-color:#323a45; color:#9fc9ee }
:root[data-theme="dark"] .sona-directions .collections .play-circle { background:var(--sky-tint); color:var(--sky-deep) }
:root[data-theme="dark"] .sona-directions .collections .voice-card:hover .play-circle,
:root[data-theme="dark"] .sona-directions .collections .voice-card.is-playing .play-circle { background:var(--grad); color:#fff }
:root[data-theme="dark"] .sona-directions .waveform i { background:rgba(143,208,255,.32) }
:root[data-theme="dark"] .sona-directions .pro .waveform i { background:rgba(231,196,111,.42) }
:root[data-theme="dark"] .sona-directions .clone .waveform i { background:rgba(127,211,189,.38) }
:root[data-theme="dark"] .sona-directions .is-playing .waveform i { background:var(--sky) }

/* «Відкрити бібліотеку голосів» — контурна кнопка на темному */
:root[data-theme="dark"] .sona-directions #voice .copy-actions .lib {
  background:transparent; color:var(--sky-deep); border-color:rgba(99,185,255,.55); box-shadow:none }
:root[data-theme="dark"] .sona-directions #voice .copy-actions .lib:hover { background:var(--sky-tint) }

/* зображення: плашки моделей, рамки каруселі, кнопки гортання */
:root[data-theme="dark"] .sona-directions .image-section { background:var(--surface) }
:root[data-theme="dark"] .sona-directions .image-models>span { background:var(--raised); border-color:var(--line); color:var(--text) }
:root[data-theme="dark"] .sona-directions .image-frame { background:var(--raised); box-shadow:0 18px 30px -22px #000 }
:root[data-theme="dark"] .sona-directions .reel-controls { background:var(--raised); border-color:var(--line); box-shadow:0 10px 24px -16px #000 }
:root[data-theme="dark"] .sona-directions .reel-controls button { color:var(--sky-deep) }
:root[data-theme="dark"] .sona-directions .reel-controls button:hover,
:root[data-theme="dark"] .sona-directions .reel-controls .image-motion { background:var(--sky-tint) }
:root[data-theme="dark"] .sona-directions .image-viewport.is-static { scrollbar-color:#3a434e transparent }

/* плашка «зараз грає»: на темному --ink світлий, тож фон і текст міняються місцями */
:root[data-theme="dark"] .sona-directions .audio-status { background:#2a3039; color:var(--ink); box-shadow:0 10px 26px -12px #000 }

/* відео: власні темні правила video-studio.css були темно-синіми — переводимо на той самий графіт */
:root[data-theme="dark"] .sona-directions .sona-video-section {
  --sv-ink:#e9edf2; --sv-muted:#8f9aa6; --sv-line:#2c333c; background:var(--surface-2); border-color:var(--line) }
:root[data-theme="dark"] .sona-directions .sona-video-section :is(.sv-topline>span:first-child,.sv-eyebrow) { color:#a9b8c6 }
:root[data-theme="dark"] .sona-directions .sona-video-section :is(.sv-studio-label,.sv-time,.sv-scene-title,.sv-status) { color:var(--muted) }
:root[data-theme="dark"] .sona-directions .sona-video-section .sv-studio-label i { background:#5aa9dd; box-shadow:0 0 0 4px rgba(79,172,245,.14) }
:root[data-theme="dark"] .sona-directions .sona-video-section .sv-showcase:before {
  background:radial-gradient(ellipse at 50% 53%,rgba(79,172,245,.10),transparent 66%) }
:root[data-theme="dark"] .sona-directions .sona-video-section .sv-frame { border-color:#262c34; background:#262c34; box-shadow:0 24px 44px -26px #000 }
:root[data-theme="dark"] .sona-directions .sona-video-section .sv-frame figcaption { color:#c7d0d9 }
:root[data-theme="dark"] .sona-directions .sona-video-section .sv-frame figcaption>span:first-child {
  background:rgba(20,24,29,.78); border-color:rgba(255,255,255,.08) }
:root[data-theme="dark"] .sona-directions .sona-video-section .sv-prompt { background:rgba(32,37,44,.95); border-color:#39424d; color:#c7d0d9 }
:root[data-theme="dark"] .sona-directions .sona-video-section .sv-play { background:var(--raised); border-color:var(--line); color:var(--sky-deep); box-shadow:none }
:root[data-theme="dark"] .sona-directions .sona-video-section .sv-timeline { background:var(--line) }
:root[data-theme="dark"] .sona-directions .sona-video-section .sv-progress { background:var(--sky) }
:root[data-theme="dark"] .sona-directions .sona-video-section .sv-scene { color:var(--muted) }
:root[data-theme="dark"] .sona-directions .sona-video-section .sv-scene[aria-pressed=true] { background:var(--raised); border-color:var(--line); color:var(--sky-deep) }
:root[data-theme="dark"] .sona-directions .sona-video-section :is(.sv-play,.sv-scene):hover { background:var(--sky-tint) }

/* назви напрямів: світлі градієнти тримали темний кінець (#0e63b8, #7a5406, #4b2fc9), що на графіті
   тьмяніє, — на темному кожна назва йде світлішою парою того самого кольору */
:root[data-theme="dark"] .sona-directions #voice .title-rest { background-image:linear-gradient(110deg,#8fd0ff,#4facf5 60%,#3b95e6) }
:root[data-theme="dark"] .sona-directions h2.solo.gold .title-rest { background-image:linear-gradient(110deg,#ffd75e,#f5b72a 60%,#d9960e) }
:root[data-theme="dark"] .sona-video-section h2.solo.veo .sv-title { background-image:linear-gradient(110deg,#cdbfff,#a78bfa 55%,#8467f5) }