/* okno-b1-hero.css — B1 hub hero styles (v=20260726visualb4).
   Mode A: ONE integrated <picture> at the hero (media above the untouched HTML H1/text, one system).
   Mode B: legacy Tilda cover carrier media replaced in situ via CSS image-set (decorative background,
           AVIF->WebP->JPEG + mobile crop), preserving the existing scrim/height/text.
   Mode C: integrated legacy TEXT hero — the approved <picture> and the existing Tilda text record share
           ONE wrapper (.okno-b1-chero). Legacy oversized padding / artboard height collapsed so the media
           meets the H1 with no blank gap. Split on wide desktop, stacked on narrow/mobile.
   No baked text. No shell/typography/card-token change. */

/* ---------- Mode A: integrated hero media ---------- */
.okno-b1-hero{width:100%;margin:0 0 18px;background:#eef1f7;line-height:0;border-radius:14px;overflow:hidden}
.okno-b1-hero[data-world="tilda-text"]{border-radius:0;margin:0}
.okno-b1-hero__pic{display:block;width:100%}
.okno-b1-hero__img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;
  aspect-ratio:16/9;object-position:var(--b1-focal,50% 50%)}
.okno-b1-hero[data-safe="left"] .okno-b1-hero__img{object-position:30% 50%}
@media(max-width:640px){
  .okno-b1-hero__img{aspect-ratio:4/5;max-height:none;object-position:var(--b1-focal-m,50% 60%)}
  .okno-b1-hero[data-ratio-m="16-10"] .okno-b1-hero__img{aspect-ratio:16/10}
  .okno-b1-hero{margin-bottom:14px}
}

/* ---------- Mode B: legacy cover carrier replacement (decorative background media) ----------
   The legacy hero was already a decorative CSS background (the H1 carries the accessible context); we keep
   those semantics and only swap the source, adding responsive format negotiation + a mobile crop. !important
   overrides Tilda's JS-set inline background-image. background-size/position keep the existing cover geometry. */
.okno-b1-carrier{background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important}
.okno-b1-carrier--REA{background-image:image-set(
  url("/assets/okno-b1/B1-REA-01-real-estate-exterior-hero-desktop.avif?v=20260726visualb4") type("image/avif"),
  url("/assets/okno-b1/B1-REA-01-real-estate-exterior-hero-desktop.webp?v=20260726visualb4") type("image/webp"),
  url("/assets/okno-b1/B1-REA-01-real-estate-exterior-hero-desktop.jpg?v=20260726visualb4") type("image/jpeg"))!important}
.okno-b1-carrier--BIZ{background-image:image-set(
  url("/assets/okno-b1/B1-BIZ-01-business-contemporary-hero-desktop.avif?v=20260726visualb4") type("image/avif"),
  url("/assets/okno-b1/B1-BIZ-01-business-contemporary-hero-desktop.webp?v=20260726visualb4") type("image/webp"),
  url("/assets/okno-b1/B1-BIZ-01-business-contemporary-hero-desktop.jpg?v=20260726visualb4") type("image/jpeg"))!important}
@media(max-width:640px){
  .okno-b1-carrier--REA{background-image:image-set(
    url("/assets/okno-b1/B1-REA-01-real-estate-exterior-hero-mobile.avif?v=20260726visualb4") type("image/avif"),
    url("/assets/okno-b1/B1-REA-01-real-estate-exterior-hero-mobile.webp?v=20260726visualb4") type("image/webp"),
    url("/assets/okno-b1/B1-REA-01-real-estate-exterior-hero-mobile.jpg?v=20260726visualb4") type("image/jpeg"))!important}
  .okno-b1-carrier--BIZ{background-image:image-set(
    url("/assets/okno-b1/B1-BIZ-01-business-contemporary-hero-mobile.avif?v=20260726visualb4") type("image/avif"),
    url("/assets/okno-b1/B1-BIZ-01-business-contemporary-hero-mobile.webp?v=20260726visualb4") type("image/webp"),
    url("/assets/okno-b1/B1-BIZ-01-business-contemporary-hero-mobile.jpg?v=20260726visualb4") type("image/jpeg"))!important}
}

/* ---------- Mode C: integrated legacy text hero (media + existing Tilda text record, ONE wrapper) ----------
   The <picture> media region and the untouched legacy text record live inside .okno-b1-chero as ONE hero.
   Controlled stacked composition: media band sits directly on top of the legacy record with the record's
   oversized vertical padding / fixed artboard height collapsed, so the media meets the H1 with no blank
   spacer and no standalone band. The record keeps its full natural width (Tilda's internal fixed-width
   containers must not be constrained into a narrow column), which keeps the historical layout intact. */
.okno-b1-chero{position:relative;width:100%;overflow:hidden}
.okno-b1-chero__media{position:relative;line-height:0;overflow:hidden}
.okno-b1-chero__media .okno-b1-hero__pic{display:block;width:100%}
.okno-b1-chero__media .okno-b1-hero__img{display:block;width:100%;height:auto;object-fit:cover;
  aspect-ratio:16/9;max-height:340px;object-position:var(--b1-focal,50% 42%)}
