/* ==========================================================================
   ПлАЦДАРМ — исправления конфликтов редизайна с legacy-CSS
   Подключается ПОСЛЕ site-redesign-modern.css
   ========================================================================== */

/* ── 1. Scroll-reveal: не скрывать контент до JS ── */
html body .reveal-on-scroll {
  opacity: 1 !important;
  transform: none !important;
}

html body.js-ready .reveal-on-scroll:not(.is-visible) {
  opacity: 0 !important;
  transform: translateY(18px) !important;
}

html body.js-ready .reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── 2. content-flex: flex, не grid (сохраняет порядок mobile/desktop кнопок) ── */
html body .content-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: clamp(20px, 3vw, 40px) !important;
}

html body .content-flex .text-part,
html body .content-flex .video-part {
  flex: 1 1 380px !important;
  min-width: min(100%, 280px) !important;
  max-width: 100% !important;
}

html body #fundPl .text-part,
html body #fundLife .text-part,
html body .history-section .text-part {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

html body #fundPl .fund-copy,
html body #fundLife .fund-copy {
  width: 100% !important;
}

html body .fund-action-row-desktop {
  display: flex !important;
}

html body .fund-action-row-mobile,
html body .history-action-row-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  html body #fundPl .content-flex,
  html body #fundLife .content-flex,
  html body .history-section .content-flex,
  html body .fund-photo-section .content-flex {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html body #fundPl .video-part,
  html body #fundLife .video-part,
  html body .history-section .video-part {
    order: 1 !important;
  }

  html body #fundPl .text-part,
  html body #fundLife .text-part,
  html body .history-section .text-part {
    order: 2 !important;
  }

  html body .fund-action-row-desktop,
  html body .history-action-row-desktop {
    display: none !important;
  }

  html body .fund-action-row-mobile,
  html body .history-action-row-mobile {
    display: flex !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
}

/* ── 3. video-frame: сохранить aspect-ratio box legacy ── */
html body .video-frame {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  min-height: 0 !important;
  background: #0a1219 !important;
  border-radius: var(--m-radius-md, 18px) !important;
  overflow: hidden !important;
  box-shadow: var(--m-shadow-md, 0 12px 40px rgba(20, 56, 68, 0.12)) !important;
  border: 1px solid var(--m-border, rgba(10, 18, 25, 0.08)) !important;
}

html body .video-frame img,
html body .video-frame video,
html body .video-frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
}

html body .video-part {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
}

html body .position-image-frame {
  position: relative !important;
  border-radius: var(--m-radius-md, 18px) !important;
  overflow: hidden !important;
  box-shadow: var(--m-shadow-md) !important;
}

