/* ==========================================================================
   Городские посадочные (chita/, novosibirsk/). Только токены из tokens.css.
   Всё остальное оформление страницы берётся из main.css — здесь лежит то,
   чего на других страницах нет: три флага в первом экране и блок вопросов.
   ========================================================================== */

/* Первый экран: страна не одна, поэтому флагов три. */
.page-hero__flags { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-hero__flags .flag { width: var(--flag-cat-w); }

/* Строка с городом над заголовком. */
.page-hero__city { display: inline-flex; align-items: center; gap: var(--space-2); }
.page-hero__city .icon { width: var(--icon-sm); height: var(--icon-sm); stroke: var(--text-accent); }

/* --- Вопросы и ответы ------------------------------------------------------- */
.faq { display: grid; gap: var(--space-3); max-width: var(--page-block-lg); }

.faq__item {
  padding: var(--space-5) var(--card-pad);
  background: var(--card-bg);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--card-radius);
  transition: border-color var(--duration-base) var(--ease-out);
}
.section--raised .faq__item { background: var(--surface-page); }
.faq__item[open] { border-color: var(--border-accent); }

.faq__q {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
  min-height: var(--btn-height-sm);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--text-accent); }
.faq__q:active { color: var(--sky-600); }
.faq__q:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

/* Плюс, который становится минусом. */
.faq__mark {
  position: relative;
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  margin-top: var(--space-1);
}
.faq__mark::before,
.faq__mark::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: var(--border-width-thick);
  background: var(--text-accent);
  transition: transform var(--duration-base) var(--ease-out);
}
.faq__mark::after { transform: rotate(90deg); }
.faq__item[open] .faq__mark::after { transform: rotate(0deg); }

.faq__a {
  margin-top: var(--space-4);
  max-width: var(--measure);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.faq__a p + p { margin-top: var(--space-3); }

@media (max-width: 560px) {
  .faq__q { font-size: var(--text-md); }
}