/* =====================================================================
   Страница «Массаж шейно-воротниковой зоны» — шаблон page-shejno-vorotnikovoj-zony.php.
   Подключается только на ней, после massage.css и lymph.css (inc/neck.php):
   первый экран, цены, шаги, мастера, документы, отзывы, вопросы и запись — компоненты
   «Массажа» (glm-*) и «Лимфодренажа» (gll-*). Здесь — свои блоки (gln-) и подстройка первого экрана.

   Макет goldline-neck-massage пришёл со своей шапкой и подвалом, Georgia и Arial, золотыми кнопками,
   полосой из шести значков и тремя плашками скидки. Приведён к сайту так же, как антицеллюлитный:
   Jost, оливковое действие, тёплые панели, точки — сайтовые 1100 / 850 / 600.
   ===================================================================== */

/* ---- Первый экран: кадр 2400×1350 (отражён), слева проекция, мастер — 58–85 % ширины, голова гостьи — около 62 % ----
   «Шейно-воротниковой» — самое длинное слово H1 среди страниц услуг: 64 px не помещались в колонку,
   поэтому H1 мельче, а колонка шире; кадр прижат вправо, чтобы при обрезке уходила проекция, а не люди.
   Растяжка шире, чем у соседей: яркая проекция города рядом с текстом читалась как коллаж (оценщик, 15.09.2026). */
.gln-hero {--gll-copy:560px;--gll-fade:400px}
.gln-hero h1 {font-size:54px;line-height:1.02}
.gln-hero .gll-hero__photo {object-position:100% 40%}
@media(max-width:1320px){.gln-hero{--gll-copy:490px;--gll-fade:300px}.gln-hero h1{font-size:48px}}
@media(max-width:1100px){.gln-hero .gll-hero__photo{object-position:72% 45%}.gln-hero h1{font-size:44px}}
@media(max-width:600px){.gln-hero .gll-hero__photo{object-position:78% 45%}.gln-hero h1{font-size:34px}}
@media(max-width:370px){.gln-hero h1{font-size:30px}}

