/* Хаб «Вопросы о турах» и страницы-ответы. Токены, типографика, контейнер, чипы,
   форма и аккордеон — из main.css и blog.css; здесь только раскладка FAQ. */
.faq-page { --faq-tools-h: 0px; }
.faq-page .blog-heading > p a { color: #94452e; text-underline-offset: 3px; white-space: nowrap; }

/* Мобильная навигация: одна ссылка назад вместо цепочки. Микроразметка крошек остаётся. */
.faq-back { display: none; align-items: center; gap: 4px; min-height: 44px; margin-left: -4px; color: var(--muted); font-size: 14px; text-decoration: none; }
.faq-back .icon { width: 18px; height: 18px; }
@media (max-width: 44.999rem) {
  .faq-page .breadcrumbs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .faq-back { display: inline-flex; }
  .faq-page .blog-heading { margin-top: 4px; }
}

/* Поиск и категории: на телефоне закреплены под шапкой. */
.faq-tools { position: sticky; z-index: 20; top: var(--header-h); padding: 12px 0; background: var(--cream); border-bottom: 1px solid var(--blog-line); }
.faq-search { position: relative; display: block; }
.faq-search .icon { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.faq-search input { width: 100%; min-height: 48px; padding: 10px 16px 10px 44px; border: 1px solid var(--blog-line); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; -webkit-appearance: none; }
.faq-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(23,73,67,.15); }
.faq-chips { margin-top: 10px; scroll-snap-type: x proximity; scroll-padding-inline: 1rem; }
.faq-chips a { flex-shrink: 0; display: inline-flex; align-items: center; scroll-snap-align: start; white-space: nowrap; min-height: 44px; padding: 8px 16px; border: 1px solid var(--blog-line); border-radius: 50px; background: var(--blog-surface); color: var(--ink); font-size: 15px; text-decoration: none; }
.faq-chips a span { margin-left: 6px; font-size: 12px; opacity: .75; }
.faq-chips a[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--cream); }
.faq-status { margin-top: 8px !important; color: var(--muted); font-size: 13px; }
.faq-status:empty { display: none; }

