/*
 * Блок niches (blocks/niches.php): направления — центрированная карусель по кругу на всю ширину окна.
 * Карточка — по пакету medwebika-directions-v1-assets: радиус 28, светло-голубой градиент без обводки, сверху
 * SVG-подложка и поверх неё иллюстрация (одинаковая высота зоны), описание в две строки, кнопка-капсула без
 * стрелки прижата к низу. Иллюстрации не растягивать и не обрезать: только object-fit: contain.
 * .direction — точка привязки прокрутки (без трансформаций, иначе снап съезжает), .direction__card — видимая карточка.
 * Все карточки одного вида, центральная не выделяется.
 * JS ставит .is-ready на секцию, .is-current на центральную карточку (для анимации на тач-экранах).
 * Анимация иллюстраций при наведении — внизу файла (своя у каждого направления, --play).
 * Секция — контейнер (container-type): 100cqw = ширина окна без полосы прокрутки.
 * На телефоне (≤639px) — две карточки в ряд по краям контента, содержимое уменьшено пропорционально;
 * карточка встаёт к левому краю (scroll-snap-align: start + scroll-padding) — JS читает это и равняет так же.
 */

.niches {
    --gap: 20px;
    --edge: max(var(--gutter), (100cqw - var(--container)) / 2 + var(--gutter)); /* край контента */
    --card: calc((100cqw - 2 * var(--edge) - 3 * var(--gap)) / 4);                /* 4 карточки на ширину контента */
    overflow-x: clip; container-type: inline-size;
}

/* заголовок по центру */
.niches__head { margin-bottom: 28px; text-align: center; }
.niches__title { color: var(--c-ink); font-size: 48px; font-weight: 750; line-height: 1.08; letter-spacing: -.045em; }
.niches__subtitle { margin-top: 16px; color: var(--c-muted); font-size: 22px; line-height: 1.4; letter-spacing: -.02em; }

/* лента: снап по центру, полоса прокрутки скрыта; поля по краям — чтобы крайние карточки тоже вставали в центр,
   сверху — место под подпрыгивающие при наведении иллюстрации */