/* ---- Кому подходит и когда сначала к врачу ---- */
.gln-who {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:stretch}
.gln-doctor h3 .icon {color:#9a5238}
.gln-doctor__list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin:14px 0 0;padding:0;list-style:none}
.gln-doctor__list li {position:relative;padding-left:16px;color:var(--ink);font-size:15px;line-height:1.45}
.gln-doctor__list li::before {content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:#b0765d}
.gln-doctor .gll-safety__note {margin-top:16px;padding-top:14px;border-top:1px solid #efdcd2}

/* ---- Зоны: схема на настоящем снимке — точки и подписи поверх фото, рядом список ----
   Вместо инфографики макета (чужой кадр шеи с нарисованными линиями). Зоны не последовательность — без номеров. */
.gln-zones {display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
.gln-zones__photo {position:relative;margin:0;overflow:hidden;aspect-ratio:1;border-radius:18px;background:var(--glm-warm)}
.gln-zones__photo img {width:100%;height:100%;object-fit:cover}
.gln-zones__dot {position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid #fff;border-radius:50%;background:var(--olive);box-shadow:0 0 0 5px #ffffff4d}
.gln-zones__dot>span {position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);padding:4px 11px;border-radius:40px;background:#fffffff0;color:var(--ink);font-size:14px;line-height:1.3;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.gln-zones__copy .section__lead {margin-top:14px}
.gln-zones__list {display:grid;margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--glm-line)}
.gln-zones__list li {display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);align-items:baseline;gap:4px 14px;padding:14px 0;border-bottom:1px solid var(--glm-line)}
.gln-zones__list strong {color:var(--ink);font:350 21px/1.2 var(--display);letter-spacing:-.008em}
.gln-zones__list span {color:var(--glm-text);font-size:16px;line-height:1.5}
.gln-zones__copy>.text-link {margin-top:18px}

/* ---- Цены: три карточки и «Нужна только шея?» в ряд ---- */
.gln-prices__grid {grid-template-columns:repeat(4,minmax(0,1fr))}
.gln-price__zones {margin-top:10px;color:var(--glm-text);font-size:15px;line-height:1.45}

/* ---- Что почувствуете после: одна панель «ключ — значение» вместо трёх цветных карточек ---- */
.gln-after {margin:0;border:1px solid var(--glm-line);border-radius:18px;background:#fff;overflow:hidden}
.gln-after__row {display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:8px 32px;padding:20px 26px}
.gln-after__row+.gln-after__row {border-top:1px solid var(--glm-line)}
.gln-after dt {display:flex;align-items:center;gap:12px;color:var(--ink);font:350 21px/1.25 var(--display);letter-spacing:-.008em}
.gln-after dd {margin:0;color:var(--glm-text);font-size:16px;line-height:1.6}
.gln-after__mark {display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#eef2e8;color:var(--olive-dark)}
.gln-after__row--care .gln-after__mark {background:#f8e8e0;color:#9a5238}
.gln-after__row--info .gln-after__mark {background:var(--glm-warm);color:var(--glm-gold)}
.gln-after__mark .icon {width:17px;height:17px}
.gln-after .inline-link {white-space:nowrap}

/* ---- Документы под мастерами ---- */
.gln-docs__title {margin:36px 0 16px;font:350 24px/1.25 var(--display);letter-spacing:-.008em}

/* ---- Шея и лицо: фото и текст на тёплой панели ---- */
.gln-face {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden;border-radius:23px;background:var(--glm-warm)}
.gln-face__photo {margin:0;min-height:360px}
.gln-face__photo img {width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.gln-face__copy {align-self:center;padding:44px 48px}
.gln-face__copy>p {max-width:480px;margin-top:14px;color:var(--glm-text);font-size:17px;line-height:1.6}
.gln-face__actions {display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:26px}

/* ---- Отзывы: два скриншота и карточка площадок ---- */
.gln-reviews__more {justify-content:flex-start;gap:6px;background:var(--glm-warm);border-color:#eadcc8}
.gln-reviews__more strong {color:var(--ink);font:350 23px/1.25 var(--display)}
.gln-reviews__more p {margin:6px 0 8px;color:var(--glm-text);font-size:15px;line-height:1.55}
.gln-reviews__more .text-link {align-self:flex-start}

/* ===================================================================== */
@media(max-width:1100px){
 .gln-who{grid-template-columns:minmax(0,1fr)}
 .gln-zones{gap:32px}.gln-zones__list li{grid-template-columns:minmax(0,1fr)}
 .gln-prices__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gln-after__row{grid-template-columns:minmax(0,200px) minmax(0,1fr);padding:18px 20px}
 .gln-face__copy{padding:32px 30px}.gln-face__copy>p{font-size:16px}
}
@media(max-width:850px){
 /* Снимок зон остаётся квадратом: при обрезке точки съехали бы с шеи и плеч. */
 .gln-zones{grid-template-columns:minmax(0,1fr)}.gln-zones__photo{width:100%;max-width:520px}
 .gln-face{grid-template-columns:minmax(0,1fr)}.gln-face__photo{min-height:0;aspect-ratio:1.6}
 .gln-prices__grid .gll-course{grid-column:auto}
}
@media(max-width:600px){
 .gln-doctor__list{grid-template-columns:minmax(0,1fr)}
 .gln-zones__photo,.gln-after{border-radius:14px}
 .gln-zones__dot>span{font-size:13px;padding:3px 9px}
 .gln-zones__list strong{font-size:19px}.gln-zones__list span{font-size:15px}
 .gln-prices__grid{grid-template-columns:minmax(0,1fr)}
 /* На телефоне карточка цены — строка (massage.css): пояснение о зонах лишнее. */
 .gln-price__zones{display:none}
 .gln-after__row{grid-template-columns:minmax(0,1fr);padding:16px}.gln-after dt{font-size:19px}.gln-after dd{font-size:15px}
 .gln-docs__title{margin-top:28px;font-size:21px}
 .gln-face{border-radius:14px}.gln-face__copy{padding:22px 16px 24px}.gln-face__copy>p{font-size:15px}
 .gln-face__actions .button{width:100%}
 .gln .gll-docs{grid-template-columns:minmax(0,1fr)}.gln .gll-doc__image{height:220px}
}