/* ============================================================
   SPEC-V1 PREMIUM CREAM VARIANT
   ============================================================
   Мягкий премиальный стиль на кремово-золотой гамме.
   Реализован как Style Variant 2 (addon CSS + модификатор класса).
   Применяется ТОЛЬКО на страницах, где явно подключён.

   Подключение (в блоках или шаблоне):
   <link rel="stylesheet" href="/docs/css/spec-v1-premium-cream.css">

   Активация (модификатор):
   Добавьте класс .spec-v1-premium-cream
   - на .spec-v1-section (рекомендуется для MIGX-блоков)
   - или на родительский контейнер (.pcontent, .container и т.п.)

   Пример:
   <div class="spec-v1-section spec-v1-section--hero-premium spec-v1-premium-cream">...</div>

   Правила:
   - Мягкий кремовый градиент hero (глубокий внизу)
   - Тонкая внутренняя подсветка карточек
   - Иконки в золотистых кругах
   - Мягкий hover на ссылках "Смотрите также"
   - Увеличенные отступы между секциями
   ============================================================ */

/* ---------- Hero ---------- */
.spec-v1-premium-cream .spec-v1-section--hero-premium .spec-v1-section-content,
.spec-v1-section--hero-premium.spec-v1-premium-cream .spec-v1-section-content {
  background:
    linear-gradient(0deg, rgba(0,0,0,0.012) 0%, rgba(0,0,0,0) 16%),
    radial-gradient(circle at 0 100%, rgba(255, 253, 248, 0.95), rgba(255, 255, 255, 0) 56%),
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0) 48%),
    linear-gradient(0deg, #f5f1ea 0%, #faf7f2 42%, #fffdf8 100%);
  padding-left: 18px;
}

/* ---------- Карточки (benefit + step) ---------- */
.spec-v1-premium-cream .spec-v1-benefit-card,
.spec-v1-premium-cream .spec-v1-step-card,
.spec-v1-benefit-card.spec-v1-premium-cream,
.spec-v1-step-card.spec-v1-premium-cream {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 8px 20px rgba(54, 42, 30, 0.08);
}

