/* Local mirror fix: static copy loses the Vue/Swiper runtime sizing logic, which sometimes stretches the hero banner slide to full viewport height and crops the promo photo down to its blank background. Cap it back to the design's intended height (~679px on the live site). IMPORTANT: ".banner__slider-wrapper" / ".banner__slide" are reused by the Bitrix template for an unrelated "page header" wrapper on other page types (e.g. /doctors/ uses .banner__slider-wrapper > .banner__slide-info for its title/breadcrumb/filter block, not a carousel). Every rule below is scoped under "section.banner" so it only ever touches the actual hero banner component, never that unrelated reused wrapper. */ section.banner, section.banner .banner__slider-wrapper, section.banner .swiper-container.local-hero-carousel, section.banner .swiper-container.local-hero-carousel .swiper-wrapper, section.banner .swiper-container.local-hero-carousel .swiper-slide, section.banner .banner__slide { max-height: 679px !important; overflow: hidden !important; } section.banner { align-items: flex-start !important; } @media (max-width: 767px) { section.banner, section.banner .banner__slider-wrapper, section.banner .swiper-container.local-hero-carousel, section.banner .swiper-container.local-hero-carousel .swiper-wrapper, section.banner .swiper-container.local-hero-carousel .swiper-slide, section.banner .banner__slide { max-height: 560px !important; } /* The "Записаться" CTA (added to 10/11 slides) sits in normal flow right before the pagination row, but the pagination is shifted up via position:relative + a fixed "bottom" offset from the site's own CSS — on mobile that shift was tuned for the old (shorter) lead-form content and now overlaps the button. Tighten both so they stop colliding. */ section.banner .slide-book-btn { margin-top: 14px !important; margin-bottom: 12px !important; } section.banner .swiper-pagination { position: static !important; bottom: auto !important; left: 0 !important; margin: 0 0 16px 20px !important; flex-wrap: wrap !important; row-gap: 4px; max-width: calc(100% - 40px); } } /* Custom lightweight carousel for the homepage hero: the site's own Swiper init (loaded from js/main.min.js) targets ".banner-slider" and only ever partially works offline (fights over slide count/loop math with no backend behind it), so this component was renamed to ".local-hero-carousel" to opt out of that broken init and instead is driven by /js/local-carousel.js below. */ section.banner .banner__slider-wrapper { flex: 1 1 0% !important; min-width: 0 !important; } section.banner .swiper-container.local-hero-carousel, section.banner .swiper-container.local-hero-carousel .swiper-wrapper { width: 100% !important; } section.banner > *:not(.banner__slider-wrapper) { display: none !important; } /* The site's Vue app (#vue-app-form-banner) hydrates against markup that no longer matches what it expects and, instead of replacing the static slides, appends its own duplicate slide stack as a second direct child of .banner__slider-wrapper. Hide that leftover duplicate; it sits outside our carousel's own wrapper. */ section.banner .banner__slider-wrapper > .swiper-slide { display: none !important; } /* Same Vue hydration mismatch also dumps a copy of the slide stack as a direct child of itself, on any page using this widget. Hide those too (safe globally: should never legitimately have a bare .swiper-slide child). */ body > .swiper-slide { display: none !important; } section.banner .swiper-container.local-hero-carousel .swiper-wrapper { display: block !important; transform: none !important; } section.banner .swiper-container.local-hero-carousel .swiper-slide { display: none !important; width: 100% !important; } section.banner .swiper-container.local-hero-carousel .swiper-slide.local-active { display: block !important; } /* Task: site-wide "Записаться" entry points (planning call 24.07 — button should be reachable from header, doctor cards, price list, etc., leading into /zapis/ instead of the generic feedback form). */ .phone_menu_block { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; } .header-book-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ca0009; color: #fff !important; font-family: inherit !important; font-weight: 600 !important; font-size: 12px !important; line-height: 1 !important; padding: 0 12px !important; height: 32px !important; max-width: none !important; width: auto !important; border-radius: 5px; white-space: nowrap; margin: 0 8px !important; text-decoration: none !important; transition: background 0.2s; flex: 0 0 auto; } .header-book-btn:hover { background: #a80007; color: #fff !important; } @media (max-width: 991px) { .header-book-btn { display: none !important; } } .doctor__item-actions { display: flex; align-items: center; gap: 8px; margin-top: 13px; } .doctor__item-actions .btn { flex: 1 1 0; text-align: center; white-space: nowrap; } .doctor-book-btn { background: #ca0009 !important; color: #fff !important; padding: 4px 14px !important; } .doctor-book-btn:hover { background: #a80007 !important; } .doc__branches { font-size: 13px !important; color: #6b6b76 !important; margin: -8px 0 12px !important; } .doc__branches::before { content: "📍 "; } .doc-detail__branches { color: #454554; } /* Homepage hero carousel: 10 of the 11 promo slides now CTA straight into the matching /doctors/filter/... page instead of a generic lead-capture form (see planning call 24.07 — "ведём на страницу с фильтром"). The ЛОР slide has no matching filter on the live site, so it keeps its original lead form untouched. */ .slide-book-btn { display: inline-flex !important; align-items: center; justify-content: center; max-width: 260px; width: auto !important; height: auto !important; padding: 16px 32px !important; font-size: 16px !important; text-decoration: none !important; margin-top: 28px !important; } /* Price page: a "Записаться" button on every line item, per the planning call decision — the price list isn't split by department, so it just links to the general doctors page rather than guessing a specialist. */ .price__item { flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; } .price__desc { flex: 1 1 auto !important; width: auto !important; min-width: 0; } .price__tcena { flex: 0 0 auto !important; margin-left: 16px; white-space: nowrap; } .price-book-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-left: 24px; padding: 8px 18px; background: #ca0009; color: #fff !important; font-size: 13px; font-weight: 600; border-radius: 5px; text-decoration: none !important; white-space: nowrap; transition: background 0.2s; } .price-book-btn:hover { background: #a80007; } @media (max-width: 767px) { .price__item { flex-wrap: wrap !important; row-gap: 10px; } .price__desc { width: 100% !important; } .price-book-btn { margin-left: auto; } } /* Floating call/VK/Telegram widget (.seti_left) is fixed at top:30% of the viewport on every screen size, which on phones lands squarely on top of the hero slide text. Move it down out of the way on mobile. */ @media (max-width: 767px) { .seti_left { top: auto !important; bottom: 90px !important; } }