/* Вариант Б страницы 06 «Кафе и рестораны»: естественные картинки вместо схем. 16.10.2026.
   Ложится поверх m.css и k.css (вариант А их не меняет). Здесь: первый экран на фото, фото в карточках,
   «как ходит воздух» (kvb-) и «наружный блок» (kfb-) — слой потоков и отметок поверх фото, фото в блоке для дизайнеров.
   Слой SVG лежит на фото один в один: viewBox 1400×788, как у самой картинки. Толщина линий и пунктир заданы в экранных точках
   (non-scaling-stroke), подписи — обычные HTML-плашки, чтобы на телефоне буквы были не мельче 13 px. */

/* подпись «изображение для примера» — в углу каждого фото */
.ex{position:absolute;right:8px;bottom:8px;z-index:3;padding:3px 8px;border-radius:6px;background:rgba(6,23,71,.62);color:#fff;font:500 12px/1.3 'Montserrat',Arial,sans-serif;pointer-events:none}

/* --- Первый экран на фото: на телефоне полоса 16:9 над текстом, на широком экране — фон с тёмно-синим градиентом слева --- */
.hero-photo{position:relative;overflow:hidden}
.hb{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#07205F}
.hb picture,.hb img{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.hb img{object-fit:cover;object-position:72% 50%;transform-origin:62% 50%;animation:kb-zoom 20s ease-in-out infinite alternate}
@keyframes kb-zoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (min-width:700px) and (max-width:959px){.hb{aspect-ratio:21/9}}
@media (min-width:960px){
  .hb{position:absolute;left:0;top:0;right:0;bottom:0;aspect-ratio:auto;z-index:0}
  .hb::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:linear-gradient(90deg,rgba(7,32,95,.92) 0%,rgba(7,32,95,.86) 32%,rgba(7,32,95,.5) 56%,rgba(7,32,95,0) 78%)}
  .hb .ex{right:16px;bottom:8px}
  .hero-photo .hero-grid{position:relative;z-index:2}
}
/* Форма на первом экране большого экрана: состав и порядок вопросов те же, что в А, но кнопка «Вызвать инженера» остаётся в первом экране
   на 1280×800 (в А она ниже). Для этого форма шире (520 px), кнопки-выборы ниже (36 px), отступы меньше.
   Только для мыши: на сенсорных экранах размеры остаются крупными (44 px). */
@media (min-width:1200px) and (hover:hover) and (pointer:fine){
  .hero-photo .hero-grid{grid-template-columns:minmax(0,1fr) 520px}
  .hero-photo .form-card{padding:16px 24px 14px}
  .hero-photo .grp{margin-top:10px}
  .hero-photo .ask{font-size:15px}
  .hero-photo .pick{gap:6px;margin-top:6px}
  .hero-photo .pick button{min-height:36px;padding:4px 12px;font-size:14px}
  .hero-photo .form-card details.more{margin-top:10px}
  .hero-photo .form-card details.more summary{padding:9px 28px 9px 0}
  .hero-photo .form-card input[type=tel],.hero-photo .form-card input[type=text]{min-height:48px;height:48px}
}

/* --- Блок «Что делаем»: фото сверху карточки --- */
.kd-ph{position:relative;grid-column:1/-1;margin:-16px -18px 14px;aspect-ratio:16/9;overflow:hidden;border-radius:13px 13px 0 0;background:#DCE8F2}
.kd-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
@media (hover:hover){.kd-card:hover .kd-ph img{transform:scale(1.05)}}
@media (min-width:600px) and (max-width:959px){.kd-ph{aspect-ratio:21/9}}
@media (min-width:960px){.kd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- Общая «сцена»: фото и слой поверх него один в один --- */
@media (min-width:960px){
  .sc-grid.ph{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
  .sc-grid.ph.rev{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  .sc-grid.ph .live{max-width:780px}
}
.kvb-stage,.kfb-stage{position:relative;aspect-ratio:1400/788;overflow:hidden;background:#E8EEF3}
.kvb-stage picture,.kvb-stage img,.kfb-stage picture,.kfb-stage img{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.kvb-stage img,.kfb-stage img{object-fit:cover}
.live .kvb-svg,.live .kfb-svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.kvb-svg *,.kfb-svg *{pointer-events:none}
.kvb-svg .kv-hit,.kfb-svg .kfb-hit{pointer-events:all}
.kfb-svg .kfb-hitp{pointer-events:stroke}

/* --- Как ходит воздух (фото kafe_hero) --- */
.kvb-svg .kv-ceh-hot,.kvb-svg .kv-zal-hot{fill:url(#kvb-hot)}
.kvb-svg .kv-heat,.kvb-svg .kv-sup,.kvb-svg .kv-dr,.kvb-svg .kv-smoke{vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px rgba(255,255,255,.95));animation-name:kvb-flow}
.kvb-svg .kv-heat{stroke-width:3.5px;stroke-dasharray:6 8}
.kvb-svg .kv-heat.alt{stroke:#F08A00}
.kvb-svg .kv-smoke{stroke:#5A6478;stroke-width:5px;stroke-dasharray:1 11}
.kvb-svg .kv-dr{stroke:#0A8CC0;stroke-width:3.5px;stroke-dasharray:9 9;animation-duration:.9s}
.kvb-svg .kv-dr-bg{vector-effect:non-scaling-stroke;stroke-width:8px}
@keyframes kvb-flow{to{stroke-dashoffset:-14}}
.kvb-svg .kv-sdown path,.kvb-svg .kv-cool path{stroke:#0A8CC0;vector-effect:non-scaling-stroke;stroke-width:3.2px;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(255,255,255,.95));animation-name:kvb-down}
@keyframes kvb-down{0%{opacity:0;transform:translateY(-14px)}30%{opacity:1}100%{opacity:0;transform:translateY(34px)}}
.kvb-svg .kv-ah{filter:drop-shadow(0 0 2px rgba(255,255,255,.95))}
.kvb-tag{position:absolute;z-index:2;transform:translateX(-50%);padding:5px 10px;border-radius:7px;background:#061747;border:1px solid var(--blue-2);color:#fff;font:700 13px/1.2 'Montserrat',Arial,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s}
.kvb-tag.on{opacity:1}
.kvb-pills{display:flex;gap:8px;padding:12px 14px 0}
.kvb-pill{flex:1 1 0;min-width:0;text-align:center;padding:6px 8px;border-radius:999px;border:1.3px solid var(--ok);background:var(--ok-bg);color:var(--ok);font:700 13px/1.25 'Montserrat',Arial,sans-serif;transition:background .4s,border-color .4s,color .4s}
.kvb-pill .t-hot,.kvb-pill.is-hot .t-ok{display:none}
.kvb-pill.is-hot .t-hot{display:inline}
.kvb-pill.is-hot{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}

/* на телефоне фото мелкое — линии тоньше */
@media (max-width:759px){
  .kvb-svg .kv-dr{stroke-width:3px;stroke-dasharray:8 8}
  .kvb-svg .kv-dr-bg{stroke-width:6.5px}
  .kvb-svg .kv-heat{stroke-width:3px;stroke-dasharray:5 7}
  .kvb-svg .kv-smoke{stroke-width:4px}
  .kvb-svg .kv-sdown path,.kvb-svg .kv-cool path{stroke-width:2.8px}
  .kfb-flow{stroke-width:3.5px}
}

/* --- Куда поставить наружный блок (фото kafe_dvor) --- */
.kfb-stage img{transition:filter .4s}
.kfb-stage.sel-ulica img,.kfb-stage.sel-krovlya img{filter:grayscale(.55) brightness(.72)}
.kfb-svg .kfb-hit{fill:transparent;cursor:pointer}
.kfb-svg .kfb-hitp{fill:none;stroke:transparent;stroke-width:46px;vector-effect:non-scaling-stroke;stroke-linecap:round;cursor:pointer}
.kfb-g{opacity:.62;transition:opacity .3s}
.kfb-stage.sel-dvor .kfb-dvor,.kfb-stage.sel-vozduh .kfb-vozduh,.kfb-stage.sel-ulica .kfb-ulica,.kfb-stage.sel-krovlya .kfb-krovlya,.kfb-g.hov{opacity:1}
.kfb-stage.sel-ulica .kfb-dvor,.kfb-stage.sel-ulica .kfb-vozduh,.kfb-stage.sel-krovlya .kfb-dvor,.kfb-stage.sel-krovlya .kfb-vozduh{opacity:.3}
.kfb-ring{fill:rgba(61,184,230,.18);stroke:var(--blue-2);stroke-width:3px;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s}
.kfb-stage.sel-dvor .kfb-ring{opacity:1}
.kfb-g.hov .kfb-ring{opacity:.6}
.kfb-dot{fill:var(--blue-2);stroke:#fff;stroke-width:3px;vector-effect:non-scaling-stroke}
.kfb-wave{fill:none;stroke:var(--blue-2);stroke-width:3px;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 50%;animation:kfb-wave 2s ease-out infinite}
.kfb-dot.o{fill:#E8590C}
.kfb-wave.o{stroke:#E8590C}
.kfb-wave.d2{animation-delay:1s}
@keyframes kfb-wave{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.kfb-glow{fill:none;stroke:var(--blue-2);stroke-width:22px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s}
.kfb-stage.sel-vozduh .kfb-glow{opacity:.4}
.kfb-g.hov .kfb-glow{opacity:.3}
.kfb-flow{fill:none;stroke:#E8590C;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:8 10;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px rgba(255,255,255,.95));animation:kfb-flow 1.1s linear infinite}
@keyframes kfb-flow{to{stroke-dashoffset:-18}}
.kfb-ah{fill:#E8590C;filter:drop-shadow(0 0 2px rgba(255,255,255,.95))}
.kfb-badge{opacity:0;transition:opacity .35s}
.kfb-stage.sel-ulica .kfb-ulica .kfb-badge,.kfb-stage.sel-krovlya .kfb-krovlya .kfb-badge{opacity:1}
.kfb-g.hov .kfb-badge{opacity:.55}
.kfb-bad .b-bg{fill:rgba(255,255,255,.92);stroke:var(--bad);stroke-width:20px}
.kfb-bad .b-sl{fill:none;stroke:var(--bad);stroke-width:20px;stroke-linecap:round}
.kfb-ok .b-bg{fill:var(--ok);stroke:#fff;stroke-width:8px}
.kfb-ok .b-ck{fill:none;stroke:#fff;stroke-width:20px;stroke-linecap:round;stroke-linejoin:round}
.kfb-ok .b-ah-w{fill:none;stroke:#fff;stroke-width:34px;stroke-linecap:round;stroke-linejoin:round}
.kfb-ok .b-ah{fill:none;stroke:var(--ok);stroke-width:20px;stroke-linecap:round;stroke-linejoin:round}
.kf-off .kfb-flow,.kf-off .kfb-wave{animation-play-state:paused}

/* --- Блок «Дизайнеру, технологу и прорабу»: фото рядом со списком --- */
.pro-photo{position:relative;margin:0;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#DCE8F2}
.pro-photo img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:75% 50%}
@media (min-width:960px){
  .pro-grid.pro-ph{grid-template-columns:1fr 1fr;grid-template-areas:"text photo" "card photo";gap:28px 48px;align-items:start}
  .pro-ph .pro-text{grid-area:text}
  .pro-ph .pro-card{grid-area:card}
  .pro-ph .pro-photo{grid-area:photo;aspect-ratio:auto;align-self:stretch;min-height:320px}
}

@media (prefers-reduced-motion:reduce){
  .hb img{animation:none}
  .kd-ph img,.kfb-stage img{transition:none}
  .kvb-svg .kv-heat,.kvb-svg .kv-sup,.kvb-svg .kv-dr,.kvb-svg .kv-smoke,.kfb-flow{animation:none}
  .kvb-svg .kv-sdown path,.kvb-svg .kv-cool path{animation:none;opacity:.85}
  .kfb-wave{animation:none;opacity:0}
  .kvb-tag,.kfb-g,.kfb-ring,.kfb-glow,.kfb-badge,.kvb-pill{transition:none}
}