/* Раздел «Блогерам» Body Bliss (/blogeram/).

   Бренд-бук сети: Playfair Display 400 (заголовки, курсивный акцент) + Manrope
   (интерфейс), оба локальные — /fonts/fonts.css. Фирменный голубой #79B5D1,
   основное действие — глубокий синий #1E4D6B. Теней нет: волосяные линии и
   светлые заливки, как на /otzyvy/ и /tayniy-klient/.

   Токены один в один из public_html/css/landing.css (:root бренд-бука), чтобы
   раздел не уехал в свою палитру, как это уже случалось у соседей. */
:root{
  --ink:#1F2A33;        /* bb-ink      — основной текст */
  --heading:#1E4D6B;    /* bb-navy     — заголовки */
  --soft:#5A6470;       /* bb-muted    — вторичный текст */
  --bg:#F4F9FB;         /* bb-bg */
  --wash:#EAF4F9;       /* заливка секций */
  --white:#fff;

  --blue:#79B5D1;       /* bb-sky */
  --teal:#4E8FAA;       /* bb-teal — курсивный акцент в заголовках */
  --deep:#1E4D6B;       /* bb-navy — основное действие */
  /* Для МЕЛКОГО текста bb-teal даёт контраст ~3.3:1 — ниже нормы,
     поэтому надзаголовки и ссылки берут bb-teal-deep. */
  --blue-d:#395A6A;     /* bb-teal-deep */
  --blue-l:#A1CBDF;
  --blue-p:#DCEDF5;

  --line:#DAF2FD;       /* bb-line */
  --line-2:#BFE3F3;

  --err:#94454A; --err-bg:#FBEDEE;
  --ok:#2C7A52;  --ok-bg:#E8F5EE;

  --serif:'Playfair Display',Georgia,serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:1120px;
  --r:20px;    /* bb r-m — карточки */
  --r-s:14px;  /* bb r-s — кнопки и поля */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;color:var(--ink);font:400 17px/1.7 var(--sans);
  background:
    radial-gradient(760px 460px at 88% -8%, rgba(161,203,223,.30) 0%, rgba(161,203,223,0) 65%),
    radial-gradient(620px 420px at -10% 22%, rgba(220,237,245,.55) 0%, rgba(220,237,245,0) 60%),
    var(--bg);
  overflow-x:clip;
}
img,svg{max-width:100%}
a{color:var(--blue-d);text-decoration:none}
a:hover{color:var(--deep)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;margin:0;color:var(--heading);text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--teal)}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--blue-d);outline-offset:2px}

.bl-wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%}
/* Узкая колонка — блок ВНУТРИ .bl-wrap, а не сам .bl-wrap: иначе auto-margin
   центрирует её и левый край секции уезжает относительно остальных
   (вёрстка по F: всё от одной вертикали). */
.bl-narrow{max-width:760px}
.bl-wrap>.bl-narrow{margin:0}

/* ── шапка ─────────────────────────────────────────────────────────────── */
.bl-top{position:sticky;top:0;z-index:30;background:rgba(251,253,254,.92);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line)}
.bl-top-in{max-width:var(--wrap);margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.bl-brand{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--heading);white-space:nowrap}
.bl-brand em{font-style:italic}
.bl-brand span{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--blue-d);vertical-align:middle;margin-left:10px}
.bl-navlink{font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--blue-d);background:var(--white);white-space:nowrap;
  transition:background .18s ease,color .18s ease}
.bl-navlink:hover{background:var(--blue-p);color:var(--deep)}

/* ── типографика ───────────────────────────────────────────────────────── */
.bl-sec{padding:80px 0;position:relative;scroll-margin-top:88px}
.bl-sec--tight{padding:64px 0}
.bl-sec--wash{background:var(--wash);border-block:1px solid var(--line)}
.bl-num{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue-d);margin:0 0 12px}
.bl-num--light{color:var(--blue-l)}
.bl-eyebrow{display:inline-block;font-weight:600;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--blue-d);margin:0 0 20px}
/* Метрика h1 из бренд-бука: Playfair 400, line-height 1.05, tracking −0.01em. */
.bl-h1{font-size:clamp(2.3rem,4.4vw,3.7rem);line-height:1.05;letter-spacing:-.01em;
  margin:0 0 24px;max-width:15ch}
