/* ==========================================================================
   «Популярные вопросы» — карусель на Owl Carousel 1.3.3 в стиле каталога анализов.
   Отдельный файл (не service-landing.css), разметка — service/landing.twig.
   Заголовок секции переиспользует .analizy-catalog-section__intro каталога.
   ========================================================================== */

.analizy-faq-section { position: relative; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0 40px; }
@media (min-width: 1400px) { .analizy-faq-section { width: min(1560px, calc(100% - 80px)); } }

/* ---------- Карусель ---------- */
/* без JS/Owl — обычная горизонтальная прокрутка со «щелчком» */
.analizy-faq-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 4px 30px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.analizy-faq-carousel::-webkit-scrollbar { display: none; }
.analizy-faq-carousel > .analizy-faq-slide { flex: 0 0 min(400px, 86%); scroll-snap-align: start; }

/* после инициализации Owl */
.analizy-faq-carousel.owl-carousel { display: block; overflow: visible; padding: 0; gap: 0; scroll-snap-type: none; }
.analizy-faq-carousel.owl-carousel .owl-wrapper-outer { padding: 14px 8px 34px; margin: -14px -8px -4px; width: auto; max-width: none; cursor: grab; }
.analizy-faq-carousel.owl-carousel .owl-wrapper-outer:active { cursor: grabbing; }
.analizy-faq-carousel.owl-carousel .owl-wrapper { display: flex !important; }
.analizy-faq-carousel.owl-carousel .owl-item { float: none; flex: 0 0 auto; padding: 0 8px; box-sizing: border-box; }
.analizy-faq-carousel.owl-carousel .owl-item > .analizy-faq-slide { flex: none; height: 100%; }

