/* helpers.css — SHARED shell CSS for the tool pages
   (floorplan / facade / photographer / design / design-concrete).
   Built 2026-06-25. Only render-equivalent shared CSS lives here (verified pixel-diff=0).

   CASCADE ORDER MATTERS — sections are arranged base→override on purpose:
     SECTION 1  reset + design tokens (:root)        — lowest, sets vars
     SECTION 2  shell base (header/nav/wrap/hero/footer) — non-!important base rules
     SECTION 3  green Notis theme (ex <style id="fxNotis">) — !important overrides, MUST come AFTER §2
     SECTION 4  section-nav arrows (ex inline <style>)  — component
   This file is linked at the position the old fxNotis <style> occupied
   (after the Sora-font link, before the Urbanist-font link), so source order is preserved.
   Page-specific CSS (e.g. .<page>-hero{padding}) stays INLINE on each page, AFTER this link.
   nginx must serve /assets/. Bump ?v= on every edit. */

/* ===== SECTION 1: reset + design tokens (:root) ===== */
/* Design tokens (:root) stay INLINE on each page on purpose: photographer uses --bg*
   names while the other 4 use --dark*, so a single shared :root is NOT byte-identical
   (token rationalization is a separate, un-approved step). The shell rules below read
   only --neon/--r-pill/--hair-strong/--shadow-soft, which ARE identical on all 5 and
   resolve by computed value regardless of stylesheet order, so no token move is needed. */

/* ===== SECTION 2: shell base — header / .nav / .brand / .nav-cta / .wrap (BYTE-IDENTICAL on all 5) ===== */
/* Step-2 note: HERO (.photo-hero/.hero-title/.hero-eyebrow/.hero-subtitle/.tag) and FOOTER
   (.page-footer/.footer-links) were evaluated for extraction and INTENTIONALLY LEFT INLINE.
   Reason: photographer.html genuinely diverges (light theme uses --bg* tokens, different
   .tag padding/colors, no .photo-hero::before, footer background:#fff). Only `.hero-tags{}` is
   byte-identical on all 5 — too little to justify the cascade risk. Since helpers.css is linked
   on ALL 5 and loads AFTER each page's inline block1, putting hero/footer here would override
   photographer's distinct version (equal specificity, non-!important) and change its render.
   Consistency of behavior > dedup. Re-evaluate if photographer is later re-themed to match. */
header{position:sticky;top:0;z-index:50;padding:14px 0}
.wrap{max-width:1240px;margin:0 auto;padding:0 26px}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:11px 14px 11px 20px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--hair-strong);box-shadow:var(--shadow-soft);
}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:.04em;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45);text-decoration:none}
.brand>span{display:inline-flex;flex-direction:column;line-height:1.05;justify-content:center}
.brand small{font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78);display:block!important;margin-top:3px}
.brand-logo{height:38px;width:auto;display:block;border-radius:10px;box-shadow:0 6px 18px -7px rgba(0,0,0,.4)}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  padding:11px 22px;border-radius:var(--r-pill);color:#062a18;text-decoration:none;
  background:linear-gradient(135deg,var(--neon),#5DEFAA);
  box-shadow:0 10px 24px -8px rgba(39,224,139,.6);transition:transform .25s, box-shadow .25s;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(39,224,139,.7)}