html body .position-image-frame img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* ── 4. Hero: не ломать фоны страниц (legacy url от pages/*.css) ── */
html body .hero-content {
  position: relative !important;
  overflow: hidden !important;
}

html body .hero-content::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html body .hero-text,
html body .hero-inner,
html body .info-grid,
html body .hero-cards,
html body .hero-search-wrap,
html body .social-guarantees-index-cards {
  position: relative !important;
  z-index: 1 !important;
}

html body .hero h1,
html body .hero h1 .hero-title-line,
html body .hero h1 .social-title-line,
html body .hero h1 .font-hero-title-desktop-line,
html body .hero h1 .font-hero-title-mobile-line,
html body .hero h1 .font-hero-title-placdarm-line {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* font.html: desktop/mobile строки заголовка */
@media (min-width: 769px) {
  html body .hero h1.font-hero-title-split .font-hero-title-mobile-line {
    display: none !important;
  }
  html body .hero h1.font-hero-title-split .font-hero-title-desktop-line,
  html body .hero h1.font-hero-title-split .font-hero-title-placdarm-line {
    display: block !important;
  }
}

@media (max-width: 768px) {
  html body .hero h1.font-hero-title-split .font-hero-title-desktop-line {
    display: none !important;
  }
  html body .hero h1.font-hero-title-split .font-hero-title-mobile-line,
  html body .hero h1.font-hero-title-split .font-hero-title-placdarm-line {
    display: block !important;
  }
}

/* social.html: desktop/mobile строки заголовка */
html body .social-guarantees-hero .social-main-title > .social-title-mobile-line {
  display: none !important;
}

@media (max-width: 768px) {
  html body .social-guarantees-hero .social-main-title > .social-title-desktop-line {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  html body .social-guarantees-hero .social-main-title > .social-title-mobile-line {
    display: block !important;
  }
}

/* ── 5. Hero cards: сетки по страницам ── */
html body .social-guarantees-index-cards .hero-cards,
html body .index-copy-hero .hero-cards {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html body .hero-services-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

@media (max-width: 1100px) {
  html body .social-guarantees-index-cards .hero-cards,
  html body .index-copy-hero .hero-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body .hero-services-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  html body .social-guarantees-index-cards .hero-cards,
  html body .index-copy-hero .hero-cards,
  html body .hero-services-cards {
    grid-template-columns: 1fr !important;
  }
}

html body .hero-card,
html body .hero-service-card {
  min-height: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  text-decoration: none !important;
}

html body .hero-service-card {
  cursor: pointer !important;
  font: inherit !important;
  text-align: left !important;
}

/* ── 6. Info-cards: не применять стили pill-кнопок ── */
html body .info-card,
html body .info-card-action,
html body button.info-card-action {
  background: rgba(255, 255, 255, 0.1) !important;
  background-image: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--m-radius-md, 18px) !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  box-shadow: none !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 24px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body .info-card-action:hover,
html body .info-card-action:focus-visible {
  background: rgba(255, 255, 255, 0.16) !important;
  background-image: none !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  color: inherit !important;
}

html body .about-section .info-card,
html body main .info-card {
  background: var(--m-surface-2, #f3f6f9) !important;
  border: 1px solid var(--m-border) !important;
  color: var(--m-ink) !important;
}

/* ── 7. Social: поиск и PDF в hero ── */
html body .social-guarantees-hero .hero-search-title {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 700 !important;
}

html body .hero-search-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 14px !important;
  width: 100% !important;
}

html body .hero-search-panel-fixed {
  flex: 1 1 480px !important;
  min-width: min(100%, 280px) !important;
}

html body .social-guarantees-hero .page-search-panel {
  background: rgba(255, 255, 255, 0.95) !important;
  height: 100% !important;
}

html body .social-guarantees-hero .social-pdf-click-card,
html body .hero-search-row .social-pdf-click-card {
  flex: 0 1 260px !important;
  min-width: min(100%, 240px) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--m-radius-md, 18px) !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: none !important;
}

html body .social-guarantees-hero .social-pdf-click-card .hero-card-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body .social-guarantees-hero .social-pdf-click-card .hero-card-text {
  color: rgba(255, 255, 255, 0.78) !important;
}

html body .search-clear-btn {
  background: var(--m-surface-2, #f3f6f9) !important;
  background-image: none !important;
  color: var(--m-muted, #5a6d7a) !important;
  -webkit-text-fill-color: var(--m-muted) !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: none !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  font-size: 0.72rem !important;
}

html body .search-nav-btn {
  min-height: 40px !important;
  min-width: 40px !important;
  width: 40px !important;
  padding: 0 !important;
}

html body .page-search-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

html body .page-search-controls input[type="search"],
html body .page-search-controls input {
  flex: 1 1 180px !important;
  min-width: 0 !important;
}

/* ── 8. fund-photo-section: полупрозрачный фон + ::before ── */
html body .fund-photo-section {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

html body.page-index #fundSocialLegal.index-activities-stack {
  background: transparent !important;
}

html body .fund-photo-section::before {
  opacity: 0.32 !important;
  z-index: 0 !important;
}

/* ── 9. Кнопки действий в секциях ── */
html body .fund-action-row,
html body .history-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

html body .fund-action-row .contract-btn,
html body .history-action-row .history-action-btn,
html body .history-action-row a.history-action-btn {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: min(220px, 100%) !important;
  max-width: 100% !important;
  min-height: 48px !important;
  padding: 12px 20px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── 10. Аккордеон: не ломать скрытие ── */
html body .list-content {
  display: none !important;
}

html body .list-item.open .list-content,
html body .list-item.active .list-content {
  display: block !important;
}

html body .sublist-content {
  display: none !important;
}

html body .sublist-item.open .sublist-content,
html body .sublist-item.active .sublist-content {
  display: block !important;
}

html body .list-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 11. Footer: стабильная 5-колоночная сетка ── */
@media (min-width: 981px) {
  html body .footer-container {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.04fr) minmax(0, 1.04fr) minmax(0, 0.9fr) minmax(0, 1.02fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  html body .footer-col,
  html body .footer-col--offices,
  html body .footer-col--contacts-placdarm,
  html body .footer-col--contacts-life,
  html body .footer-col--legal-info,
  html body .footer-col--info {
    position: static !important;
    left: auto !important;
    right: auto !important;
    grid-column: auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 980px) {
  html body .footer-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 560px) {
  html body .footer-container {
    grid-template-columns: 1fr !important;
  }
}

html body .footer-col--contacts-placdarm a,
html body .footer-col--contacts-life a,
html body .footer-col--contacts-placdarm li,
html body .footer-col--contacts-life li {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* ── 12. about-section внутри container ── */
html body main.container .about-section,
html body .container .about-section {
  margin-top: 0 !important;
}

html body .about-section {
  backdrop-filter: blur(8px) !important;
}

html body .about-card-black-text h3,
html body .about-card-black-text li,
html body .about-card-black-text p {
  color: var(--m-muted) !important;
}

html body .about-card-black-text h3 {
  color: var(--m-ink) !important;
}

/* ── 13. Modals: не ломать layout и позиционирование ── */
html body .modal {
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .modal.active {
  display: flex !important;
}

html body .social-legal-modal {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

html body .modal-content,
html body .contract-modal-content,
html body .fund-contract-like-modal,
html body .social-legal-modal-dialog,
html body .service-modal-content,
html body .benefit-modal-content,
html body .calc-modal-content,
html body .help-choice-modal-content {
  border-radius: var(--m-radius-lg, 24px) !important;
  max-height: calc(100vh - var(--site-header-height, 72px) - 32px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

html body .modal-scroll-layout,
html body .modal-form-body,
html body .contract-modal-body,
html body .benefit-modal-body,
html body .social-legal-modal-body {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

html body .close-btn,
html body .sheet-close-btn,
html body .modal-back-btn {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--m-ink, #0a1219) !important;
  -webkit-text-fill-color: var(--m-ink) !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 8px !important;
  border-radius: var(--m-radius-xs, 8px) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── 14. Index: home activity cards ── */
html body .home-activity-card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  height: auto !important;
  min-height: 0 !important;
}

html body .home-activity-card-media {
  flex-shrink: 0 !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  overflow: hidden !important;
}

html body .home-activity-footer-btn,
html body .section-logo-link,
html body .section-logo-link button {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  text-transform: none !important;
}

html body .home-activity-footer-btn:hover {
  transform: none !important;
  opacity: 0.85 !important;
}

/* ── 15. Laboratory scope ── */
html body .lab-content-scope .hero {
  max-width: var(--m-content-w, 1240px) !important;
}

html body .lab-content-scope .hero-card {
  cursor: pointer !important;
}

/* ── 16. Positions / history ── */
html body .history-section {
  background: rgba(255, 255, 255, 0.88) !important;
}

html body .hero-action-card {
  cursor: pointer !important;
  text-align: left !important;
  font: inherit !important;
  color: inherit !important;
}

html body .custom-video-player,
html body .video-quality-menu {
  border-radius: var(--m-radius-md, 18px) !important;
  overflow: visible !important;
}

html body .video-quality-toggle {
  background: rgba(10, 18, 25, 0.75) !important;
  background-image: none !important;
  border-radius: var(--m-radius-sm, 12px) !important;
  box-shadow: none !important;
  min-height: 0 !important;
  width: auto !important;
  text-transform: none !important;
}

/* ── 17. Side menu: header управляется site-redesign-nav.css ── */

html body .side-menu-header .close-side-menu,
html body #closeMenuBtn {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.8) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
  font-size: 1.5rem !important;
  min-height: 0 !important;
  width: auto !important;
  border: none !important;
  padding: 4px 8px !important;
}

/* ── 18. Modern hero index ── */
html body .modern-hero {
  max-width: var(--m-content-w, 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.page-index .container {
  padding-top: 0 !important;
}

/* ── 19. Legal / docs pages ── */
html body .legal-content h1,
html body .legal-content h2,
html body .legal-content h3 {
  color: var(--m-ink) !important;
}

html body .download-box,
html body .doc-btn {
  max-width: 100% !important;
}

/* ── 20. Garant links in accordion ── */
html body .list-content a.garant-link,
html body .list-content a {
  color: var(--m-brand-600, #237a96) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ── 21. Убрать лишний padding-top дубли ── */
html body.page-font,
html body.page-social,
html body.page-positions,
html body.page-school {
  padding-top: var(--m-header-h, 72px) !important;
}

/* ── 22. Scroll-top не перекрывать контент ── */
html body .scroll-top-btn {
  position: fixed !important;
  z-index: 1900 !important;
}

/* ── 23. Footer text colors (не наследовать --m-muted) ── */
html body .site-footer p,
html body .site-footer li,
html body .footer-col li,
html body .footer-col a,
html body .footer-bottom,
html body .footer-bottom div {
  color: rgba(255, 255, 255, 0.65) !important;
}

html body .footer-bottom,
html body .footer-bottom div {
  color: rgba(255, 255, 255, 0.42) !important;
}

html body .footer-col h3 {
  color: var(--m-brand-400, #5ec4d8) !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html body.js-ready .reveal-on-scroll:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
  }
}