/* Головна (WP) поверх story.css: форма Fluent №3 у панелі фіналу, сцени з панеллю (10–12), посилання в сценах. */

/* Мітка матеріалу — лівіше плаваючої кнопки Telegram (inc/seo-fixes.php), щоб не ховалась під нею */
@media (min-width: 901px) { .chip { right: calc(var(--gutter) + 4.75rem); } }

/* Великі монітори: трохи більші лише кутові блоки сцен — текст ліворуч, панель і заявка праворуч (решта як у макеті) */
@media (min-width: 1600px) { .copy, .panel, .order { zoom: 1.08; } .panel { max-height: calc((100vh - 7.5rem) / 1.08); } }
@media (min-width: 1800px) { .copy, .panel, .order { zoom: 1.15; } .panel { max-height: calc((100vh - 7.5rem) / 1.15); } } /* zoom множить і vh — висоту ділимо назад */

/* ——— Посилання в сценах ——— */
.scene-link { display: flex; width: fit-content; margin-top: 1rem; font-weight: 600; font-size: 0.9375rem; color: var(--accent); text-decoration: none; border-bottom: 1.5px solid currentColor; }
.scene-link:hover { opacity: .8; }
.tags--links a { text-decoration: none; }
.tags--links a:hover { color: var(--accent); }

/* ——— Сцени з панеллю праворуч (як фінал): текст ліворуч, деталі в панелі ——— */
.scene--panel .copy { width: min(32.5rem, 40vw); }
.panel { position: absolute; right: calc(var(--gutter) + 2.875rem); bottom: clamp(1.75rem, 7vh, 4.75rem); width: min(29.375rem, 40vw); max-height: calc(100vh - 7.5rem); overflow: auto; overscroll-behavior: contain; padding: 1.75rem; border-radius: 1.625rem; background: var(--paper); box-shadow: 0 1.875rem 4.375rem rgba(20, 14, 6, .14); transform: translateY(calc((1 - var(--v)) * 2.5rem)); }
.panel h3 { margin: 0 0 0.5rem; font: 800 1.3125rem/1.15 Geologica, sans-serif; letter-spacing: -.01em; }
.panel h3:not(:first-child) { margin-top: 1.375rem; }
.panel p { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.6; color: var(--muted); }
.panel p:last-child { margin-bottom: 0; }
.panel a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.1875rem; }
.copy p a { color: var(--ink); text-decoration-color: var(--accent); }
/* FAQ */
.panel--faq details { border-bottom: 1px solid var(--line); }
.panel--faq details:first-child { border-top: 1px solid var(--line); }
.panel--faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font: 700 1.0625rem/1.3 Geologica, sans-serif; cursor: pointer; list-style: none; }
.panel--faq summary::-webkit-details-marker { display: none; }
.panel--faq summary::after { content: "+"; flex: none; color: var(--accent); font-size: 1.5rem; line-height: 1; transition: transform .25s; }
.panel--faq details[open] summary::after { transform: rotate(45deg); }
.panel--faq details p { margin: 0 0 1rem; font-size: 0.9375rem; }
/* Свіжі статті */
.panel--posts ul { display: grid; gap: 0.875rem; margin: 0; padding: 0; list-style: none; }
.panel--posts a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.875rem; align-items: center; text-decoration: none; }
.panel--posts img { width: 7.5rem; height: 4.6875rem; object-fit: cover; border-radius: 0.75rem; background: var(--bg); }
.panel--posts b { display: block; font: 700 1rem/1.25 Geologica, sans-serif; }
.panel--posts a:hover b { color: var(--accent); }
.panel--posts small { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--muted); }

/* ——— Панель заявки (фінал): Fluent Form у стилі макета ——— */
.order { gap: clamp(0.625rem, 1.6vh, 1.125rem); }
.order__lead { margin: 0; font-size: 0.9375rem; color: var(--muted); }
/* поля форми — ../fluent.css (.ff-skin) */
.order .note { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.order .note a { color: var(--ink); text-decoration-color: var(--accent); }

@media (max-width: 900px) {
  /* телефон: панель — унизу на всю ширину, текст сцени — над нею */
  .panel { left: var(--gutter); right: var(--gutter); width: auto; bottom: 0.875rem; max-height: min(50vh, 26.25rem); padding: 1.125rem; border-radius: 1.375rem; }
  .scene--panel .copy { bottom: calc(min(50vh, 26.25rem) + 0.875rem); width: auto; padding-top: 2.5rem; }
  .panel--posts a { grid-template-columns: 6rem minmax(0, 1fr); }
  .panel--posts img { width: 6rem; height: 3.75rem; }
}
/* телефон: у сценах з панеллю над нею лише номер і заголовок — інакше текст ховає слово й нитку */
@media (max-width: 900px) { .scene--panel .copy p { display: none; } }

/* ——— Правки 9.10 (користувач, телефон) ——— */
/* Меню: більше повітря між пунктами; плаваючі WhatsApp і Telegram (inc/seo-fixes.php) не лежать поверх відкритого меню */
.menu { gap: clamp(0.5rem, 2.2vh, 1.25rem); }
body:has(#menu:not([hidden])) .msg-float { display: none; }
/* Бейдж матеріалу на ≤900px закріплений під шапкою; у залогінених адмін-панель WP зсуває шапку (shared.css) — бейдж за нею */
@media (max-width: 900px) { .admin-bar .chip { top: calc(4.375rem + 32px); } }
@media (max-width: 782px) { .admin-bar .chip { top: calc(4.375rem + 46px); } }