/* ==========================================================================
   faq.css — страница «Частые вопросы (FAQ)», раздел «Участникам».
   Макет: Figma 2359:216248 (файл GBQgpOMklMQAWA26vhdJ9f, «ФОК 10.07.26 Copy»).
   Каркас переиспользуется:
     • крошки / геро-геометрия — arrival.css;
     • светлый геро (тёмный заголовок, без шторки) — visa.css (.arr-hero--light);
     • светлая карточка-обёртка — visa.css (.visa-block БЕЗ __head, шапка в макете
       скрыта: header.visa-block__head hidden);
     • таб-меню раздела — page-tabs.css (.ptabs--flow);
     • аккордеон вопросов — program.css (.pac / .pac__sum / .pac__title / .pac__ic).
   Новое здесь: скоуп .faq на <main> (full-bleed полосы табов и баннера,
   геро-заголовок 64/72 как у «Архитектуры», тело ответа — чистые <p>).
   Лесенка брейкпоинтов проекта: 1920 / 1440 / 768 / 360.
   ========================================================================== */

/* ---------- Full-bleed: гасим гаттер контейнера у табов и баннера ---------- */
/* В макете полоса --flow (article) и hero идут x=0 w=1920, карточка ниже —
   x=40 w=1840 (контейнер). */
.faq .ptabs--flow,
.faq .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* ---------- Hero: заголовок 64/72, инна по Figma Frame 75 (x=88, снизу 60) ---------- */
@media (min-width: 1024px) {
  /* Figma Frame 75 — flex-колонка с gap 30. Именно колонка, а не блок с
     margin-top у заголовка: у блока инлайновый .section-label садится на строку
     высотой line-height (24), и над лейблом набегает лишних 6px. */
  .faq .arr-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    left: 88px;
    bottom: 60px;
    /* В макете Frame 75 = 663 (хаг по тексту), тексту нужно 647 — запаса всего
       16px, и на другом рендере шрифта заголовок срывался во вторую строку.
       Инна абсолютная и прижата влево, поэтому больший лимит ничего не двигает. */
    max-width: 780px;
  }
  .faq .arr-hero__title {
    margin-top: 0;
    /* 64/72 — значение макета, держится на ≥1536 (и в @1919, и на 1920).
       Ниже коллаж «наезжает» слева: плотная живопись начинается с 52.24% его
       ширины, а при object-fit:cover эта граница уходит влево быстрее, чем
       сжимается строка. Замер: чтобы остался зазор 24px, нужно 63.4 на 1440
       и 42.9 на 1024 — это и есть прямая ниже. */
    font-size: clamp(43px, calc(4.93vw - 7.6px), 64px);
    line-height: 1.125;
  }
}

/* ---------- Карточка FAQ: светлый visa-block без шапки + аккордеон .pac ---------- */
/* Отступ hero→карточка = 80 (Figma: hero низ y=760, visa-block верх y=840),
   снизу до подвала — тоже 80. Значения макета в @1919 не занижаем. */
.faq .visa-block {
  margin-top: 80px;
  margin-bottom: 80px;
}

/* Первый вопрос без верхней линии (Figma: первый details.pac border-0) */
.faq .pac:first-child { border-top: 0; }

/* Наведение на вопрос — заголовок в accent (Figma: hover-вариант Component 33) */
.faq .pac__sum:hover .pac__title { color: var(--c-accent); }

/* ---------- Тело ответа: чистые <p> (Inter Tight 16/26, вторичный) ---------- */
/* Между абзацами — 6 (Figma gap/6). Ширина текста 1402 и интерлиньяж 26 — с ноды
   текста (Frame 111), не «1.6»: 25.6 против 26 давало −0.4px на строку и уводило
   низ карточки на −9.6px по 24 строкам. */
.faq .pac__panel { gap: 6px; }
.faq .pac__panel p {
  max-width: 1402px;
  font: 400 16px/26px var(--font-text);
  color: var(--c-secondary);
}
.faq .pac__panel a {
  color: var(--c-accent);
  text-decoration: underline;
}
.faq .pac__panel a:hover { text-decoration: none; }

/* ==========================================================================
   ≤1440 — десктоп-ступень @1919 (аккордеон .pac/.pac-list масштабирует
   program.css глобально; здесь только скоуп-специфика карточки).
   ========================================================================== */
@media (max-width: 1919px) {
  .faq .visa-block { margin-top: 64px; margin-bottom: 64px; }
}

/* ==========================================================================
   ≤768 — планшет.
   ========================================================================== */
@media (max-width: 1023px) {
  .faq .visa-block { margin-top: 56px; margin-bottom: 56px; }
}

/* ==========================================================================
   ≤360 — узкая мобила. Full-bleed выключаем: полоса и баннер — по контейнеру.
   ========================================================================== */
@media (max-width: 767px) {
  .faq .ptabs--flow,
  .faq .arr-hero { margin-inline: 0; }

  .faq .visa-block { margin-top: 40px; margin-bottom: 40px; }
  .faq .pac__panel p { font-size: 15px; line-height: 1.6; }
}

/* ==========================================================================
   480–767 — заголовок в одну строку. visa.css в ≤767 жмёт светлый геро-заголовок
   до min-content (нужно двухсловной «ВИЗОВОЙ ПОДДЕРЖКЕ»), у нас это рвало
   «ЧАСТЫЕ / ВОПРОСЫ». Ниже 480 перенос возвращаем: там строка целиком доезжает
   до коллажа и последние буквы ложатся на подсвечник.
   ========================================================================== */
@media (min-width: 480px) and (max-width: 767px) {
  .faq .arr-hero__title { max-width: none; }
}