/* Общее для сайтов бодег: демо-полоса, язык, подписи фото, контакты, карта, подвал.
   Палитру и шрифты задаёт шаблон (familia.css / premium.css / turismo.css) через токены. */
:root {
  --strip-bg: #1c1a17; --strip-fg: #e9e4da; --strip-dim: #9d958a;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.bs { margin: 0; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.ic { width: 1.15em; height: 1.15em; flex: none; }

/* демо-полоса Surco Labs */
.bs-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 6px 16px; background: var(--strip-bg); color: var(--strip-fg);
  font: 500 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em;
}
.bs-strip a { color: var(--strip-fg); text-decoration: none; }
.bs-strip-back { opacity: .85; } .bs-strip-back:hover { opacity: 1; }
.bs-strip-demo { color: var(--strip-dim); }
.bs-strip-tpl { display: flex; gap: 4px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.bs-strip-label { color: var(--strip-dim); margin-right: 2px; }
.bs-strip-tpl a { padding: 2px 8px; border-radius: 99px; border: 1px solid transparent; }
.bs-strip-tpl a.on { border-color: #6d665c; background: #2c2925; }
.bs-strip-tpl a i { font-style: normal; color: #d9b36c; margin-left: 3px; font-size: 10px; }
.bs-lang { display: flex; gap: 2px; }
.bs-lang a { padding: 2px 6px; border-radius: 4px; color: var(--strip-dim); text-decoration: none; }
.bs-lang a.on { color: var(--strip-fg); background: #34302b; }
@media (max-width: 720px) {
  /* телефон: первая строка «← · демо · язык», вторая — варианты шаблонов лентой с прокруткой */
  .bs-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; font-size: 11px; padding: 6px 12px; }
  .bs-strip-back { grid-row: 1; grid-column: 1; } .bs-strip-back span { display: none; }
  .bs-strip-demo { grid-row: 1; grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bs-lang { grid-row: 1; grid-column: 3; }
  .bs-strip-tpl { grid-row: 2; grid-column: 1 / -1; margin: 0 -12px; padding: 0 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bs-strip-tpl::-webkit-scrollbar { display: none; }
  .bs-strip-tpl a { white-space: nowrap; }
  .bs-strip-label { display: none; }
}

/* фото: пометка «фото региона» */
.bs-photo { position: relative; margin: 0; overflow: hidden; }
.bs-photo img { width: 100%; height: 100%; object-fit: cover; }
.bs-photo-tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  padding: 3px 8px; border-radius: 4px; background: rgba(20, 18, 15, .55); color: #f3efe7;
  font: 500 10.5px/1.3 system-ui, -apple-system, sans-serif; letter-spacing: .02em;
  backdrop-filter: blur(3px); max-width: calc(100% - 20px);
}

/* контакты */
.bs-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.bs-contacts li { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.bs-contacts li > .ic { margin-top: 3px; color: var(--accent); width: 20px; height: 20px; }
.bs-contacts li > span { min-width: 0; overflow-wrap: anywhere; }
.bs-contacts small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
.bs-contacts a { text-decoration: none; border-bottom: 1px solid currentColor; border-bottom-color: color-mix(in srgb, currentColor 30%, transparent); }
.bs-contacts a:hover { border-bottom-color: currentColor; }
.bs-muted { opacity: .65; }
.bs-socials { display: flex; gap: 10px; }
.bs-socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.bs-socials a:hover { border-color: currentColor; }

/* карта */
.bs-map { width: 100%; min-height: 320px; border-radius: inherit; z-index: 0; background: #ddd8cf; }
.leaflet-container { font: inherit; }

/* подвал */
.bs-foot-fine { padding: 18px 16px 26px; font: 12px/1.5 system-ui, -apple-system, sans-serif; opacity: .7; text-align: center; }
.bs-foot-fine p { margin: 4px auto; max-width: 900px; }
.bs-foot-fine a { text-decoration: underline; text-underline-offset: 2px; }
.bs-credits { font-size: 11px; }

/* сайт ещё не собран */
.bs-empty { background: #f4efe6; color: #2b241e; font: 16px/1.6 system-ui, -apple-system, sans-serif; }
.bs-notready { max-width: 560px; margin: 18vh auto; padding: 0 20px; text-align: center; }
.bs-notready h1 { font: 600 28px/1.2 Georgia, serif; }
.bs-empty .bs-lang { justify-content: center; }
.bs-empty .bs-lang a { color: #7a7066; } .bs-empty .bs-lang a.on { color: #2b241e; background: #e4dccf; }

/* галерея: 4 колонки, раскладка по числу фото (см. P.gallery) */
.bs-gal { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: var(--gal-row, 240px); gap: var(--gal-gap, 12px); }
.bs-gal .bs-photo { border-radius: var(--gal-radius, 0); }
.bs-gal .w1 { grid-column: span 1; } .bs-gal .w2 { grid-column: span 2; } .bs-gal .w4 { grid-column: span 4; }
.bs-gal .h2 { grid-row: span 2; }
@media (max-width: 700px) {
  .bs-gal { grid-template-columns: 1fr 1fr; grid-auto-rows: var(--gal-row-m, 180px); }
  .bs-gal .w2, .bs-gal .w4 { grid-column: span 2; }
  .bs-gal .h2 { grid-row: span 1; }
  .bs-gal .bs-photo:first-child { grid-row: span 2; }
}

/* появление при прокрутке: .rv — блок, .rv-d1..3 — задержка в каскаде.
   Нативно: scroll-driven animation (view()); иначе sites.js ставит .in через IntersectionObserver.
   Без JS и при prefers-reduced-motion всё видно сразу. */
@keyframes bs-rv { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
html.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv-d1.in { transition-delay: .12s; } html.js .rv-d2.in { transition-delay: .24s; } html.js .rv-d3.in { transition-delay: .36s; }
@supports (animation-timeline: view()) {
  html.js .rv { opacity: 1; transform: none; transition: none; animation: bs-rv linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  html.js .rv-d1 { animation-range: entry 8% entry 53%; } html.js .rv-d2 { animation-range: entry 16% entry 61%; } html.js .rv-d3 { animation-range: entry 24% entry 69%; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .rv, html.js .rv.in { opacity: 1; transform: none; animation: none; transition: none; }
  html { scroll-behavior: auto; }
}