/* ======================================================================
   #STEPS — «Как приобрести автомобиль из Китая»
   Планшеты 768–1199.98px (iPad mini/air портрет и альбом): КАЖДАЯ карточка = СТРОКА:
     слева круг-номер (по центру по высоте), справа — заголовок над текстом.
   Десктоп ≥1200px: 4 колонки (как было), «заголовок повыше».
   Всегда по контенту (без 100vh). Скоуп только #steps.
   ====================================================================== */

/* Секция и контейнер */
#steps{
  background: var(--paper-200);
  border-top: 1px solid rgba(31,30,22,.08);
  padding-block: clamp(24px, 6vh, 64px);
}
#steps .container{ display: block; }
#steps .row{ row-gap: clamp(16px, 3.2vw, 24px); }

/* Заголовок */
#steps .steps-title{
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 40px;
  text-align: center;
}
#steps .steps-title span{ color: var(--terracotta); }

/* Карточка шага — база (вертикальная) */
#steps .step-item{
  background: var(--paper-100);
  border: 2px solid var(--paper-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100%;
}
#steps .step-num{
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--terracotta); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.25rem;
  margin: 0 auto 12px auto;
  box-shadow: var(--btnshadow);
}
#steps .step-title{ font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
#steps .step-text{ color: var(--ink-60); font-size: 1rem; line-height: 1.55; text-align: left; }

/* Мобилки (≤575.98px) */
@media (max-width: 575.98px){
  #steps{ padding-block: 32px; }
  #steps .steps-title{ margin-bottom: 28px; font-size: clamp(22px, 6vw, 28px); }
}

/* Фон «тёмное стекло» (включается .steps-bg) */
#steps.steps-bg{
  position: relative;
  background-image: url("../img/background/bg-steps.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  --steps-overlay-top:.40; --steps-overlay-bot:.66; --steps-vignette:.36;
}
#steps.steps-bg::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(rgba(0,0,0,var(--steps-overlay-top,.40)),
                    rgba(0,0,0,var(--steps-overlay-bot,.66))),
    linear-gradient(135deg, color-mix(in srgb, var(--paper-200) 28%, transparent) 0%, transparent 55%),
    rgba(0,0,0,.10);
  backdrop-filter: blur(2.5px) saturate(.92) brightness(.88);
  -webkit-backdrop-filter: blur(2.5px) saturate(.92) brightness(.88);
  pointer-events:none;
}
#steps.steps-bg::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,var(--steps-vignette)) 100%);
  mix-blend-mode:multiply; pointer-events:none;
}
#steps.steps-bg > *{ position: relative; z-index: 1; }
#steps.steps-bg .steps-title{
  color:#fff !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.35);
  line-height:1.15; margin-bottom: clamp(16px, 3vh, 32px);
  display:inline-block; padding:8px 14px; border-radius:var(--radius);
  background: rgba(0,0,0,.22); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
#steps.steps-bg .steps-title span{
  color: var(--terracotta) !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.35);
}
#steps.steps-bg .section-subtitle,
#steps.steps-bg .lead,
#steps.steps-bg .text-muted{
  color: rgba(255,255,255,.95) !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* ──────────────────────────────────────────────────────────────
   ПЛАНШЕТЫ (768–1199.98px): каждая карточка = СТРОКА
   — ломаем .col-md-3 на 100% ширины
   — step-item: row; цифра слева по центру по высоте; текст справа
   ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199.98px){
  /* одна карточка в ряд */
  #steps .col-md-3.col-sm-6{ flex:0 0 100%; max-width:100%; }

  /* сброс «башни» от h-100 */
  #steps .step-item.h-100{ height:auto !important; }

  /* карточка горизонтальная */
  #steps .step-item{
    flex-direction: row;
    align-items: center;                 /* центрируем круг по высоте карточки */
    text-align: left;
    gap: clamp(14px, 2.8vw, 22px);
    padding: 22px 20px;
  }

  /* цифра слева */
  #steps .step-num{
    margin: 0;
    flex: 0 0 auto;
    align-self: center;                  /* на всякий случай */
  }

  /* текст справа (заголовок над текстом) */
  #steps .step-content{ display:flex; flex-direction:column; justify-content:center; flex:1 1 auto; }
  #steps .step-title{ margin-bottom:.35rem; font-size:1.05rem; font-weight:700; }
}

/* Десктоп (≥1200px): «заголовок повыше», карточки оптически ниже */
@media (min-width: 1200px){
  #steps{ padding-top: clamp(32px, 10vh, 120px); padding-bottom: clamp(32px, 8vh, 96px); }
  #steps .steps-title{ margin-bottom: clamp(12px, 2.5vh, 28px); }
  #steps .row{ margin-top: clamp(12px, 8vh, 96px); }
}

/* Всегда по контенту: снимаем любые 100vh у .screen только для #steps */
#steps, #steps .container, #steps .row{
  height:auto !important; min-height:auto !important; max-height:none !important;
}
#steps.screen{ display:block !important; align-items:stretch !important; }