.niches__stage { position: relative; --pad-top: 16px; }
.niches__track {
    position: relative; display: flex; gap: var(--gap);
    padding: var(--pad-top) calc((100cqw - var(--card)) / 2) 0;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.niches__track::-webkit-scrollbar { display: none; }
.niches__track.is-free { scroll-snap-type: none; } /* JS сам едет и центрирует (assets/js/blocks/niches.js) */
@media (pointer: fine) { .niches__track.is-free { cursor: grab; } }
.niches__track.is-dragging { cursor: grabbing; user-select: none; }
.niches__track.is-dragging .direction__btn { pointer-events: none; }
.niches__track:focus-visible { outline: 3px solid #849fff; outline-offset: -3px; }

.direction { flex: 0 0 var(--card); display: flex; scroll-snap-align: center; }
.direction__card {
    flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 20px 26px 30px;
    border-radius: 28px; background: linear-gradient(145deg, #f1f8ff, #edf5ff 60%, #f5faff);
    container-type: inline-size; /* заголовок подстраивает размер под ширину карточки */
}
.niches.is-ready .direction:not(.is-current) { cursor: pointer; }

/* зона иллюстрации: подложка (SVG) + картинка поверх, у всех карточек одной высоты */
.direction__art { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 1 / 1.1; margin: 0 -10px 14px; }
.direction__art::before { content: ""; position: absolute; inset: 8% 0 2%; z-index: -1; background: url("../../img/directions/backdrop.svg") center / contain no-repeat; }
.direction__art img {
    display: block; width: 100%; height: 100%; object-fit: contain;
    transform: translate(var(--shift-x, 0), var(--shift-y, 0)) scale(var(--art-scale, 1));
}
/* поправки визуального масштаба иллюстраций из пакета (у них разные прозрачные поля) — через transform;
   новые иллюстрации уже подогнаны при подготовке. --play — анимация при наведении (keyframes внизу файла) */
.direction--dentistry { --art-scale: 1.12; --shift-y: -2%; --play: dir-wobble; }
.direction--cosmetology { --art-scale: 1.11; --shift-y: -3%; --play: dir-bob; }
.direction--veterinary { --art-scale: .98; --shift-x: -1%; --play: dir-squash; }
.direction--private-practice { --art-scale: .97; --shift-y: 1%; --play: dir-swing; }
.direction--medcenter { --play: dir-bob; }
.direction--narcology { --play: dir-spin; }
.direction--plastic { --play: dir-tilt; }
.direction--psychotherapy { --play: dir-pop; }
.direction--ophthalmology { --play: dir-blink; }
.direction--pediatrics { --play: dir-hop; }
.direction--gynecology { --play: dir-pop; }
.direction--rehabilitation { --play: dir-tilt; }

/* заголовок в одну строку: «Пластическая хирургия» — самый длинный, под него и считаем размер */
.direction__title { margin-bottom: 16px; color: var(--c-ink); font-size: min(26px, 100cqw / 11.4); font-weight: 750; line-height: 1.3; letter-spacing: -.035em; white-space: nowrap; }
.direction__text { min-height: 3em; margin-bottom: 32px; color: var(--c-muted); font-size: clamp(15px, 1.35vw, 20px); line-height: 1.5; letter-spacing: -.025em; white-space: pre-line; }

/* кнопка: капсула на всю ширину карточки, при наведении заливается */
.direction__btn { width: 100%; min-height: 54px; margin-top: auto; padding: 13px 20px; border-width: 1.5px; font-size: 17px; font-weight: 650; }
.direction__btn:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* стрелки: крупные круглые, у самых краёв экрана, по вертикали — на середине карточки */
.niches__arrow {
    position: absolute; top: calc(50% + var(--pad-top) / 2); z-index: 2; translate: 0 -50%;
    display: grid; place-items: center; width: 68px; height: 68px; padding: 0;
    border: 1px solid var(--c-line); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--c-primary);
    box-shadow: 0 10px 30px rgba(8, 17, 101, .1); backdrop-filter: blur(6px);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.niches__arrow:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.niches__arrow .ico { width: 30px; height: 30px; stroke-width: 2; }
.niches__arrow--prev { left: 20px; }
.niches__arrow--next { right: 20px; }

/* ── анимация иллюстраций ──
   Только отдельные свойства translate / rotate / scale — они складываются с transform (поправки масштаба выше)
   и не сбивают его. Мышь: при наведении иллюстрация приподнимается и играет свою анимацию, подложка чуть
   растёт и поворачивается. Тач (наведения нет): анимация играет, когда карточка встаёт в центр.
   «Уменьшить движение» — всё выключает общее правило в base.css. */
.direction__art img { transition: translate .35s cubic-bezier(.22, 1, .36, 1); }
.direction__art::before { transition: scale .6s cubic-bezier(.22, 1, .36, 1), rotate .6s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) {
    .direction__card:hover .direction__art img { translate: 0 -6px; animation: var(--play, none) .9s ease-in-out; }
    .direction__card:hover .direction__art::before { scale: 1.06; rotate: -4deg; }
}
@media (hover: none) {
    .niches.is-ready .direction.is-current .direction__art img { animation: var(--play, none) .9s ease-in-out .15s; }
}
@keyframes dir-wobble { 20% { rotate: -7deg; } 45% { rotate: 5deg; } 70% { rotate: -2deg; } }                     /* зуб покачивается */
@keyframes dir-bob { 0%, 100% { translate: 0 -6px; } 40% { translate: 0 -18px; } 70% { translate: 0 -3px; } }    /* всплывает */
@keyframes dir-squash { 25% { scale: 1.08 .9; } 50% { scale: .95 1.07; } 75% { scale: 1.02 .98; } }              /* лапа пружинит */
@keyframes dir-swing { 25% { rotate: 9deg; } 55% { rotate: -6deg; } 80% { rotate: 2deg; } }                       /* стетоскоп качается */
@keyframes dir-spin { to { rotate: 360deg; } }                                                                  /* круг делает оборот */
@keyframes dir-tilt { 30% { rotate: -6deg; } 65% { rotate: 4deg; } }                                             /* наклон туда-обратно */
@keyframes dir-pop { 35% { scale: 1.14; } 60% { scale: .97; } 80% { scale: 1.04; } }                             /* «лопается» / раскрывается */
@keyframes dir-blink { 30% { scale: 1 .1; } 45% { scale: 1 1; } }                                               /* глаз моргает */
@keyframes dir-hop { 0%, 100% { translate: 0 -6px; } 30% { translate: 0 -24px; rotate: -4deg; } 55% { translate: 0 -2px; rotate: 3deg; } 75% { translate: 0 -10px; rotate: 0deg; } } /* мишка подпрыгивает */

@media (max-width: 1199px) {
    .niches { --card: calc((100cqw - var(--edge) - 2 * var(--gap)) / 2.3); }
    .direction__card { padding: 24px 28px 30px; }
    .direction__art, .direction__art img { max-height: 330px; }
    .direction__text { font-size: 19px; }
    .niches__arrow { width: 60px; height: 60px; }
    .niches__arrow--prev { left: 12px; }
    .niches__arrow--next { right: 12px; }
}
@media (max-width: 639px) {
    .niches { --gap: 10px; --card: calc((100cqw - 2 * var(--edge) - var(--gap)) / 2); } /* две в ряд */
    .niches__head { margin-bottom: 24px; }
    .niches__title { font-size: var(--fs-h2-m); }
    .niches__subtitle { font-size: 17px; }
    .niches__stage { --pad-top: 10px; }
    .niches__track { padding-inline: var(--edge); scroll-padding-inline: var(--edge); }
    .direction { scroll-snap-align: start; }
    .direction__card { padding: 12px 12px 14px; border-radius: 20px; }
    .direction__art { aspect-ratio: 1; margin: 0 -4px 8px; }
    .direction__title { margin-bottom: 6px; font-size: 15px; line-height: 1.25; letter-spacing: -.02em; white-space: normal; text-wrap: balance; }
    .direction__text { min-height: 0; margin-bottom: 12px; font-size: 13px; line-height: 1.4; letter-spacing: -.01em; white-space: normal; }
    .direction__btn { min-height: 40px; padding: 8px 10px; border-width: 1px; font-size: 14px; }
    .niches__arrow { display: none; } /* на телефоне — свайп */
}