/* =====================================================================
   Страница «Лимфодренажный массаж» — шаблон page-limfodrenazhnyj.php.
   Подключается только на ней, после massage.css (inc/lymph.php): первый экран,
   цены, мастера, вопросы и запись — компоненты страницы «Массаж» (glm-*).
   Здесь — блоки, которых на «Массаже» нет (gll-*).
   С 15.09.2026 эти же блоки берёт «Антицеллюлитный массаж» (anticellulite.css поверх этого файла):
   меняя gll-* здесь, проверяйте и /massazh/anticellyulitnyj/.

   Макет goldline-pages пришёл со своей шапкой и подвалом, Georgia и Arial,
   золотыми кнопками, радиусами 20 px и подписью капсом над каждым H2.
   Приведён к сайту: шрифт Jost, оливковое действие, тёплые панели, общие
   кнопки, ссылки, чек-лист, шаги и форма. Подписи над H2 убраны — заголовки
   и так называют блок. Точки — сайтовые 1100 / 850 / 600.
   ===================================================================== */
.gll-section {padding-top:var(--glm-gap)}
.gll h3 {text-wrap:balance}

/* ---- Первый экран: фото сеанса во всю ширину, как баннер главной ----
   Кадр 16:9: слева проекция каньона, справа мастер и гостья (голова гостьи — с 36 % ширины кадра).
   Фото начинается под концом текста (--gll-copy) и заходит под него на --gll-overlap;
   светлая растяжка шириной --gll-fade ложится на проекцию, а люди остаются в чистой части кадра.
   Кадр сдвинут влево (38 %): при обрезке по бокам уходит край полотенца, а не гостья.
   --gll-copy — по ширине слова «Лимфодренажный» в H1 (490 px при 64 px): чем уже текст, тем шире фото
   и тем дальше голова гостьи от растяжки (проверено на 1920–961 px).
   До 1100 px текст, растяжка и оба человека рядом не помещаются (срезались кудри мастера у края экрана) —
   фото встаёт под текст во всю ширину, как на главной. */
