/**
 * ═══════════════════════════════════════════════════════════════════════════
 *  SCANDI COMPONENTS — единая дизайн-система редизайн-темы.
 *
 *  Один файл, ОДНО место правды для каждого компонента.
 *  Меняешь стиль здесь — обновляется на ВСЕХ страницах сайта.
 *
 *  ВАЖНО: компоненты определяют ТОЛЬКО обёртку (border, shadow, hover).
 *  Внутреннее устройство карточек (где фото, где текст) — определяет парент.
 *  Мы не трогаем padding/фон если внутри карточки есть свой layout.
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════
   B. КАРТОЧКИ — два типа:
      .scandi-product-card → карточка дома (фото full-bleed + info под)
      .scandi-content-card → карточка с контентом (своими padding)
   ═══════════════════════════════════════════════════════════════════ */


/**
 * .scandi-product-card — карточка дома/продукта.
 *
 * Внутри: парент-HTML с .catalog-item-image (фото full-bleed)
 *         + .catalog-item-info (текст с своим padding).
 *
 * Применяется к:
 *   .catalog-item (везде на сайте — главная, КД-страница «Другие проекты»,
 *                  /houses/, /barnhaus-pod-kljuch/)
 *
 * Не трогает padding/фон внутри — только обёртка.
 */
html body .scandi-product-card {
  background: transparent !important;
  border: 1px solid rgba(193, 154, 91, 0.28) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(60, 40, 20, 0.10) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  position: relative !important;
}
html body .scandi-product-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(193, 154, 91, 0.55) !important;
  box-shadow: 0 20px 44px rgba(60, 40, 20, 0.20) !important;
}


/**
 * .scandi-content-card — карточка с контентом (своими padding).
 *
 * Применяется к:
 *   .house-info .example .example-in   (example block с параметрами)
 *   .house-info .bottom .item          (планировки)
 *   .scandi-kd-layouts-section .item   (вынесенные планировки)
 *   .build-stages .step-cards__item    (этапы «Как мы работаем»)
 *   .scandi-team .team-card            (карточки команды)
 *   .scandi-quotes .quote-card         (отзывы)
 */
html body .scandi-content-card {
  background: linear-gradient(135deg, #fffcf5 0%, #f5ebd7 100%) !important;
  border: 1px solid rgba(193, 154, 91, 0.32) !important;
  border-top: 2px solid #c19a5b !important;
  border-radius: 14px !important;
  padding: 24px !important;
  box-shadow:
    0 16px 36px rgba(60, 40, 20, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html body .scandi-content-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(193, 154, 91, 0.55) !important;
  box-shadow:
    0 24px 50px rgba(60, 40, 20, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}


/**
 * .scandi-content-card--dark — тёмный модификатор content-карточки.
 *
 * Применяется к:
 *   .compl-card                            (комплектации step2)
 *   .scandi-about__stat                    (преимущества «50 ЛЕТ»)
 *   .cbform-architect .form-wrapper        (форма «СКИДКА 10%»)
 *   .cbform .scandi-finalform__panel       (финальная форма)
 *   .white-box-wrapper                     (WhiteBox card)
 *   .mortgage-calling .container-card      (mortgage block)
 */
html body .scandi-content-card--dark {
  background: linear-gradient(165deg, rgba(40, 28, 20, 0.85) 0%, rgba(20, 16, 13, 0.95) 100%) !important;
  border: 1px solid rgba(193, 154, 91, 0.32) !important;
  border-top: 2px solid #c19a5b !important;
  border-radius: 14px !important;
  padding: 26px 24px !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(243, 236, 220, 0.04) !important;
  color: #f3ecdc !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html body .scandi-content-card--dark:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(193, 154, 91, 0.55) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.42) !important;
}
html body .scandi-content-card--dark h1,
html body .scandi-content-card--dark h2,
html body .scandi-content-card--dark h3,
html body .scandi-content-card--dark h4,
html body .scandi-content-card--dark .title,
html body .scandi-content-card--dark .b-title {
  color: #f3ecdc !important;
}


/**
 * .scandi-card--popular — модификатор «популярный выбор» (с золотым акцентом).
 * Применяется ДОПОЛНИТЕЛЬНО к .scandi-product-card или .scandi-content-card--dark.
 */
html body .scandi-card--popular {
  border-top: 2px solid #d4ad6e !important;
  box-shadow: 0 16px 36px rgba(193, 154, 91, 0.22) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   Остальные компоненты (CTA, eyebrow, badge, и т.д.) — на следующем шаге.
   ═══════════════════════════════════════════════════════════════════ */