/* ===== SECTION 3: green Notis theme override (ex <style id="fxNotis">) — !important, AFTER §2 ===== */
:root{ --fxbg:#EDEFE4; --fxink:#16201A; --fxdim:#5A6258; --fxem:#27E08B; --fxgreen:#138A53; --fxgold:#9C7B2E; }
body{ background:#EDEFE4!important; color:var(--fxink)!important; font-family:'Urbanist',-apple-system,'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif!important; }
body::before{ content:''; position:fixed; inset:0; z-index:-3; background:url('/assets/grass/grass-hero.jpg') center/cover no-repeat; filter:saturate(1.1); }
body::after{ content:''; position:fixed; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(8,20,10,.30) 0,rgba(8,20,10,.08) 36vh,rgba(237,239,228,.74) 62vh,rgba(237,239,228,.9) 100%); }
section,.photo-hero,.examples-section,.advantages-section,.how-section,.why-section,.season-section,.steps-section{ background:transparent!important; }
h1,h2,h3,h4{ color:var(--fxink)!important; font-family:'Urbanist',sans-serif!important; font-weight:700!important; letter-spacing:-.02em; }
p,.section-header p{ color:var(--fxdim)!important; }
/* HERO + собственный скрим (читаемость белого текста на любой траве, вкл. мобайл) */
.photo-hero{ position:relative!important; }
.photo-hero::before{ content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(6,16,8,.55),rgba(6,16,8,.14)); pointer-events:none; }
.photo-hero > *{ position:relative; z-index:1; }
.hero-title{ color:#fff!important; font-family:'Urbanist',sans-serif!important; text-shadow:0 2px 30px rgba(0,0,0,.6); }
.hero-eyebrow{ color:#BFF4DC!important; text-shadow:0 1px 12px rgba(0,0,0,.5); }
.hero-subtitle{ color:#fff!important; text-shadow:0 1px 18px rgba(0,0,0,.6); }
.photo-hero .gold,.gold{ background:none!important; -webkit-text-fill-color:#CFFBE6!important; color:#CFFBE6!important; }
.hero-tags .tag{ background:rgba(255,255,255,.18)!important; border:1px solid rgba(255,255,255,.4)!important; color:#fff!important; }
/* карточки — светлое стекло */
.advantage-card,.ba-card,.step,.example-card,.why-card,.feature-card,.season-card,.infg-card{ background:rgba(255,255,255,.82)!important; border:1px solid rgba(255,255,255,.66)!important; color:var(--fxink)!important; box-shadow:0 22px 55px rgba(20,40,18,.13)!important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.advantage-card *,.ba-card *,.step *,.why-card *,.infg-card *{ color:var(--fxink)!important; }
.advantage-card p,.step p,.why-card p,.infg-lbl,.ba-card p{ color:var(--fxdim)!important; }
.tag{ background:rgba(31,174,107,.10)!important; border:1px solid rgba(31,174,107,.32)!important; color:var(--fxgreen)!important; }
.cta-btn.cta-primary,.photo-cta-btn{ background:linear-gradient(180deg,#5DEFAA,#27E08B 55%,#12B26C)!important; color:#04120A!important; border:none!important; box-shadow:0 16px 36px -10px rgba(39,224,139,.5)!important; }
.cta-btn.cta-secondary{ background:rgba(255,255,255,.74)!important; color:var(--fxink)!important; border:1px solid rgba(20,40,18,.16)!important; }
.fx-safe{ background:rgba(255,255,255,.72)!important; border:1px solid rgba(31,174,107,.3)!important; color:var(--fxink)!important; }
.fx-safe b{ color:var(--fxgreen)!important; }
.ba-card-header{ background:rgba(255,255,255,.66)!important; border-bottom:1px solid rgba(20,40,18,.08)!important; }
.ba-card-title{ color:var(--fxink)!important; }
.ba-card-badge{ display:inline-flex!important; align-items:center!important; gap:5px!important; flex:0 0 auto!important; align-self:center!important; white-space:nowrap!important; padding:6px 13px!important; border-radius:999px!important; font-size:12px!important; font-weight:700!important; line-height:1!important; background:linear-gradient(135deg,#27E08B,#16A862)!important; color:#06351F!important; -webkit-text-fill-color:#06351F!important; border:none!important; box-shadow:0 6px 16px -6px rgba(22,168,98,.5), inset 0 1px 0 rgba(255,255,255,.3)!important; }
.ba-card{ border-radius:18px!important; border:1px solid rgba(255,255,255,.66)!important; box-shadow:0 22px 55px rgba(20,40,18,.13)!important; }
.examples-section{ display:flex!important; flex-wrap:wrap!important; justify-content:center!important; align-items:flex-start!important; gap:28px!important; max-width:1240px!important; margin-left:auto!important; margin-right:auto!important; }
.examples-section > .section-header{ flex:1 1 100%!important; width:100%!important; margin-bottom:10px!important; }
.examples-grid{ display:contents!important; }
.ba-card{ width:380px!important; max-width:380px!important; min-width:380px!important; flex:0 0 380px!important; margin:0!important; }
@media(max-width:440px){ .ba-card{ width:100%!important; max-width:100%!important; min-width:0!important; flex:1 1 100%!important; } }
.example-card,.season-card{ background:rgba(255,255,255,.82)!important; }
.ba-slider{ aspect-ratio:4/3!important; }
/* ── ИНФОГРАФИКА: вернул LAYOUT (потерян при смене темы) + цвета ── */
.infg{ max-width:1140px!important; margin:0 auto!important; padding:clamp(40px,6vw,82px) clamp(20px,4vw,42px)!important; }
.infg-eyebrow{ display:inline-flex!important; align-items:center; gap:9px; color:var(--fxgreen)!important; font-size:13px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; }
.infg-eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background:#27E08B!important; box-shadow:0 0 12px #27E08B!important; }
.infg-grid{ display:grid!important; grid-template-columns:repeat(3,1fr)!important; gap:18px!important; margin-top:28px!important; }
.infg-card{ padding:clamp(26px,3vw,38px) 24px!important; text-align:center!important; border-radius:22px!important; }
.infg-ic{ font-size:30px!important; line-height:1; }
.infg-num{ font-weight:800!important; font-size:clamp(32px,4.4vw,54px)!important; line-height:1!important; margin:12px 0 8px!important; background:linear-gradient(180deg,#16201A,#1FAE6B)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; }
.infg-lbl{ color:var(--fxdim)!important; font-size:15px!important; line-height:1.45; }
@media(max-width:760px){ .infg-grid{ grid-template-columns:1fr!important; } }
/* навигация/футер */
/* ШАПКА — мобайл (1-в-1 с главной): подпись бренда прячем, пилюля компактнее */
@media(max-width:680px){
  .wrap{padding:0 16px}
  header .nav .brand small{display:none!important}
  .nav{padding:10px 12px 10px 14px;gap:10px}
  .brand{font-size:18px;gap:9px}
  .brand-logo{height:32px!important}
  .nav-cta{padding:11px 18px;font-size:14px;white-space:nowrap}
}
.page-footer{ background:rgba(255,255,255,.72)!important; color:var(--fxink)!important; border-top:1px solid rgba(255,255,255,.5)!important; }
.page-footer *{ color:var(--fxink)!important; }
#cookieBanner{ background:rgba(255,255,255,.95)!important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 -2px 24px rgba(20,40,18,.14)!important; color:#16201A!important; border-top:1px solid rgba(20,40,18,.10)!important; }
#cookieBanner span,#cookieBanner p,#cookieBanner div,#cookieBanner small{ color:#2A2F2A!important; }
#cookieBanner a{ color:#138A53!important; } body.cookie-open #sectionNav{bottom:104px!important;z-index:100000!important} @media(max-width:768px){body.cookie-open #sectionNav{bottom:230px!important}}
/* ── MOBILE TEXT-ALIGN FIX (только мобайл, десктоп не трогаем) ── */
@media(max-width:680px){
  /* лейбл инфографики «Что это даёт вам» — по центру над карточками */
  .infg-eyebrow{ display:flex!important; justify-content:center!important; text-align:center!important; width:100%!important; }
  .infg{ text-align:center!important; }
  /* hero: подзаголовок/надзаголовок/пилюли строго по центру */
  .photo-hero{ text-align:center!important; }
  .hero-eyebrow,.hero-subtitle{ text-align:center!important; }
  /* заголовки секций + подписи под числами по центру */
  .section-header,.section-header h2,.section-header p{ text-align:center!important; }
  .infg-num,.infg-lbl{ text-align:center!important; }
  /* ПИЛЮЛИ hero — компактные чипы по центру (было: 4 из 5 растягивались во всю ширину через .tag{width:80%}) */
  .hero-tags{ display:flex!important; flex-direction:row!important; flex-wrap:wrap!important; justify-content:center!important; align-items:center!important; gap:8px!important; row-gap:8px!important; }
  .hero-tags .tag{ width:auto!important; max-width:100%!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; white-space:nowrap!important; text-align:center!important; padding:7px 14px!important; }
  /* cookie-кнопки — тач-таргет ≥44px (было ~36–38px) */
  #cookieBanner button{ min-height:44px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; }

  /* === H2 — section-nav компактнее на мобайле (не налезать на картинки карточек) === */
  #sectionNav.section-nav, .section-nav{ right:6px!important; gap:5px!important; }
  .section-nav-btn{ width:40px!important; height:40px!important; font-size:15px!important; opacity:.55; }
  .section-nav:hover .section-nav-btn, .section-nav-btn:active, .section-nav-btn:focus{ opacity:1; }
  .section-nav-label{ max-width:52px!important; font-size:7.5px!important; opacity:.62; }

  /* === M3 — тап-таргет ссылок футера ≥44px === */
  .footer-links{ gap:8px 18px!important; row-gap:2px!important; }
  .footer-links a, .page-footer .footer-links a{ display:inline-flex!important; align-items:center!important; min-height:44px!important; padding:4px 2px!important; }

  /* === M2 — cookie-баннер компактнее на мобайле (было ~23% экрана) === */
  #cookieBanner{ padding:11px 16px!important; }
  #cookieBanner > div{ gap:8px!important; }
  #cookieBanner p{ font-size:12px!important; line-height:1.35!important; min-width:0!important; flex:1 1 100%!important; }
  #cookieBanner button{ min-height:42px!important; padding:8px 18px!important; font-size:13px!important; flex:1 1 0!important; }
}

/* ===== SECTION 4: section-nav arrows (ex inline <style> near .section-nav div) ===== */
.section-nav {
  position: fixed;
  right: 14px;
  bottom: 24px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.section-nav.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.section-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(31,174,107,0.30);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #138A53;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(39,224,139,0.18), 0 1px 4px rgba(0,0,0,0.06);
}
.section-nav-btn:hover {
  background: rgba(39,224,139,0.14);
  border-color: #27E08B;
  box-shadow: 0 6px 20px rgba(39,224,139,0.28);
}
.section-nav-btn:active {
  transform: scale(0.9);
  background: rgba(39,224,139,0.20);
}
.section-nav-btn.disabled {
  opacity: 0.22;
  pointer-events: none;
  box-shadow: none;
}
.section-nav-label {
  font-size: 8px;
  color: #5A6258;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
  max-width: 60px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 2px 4px;
  background: rgba(255,255,255,0.7);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 769px) {
  .section-nav { bottom: 40px; right: 28px; gap: 8px; }
  .section-nav-btn { width: 46px; height: 46px; font-size: 17px; }
  .section-nav-label { font-size: 9px; max-width: 70px; }
}

/* ===== SECTION 5: before/after slider (etalon = floorplan/facade/design) — OPT-IN via [data-ba] ===== */
/* Scoped to .ba-slider[data-ba] so it does NOT touch photographer/design-concrete (their
   .ba-slider lacks data-ba and keeps its own inline CSS+JS — visually distinct sliders).
   Behavior driven by initBeforeAfter() in helpers.js (same opt-in marker). Tokens --gold/--dark
   read from each page's inline :root (identical on these 3). The unscoped §3 theme rule
   .ba-slider{aspect-ratio:4/3!important} still applies on top (unchanged). */
.ba-slider[data-ba] {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}
.ba-slider[data-ba] img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-slider[data-ba] .ba-after {
  clip-path: inset(0 0 0 0);
  z-index: 2;
}
.ba-slider[data-ba] .ba-before {
  z-index: 1;
}
.ba-slider[data-ba] .ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gold);
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 20px rgba(201,168,76,0.5);
}
.ba-slider[data-ba] .ba-handle::before,
.ba-slider[data-ba] .ba-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: var(--dark);
  transform: translateY(-50%);
}
.ba-slider[data-ba] .ba-handle::before {
  left: -18px;
}
.ba-slider[data-ba] .ba-handle::after {
  right: -18px;
}
.ba-slider[data-ba] .ba-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
  box-shadow: 0 4px 20px rgba(201,168,76,0.5);
}
.ba-slider[data-ba] .ba-circle svg {
  width: 24px;
  height: 24px;
  fill: var(--dark);
}

.ba-slider[data-ba] .ba-label {
  position: absolute;
  bottom: 16px;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 5;
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.ba-slider[data-ba] .ba-label-before {
  left: 16px;
  background: rgba(239,68,68,0.75);
  color: #fff;
}
.ba-slider[data-ba] .ba-label-after {
  right: 16px;
  background: rgba(16,185,129,0.75);
  color: #fff;
}