.bl-h2{font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.06;letter-spacing:-.01em;margin:0 0 22px}
.bl-h2--inv{color:#fff}
.bl-h2--inv em{color:var(--blue-l)}
.bl-h3{font-family:var(--sans);font-weight:700;font-size:1.04rem;color:var(--heading);margin:0 0 10px}
.bl-lead{color:var(--soft);font-size:1.05rem;line-height:1.68;max-width:62ch;margin:0 0 28px}
.bl-note{color:var(--soft);font-size:.94rem;margin:0 0 12px;max-width:64ch}
.bl-note--after{margin:14px 0 0;font-size:.9rem}
.bl-opt{color:var(--soft);font-weight:400}
.bl-link{display:inline-block;font-weight:700;font-size:14px;color:var(--deep);margin-top:6px}

/* ── первый экран ──────────────────────────────────────────────────────── */
.bl-hero{padding:60px 0 68px}
/* Areas, а не две колонки: факты стоят ПОД текстом на десктопе, но ПОСЛЕ
   фотографий на мобиле — иначе первый экран телефона остаётся без картинки. */
.bl-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-areas:"txt pic" "facts pic";gap:28px 48px;align-items:center}
.bl-hero-txt{grid-area:txt;min-width:0}
.bl-hero-grid .bl-shots{grid-area:pic}
.bl-hero-grid .bl-facts{grid-area:facts}
.bl-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 40px}

.bl-shots{position:relative;min-height:420px}
.bl-shot{position:absolute;border-radius:var(--r);object-fit:cover;
  border:6px solid var(--white);background:var(--wash)}
.bl-shot--a{width:64%;aspect-ratio:3/4;left:0;top:0;z-index:2}
.bl-shot--b{width:56%;aspect-ratio:3/4;right:0;bottom:0;z-index:1}

.bl-facts{list-style:none;margin:0;padding:26px 0 0;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bl-facts li{display:flex;flex-direction:column;gap:6px}
.bl-facts b{font-family:var(--serif);font-weight:400;font-size:1.9rem;color:var(--heading);line-height:1.1}
.bl-facts span{color:var(--soft);font-size:.92rem;line-height:1.5}

/* ── кнопки ────────────────────────────────────────────────────────────── */
.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:15px;line-height:1;
  padding:16px 30px;border-radius:var(--r-s);border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;text-align:center}
.bl-btn--deep{background:var(--deep);color:#fff;border-color:var(--deep)}
.bl-btn--deep:hover{background:#17415B;color:#fff}
.bl-btn--ghost{background:var(--white);color:var(--deep);border-color:var(--line-2)}
.bl-btn--ghost:hover{background:var(--blue-p);color:var(--deep)}
.bl-btn--light{background:#fff;color:var(--deep);border-color:#fff;white-space:nowrap}
.bl-btn--light:hover{background:var(--blue-p);color:var(--deep)}
.bl-btn--wide{width:100%}

/* ── карточки и сетки ──────────────────────────────────────────────────── */
.bl-grid{display:grid;gap:20px}
.bl-grid--3{grid-template-columns:repeat(3,1fr)}
.bl-grid--4{grid-template-columns:repeat(4,1fr)}
.bl-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.bl-card p{margin:0;color:var(--ink);font-size:.96rem;line-height:1.62}
.bl-card-num{font-family:var(--serif);font-size:1.5rem;color:var(--blue-l);line-height:1;margin:0 0 10px}

.bl-callout{background:var(--white);border-left:3px solid var(--blue);border-radius:0 var(--r) var(--r) 0;
  padding:20px 24px;margin:28px 0 14px;color:var(--ink);max-width:70ch}
.bl-callout b{color:var(--heading)}

/* Галочки — признаки «кого ищем» и правила съёмки. */
.bl-ticks{list-style:none;margin:0 0 18px;padding:0}
.bl-ticks li{position:relative;padding:10px 0 10px 30px;border-top:1px solid var(--line-2);
  color:var(--heading);font-weight:600;font-size:.98rem;line-height:1.5}
.bl-ticks li:first-child{border-top:0}
.bl-ticks li::before{content:'';position:absolute;left:4px;top:1.15em;width:9px;height:5px;
  border-left:2px solid var(--blue-d);border-bottom:2px solid var(--blue-d);transform:rotate(-45deg)}

.bl-rules{list-style:none;margin:0;padding:0}
.bl-rules li{padding:16px 0;border-top:1px solid var(--line-2);color:var(--ink);
  font-size:.97rem;line-height:1.65}
.bl-rules li:last-child{border-bottom:1px solid var(--line-2)}
.bl-rules b{color:var(--heading)}

/* Текст + пара кадров: «кого ищем». */
.bl-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:48px;align-items:center}
.bl-split-pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bl-split-pics img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);display:block;
  border:6px solid var(--white);background:var(--wash)}