/* Карточка вопроса. */
.faq-card { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px 48px 16px 16px; border: 1px solid var(--blog-line); border-radius: var(--radius); background: var(--blog-surface); transition: border-color .2s, box-shadow .2s; }
.faq-card h3 { font-size: 18px; line-height: 1.3; }
.faq-card h3 a { color: var(--ink); text-decoration: none; }
.faq-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.faq-card h3 a:focus-visible::after { outline: 2px solid var(--terra); outline-offset: 3px; }
.faq-card-short { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 15px; line-height: 1.55; }
.faq-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto !important; color: var(--muted); font-size: 13px; }
.faq-tag { padding: 2px 10px; border-radius: 50px; background: var(--blog-sand); color: var(--ink); font-weight: 500; }
.faq-card-arrow { position: absolute; top: 18px; right: 16px; width: 20px; height: 20px; color: var(--terra); }
.faq-card:active { background: var(--blog-sand); }
@media (hover: hover) { .faq-card:hover { border-color: rgba(23,73,67,.35); box-shadow: var(--shadow-small); } .faq-card:hover h3 a { color: #94452e; } }

/* Популярное: на телефоне горизонтальная лента со snap. */
.faq-popular { padding-block: var(--gap-section); background: var(--blog-sand); }
.faq-popular .section-kicker { margin-bottom: 8px; color: #94452e; }
.faq-popular-grid { display: flex; gap: 12px; margin: 20px -1rem 0; padding: 0 1rem 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 1rem; list-style: none; scrollbar-width: none; }
.faq-popular-grid::-webkit-scrollbar { display: none; }
.faq-popular-grid > li { flex: 0 0 80%; scroll-snap-align: start; }
.faq-popular .faq-card { min-height: 190px; padding: 20px; border-color: transparent; }
.faq-popular .is-lead .faq-card { background: var(--deep); }
.faq-popular .is-lead .faq-card h3 a { color: var(--cream); }
.faq-popular .is-lead .faq-card-short, .faq-popular .is-lead .faq-card-meta { color: rgba(247,241,229,.8); }
.faq-popular .is-lead .faq-tag { background: var(--ochre); color: var(--deep); }
.faq-popular .is-lead .faq-card-arrow { color: var(--ochre); }

/* Список по категориям; заголовок группы липнет под панелью поиска. */
.faq-list { padding-block: 24px 40px; }
.faq-group { padding-top: 16px; }
.faq-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-block: 12px; }
.faq-group-head h2 { color: var(--brand); font-size: var(--fs-h2-content); }
.faq-group-head span { color: var(--muted); font-size: 13px; }
.faq-grid { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.faq-empty { display: grid; justify-items: start; gap: 12px; margin-top: 24px; padding: 24px; border: 1px dashed var(--blog-line); border-radius: var(--radius); background: var(--blog-surface); }
.faq-empty h2 { color: var(--brand); font-size: var(--fs-h2-content); }
.faq-empty p { color: var(--muted); }
.faq-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.faq-pagination :is(a,span) { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--blog-line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.faq-pagination span { background: var(--brand); border-color: var(--brand); color: var(--cream); }

/* Сервисные и смежные вопросы: аккордеон из main.css. */
.faq-service { padding-block: var(--gap-section); border-top: 1px solid var(--blog-line); background: var(--white); }
.faq-service-grid { display: grid; gap: 24px; }
.faq-service .section-kicker { margin-bottom: 8px; color: #94452e; }
.faq-popular h2, .faq-service h2, .faq-more h2, .faq-tours h2 { color: var(--brand); hyphens: manual; }
.faq-service-grid > div > p:last-child { max-width: 36ch; margin-top: 12px; color: var(--muted); }
.faq-acc-heading { margin: 0; font: inherit; }
.faq-service .accordion-trigger { min-height: 56px; align-items: center; }
.faq-service .accordion-trigger strong { font-size: 18px; line-height: 1.3; }
.faq-more-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-bottom: 12px; color: #94452e; font-weight: 600; text-decoration: none; }
.faq-more-link .icon { width: 16px; height: 16px; }

.faq-contacts { display: grid; gap: 4px; margin-top: 20px; }
.faq-contacts a { display: inline-flex; align-items: center; width: fit-content; min-height: 44px; color: #fff; font-size: 20px; font-weight: 600; text-decoration: none; }
.faq-contacts a + a { font-size: 16px; font-weight: 400; color: rgba(255,255,255,.85); }
.faq-lead-form .field label span { color: rgba(255,255,255,.6); }

/* Нижняя панель действий в зоне большого пальца (только телефон). */
.faq-dock { position: fixed; z-index: 40; inset: auto 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(247,241,229,.96); border-top: 1px solid var(--blog-line); backdrop-filter: blur(16px); }
.faq-dock .btn { min-height: 52px; border-radius: 16px; }
.faq-dock .btn::after { display: none; }
.faq-dock-call { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--brand); border-radius: 16px; color: var(--brand); }
.faq-dock-call .icon { width: 22px; height: 22px; }
.faq-page .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* Страница-ответ. */
.faq-answer-head { padding-top: 16px; }
.faq-short { margin-top: 20px; padding: 20px; border: 1px solid var(--blog-line); border-radius: var(--radius); background: var(--blog-surface); box-shadow: var(--shadow-small); }
.faq-short .section-kicker { margin-bottom: 8px; color: #94452e; }
.faq-short p { font-family: var(--font-display); font-size: 18px; line-height: 1.55; color: var(--ink); }
.faq-guide { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 14px; align-items: center; margin-top: 32px; padding: 12px; border-radius: var(--radius); background: var(--blog-sand); color: var(--ink); text-decoration: none; }
.faq-guide img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }
.faq-guide strong { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 18px; font-weight: 400; line-height: 1.3; }
.faq-guide-more { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.faq-useful { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 48px; padding: 12px 12px 12px 16px; border: 1px solid var(--blog-line); border-radius: var(--radius); background: var(--blog-surface); }
.faq-useful > p:first-child { font-weight: 600; }
.faq-useful-buttons { display: flex; gap: 8px; }
.faq-useful .btn { min-height: 44px; padding: 8px 18px; }
.faq-useful .btn::after { display: none; }
.faq-useful-thanks { width: 100%; color: var(--muted); font-size: 15px; }
.faq-useful.is-voted > :not(.faq-useful-thanks) { display: none; }
.faq-tours { padding-block: var(--gap-section); background: var(--blog-sand); }
.faq-tour-rail { margin-top: 24px; }
.faq-more { padding-block: var(--gap-section); }
.faq-more .blog-related-heading a { display: inline-flex; }
.faq-more-grid { display: grid; gap: 12px; margin: var(--gap-head) 0 0; padding: 0; list-style: none; }
.faq-more-card { display: flex; align-items: start; justify-content: space-between; gap: 16px; height: 100%; padding: 20px; border: 1px solid var(--blog-line); border-radius: 18px; background: var(--blog-surface); color: var(--ink); font-family: var(--font-display); font-size: 18px; line-height: 1.35; text-decoration: none; transition: border-color .2s, color .2s; }
.faq-more-card:hover { border-color: var(--brand); color: #94452e; }
.faq-more-card .icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; color: var(--terra); }

@media (max-width: 44.999rem) {
  .faq-tour-rail { display: flex; gap: 12px; margin-inline: -1rem; padding: 0 1rem 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 1rem; scrollbar-width: none; }
  .faq-tour-rail > * { flex: 0 0 84%; scroll-snap-align: start; }
}
@media (min-width: 640px) {
  .faq-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .faq-card { padding: 22px 52px 20px 22px; }
  .faq-card h3 { font-size: 20px; }
  .faq-popular-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-inline: 0; padding: 0; overflow: visible; }
  .faq-short { padding: 28px 32px; }
  .faq-short p { font-size: 21px; }
  .faq-guide { grid-template-columns: 160px minmax(0,1fr); gap: 24px; padding: 16px; }
  .faq-guide img { width: 160px; height: 120px; }
  .faq-guide strong { font-size: 22px; }
}
@media (min-width: 45rem) {
  .faq-dock { display: none; }
  .faq-page .site-footer { padding-bottom: 0; }
  .faq-tools { position: static; margin-top: 32px; padding: 0; border: 0; background: none; }
  .faq-tools > .blog-container { padding: 24px; border: 1px solid var(--blog-line); border-radius: 20px; background: var(--blog-surface); }
  .faq-search input { min-height: 56px; font-size: 17px; }
  .faq-chips { margin-top: 16px; }
  .faq-group-head { position: static; }
}
@media (min-width: 1024px) {
  .faq-popular-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .faq-service-grid { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 64px; }
}
@media (prefers-reduced-motion: reduce) { .faq-card { transition: none; } }

/* Отступы между блоками хаба и иерархия: H1 — шкала сайта, разделы FAQ — контентный H2. */
.faq-intro { padding-bottom: 8px; }
.faq-tools + .faq-popular, .faq-tools + .faq-list { margin-top: var(--gap-head); }
.faq-popular-grid { margin-top: var(--gap-head); }
/* Шаг между блоками хаба — токены сайта: поиск → список → сервисные вопросы. */
.faq-list { padding-block: 0 var(--gap-section); }
.faq-chips { justify-content: flex-start; }
.faq-group-head { margin-bottom: var(--gap-head); padding-block: 0; }
.faq-group + .faq-group { margin-top: var(--gap-block); }
.faq-service .accordion-panel > div > :last-child { margin-bottom: 0; padding-bottom: 24px; }
.faq-service .accordion-trigger { padding-block: 20px; }
@media (min-width: 45rem) {
  .faq-tools { margin-top: var(--gap-head); margin-bottom: 0; }
  .faq-tools + .faq-popular, .faq-tools + .faq-list { margin-top: var(--gap-block); }
}
/* Лента чипов на телефоне: отступ от краёв экрана с обеих сторон, в том числе после прокрутки. */
@media (max-width: 44.999rem) { .faq-chips::after { content: ""; flex: 0 0 1px; } }

/* Ответ: шапка по образцу тура (tour-hero), но ниже; под ней «Коротко» и ответ на всю ширину сетки. */
.faq-answer-hero, .faq-answer-hero .tour-hero__inner { min-height: clamp(240px, 34svh, 340px); }
/* Крошки сверху, как на странице направления; H1 уходит в нижнюю треть шапки. */
.faq-answer-hero .tour-hero__inner { justify-content: flex-start; padding: 24px 0 var(--gap-block); }
.faq-answer-hero .tour-hero__inner > .breadcrumbs { margin-bottom: 0; }
.faq-answer-hero h1.tour-hero__title { max-width: min(100%, 56rem); margin: auto 0 0; padding-top: 32px; color: var(--cream); }
.faq-answer-hero .faq-back { color: var(--cream); }
.faq-answer-hero--plain { color: var(--ink); background: var(--cream); }
.faq-answer-hero--plain, .faq-answer-hero--plain .tour-hero__inner { min-height: 0; }
.faq-answer-hero--plain .breadcrumbs, .faq-answer-hero--plain .breadcrumbs .breadcrumb__current, .faq-answer-hero--plain .faq-back { color: var(--muted); }
.faq-answer-hero--plain h1.tour-hero__title { color: var(--brand); }
.faq-answer-body { padding-top: var(--gap-block); }
.faq-answer-main { min-width: 0; }
.faq-answer-main > .faq-short + * { margin-top: var(--gap-block); }
.faq-answer-main > .article-prose > :first-child { margin-top: 0; }
.faq-answer .faq-short { margin-top: 0; }
.faq-answer .article-prose { max-width: none; }
.faq-short p.faq-short-label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #94452e; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.faq-short-label .icon { width: 16px; height: 16px; }
/* Кнопка аккордеона лежит в h3, поэтому соседний селектор из main.css не срабатывает. */
.faq-acc-heading:has(.accordion-trigger[aria-expanded="true"]) + .accordion-panel { grid-template-rows: 1fr; }
.faq-acc-heading { margin: 0; font-size: inherit; font-weight: inherit; }
@media (min-width: 640px) {
  .faq-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .faq-more-card { padding: 22px; }
}
@media (min-width: 1024px) {
  .faq-more-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* В ответах таблица на телефоне остается таблицей и прокручивается вбок, а не распадается на карточки. */
@media (max-width: 44.999rem) {
  .faq-answer .article-table-scroll--stack { overflow-x: auto; border: 1px solid var(--blog-line); background: var(--blog-surface); }
  .faq-answer .article-table-scroll--stack table { display: table; min-width: 560px; }
  .faq-answer .article-table-scroll--stack thead { display: table-header-group; }
  .faq-answer .article-table-scroll--stack tbody { display: table-row-group; }
  .faq-answer .article-table-scroll--stack tr { display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .faq-answer .article-table-scroll--stack :is(td, th) { display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--blog-line); font-size: 15px; }
  .faq-answer .article-table-scroll--stack td[data-label]::before { content: none; }
}