/**
 * Editor SSR preview for vechnost/* dynamic blocks (Stage A).
 * Live front = legacy-shell (kill OFF). Не трогать main.css фронта.
 * Все селекторы только под .editor-styles-wrapper / iframe canvas.
 */

/* —— Full width canvas —— */
.editor-styles-wrapper {
  background: var(--color-bg, #efebe4) !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.editor-styles-wrapper .is-root-container,
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/*
 * (1) Каждая секция = отдельный .wp-block / .vechnost-block: relative + min-height,
 * чтобы absolute-фоны (.hero__media, .section-bg) не схлопывались.
 * useBlockProps() (apiVersion 3) вешает data-type на этот корень.
 */
.editor-styles-wrapper .wp-block[data-type^="vechnost/"],
.editor-styles-wrapper .vechnost-block {
  position: relative !important;
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  margin-block: 0 !important;
  padding: 0 !important;
  min-height: 320px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  isolation: isolate;
}

.editor-styles-wrapper .is-root-container {
  gap: 0 !important;
  row-gap: 0 !important;
}

.editor-styles-wrapper .wp-block[data-type="vechnost/hero"] {
  min-height: 640px !important;
}

.editor-styles-wrapper .wp-block[data-type="vechnost/trust"],
.editor-styles-wrapper .wp-block[data-type="vechnost/reviews"],
.editor-styles-wrapper .wp-block[data-type="vechnost/packages"],
.editor-styles-wrapper .wp-block[data-type="vechnost/works"],
.editor-styles-wrapper .wp-block[data-type="vechnost/gallery"] {
  min-height: 420px !important;
}

/*
 * Клики по SSR-превью: содержимое не перехватывает pointer events
 * (ссылки/кнопки/absolute-слои), клик проваливается на обёртку блока.
 * Gutenberg chrome (toolbar / list view) вне .vechnost-ssr-preview — не трогаем.
 */
.editor-styles-wrapper .wp-block[data-type^="vechnost/"] .vechnost-ssr-preview,
.editor-styles-wrapper .wp-block[data-type^="vechnost/"] .vechnost-ssr-preview *,
.editor-styles-wrapper .vechnost-block .vechnost-ssr-preview,
.editor-styles-wrapper .vechnost-block .vechnost-ssr-preview * {
  pointer-events: none !important;
}

/*
 * Stage B4-pilot: inline how — RichText must receive clicks.
 * Buttons inside preview stay non-navigating (handled in JS onClick).
 */
.editor-styles-wrapper .vechnost-inline-preview {
  position: relative;
  display: block;
  width: 100%;
  pointer-events: auto;
}

.editor-styles-wrapper .vechnost-inline-preview .rich-text,
.editor-styles-wrapper .vechnost-inline-preview [contenteditable='true'] {
  pointer-events: auto !important;
  outline-offset: 2px;
}

.editor-styles-wrapper .vechnost-inline-preview a.btn {
  pointer-events: none !important;
  cursor: default;
}

/*
 * Trust → Reviews (отдельные блоки в seed): на live reviews вложены в trust —
 * единый тёмный массив без шва. В редакторе склеиваем фоном + нулевым gap;
 * волну trust→about прячем; reviews несёт волну к about.
 */
.editor-styles-wrapper .wp-block[data-type="vechnost/trust"],
.editor-styles-wrapper .wp-block[data-type="vechnost/reviews"] {
  background: var(--color-trust, #353a50) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.editor-styles-wrapper .wp-block[data-type="vechnost/trust"] {
  overflow: hidden !important;
  /* стык без зазора под соседний reviews */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.editor-styles-wrapper .wp-block[data-type="vechnost/trust"] + .wp-block[data-type="vechnost/reviews"] {
  margin-top: 0 !important;
  border-top: none !important;
}

.editor-styles-wrapper .wp-block[data-type="vechnost/trust"] .section.trust,
.editor-styles-wrapper .wp-block[data-type="vechnost/trust"] #trust {
  padding-bottom: 1.5rem !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  background: var(--color-trust, #353a50) !important;
}

.editor-styles-wrapper .wp-block[data-type="vechnost/trust"] .section-wave,
.editor-styles-wrapper .wp-block[data-type="vechnost/trust"] #trust > .section-wave {
  display: none !important;
}

.editor-styles-wrapper .wp-block[data-type="vechnost/reviews"],
.editor-styles-wrapper [data-vechnost-reviews-block="1"] {
  overflow: hidden !important;
  background: var(--color-trust, #353a50) !important;
}

.editor-styles-wrapper [data-vechnost-reviews-block="1"].section.trust,
.editor-styles-wrapper .wp-block[data-type="vechnost/reviews"] .section.trust,
.editor-styles-wrapper .wp-block[data-type="vechnost/reviews"] [data-vechnost-reviews-block="1"] {
  margin-top: 0 !important;
  padding-top: 0.5rem !important;
  padding-bottom: calc(clamp(4.5rem, 9vw, 8rem) + var(--wave-h, 64px)) !important;
  min-height: 420px;
  background: var(--color-trust, #353a50) !important;
}

.editor-styles-wrapper .wp-block[data-type="vechnost/reviews"] .section-wave,
.editor-styles-wrapper [data-vechnost-reviews-block="1"] > .section-wave {
  display: block !important;
}

/* SSR wrapper */
.editor-styles-wrapper .vechnost-ssr-preview,
.editor-styles-wrapper .components-disabled {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: inherit;
  position: relative !important;
}

.editor-styles-wrapper .vechnost-ssr-preview > section,
.editor-styles-wrapper .components-disabled > section {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/*
 * (2) Волны / negative margin: в редакторе секции встык, без наездов
 * между отдельными .wp-block (осознанное упрощение).
 */
.editor-styles-wrapper .section.is-wave-receiver,
.editor-styles-wrapper .hero.is-wave-receiver,
.editor-styles-wrapper .is-wave-receiver,
.editor-styles-wrapper .form-section.is-wave-receiver,
.editor-styles-wrapper .site-footer.is-wave-receiver {
  margin-top: 0 !important;
}

.editor-styles-wrapper .section-wave,
.editor-styles-wrapper .hero > .section-wave,
.editor-styles-wrapper .section > .section-wave,
.editor-styles-wrapper .is-wave-emitter > .section-wave {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: var(--wave-h, 64px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.editor-styles-wrapper .section-wave::after {
  display: none !important;
}

.editor-styles-wrapper .section-wave__svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/*
 * (3) Hero: без -header, без 100dvh — фиксированная высота канваса.
 */
.editor-styles-wrapper .hero,
.editor-styles-wrapper section.hero {
  position: relative !important;
  min-height: 640px !important;
  height: auto !important;
  margin-top: 0 !important;
  padding-top: 4.5rem !important;
  padding-bottom: 5rem !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  z-index: auto !important;
}

.editor-styles-wrapper .hero__media,
.editor-styles-wrapper .hero__overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.editor-styles-wrapper .hero__overlay {
  z-index: 1 !important;
  pointer-events: none !important;
}

.editor-styles-wrapper .hero__media picture,
.editor-styles-wrapper .hero__media img,
.editor-styles-wrapper .hero__media .hero__img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
}

.editor-styles-wrapper .hero__grid,
.editor-styles-wrapper .hero__content {
  position: relative !important;
  z-index: 2 !important;
}

/* Section shells + absolute backgrounds */
.editor-styles-wrapper section.section,
.editor-styles-wrapper .section {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 280px;
  margin-top: 0 !important;
  overflow: hidden !important;
  isolation: auto !important;
  z-index: auto !important;
  box-sizing: border-box;
}

.editor-styles-wrapper .section--has-bg {
  min-height: 360px;
}

.editor-styles-wrapper .section-bg,
.editor-styles-wrapper .section-bg__scrim {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.editor-styles-wrapper .section-bg picture,
.editor-styles-wrapper .section-bg img,
.editor-styles-wrapper .section-bg .section-bg__img,
.editor-styles-wrapper .section-bg__img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  margin: 0 !important;
}

.editor-styles-wrapper .section > .container,
.editor-styles-wrapper .section .container {
  position: relative !important;
  z-index: 1 !important;
}

.editor-styles-wrapper #trust,
.editor-styles-wrapper .section.trust,
.editor-styles-wrapper #reviews,
.editor-styles-wrapper .trust__reviews {
  min-height: 420px;
}

/*
 * (4) Слоты изображений: явная высота, чтобы media_slot / image_id:0
 * не выглядели съехавшими полосками.
 */
.editor-styles-wrapper .leader__photo {
  position: relative !important;
  min-height: 280px !important;
  aspect-ratio: 4 / 5;
  max-width: 280px;
  width: 100%;
  overflow: hidden !important;
}

.editor-styles-wrapper .leader__photo picture,
.editor-styles-wrapper .leader__photo img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.editor-styles-wrapper .gallery-preview-card {
  position: relative !important;
  min-height: 220px !important;
  aspect-ratio: 3 / 4;
  overflow: hidden !important;
}

.editor-styles-wrapper .gallery-preview-card > picture,
.editor-styles-wrapper .gallery-preview-card img,
.editor-styles-wrapper .gallery-preview-card__cover {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.editor-styles-wrapper .flip-card,
.editor-styles-wrapper .works-flip-card,
.editor-styles-wrapper .packages-flip-card {
  position: relative !important;
  min-height: 240px !important;
  overflow: hidden !important;
}

.editor-styles-wrapper .flip-card picture,
.editor-styles-wrapper .flip-card img,
.editor-styles-wrapper .works-flip-card picture,
.editor-styles-wrapper .works-flip-card img,
.editor-styles-wrapper .packages-flip-card picture,
.editor-styles-wrapper .packages-flip-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.editor-styles-wrapper .media-grid__item,
.editor-styles-wrapper .documents__item,
.editor-styles-wrapper .how__visual {
  position: relative !important;
  min-height: 160px;
}

/*
 * Сетки: iframe редактора часто <768px → на фронте 1 колонка.
 * В админке форсируем desktop-раскладку (узнаваемость секций).
 */
.editor-styles-wrapper .steps__grid,
.editor-styles-wrapper .cards-3,
.editor-styles-wrapper .trust__facts,
.editor-styles-wrapper .media-grid,
.editor-styles-wrapper .packages-flip-grid,
.editor-styles-wrapper .works-flip-grid,
.editor-styles-wrapper .flip-grid,
.editor-styles-wrapper .gallery-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--flip-grid-gap, 1.25rem);
  width: 100% !important;
}

.editor-styles-wrapper #packages .packages-flip-grid.is-layout-cols-4,
.editor-styles-wrapper .packages-flip-grid.is-layout-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--space-4, 1rem) !important;
}

.editor-styles-wrapper .reviews-grid,
.editor-styles-wrapper .cards-2,
.editor-styles-wrapper .documents__cols,
.editor-styles-wrapper .installment__benefits,
.editor-styles-wrapper .leader__layout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--space-6, 1.5rem);
  width: 100% !important;
  align-items: start;
}

.editor-styles-wrapper .leader__layout {
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) !important;
}

/* Buttons readable in SSR */
.editor-styles-wrapper .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Текст поверх absolute-слоёв */
.editor-styles-wrapper .section__head,
.editor-styles-wrapper .section__title,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
  position: relative;
  z-index: 2;
}