/* Тёмная полоса «курс крупным блогам» — единственный акцентный блок страницы. */
.bl-band{background:var(--deep);border-radius:var(--r);padding:40px 44px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.bl-band-txt p{color:#D6E7F0;margin:0 0 12px;font-size:.99rem;line-height:1.66;max-width:64ch}
.bl-band-txt p:last-child{margin-bottom:0}

/* ── шаги ──────────────────────────────────────────────────────────────── */
.bl-steps{list-style:none;counter-reset:s;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.bl-steps li{counter-increment:s;position:relative;padding-top:44px}
.bl-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--serif);font-size:1.5rem;color:var(--blue-d)}
.bl-steps li::after{content:'';position:absolute;top:14px;left:38px;right:-14px;
  border-top:1px dashed var(--line-2)}
.bl-steps li:last-child::after{display:none}
.bl-steps b{display:block;font-family:var(--sans);font-weight:700;color:var(--heading);margin-bottom:6px}
.bl-steps span{color:var(--soft);font-size:.95rem;line-height:1.62}

/* ── процедуры ─────────────────────────────────────────────────────────── */
.bl-procs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bl-proc{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bl-proc img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.bl-proc figcaption{padding:16px 18px 20px;font-size:.93rem;line-height:1.55;color:var(--soft)}
.bl-proc figcaption b{display:block;font-size:1rem;color:var(--heading);margin:0 0 4px}

/* ── студия города ─────────────────────────────────────────────────────── */
/* 🔴 Колонки фиксированные, НЕ auto-fit: у Пушкиной после первого экрана
   остаётся ровно один кадр, и `auto-fit` растягивал его на всю ширину —
   получалась картинка 1064×798 во весь экран вместо галереи. */
.bl-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 32px}
.bl-gal-i{margin:0;border-radius:var(--r-s);overflow:hidden;background:var(--wash);aspect-ratio:4/3}
.bl-gal-i img{width:100%;height:100%;object-fit:cover;display:block}

.bl-studio-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:stretch}
.bl-facts-list{display:flex;flex-direction:column;gap:0}
/* Одинокий кадр студии (у части филиалов после первого экрана остаётся один)
   стоит здесь, над адресом: отдельным рядом он висел бы в пустоте. */
.bl-studio-pic{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-s);
  display:block;margin:0 0 20px}
.bl-fact{padding:14px 0;border-top:1px solid var(--line-2)}
.bl-fact:first-child{border-top:0;padding-top:0}
.bl-fact span{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);margin-bottom:4px}
.bl-fact b{font-weight:600;color:var(--heading);font-size:1rem;line-height:1.5}
.bl-socs{padding-top:16px;border-top:1px solid var(--line-2);margin-top:14px}
.bl-socs .bl-note{margin-bottom:10px}
.bl-soc-row{display:flex;flex-wrap:wrap;gap:8px}
.bl-soc{padding:9px 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--white);
  font-weight:600;font-size:14px;color:var(--blue-d)}
.bl-soc:hover{background:var(--blue-p)}
.bl-map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--wash);
  min-height:340px;height:100%}
.bl-map iframe{width:100%;height:100%;min-height:300px;display:block;border:0}

.bl-master{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;
  margin-top:36px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px}
/* Фото мастеров сети — вертикальные 540×960. В рамке 4:5 с object-fit:cover
   кадр обрезался сверху и человек оставался без головы. Показываем целиком:
   фиксируем высоту, ширину считает браузер (тот же приём, что в /otzyvy/). */
.bl-master-photo{height:320px;width:auto;max-width:100%;border-radius:var(--r-s);display:block}
.bl-master-name{font-family:var(--serif);font-size:1.5rem;color:var(--heading);margin:0 0 4px}
.bl-master-role{color:var(--blue-d);font-weight:600;font-size:.9rem;letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 12px}
.bl-master-quote{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.55;
  color:var(--ink);margin:0}

