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

   Макет goldline-spa-about пришёл со своей шапкой и подвалом, Cormorant Garamond и Manrope,
   золотыми кнопками и декоративной веткой. Приведён к сайту: Jost, оливковое действие,
   тёплые панели, точки — сайтовые 1100 / 850 / 600.
   ===================================================================== */

/* ---- Первый экран: текст слева, мозаика из трёх настоящих снимков справа ----
   Холл — вертикальная плитка на всю высоту, кабинет косметолога и массажный кабинет — друг под другом.
   Мозаика показывает, что в клинике два разных пространства, — первый экран не повторяет широкие баннеры услуг. */
.glo-hero .glm-hero__inner {padding-block:22px 52px}
.glo-hero .glm-hero__lead {max-width:590px}
.glo-mosaic {display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;width:clamp(440px,42vw,600px);height:clamp(460px,38vw,560px)}
.glo-mosaic__tile {position:relative;display:block;min-height:0;overflow:hidden;border-radius:20px;background:#eadfce}
.glo-mosaic__tile--hall {grid-row:1 / 3}
.glo-mosaic__tile img {width:100%;height:100%;object-fit:cover;transition:transform .45s}
.glo-mosaic__tile--hall img {object-position:62% 50%}
.glo-mosaic__tile--cabinet img {object-position:40% 60%}
.glo-mosaic__tile:hover img {transform:scale(1.03)}
.glo-mosaic__caption {position:absolute;left:12px;bottom:12px;padding:4px 11px;border-radius:40px;background:#2b2118a8;color:#fff;font-size:13px;line-height:1.3}

/* ---- Два пространства: светлая карточка — косметология, тёмная — массаж и SPA, как сами кабинеты ---- */
.glo-spaces {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.glo-space {display:flex;flex-direction:column;padding:30px;border:1px solid var(--glm-line);border-radius:18px;background:#fff}
.glo-space h3 {font:350 30px/1.15 var(--display);letter-spacing:-.01em}
.glo-space>p {max-width:520px;margin-top:12px;color:var(--glm-text);font-size:16px;line-height:1.6}
.glo-space__list {display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.glo-space__list li {position:relative;padding-left:18px;color:var(--ink);font-size:15px;line-height:1.45}
.glo-space__list li::before {content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--olive)}
.glo-space__links {display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:auto;padding-top:20px}
.glo-space--light {background:linear-gradient(160deg,#fff,#f7f8f4)}
.glo-space--dark {border-color:#3b3129;background:linear-gradient(160deg,#2f2721,#241e19);color:#f4ebdf}
.glo-space--dark h3,.glo-space--dark .glo-space__list li {color:#f4ebdf}
.glo-space--dark>p {color:#d9ccbb}
.glo-space--dark .glo-space__list li::before {background:#d6a45c}
.glo-space--dark .text-link {border-color:#5a4c40;color:#efdcc0}
.glo-space--dark .text-link:hover {color:#fff}
.glo-gallery {margin-top:16px}

/* ---- Направления: вся карточка — ссылка на страницу услуги или на цены главной ---- */
.glo-directions {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.glo-directions>li {display:flex;min-width:0}
.glo-direction {display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid #e9e3da;border-radius:var(--radius);background:#fff;text-align:left;transition:box-shadow .25s,transform .25s,border-color .25s}
.glo-direction:hover {transform:translateY(-4px);border-color:#d7cbb8;box-shadow:0 14px 30px rgba(86,68,43,.1)}
.glo-direction__photo {display:block;aspect-ratio:1.45;overflow:hidden;background:var(--glm-warm)}
.glo-direction__photo img {width:100%;height:100%;object-fit:cover;transition:transform .45s}
.glo-direction:hover img {transform:scale(1.04)}
.glo-direction__body {display:flex;flex:1;flex-direction:column;padding:16px 16px 14px}
.glo-direction__title {color:var(--ink);font:350 21px/1.18 var(--display);letter-spacing:-.008em}
.glo-direction__text {margin-top:8px;color:var(--glm-text);font-size:14px;line-height:1.5}
.glo-direction__more {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin-top:auto;padding-top:14px}
.glo-direction__price {color:var(--ink);font-size:14px;font-weight:600;line-height:1.3;font-variant-numeric:lining-nums tabular-nums}
.glo-direction__label {display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:var(--olive-dark);font-size:14px;white-space:nowrap}
.glo-direction__label .icon {width:18px;height:18px}
.glo-direction:hover .glo-direction__label {text-decoration:underline;text-underline-offset:4px}

/* ---- Первый визит: линия из пяти шагов, без карточек и значков (оценщик, 15.09.2026) ----
   Номер в кружке стоит на общей линии; на телефоне линия вертикальная слева. */
.glo-steps {position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.glo-steps::before {content:"";position:absolute;top:21px;left:22px;right:22px;height:1px;background:#decfb9}
.glo-step {position:relative;min-width:0}
.glo-step__number {display:grid;place-items:center;width:44px;height:44px;border:1px solid #decfb9;border-radius:50%;background:#fff;color:var(--glm-gold);font:300 20px/1 var(--display)}
.glo-step h3 {margin-top:18px;font:350 21px/1.22 var(--display);letter-spacing:-.008em}
.glo-step p {margin-top:8px;color:var(--glm-text);font-size:15px;line-height:1.55;text-wrap:pretty}

/* ---- Реквизиты под сертификатами — те же, что в подвале ---- */
.glo-requisites {display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:18px;padding:14px 18px;border:1px solid var(--glm-line);border-radius:14px;background:#fff;color:var(--glm-text);font-size:14px;line-height:1.45}
.glo-requisites .icon {flex-shrink:0;width:20px;height:20px;color:var(--glm-gold)}
.glo-requisites .inline-link {margin-left:auto}

/* ---- Специалисты: пять портретов в ряд ---- */
.glo-team {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.glo-person {display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.glo-person__photo {display:block;width:100%;aspect-ratio:.8;overflow:hidden;border-radius:var(--radius);background:var(--glm-warm)}
.glo-person__photo img {width:100%;height:100%;object-fit:cover;transition:transform .45s}
.glo-person__photo:hover img {transform:scale(1.03)}
.glo-person__role {margin-top:14px;color:#76582f;font-size:12px;letter-spacing:1.4px;text-transform:uppercase}
.glo-person h3 {margin-top:6px;font:350 21px/1.2 var(--display);letter-spacing:-.008em}
.glo-person__focus {margin-top:6px;color:var(--glm-text);font-size:14px;line-height:1.45}
.glo-person__book {margin-top:auto;padding-top:12px}

/* ---- Документы: шесть в ряд, остальные — в окне «Все документы» ---- */
.glo-docs {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.glo-doc {padding:10px}
.glo-doc .gll-doc__image {height:190px}
.glo-doc .gll-doc__name {margin-top:10px;font-size:14px}
.glo-doc .gll-doc__date {font-size:13px}

/* ---- Отзывы: два скриншота и площадки ---- */
.glo-reviews {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.glo-reviews__list {grid-template-columns:repeat(2,minmax(0,1fr))}
.glo-reviews__sources {padding:24px;border-radius:18px;background:var(--glm-warm)}
.glo-reviews__sources h3 {font:350 23px/1.25 var(--display);letter-spacing:-.008em}
.glo-reviews__sources .glm-review-sources {margin-top:16px}

/* ---- Как нас найти: адрес, шаги до двери и видео со страницы «Контакты» ---- */
.glo-way {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding:40px;border-radius:23px;background:var(--glm-warm)}
.glo-way__contacts {display:grid;gap:14px;margin:22px 0 0;padding:0;list-style:none}
.glo-way__contacts li {display:flex;align-items:flex-start;gap:12px}
.glo-way__contacts .icon {flex-shrink:0;width:22px;height:22px;margin-top:1px;color:var(--glm-gold)}
.glo-way__contacts strong {display:block;color:var(--ink);font-size:16px;font-weight:500;line-height:1.35}
.glo-way__contacts small {display:block;margin-top:2px;color:#6a675f;font-size:14px}
.glo-way__phone {color:var(--olive-dark);font-size:18px;font-weight:600;white-space:nowrap}
.glo-way__steps {display:grid;gap:8px;margin:22px 0 0;padding:18px 0 0 20px;border-top:1px solid #e8dccb;color:var(--glm-text);font-size:15px;line-height:1.5}
.glo-way__steps strong {color:var(--ink);font-weight:500}
.glo-way__actions {display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:24px}
.glo-way__actions .button {min-height:52px;padding:10px 22px;gap:10px;font-size:15px}
.glo-way__actions .button .icon {width:20px;height:20px}
.glo-way__video {position:relative;display:block;overflow:hidden;aspect-ratio:16 / 9;border-radius:18px;background:#d9c7b1}
.glo-way__video img {width:100%;height:100%;object-fit:cover;transition:transform .45s}
.glo-way__video:hover img {transform:scale(1.03)}
.glo-way__play {position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:40px;background:#2b2118c4;color:#fff;font-size:14px;line-height:1.3}
.glo-way__play small {display:block;color:#e7dccd;font-size:12px}
.glo-way__play-icon {display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--olive-dark)}
.glo-way__play-icon .icon {width:16px;height:16px;margin-left:2px}

/* ===================================================================== */
@media(max-width:1320px){
 .glo-mosaic{width:clamp(400px,40vw,520px);height:clamp(440px,38vw,500px)}
  .glo-docs .gll-doc__image{height:160px}
}
@media(max-width:1100px){
 .glo-mosaic{width:clamp(300px,38vw,400px);height:440px}
  .glo-space{padding:24px}.glo-space h3{font-size:27px}
 .glo-directions{grid-template-columns:repeat(3,minmax(0,1fr))}
 .glo-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px}.glo-steps::before{display:none}
 .glo-team{grid-template-columns:repeat(3,minmax(0,1fr))}
 .glo-docs{grid-template-columns:repeat(3,minmax(0,1fr))}.glo-docs .gll-doc__image{height:200px}
 .glo-reviews{grid-template-columns:minmax(0,1fr)}
 .glo-reviews__sources .glm-review-sources{grid-template-columns:repeat(2,minmax(0,1fr))}
 .glo-way{gap:28px;padding:30px}
}
@media(max-width:850px){
 /* Первый экран — одна колонка: текст, кнопки, мозаика во всю ширину, под ней цифры.
    Блок текста растворяется в сетке (display:contents), чтобы фото поднялось в первый экран телефона. */
 .glo-hero .glm-hero__inner{grid-template-columns:minmax(0,1fr);padding-block:20px 34px}
 .glo-hero .glm-hero__copy{display:contents}.glo-hero .eyebrow{justify-self:start}
 .glo-mosaic{order:1;width:100%;height:clamp(320px,62vw,480px);margin-top:28px}
 .glo-spaces{grid-template-columns:minmax(0,1fr)}
 .glo-directions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .glo-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .glo-reviews__list{grid-template-columns:minmax(0,1fr)}
 .glo-way{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
 .glo-hero .glm-hero__inner{padding-block:14px 28px}
 .glo-hero .glm-hero__actions .text-link{display:none}
 .glo-mosaic{gap:8px;height:clamp(300px,86vw,420px);margin-top:22px}
 .glo-mosaic__tile{border-radius:14px}.glo-mosaic__caption{left:8px;bottom:8px;padding:3px 9px;font-size:12px}
    .glo-space{padding:20px 16px;border-radius:14px}.glo-space h3{font-size:24px}.glo-space>p{font-size:15px}
 .glo-directions{gap:10px}
 .glo-direction__body{padding:12px 12px 10px}.glo-direction__title{font-size:18px}
 .glo-direction__text{margin-top:6px;font-size:13px;line-height:1.45}
 .glo-direction__more{padding-top:10px}.glo-direction__price{font-size:13px}
 .glo-direction__label{font-size:13px}.glo-direction__label .icon{width:16px;height:16px}
 /* Шаги — вертикальная линия слева: пять шагов занимают экран, а не два. */
 .glo-steps{grid-template-columns:minmax(0,1fr);row-gap:18px}
 .glo-steps::before{display:block;top:18px;bottom:18px;left:18px;right:auto;width:1px;height:auto}
 .glo-step{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px}
 .glo-step__number{grid-row:1 / 3;width:36px;height:36px;font-size:17px}
 .glo-step h3{margin-top:4px;font-size:19px}.glo-step p{margin-top:4px;font-size:14px}
 .glo-requisites{padding:12px 14px;font-size:13px}.glo-requisites .inline-link{margin-left:34px}
 .glo-team{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
 .glo-person__role{margin-top:10px;font-size:11px;letter-spacing:1px}.glo-person h3{font-size:18px}.glo-person__focus{font-size:13px}
 .glo-docs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.glo-docs .gll-doc__image{height:150px}
 .glo-reviews__sources{padding:20px 16px;border-radius:14px}
 .glo-reviews__sources .glm-review-sources{grid-template-columns:minmax(0,1fr)}
 .glo-way{padding:22px 16px;border-radius:14px}
 .glo-way__actions .button{width:100%;justify-content:center}
 .glo-way__play{left:8px;bottom:8px;font-size:13px}
}
@media(max-width:370px){
  .glo-direction__title{font-size:16px}.glo-direction__text{display:none}
}
@media print{
 .glo-mosaic,.glo-gallery,.glo-way__video{display:none!important}
}