/* Блок 8 «Перед визитом»: частые вопросы и фото пруда с чаном. Кадры «Блок · Перед визитом» 1920 / 768 / 390. */
.vizit { position: relative; isolation: isolate; overflow: hidden; background: var(--c-bg-linen); }
.vizit__in { display: flex; flex-direction: column; gap: 24px; padding-block: 48px; }
.vizit__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* «Декор · ветка дуб»: на 768 и 390 верх ветки на 20 px выше низа фото (высота 57,4 / 43,1), остальное — под фото */
.vizit__decor { position: absolute; z-index: -1; left: 14px; bottom: 1px; width: 81px; opacity: .45; pointer-events: none; }
.vizit__decor img { width: 100%; height: auto; }

/* «Вопрос»: раскрыт — молочный, закрыт — лён с тонкой рамкой; значок 20, шеврон 16 */
.vizit__faq { display: flex; flex-direction: column; gap: 12px; }
/* поля — у summary, а не у карточки: нажимается вся карточка, а не только строка текста */
.faq { border-radius: var(--r-m); background: var(--c-bg-milk); }
.faq:not([open]) { border: 1px solid var(--c-line); background: var(--c-bg-linen); }
.faq__q { display: flex; align-items: center; gap: 12px; color: var(--c-text); font: 600 16px/20px var(--f-sans); list-style: none; cursor: pointer; padding: 20px; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { width: 20px; height: 20px; }
.faq__text { flex: 1; min-width: 0; }
.faq__q .faq__chev { width: 16px; height: 16px; color: var(--c-text-2); transform: rotate(180deg); }
.faq:not([open]) .faq__chev { transform: none; }
.faq__a { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: -8px; padding: 0 20px 20px; color: var(--c-text-2); font: 400 15px/21px var(--f-sans); }
.faq__route { display: inline-flex; align-items: center; gap: 8px; color: var(--c-sage); font: 400 18px/26px var(--f-sans); text-decoration: none; }
.faq__route span { text-decoration: underline; }
.faq__route .icon { width: 14px; height: 14px; }
/* «Ссылка после вопросов»: поля сверху 12 (в кадре — строка 32 с отступом 12 над ссылкой), ещё через промежуток 12 после последнего вопроса */
.vizit__more { align-self: flex-start; margin-top: 12px; }

/* фото-полоса: слои абсолютно, чтобы собственная высота снимка не раздвигала сетку; тянется за высотой блока вопросов */
.vizit__photo { position: relative; height: 240px; border-radius: var(--r-l); overflow: hidden; }
.vizit__photo picture, .vizit__photo img { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; }
.vizit__photo img { object-fit: cover; }

@media (min-width: 768px) {
  .vizit__in { gap: 32px; padding-block: 64px; }
  .vizit__decor { left: 18px; bottom: 1px; width: 108px; }
  .vizit__photo { height: 360px; }
}
@media (min-width: 1200px) {
  /* вопросы слева, фото-полоса 579 справа на высоту «шапка + вопросы» (в кадре 646 при закрытых вопросах); блок 838 = 96 + 646 + 96 */
  .vizit__in { display: grid; grid-template-columns: minmax(0, 1fr) 579px; column-gap: 21px; row-gap: 48px; align-items: start; align-content: start; padding-block: 96px; }
  .vizit__head { grid-column: 1; grid-row: 1; }
  .vizit__faq { grid-column: 1; grid-row: 2; }
  .vizit__photo { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; height: auto; }
  /* главная: фото-полоса в кадре 616 (от шапки до последнего вопроса; вопросов стало на один меньше), ссылка «Все вопросы…» под вопросами — ниже полосы */
  /* высота = «шапка + вопросы + ссылка» (закрытые — ровно 616, как в кадре); с открытыми вопросами полоса растёт вместе со списком (правка 11.10) */
  #vizit .vizit__photo { align-self: stretch; height: auto; min-height: 616px; }
  .vizit__decor { left: 30px; top: 544px; bottom: auto; width: 180px; }
}
/* в кадре 1920 ветка лежит в поле слева от вопросов (контейнер от 260, ветка 30–210). Поле шире 210 только с 1820; ниже вопросы стоят на ней
   (карточки закрытых вопросов — со льняной заливкой, ветка видна лишь в щелях между ними) — свободного угла в блоке нет, ветку скрываем.
   1820–1869 зазор ветки до карточек 3–4 px (почти касается) — показываем с 1870 */
@media (min-width: 1200px) and (max-width: 1869px) {
  .vizit__decor { display: none; }
}