/* collapse the legacy record's oversized vertical rhythm so the media meets the H1 (no big blank gap) */
.okno-b1-chero > [id^="rec"]{padding-top:0!important;padding-bottom:0!important;margin:0!important}
/* T396 dark artboard (RSD-uk): the title/divider are a zero-block pinned for the original 800px artboard
   (rule top:212px, H1 top:260px). Shrink the panel and lift the pinned block up uniformly so the dark
   title sits directly under the media — no large dark spacer. Layout box is reserved (no CLS/overflow). */
.okno-b1-chero .t396__artboard,.okno-b1-chero .t396__filter,.okno-b1-chero .t396__carrier{height:auto!important;min-height:300px!important}
/* Desktop only: repin the zero-block (title top:260px, divider top:212px) near the artboard top so the dark
   title sits just under the media — no large dark spacer. `top` is inline-only (no !important) so a stylesheet
   !important wins reliably (Tilda pins the title's transform inline-!important, so top — not transform — is
   the safe lever). On mobile Tilda scales the zero-block via that transform, so it must stay untouched. */
@media(min-width:641px){
  .okno-b1-chero .t396__elem:has(h1){top:96px!important}
  .okno-b1-chero .t396__elem:not(:has(h1)){top:48px!important}
}
/* T1196 (Legal): give the collapsed title record restrained breathing room */
.okno-b1-chero .t1196{padding-top:44px!important;padding-bottom:44px!important}
/* remove the redundant animated scroll-hint inside the legacy hero */
.okno-b1-chero .t1196__scroll-icon-wrapper{display:none!important}
@media(max-width:640px){
  .okno-b1-chero__media .okno-b1-hero__img{aspect-ratio:4/5;max-height:280px;object-position:var(--b1-focal-m,50% 45%)}
  .okno-b1-chero[data-ratio-m="16-10"] .okno-b1-hero__img{aspect-ratio:16/10}
  .okno-b1-chero .t1196{padding-top:28px!important;padding-bottom:28px!important}
  /* RSD-uk ONLY (T396 dark zero-block): tighten the media→divider→H1 rhythm. Tilda repins the block to
     top:180/150 on mobile with transform:none, leaving a large dark gap; repin near the panel top and size
     the dark panel to fully contain the title so no red line is clipped by the wrapper's overflow. */
  .okno-b1-chero[data-family="B1-RSD-01"] .t396__artboard,
  .okno-b1-chero[data-family="B1-RSD-01"] .t396__filter,
  .okno-b1-chero[data-family="B1-RSD-01"] .t396__carrier{min-height:360px!important}
  .okno-b1-chero[data-family="B1-RSD-01"] .t396__elem:has(h1){top:72px!important}
  .okno-b1-chero[data-family="B1-RSD-01"] .t396__elem:not(:has(h1)){top:40px!important}
}
@media(max-width:360px){
  /* narrower viewport → title wraps to more lines; grow the dark panel so it is never clipped */
  .okno-b1-chero[data-family="B1-RSD-01"] .t396__artboard,
  .okno-b1-chero[data-family="B1-RSD-01"] .t396__filter,
  .okno-b1-chero[data-family="B1-RSD-01"] .t396__carrier{min-height:450px!important}
}

/* ---------- Legal in-page category nav (Tilda T607): de-overlay + preserve ----------
   The legacy T607 was a FIXED vertical dot rail pinned to the viewport right edge, floating over the hero
   boundary (the R3 "stray dots"). Instead of hiding it (which would drop 7 in-page section links that are
   NOT duplicated by the global shell), de-overlay it into a static, non-overlapping, keyboard-accessible
   chip row in normal flow (it sits under the "Выберите категорию услуг" cards — its intended home). These
   rules match ONLY pages that contain a record-type 607 (= the two Legal pages) and the sheet is loaded
   ONLY on the 14 B1 pages, so they are effectively page-scoped. Mobile keeps Tilda's own hidden state. */
[data-record-type="607"] .t607{position:static!important;transform:none!important;margin:0 auto!important;max-width:1000px}
[data-record-type="607"] .t607__list{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px 14px;padding:4px 20px 24px;margin:0;list-style:none}
[data-record-type="607"] .t607__list_item{padding:0!important}
[data-record-type="607"] .t607__dot{display:none!important}
[data-record-type="607"] .t607 a.t-menu__link-item{display:inline-block!important;text-decoration:none}
[data-record-type="607"] .t607__tooltip{position:static!important;opacity:1!important;visibility:visible!important;
  right:auto!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none!important;
  white-space:normal!important;font-size:14px!important;line-height:1.3!important;color:#222!important;
  background:#f4f5f7!important;border-radius:999px!important;padding:8px 16px!important;box-shadow:none!important;display:inline-block!important}
[data-record-type="607"] .t607__tooltip::after{display:none!important}
[data-record-type="607"] .t607 a:hover .t607__tooltip,
[data-record-type="607"] .t607 a:focus-visible .t607__tooltip{background:#e6e8ec!important}