/* ---------- Карточка темы ---------- */
.analizy-faq-slide { height: 100%; }
.analizy-faq-card {
	position: relative; display: flex; flex-direction: column; height: 100%; min-height: 388px; padding: 26px 26px 22px;
	overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, .86); border-radius: 23px; color: #08163b;
	background: rgba(255, 255, 255, .92); box-shadow: 0 13px 26px rgba(42, 79, 142, .06), inset 0 1px 0 #fff;
	transition: transform .25s ease, box-shadow .25s ease;
}
.analizy-faq-card:hover { transform: translateY(-4px); box-shadow: 0 19px 34px rgba(42, 79, 142, .13), inset 0 1px 0 #fff; }

/* иллюстрация в правом верхнем углу, как у карточек каталога */
.analizy-faq-card::before { content: ''; position: absolute; z-index: -2; right: -44px; top: -18px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle at 38% 36%, rgba(225, 239, 255, .9), rgba(231, 242, 255, .3) 55%, transparent 72%); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.analizy-faq-card::after { content: ''; position: absolute; z-index: -1; right: -6px; top: 6px; width: 150px; height: 130px; background: var(--faq-illustration) center right / contain no-repeat; transition: transform .35s ease; }
.analizy-faq-card:hover::before { transform: scale(1.15); }
.analizy-faq-card:hover::after { transform: scale(1.06) rotate(-2deg); }
.analizy-faq-card--vitamin { --faq-illustration: url('../image/analizy-card-vitamin-d-v2.png'); }
.analizy-faq-card--ferritin { --faq-illustration: url('../image/analizy-card-ferritin-v2.png'); }
.analizy-faq-card--thyroid { --faq-illustration: url('../image/analizy-card-thyroid-v2.png'); }
.analizy-faq-card--cholesterol { --faq-illustration: url('../image/analizy-card-cholesterol-v2.png'); }
.analizy-faq-card--glucose { --faq-illustration: url('../image/analizy-card-glucose-v2.png'); }
.analizy-faq-card--blood { --faq-illustration: url('../image/analizy-card-blood-v2.png'); }

.analizy-faq-card__head { min-height: 104px; margin-bottom: 14px; padding-right: 120px; }
.analizy-faq-card h3 { margin: 0 0 8px; color: #08163b; font: 700 22px/1.2 Inter, sans-serif; letter-spacing: -.055em; }
.analizy-faq-card__head p { margin: 0; color: #7482ad; font: 400 14.5px/1.4 Inter, sans-serif; letter-spacing: -.02em; }

.analizy-faq-card ul { display: grid; gap: 9px; margin: auto 0 0; padding: 0; list-style: none; }
.analizy-faq-card li { margin: 0; padding: 0; }
.analizy-faq-card li a {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; padding: 11px 12px 11px 18px;
	border: 1px solid #e6eefb; border-radius: 16px; color: #1a2754; background: #fbfdff;
	font: 500 14.5px/1.3 Inter, sans-serif; letter-spacing: -.02em; text-decoration: none;
	transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease, background-color .2s ease, color .2s ease;
}
.analizy-faq-card li a:hover, .analizy-faq-card li a:focus { color: #0a1a4a; background: #fff; border-color: #bed7ff; box-shadow: 0 10px 22px -12px rgba(8, 116, 249, .45); transform: translateX(3px); }
.analizy-faq-card li a b { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #0874f9; background: #eaf2ff; transition: background-color .2s ease, color .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.analizy-faq-card li a:hover b, .analizy-faq-card li a:focus b { color: #fff; background: #0874f9; transform: scale(1.08); }

/* ---------- Управление: ссылка, точки, стрелки ---------- */
.analizy-faq-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 6px; }
.analizy-faq-all { display: inline-flex; align-items: center; gap: 9px; color: #0874f9; font: 600 15px/1 Inter, sans-serif; letter-spacing: -.02em; text-decoration: none; transition: gap .25s ease, color .2s ease; }
.analizy-faq-all:hover, .analizy-faq-all:focus { gap: 14px; color: #065bd1; text-decoration: none; }

.analizy-faq-dots { display: flex; align-items: center; gap: 7px; }
.analizy-faq-dots i { display: block; width: 8px; height: 8px; border-radius: 99px; background: #cfdcf3; transition: width .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.analizy-faq-dots i.is-active { width: 28px; background: linear-gradient(90deg, #0874f9, #7c5cff); }

.analizy-faq-nav { display: flex; gap: 10px; }
.analizy-faq-arrow { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(8, 116, 249, .2); border-radius: 50%; color: #0874f9; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 22px -12px rgba(8, 116, 249, .5), inset 0 1px 0 #fff; cursor: pointer; transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease; }
/* цвета заданы явно: в теме есть глобальное button:hover, которое иначе перекрашивает кнопку */
.analizy-faq-arrow:hover:not(:disabled), .analizy-faq-arrow:focus:not(:disabled) { color: #fff; background: linear-gradient(135deg, #0874f9, #7c5cff); border-color: transparent; transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(8, 116, 249, .8); }
.analizy-faq-arrow:active:not(:disabled) { transform: scale(.95); }
.analizy-faq-arrow:disabled, .analizy-faq-arrow:disabled:hover { color: #a9b6d6; background: rgba(255, 255, 255, .7); border-color: rgba(8, 116, 249, .1); box-shadow: none; opacity: .7; cursor: default; }

/* ---------- Мобильные / планшет ---------- */
@media (max-width: 991px) {
	.analizy-faq-section { width: auto; padding: 48px 16px; background: #f8fbff; }
	.analizy-faq-card { min-height: 0; padding: 20px 18px 18px; border-radius: 18px; background: #fff; }
	.analizy-faq-card__head { min-height: 84px; padding-right: 96px; }
	.analizy-faq-card::after { width: 120px; height: 104px; }
	.analizy-faq-card::before { width: 150px; height: 150px; }
	.analizy-faq-card h3 { font-size: 19px; }
	.analizy-faq-card__head p { font-size: 13.5px; }
	.analizy-faq-card li a { min-height: 56px; font-size: 14px; }
	.analizy-faq-carousel.owl-carousel .owl-wrapper-outer { padding: 14px 0 30px; margin: -14px 0 -4px; }
	.analizy-faq-carousel.owl-carousel .owl-item { padding: 0 4px; }
	.analizy-faq-arrow { width: 42px; height: 42px; }
}
@media (max-width: 560px) {
	.analizy-faq-all { display: none; }
	.analizy-faq-controls { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
	.analizy-faq-card, .analizy-faq-card::before, .analizy-faq-card::after, .analizy-faq-card li a, .analizy-faq-card li a b, .analizy-faq-arrow, .analizy-faq-dots i { transition: none; }
}