/* Головна v2 (прототип): нові блоки на токенах самої головної (:root у assets/home-new/css/site.css).
   Шапка, анімація, меню й нижня панель — власника, без змін (28.10.2026). */

.v2-i { width: 22px; height: 22px; }
.v2-arrow { width: 18px; height: 18px; flex: 0 0 auto; }

/* «Що Вас турбує?» — перший блок на білому аркуші. 29.10.2026, власник: «над блоком… немає взагалі місця. Треба додати
   трохи білого відступу до краю блоку» (було 8 px). Відступ над заголовком = відступу під ним (.sec__head у site.css:
   28 px, на компʼютері й горизонтальному планшеті — 40 px): заголовок стоїть посередині свого поля, а не біля краю аркуша. */
.v2-quick { padding-top: 28px; }
@media (orientation: landscape) and (min-width: 640px), (min-width: 1200px) { .v2-quick { padding-top: 40px; } }
/* на телефоні над плитками — пояснення першого екрана (app.js, 29.10.2026 «Так, переноси»); поле над ним — те саме, що
   власник дав йому 12.10 над «Напрямки роботи» (.sd-fit .dirs, 40 px, «без зайвого повітря зверху») */
@media (orientation: portrait) and (max-width: 700px) { .sd-fit .v2-quick { padding-top: 40px; } }
.v2-quick__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.v2-quick__tile { display: flex; align-items: center; gap: 10px; height: 100%; min-height: 66px; padding: 10px 12px; border-radius: 16px; background: var(--mist); color: var(--ink); text-decoration: none; transition: background-color .2s, transform .2s var(--ease); }
.v2-quick__tile:hover { background: #e6ebf7; }
.v2-quick__tile:active { transform: scale(.98); }
.v2-quick__ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: #fff; color: var(--brand); }
.v2-quick__t { display: grid; gap: 2px; min-width: 0; }
.v2-quick__t b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.v2-quick__t small { font-size: 12.5px; color: var(--muted); line-height: 1.25; }
.v2-quick__tile--accent { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.v2-quick__tile--accent .v2-quick__t small { color: rgba(255, 255, 255, .85); }
.v2-quick__tile--accent .v2-quick__ic { color: var(--orange); }
.v2-quick__more { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.v2-quick__more a { color: var(--brand); font-weight: 600; }
@media (min-width: 768px) { .v2-quick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .v2-quick__tile { min-height: 78px; padding: 14px 16px; } .v2-quick__t b { font-size: 16px; } }

/* «Гінекологічні операції» */
.v2-ops__lead { max-width: 760px; margin: -6px 0 20px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.v2-ops__wrap { display: grid; gap: 16px; }
.v2-ops__grid { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v2-op { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px 12px 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s var(--ease); }
.v2-op:hover { box-shadow: 0 0 0 1px rgba(48, 73, 161, .35), 0 12px 30px -18px rgba(31, 51, 137, .45); }
.v2-op__t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.v2-op__t b { font-size: 16px; font-weight: 600; line-height: 1.25; }
.v2-op__t small { font-size: 13px; color: var(--muted); line-height: 1.3; }
.v2-op__p { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 15px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.v2-ops__team { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 20px; background: var(--mist); }
.v2-ops__cap { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v2-surg { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.v2-surg img { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #fff; }
.v2-surg span { display: grid; gap: 2px; }
.v2-surg b { font-size: 15px; font-weight: 600; }
.v2-surg small { font-size: 13px; color: var(--muted); line-height: 1.3; }
.v2-ops__book { width: 100%; justify-content: center; margin-top: 6px; }
.v2-ops__note { margin: 0; font-size: 13.5px; color: var(--muted); }
.v2-ops__note a { color: var(--brand); }
@media (min-width: 768px) { .v2-ops__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 1100px) { .v2-ops__wrap { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; } }

/* «Лікарі-спеціалісти» */
.v2-spec__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.v2-spec__item { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 52px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s; }
.v2-spec__item:hover { box-shadow: 0 0 0 1px rgba(48, 73, 161, .35); color: var(--brand); }
.v2-spec__item b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.v2-spec__item small { font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (min-width: 768px) { .v2-spec__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }

/* «Пакетні програми»: на телефоні — горизонтальна стрічка */
.v2-packs__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.v2-packs__row::-webkit-scrollbar { display: none; }
.v2-packs__row li { scroll-snap-align: start; }
.v2-pack { position: relative; display: grid; gap: 6px; height: 100%; min-height: 150px; padding: 18px 18px 44px; border-radius: 20px; background: linear-gradient(160deg, #f3f6fd, #e7ecf9); color: var(--ink); text-decoration: none; }
.v2-pack b { font-size: 17px; font-weight: 600; line-height: 1.25; }
.v2-pack__p { font-size: 22px; font-weight: 700; color: var(--brand); }
.v2-pack small { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.v2-pack .v2-arrow { position: absolute; right: 16px; bottom: 16px; color: var(--brand); }
@media (min-width: 900px) { .v2-packs__row { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; } }

/* кнопка запису на картці лікаря */
.lane__item { display: flex; flex-direction: column; }
.doc__book { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; border-radius: 12px; background: var(--orange); color: #fff !important; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .2s; }
.doc__book:hover { background: #e2601a; }

/* «Сімейний лікар безкоштовно» на компʼютері й горизонтальному планшеті — дві колонки: ліворуч текст і кнопка, праворуч
   біла панель з цінами й лікарями. Так у макеті власника (stardoctor-hero.vercel.app/brand-style-v3) і в site.css головної;
   29.10.2026, власник: «Ось як це має бути». Поломка: правку 11.10.2026 для телефонів (.decl__card{grid-template-columns:
   minmax(0,1fr)} у site.css) записано без медіа-умови після правила двох колонок — і на всіх ширинах блок став однією
   колонкою, а біла панель розтяглась на всю ширину й стояла напівпорожня. Пропорції — ті самі, що в макеті й site.css.
   Від 1024 px, а не від 640 горизонтально, як у макеті: на телефоні горизонтально права панель виходила 266 px, і імена
   лікарів ламались на три рядки (заміряно 29.10). */
@media (min-width: 1024px) {
	.decl__card { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
/* вужче 1024 горизонтально блок в одну колонку, як на телефоні; лікарі в панелі — у два стовпчики, як на вертикальному
   планшеті (site.css), щоб широка панель не стояла напівпорожньою */
@media (orientation: landscape) and (min-width: 640px) and (max-width: 1023px) {
	.decl__docs { grid-template-columns: 1fr 1fr; }
}