/* ── города ────────────────────────────────────────────────────────────── */
.bl-cities{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bl-city{display:flex;flex-direction:column;gap:6px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;transition:border-color .18s ease,background .18s ease}
.bl-city:hover{border-color:var(--line-2);background:#fbfeff}
.bl-city b{font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--heading);line-height:1.2}
.bl-city span{color:var(--soft);font-size:.9rem;line-height:1.5}
.bl-city i{font-style:normal;font-weight:700;font-size:13px;color:var(--blue-d);margin-top:4px}

/* ── форма ─────────────────────────────────────────────────────────────── */
.bl-sec--join{background:var(--wash);border-top:1px solid var(--line);padding:72px 0}
.bl-join-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:48px;align-items:center}
.bl-join-pic{width:100%;border-radius:var(--r);object-fit:cover;aspect-ratio:3/4;
  border:6px solid var(--white)}
.bl-form{max-width:620px}
.bl-field{margin:0 0 18px;min-width:0}
.bl-field>label{display:block;font-weight:600;font-size:.9rem;color:var(--heading);margin:0 0 8px}
.bl-field input[type=text],.bl-field input[type=tel],.bl-field select,.bl-field textarea{
  width:100%;font:400 16px/1.5 var(--sans);color:var(--ink);background:var(--white);
  border:1px solid var(--line-2);border-radius:var(--r-s);padding:14px 16px;display:block}
.bl-field textarea{resize:vertical}
.bl-field input:focus,.bl-field select:focus,.bl-field textarea:focus{border-color:var(--blue-d);outline:none}
.bl-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.bl-check{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px;
  color:var(--ink);font-size:.92rem;line-height:1.55;cursor:pointer}
.bl-check input{margin:3px 0 0;accent-color:var(--deep);flex:none;width:17px;height:17px}
/* Ловушка для ботов: не display:none — часть спам-скриптов такие поля пропускает. */
.bl-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.bl-flash{border-radius:var(--r-s);padding:14px 18px;margin:0 0 20px;font-size:.95rem;font-weight:600}
.bl-flash--err{background:var(--err-bg);color:var(--err)}
.bl-done{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.bl-done p{color:var(--ink);font-size:1rem;line-height:1.65;max-width:60ch}
.bl-done .bl-note{margin-bottom:0}

/* ── подвал ────────────────────────────────────────────────────────────── */
.bl-foot{border-top:1px solid var(--line);padding:36px 0 48px;margin-top:0;background:var(--bg)}
.bl-foot p{margin:0 0 6px;color:var(--soft);font-size:.9rem}
.bl-foot-note{max-width:74ch}

/* ── адаптив ───────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .bl-grid--4{grid-template-columns:repeat(2,1fr)}
  .bl-grid--3{grid-template-columns:repeat(2,1fr)}
  .bl-procs{grid-template-columns:repeat(2,1fr)}
  .bl-steps{grid-template-columns:repeat(2,1fr)}
  .bl-steps li:nth-child(2n)::after{display:none}
  .bl-hero-grid{grid-template-columns:1fr;grid-template-areas:"txt" "pic" "facts";gap:28px}
  .bl-shots{min-height:340px;max-width:520px}
  .bl-split,.bl-join-grid,.bl-studio-grid{grid-template-columns:1fr;gap:32px}
  .bl-join-pic{display:none}
  .bl-cities{grid-template-columns:repeat(2,1fr)}
  .bl-band{grid-template-columns:1fr;gap:24px;padding:32px}
  .bl-band .bl-btn{justify-self:start}
}
@media (max-width:760px){
  body{font-size:16px}
  .bl-wrap{padding:0 20px}
  .bl-top-in{padding:14px 20px}
  .bl-brand{font-size:19px}
  .bl-brand span{display:block;margin:2px 0 0}
  .bl-sec,.bl-sec--tight{padding:48px 0}
  .bl-sec--join{padding:52px 0}
  .bl-hero{padding:36px 0 48px}
  .bl-grid--4,.bl-grid--3,.bl-steps,.bl-cities,.bl-procs{grid-template-columns:1fr}
  .bl-steps li::after{display:none!important}
  .bl-facts{grid-template-columns:1fr;gap:18px}
  .bl-row{grid-template-columns:1fr}
  .bl-gal{grid-template-columns:repeat(2,1fr);gap:10px}
  /* На узком экране стопка со сдвигом не читается — кладём кадры рядом. */
  .bl-shots{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:none}
  .bl-shot{position:static;width:100%;border-width:0;aspect-ratio:3/4}
  .bl-master{grid-template-columns:1fr;gap:18px;padding:20px}
  .bl-master-photo{height:260px}
  .bl-hero-cta .bl-btn{flex:1 1 100%}
  .bl-band{padding:26px 22px}
  .bl-band .bl-btn{width:100%}
}
@media (max-width:380px){
  .bl-navlink{padding:9px 14px;font-size:13px}
}