/* ---------- Иконки в кругах ---------- */
.spec-v1-premium-cream .spec-v1-benefit-card__icon,
.spec-v1-benefit-card.spec-v1-premium-cream .spec-v1-benefit-card__icon {
  font-size: 28px;
  color: #b38a56;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(179, 138, 86, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

.spec-v1-premium-cream .spec-v1-step-card__icon,
.spec-v1-step-card.spec-v1-premium-cream .spec-v1-step-card__icon {
  font-size: 26px;
  color: #b38a56;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(179, 138, 86, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

/* ---------- Мягкий hover на ссылках «Смотрите также» ---------- */
.spec-v1-premium-cream .spec-v1-restore-links .spec-v1-btn-secondary:hover,
.spec-v1-premium-cream .spec-v1-restore-links .spec-v1-btn-secondary:focus-visible,
.spec-v1-restore-links.spec-v1-premium-cream .spec-v1-btn-secondary:hover,
.spec-v1-restore-links.spec-v1-premium-cream .spec-v1-btn-secondary:focus-visible {
  color: #0b3f6f;
  background: #f2ede3;
  border-color: rgba(179, 138, 86, 0.55);
  box-shadow: 0 10px 24px rgba(54, 42, 30, 0.14);
}

/* ---------- Отступы между секциями ---------- */
.spec-v1-premium-cream .spec-v1-section + .spec-v1-section,
.spec-v1-section.spec-v1-premium-cream + .spec-v1-section {
  margin-top: 34px;
}

/* ============================================================
   Полный набор кремовых визуалов (чтобы вариант был самодостаточным)
   ============================================================ */

/* Hero section visuals */
.spec-v1-premium-cream .spec-v1-section--hero-premium,
.spec-v1-section--hero-premium.spec-v1-premium-cream {
  border-color: #ddd3c4;
  box-shadow: 0 8px 20px rgba(54, 42, 30, 0.06);
}

.spec-v1-premium-cream .spec-v1-section--hero-premium .spec-v1-section-content,
.spec-v1-section--hero-premium.spec-v1-premium-cream .spec-v1-section-content {
  background:
    linear-gradient(0deg, rgba(0,0,0,0.012) 0%, rgba(0,0,0,0) 16%),
    radial-gradient(circle at 0 100%, rgba(255, 253, 248, 0.95), rgba(255, 255, 255, 0) 56%),
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0) 48%),
    linear-gradient(0deg, #f5f1ea 0%, #faf7f2 42%, #fffdf8 100%);
  padding-left: 18px;
}

/* Benefits cards (full cream treatment) */
.spec-v1-premium-cream .spec-v1-section--benefits-premium .spec-v1-benefit-card,
.spec-v1-section--benefits-premium.spec-v1-premium-cream .spec-v1-benefit-card,
.spec-v1-premium-cream .spec-v1-benefit-card {
  min-height: 84px;
  padding: 12px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 8px 20px rgba(54, 42, 30, 0.08);
}

.spec-v1-premium-cream .spec-v1-section--benefits-premium .spec-v1-benefit-card__icon,
.spec-v1-section--benefits-premium.spec-v1-premium-cream .spec-v1-benefit-card__icon,
.spec-v1-premium-cream .spec-v1-benefit-card__icon {
  font-size: 28px;
  color: #b38a56;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(179, 138, 86, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

.spec-v1-premium-cream .spec-v1-section--benefits-premium .spec-v1-benefit-card__title,
.spec-v1-section--benefits-premium.spec-v1-premium-cream .spec-v1-benefit-card__title {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  margin-bottom: 4px;
}

.spec-v1-premium-cream .spec-v1-section--benefits-premium .spec-v1-benefit-card__text,
.spec-v1-section--benefits-premium.spec-v1-premium-cream .spec-v1-benefit-card__text {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: #25364a;
}

/* Steps cards (cream depth + icons in circles) */
.spec-v1-premium-cream .spec-v1-section--steps-premium .spec-v1-step-card,
.spec-v1-section--steps-premium.spec-v1-premium-cream .spec-v1-step-card,
.spec-v1-premium-cream .spec-v1-step-card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 8px 20px rgba(54, 42, 30, 0.08);
}

.spec-v1-premium-cream .spec-v1-section--steps-premium .spec-v1-step-card__icon,
.spec-v1-section--steps-premium.spec-v1-premium-cream .spec-v1-step-card__icon,
.spec-v1-premium-cream .spec-v1-step-card__icon {
  font-size: 26px;
  color: #b38a56;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(179, 138, 86, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

.spec-v1-premium-cream .spec-v1-section--steps-premium .spec-v1-step-card__text,
.spec-v1-section--steps-premium.spec-v1-premium-cream .spec-v1-step-card__text {
  text-transform: none;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  text-align: left;
}

.spec-v1-premium-cream .spec-v1-section--steps-premium .spec-v1-step-card__text a,
.spec-v1-section--steps-premium.spec-v1-premium-cream .spec-v1-step-card__text a {
  color: #0b3f6f;
  font-weight: 700;
}

/* Soft cream hover for "Смотрите также" (already had, reinforced) */
.spec-v1-premium-cream .spec-v1-restore-links .spec-v1-btn-secondary:hover,
.spec-v1-premium-cream .spec-v1-restore-links .spec-v1-btn-secondary:focus-visible,
.spec-v1-restore-links.spec-v1-premium-cream .spec-v1-btn-secondary:hover,
.spec-v1-restore-links.spec-v1-premium-cream .spec-v1-btn-secondary:focus-visible {
  color: #0b3f6f;
  background: #f2ede3;
  border-color: rgba(179, 138, 86, 0.55);
  box-shadow: 0 10px 24px rgba(54, 42, 30, 0.14);
}

/* Outro cream treatment */
.spec-v1-premium-cream .restore-outro,
.spec-v1-premium-cream .restore-outro {
  margin-top: 18px;
  padding: 16px 18px 16px 22px;
  background: linear-gradient(180deg, #fffdf8 0%, #f2ede3 100%);
  border: 1px solid #ddd3c4;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(54, 42, 30, 0.08);
}

.spec-v1-premium-cream .restore-outro .spec-v1-section-body {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: #25364a;
}

.spec-v1-premium-cream .restore-outro .spec-v1-section-lead {
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(221, 211, 196, 0.9);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  color: #0b3f6f;
}

.spec-v1-premium-cream .restore-outro .spec-v1-section-lead strong {
  color: #0b3f6f;
  font-weight: 700;
}

/* Base button style (cream-ish gradient) under variant for consistency */
.spec-v1-premium-cream .spec-v1-restore-links .spec-v1-btn-secondary,
.spec-v1-restore-links.spec-v1-premium-cream .spec-v1-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  min-height: 70px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  text-align: left;
  color: #0b3f6f;
  background: linear-gradient(180deg, #fffdf8 0%, #f2ede3 100%);
  border: 1px solid #ddd3c4;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(54, 42, 30, 0.08);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.spec-v1-premium-cream .spec-v1-restore-links.spec-v1-restore-links--single .spec-v1-btn-secondary,
.spec-v1-restore-links.spec-v1-restore-links--single.spec-v1-premium-cream .spec-v1-btn-secondary {
  justify-content: center;
  text-align: center;
}