/*
 * Front .reveal стартует с opacity:0 до IntersectionObserver в main.js.
 * В редакторе скрипт лендинга не крутится → контент «невидимый» поверх фона.
 */
.editor-styles-wrapper .reveal,
.editor-styles-wrapper .reveal.is-visible,
.editor-styles-wrapper [data-reveal],
.editor-styles-wrapper .hero .reveal,
.editor-styles-wrapper .section .reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
}

/* Editor-only: placeholders for PHP form/map after last block */
.editor-styles-wrapper .vechnost-editor-followups {
  display: grid;
  gap: 12px;
  padding: 24px 20px 40px;
  background: var(--color-bg, #efebe4);
  box-sizing: border-box;
}

.editor-styles-wrapper .vechnost-editor-placeholder {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 18px 20px;
  border: 1px dashed rgba(53, 58, 80, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #2a2c38;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.editor-styles-wrapper .vechnost-editor-placeholder strong {
  font-weight: 600;
}

.editor-styles-wrapper .vechnost-editor-placeholder span {
  opacity: 0.78;
}

.editor-styles-wrapper .hero.hero--content-right .hero__grid {
  display: flex !important;
  justify-content: flex-end !important;
}
.editor-styles-wrapper .hero.hero--content-right .hero__content {
  margin-left: auto !important;
  text-align: right !important;
}
.editor-styles-wrapper .is-layout-cols-2.cards-3,
.editor-styles-wrapper .packages-flip-grid.is-layout-cols-2,
.editor-styles-wrapper .works-flip-grid.is-layout-cols-2,
.editor-styles-wrapper .tariffs-grid.is-layout-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}