.gll-hero {position:relative;isolation:isolate;overflow:hidden;--gll-copy:520px;--gll-fade:260px;--gll-overlap:100px}
.gll-hero__visual {position:absolute;z-index:-1;top:0;right:0;bottom:0;left:calc(max(var(--gutter),(100% - var(--container)) / 2) + var(--gll-copy) - var(--gll-overlap));background:#d9c7b1}
.gll-hero__visual::after {content:"";position:absolute;top:0;bottom:0;left:-1px;width:var(--gll-fade);background:linear-gradient(90deg,#f9efe4 0%,#f9efe4f2 36%,#f9efe4a8 68%,#f9efe400 100%);pointer-events:none}
.gll-hero__photo {width:100%;height:100%;object-fit:cover;object-position:38% 45%}
.gll-hero .glm-hero__inner {grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:clamp(600px,42vw,720px);padding-block:22px 44px}
.gll-hero .glm-hero__copy {align-self:center;max-width:var(--gll-copy)}
.gll-hero__offer {margin-top:38px;padding-top:20px;border-top:1px solid #e6d9c7}
.gll-hero__offer-title {color:#6a675f;font-size:14px;line-height:1.3}
.gll-hero__offer-row {display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;margin-top:10px}
.gll-hero__prices {display:flex;margin:0}
.gll-hero__prices div {display:flex;flex-direction:column;gap:3px}
.gll-hero__prices div+div {margin-left:28px;padding-left:28px;border-left:1px solid #e6d9c7}
.gll-hero__prices dt {color:#6a675f;font-size:14px;line-height:1.2}
.gll-hero__prices dd {margin:0;color:var(--ink);font:300 30px/1.05 var(--display);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.gll-hero__tea {display:flex;align-items:center;gap:12px;max-width:180px;color:#5d5850;font-size:15px;line-height:1.35}
.gll-hero__tea-icon {display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;border:1px solid #e4e7df;border-radius:50%;background:#ffffffbf;color:var(--olive-dark)}
.gll-hero__tea-icon svg {width:26px;height:26px}
/* На больших экранах не выше 660 px: иначе текст по центру отрывается от крошек, а сверху и снизу пустота. */
@media(min-width:1600px){.gll-hero .glm-hero__inner{min-height:660px}}
/* 1101–1320: строка цен в одну линию (экран ниже — кадр меньше обрезается по бокам), кадр сдвинут к мастеру. */
@media(max-width:1320px){.gll-hero{--gll-copy:460px;--gll-fade:180px;--gll-overlap:68px}.gll-hero__photo{object-position:47% 45%}.gll-hero__offer-row{column-gap:24px}.gll-hero__prices div+div{margin-left:22px;padding-left:22px}.gll-hero .glm-hero__inner{min-height:clamp(560px,44vw,600px)}.gll-hero__prices dd{font-size:28px}}
@media(max-width:1100px){.gll-hero__prices dd{font-size:25px}}
@media(max-width:1100px){
 /* Текст уже не помещается рядом с фото. Блок текста растворяется в сетке (display:contents),
    фото встаёт сразу после кнопок во всю ширину экрана, цены — под ним: фото поднимается в первый экран телефона. */
 .gll-hero .glm-hero__inner{grid-template-rows:none;min-height:0;padding-block:20px 30px}
 .gll-hero .glm-hero__copy{display:contents}.gll-hero .eyebrow{justify-self:start}
 .gll-hero__visual{position:relative;z-index:0;order:1;inset:auto;margin:30px calc(var(--gutter) * -1) 0;aspect-ratio:1.6}
 .gll-hero__visual::after{display:none}
 .gll-hero__photo{object-position:58% 50%}
 .gll-hero__offer{order:2;margin-top:24px;padding-top:0;border-top:0}
}
@media(max-width:600px){
 .gll-hero__visual{margin-top:22px;aspect-ratio:1.25}
 .gll-hero__photo{object-position:62% 50%}
 .gll-hero .glm-hero__inner{padding-block:14px 26px}
 /* Цены стоят прямо под фото — ссылка «Стоимость» на телефоне лишняя и опускала фото на строку. */
 .gll-hero .glm-hero__actions .text-link{display:none}
 .gll-hero__offer{margin-top:18px}
 .gll-hero__offer-row{gap:14px 20px}
 .gll-hero__prices div+div{margin-left:20px;padding-left:20px}
 .gll-hero__prices dt{font-size:13px}.gll-hero__prices dd{font-size:24px}
 .gll-hero__tea{max-width:none;font-size:14px}.gll-hero__tea-icon{width:44px;height:44px}.gll-hero__tea-icon svg{width:22px;height:22px}
}

/* ---- Разделы страницы: строка ссылок под первым экраном, на телефоне листается ---- */
.gll-anchors {border-block:1px solid var(--glm-line);background:#fff}
.gll-anchors .container {display:flex;gap:4px 30px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.gll-anchors .container::-webkit-scrollbar {display:none}
.gll-anchors a {flex-shrink:0;padding-block:16px;border-bottom:2px solid transparent;color:var(--glm-text);font-size:15px;white-space:nowrap;transition:color .2s,border-color .2s}
.gll-anchors a:hover {border-color:var(--olive);color:var(--olive-dark)}

/* ---- Общая карточка блоков страницы ---- */
.gll-card {padding:26px;border:1px solid var(--glm-line);border-radius:18px;background:#fff}
.gll-card h3,.gll-format h3,.gll-situations h3,.gll-safety h3,.gll-course h3,.gll-help h3 {font:350 23px/1.25 var(--display);letter-spacing:-.008em}
.gll-round {display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;background:var(--glm-warm);color:var(--glm-gold)}
.gll-round .icon {width:24px;height:24px}

/* ---- Что даёт лимфодренажный массаж: подход, фото, ограничения ---- */
.gll-expect {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:16px}
.gll-card--good {border-color:#e1e7d6;background:#f5f7f0}
.gll-card--care {border-color:#efdcd2;background:#fbf3ee}
.gll-card .checklist {margin-top:18px}
/* Фото «до/после»: обе половины видны целиком — контейнер не уже пропорции кадра 1,4. */
.gll-expect__photo {position:relative;min-height:260px;margin:0;overflow:hidden;border-radius:18px;background:var(--glm-warm)}
.gll-expect__photo img {width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.gll-expect__caption {position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:40px;background:#2b2118a8;color:#fff;font-size:12px;line-height:1.3}
.gll-notlist {display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}
.gll-notlist li {display:flex;gap:10px;color:var(--ink);font-size:15px;line-height:1.45}
.gll-notlist .icon {flex-shrink:0;width:18px;height:18px;margin-top:2px;color:#9a5238}

/* ---- Тело, ноги или лицо ---- */
.gll-formats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.gll-format {display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--glm-line);border-radius:18px;background:#fff}
.gll-format__photo {aspect-ratio:1.45;overflow:hidden;background:var(--glm-warm)}
.gll-format__photo img {width:100%;height:100%;object-fit:cover}
.gll-format__body {display:flex;flex:1;flex-direction:column;padding:22px}
.gll-format p {margin-top:10px;color:var(--glm-text);font-size:15px;line-height:1.55}
.gll-format .gll-format__meta {display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--ink);font-size:14px;font-weight:500}
.gll-format__meta .icon {flex-shrink:0;width:18px;height:18px;color:var(--glm-gold)}
.gll-format__action {margin-top:auto;padding-top:16px}

/* ---- Ручной или аппаратный ---- */
.gll-compare {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px}
.gll-compare__cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gll-compare__card.is-current {border-color:#d3dbc6;background:#f7f9f3}
.gll-dots {display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.gll-dots li {position:relative;padding-left:16px;color:var(--glm-text);font-size:15px;line-height:1.45}
.gll-dots li::before {content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--olive)}
.gll-tag {display:inline-block;margin-top:18px;padding:5px 12px;border-radius:40px;background:var(--olive-dark);color:#fff;font-size:13px}
.gll-compare__note {margin-top:18px;color:#6a675f;font-size:13px}
.gll-situations {padding:26px;border-radius:18px;background:var(--glm-warm)}
.gll-situations ul {display:grid;gap:14px;margin:18px 0 0;padding:0;list-style:none}
.gll-situations li {display:flex;gap:12px;font-size:15px;line-height:1.45}
.gll-situations li .icon {flex-shrink:0;width:20px;height:20px;color:var(--glm-gold)}
.gll-situations__note {margin-top:18px;padding-top:14px;border-top:1px solid #e8dccb;color:#6a675f;font-size:13px;line-height:1.5}

/* ---- Когда нужен врач и как проходит сеанс ---- */
.gll-process {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:32px;align-items:start}
.gll-safety {padding:26px;border:1px solid #efdcd2;border-radius:18px;background:#fbf3ee}
.gll-safety h3 {display:flex;align-items:center;gap:10px}
.gll-safety h3 .icon {flex-shrink:0;width:22px;height:22px;color:#9a5238}
.gll-safety p {margin-top:12px;color:var(--ink);font-size:15px;line-height:1.55}
.gll-safety .gll-safety__note {color:#6a675f;font-size:13px}

/* ---- Стоимость: две цены из прайса и вопрос о курсе ---- */
.gll-prices {padding-top:var(--glm-gap)}
.gll-prices__grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.gll-course {display:flex;flex-direction:column;align-items:flex-start;padding:24px;border:1px dashed #d6c7b1;border-radius:18px;background:var(--glm-warm)}
.gll-course>.icon {width:26px;height:26px;margin-bottom:12px;color:var(--glm-gold)}
.gll-course p {margin-top:8px;color:var(--glm-text);font-size:15px;line-height:1.55}
.gll-course .text-link {margin-top:auto;padding-top:14px}

/* ---- Почему выбирают ---- */
.gll-features {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.gll-features li {display:flex;flex-direction:column;gap:12px;padding:18px 16px;border:1px solid var(--glm-line);border-radius:14px;background:#fff;font-size:15px;line-height:1.35}
.gll-features .icon {width:24px;height:24px;color:var(--glm-gold)}

/* ---- Мастера: компонент «Массажа», отступ как у остальных блоков ---- */
.gll-team {padding-top:var(--glm-gap)}

/* ---- Документы ---- */
.gll-docs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.gll-doc {display:flex;flex-direction:column;width:100%;height:100%;padding:14px;border:1px solid var(--glm-line);border-radius:18px;background:#fff;text-align:left;transition:border-color .2s,transform .2s}
.gll-doc:hover {border-color:#cdbfa9;transform:translateY(-2px)}
.gll-doc__image {display:flex;align-items:center;justify-content:center;height:260px;overflow:hidden;border-radius:12px;background:#f5f1ea}
.gll-doc__image img {width:100%;height:100%;object-fit:contain}
.gll-doc__name {margin-top:14px;color:var(--ink);font-size:16px;font-weight:500;line-height:1.35}
.gll-doc__date {margin-top:4px;color:#6a675f;font-size:14px}

/* ---- Отзывы ---- */
.gll-reviews {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.gll-review {display:flex;flex-direction:column;padding:24px;border:1px solid var(--glm-line);border-radius:18px;background:#fff}
.gll-review__head strong {display:block;color:var(--ink);font-size:17px;font-weight:500}
.gll-review__head span {display:block;margin-top:2px;color:#6a675f;font-size:14px}
.gll-review__stars {display:flex;gap:2px;margin-top:12px;color:#b8862f}
.gll-review__stars .icon {width:17px;height:17px;fill:currentColor;stroke:none}
.gll-review__kind {margin-top:10px;color:var(--olive-dark);font-size:13px}
.gll-review blockquote {margin:12px 0 0;color:var(--ink);font-size:16px;line-height:1.55}
.gll-review__action {margin-top:auto;padding-top:16px}

/* ---- Частые вопросы и звонок ---- */
.gll-faq {display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:32px;align-items:start}
.gll-help {position:sticky;top:120px;padding:26px;border-radius:18px;background:var(--glm-warm)}
.gll-help p {margin-top:10px;color:var(--glm-text);font-size:15px;line-height:1.55}
.gll-help .button {margin-top:18px;white-space:nowrap}
.gll .glm-booking {margin-top:var(--glm-gap)}

/* ===================================================================== */
@media(max-width:1100px){
 .gll-expect{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gll-expect__photo{grid-column:1 / -1;order:-1;min-height:0;aspect-ratio:2}
 .gll-compare,.gll-process,.gll-faq{grid-template-columns:minmax(0,1fr)}
 .gll-features{grid-template-columns:repeat(3,minmax(0,1fr))}
 .gll-help{position:static}
 .gll-card,.gll-situations,.gll-safety,.gll-help{padding:22px}
 .gll-doc__image{height:220px}
}
@media(max-width:850px){
 .gll-formats,.gll-reviews{grid-template-columns:minmax(0,1fr)}
 .gll-format{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}.gll-format__photo{aspect-ratio:auto;min-height:100%}
 .gll-compare__cards{grid-template-columns:minmax(0,1fr)}
 .gll-prices__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gll-course{grid-column:1 / -1}
}
@media(max-width:600px){
 .gll-anchors a{padding-block:14px;font-size:14px}
 .gll-expect{grid-template-columns:minmax(0,1fr)}.gll-expect__photo{aspect-ratio:1.6;border-radius:14px}
 .gll-card,.gll-format,.gll-situations,.gll-safety,.gll-course,.gll-review,.gll-doc,.gll-help{border-radius:14px}
 .gll-card h3,.gll-format h3,.gll-situations h3,.gll-safety h3,.gll-course h3,.gll-help h3{font-size:21px}
 /* На телефоне карточка снова столбцом: фото сверху, высота фото — по пропорции, а не по высоте карточки. */
 .gll-format{display:flex}.gll-format__photo{min-height:0;aspect-ratio:1.6}.gll-format__body{padding:18px 16px}
 .gll-prices__grid{grid-template-columns:minmax(0,1fr)}
 .gll-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gll-features li{padding:14px 12px;font-size:14px}
 .gll-docs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gll-doc{padding:10px}.gll-doc__image{height:170px}.gll-doc__name{font-size:14px}.gll-doc__date{font-size:13px}
 .gll-review{padding:20px 16px}.gll-review blockquote{font-size:15px}
 .gll-help .button{width:100%}
}
@media print{
 .gll-anchors,.gll-help,.gll-review__action{display:none!important}
}