/* =============================================================================
   Секция „От въпросник до доклад" (Figma 1:460 „Frame 39"), четено на живо
   2026-07-29. Заглавен ред (eyebrow + H2 48px със златен курсивен акцент),
   после 3 равни колони gap 14: икона 48 + заглавие 24 + текст 18, снимка
   435×345 радиус 8 (рендери @2x, изрязани както в дизайна).
   Копи корекции „ти": „Вашите отговори"→„твоите отговори", „Попълвате"→
   „Попълваш", „Отговаряте"→„Отговаряш", „знаете"→„знаеш", „Отговорите Ви"→
   „Отговорите ти", „вашите данни"→„твоите данни", „Получавате"→„Получаваш".
   Mobile: разумен пас, без Figma вариант.
   ============================================================================= */
.steps {
  padding: 0; /* дизайн 15:1901: отстъпите са в децата */
}

.steps-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--space-4);
}

.steps-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* дизайн: 24px */
  padding-top: var(--space-16);    /* дизайн: pt-[64px], блокът е 224px */
  padding-bottom: var(--space-16); /* дизайн: gap 64px до решетката */
}

.steps-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.4; /* caption-XL: 14/1.4 → ред 20px */
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  text-shadow: var(--shadow-text);
}

.steps-heading {
  margin: 0;
  max-width: 35.5625rem; /* 569px (редизайн 15:1903) */
  font-family: var(--font-display);
  font-weight: 300;   /* Argent CF Light; placeholder-ът няма 300 — стойността е точната от дизайна */
  font-size: var(--text-4xl);
  line-height: 1.2;
  color: var(--color-white);
}

.steps-accent {
  font-style: italic;
  font-weight: 300;
  color: var(--color-gold);
}

  /* решетката носи долния отстъп на секцията */
.steps-grid {
  padding-bottom: var(--space-16);
  display: flex;
  align-items: stretch;
  gap: 1rem; /* дизайн 15:1911: 16px */
}

.steps-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* дизайн: 24px */
}

.steps-step-stretch {
  justify-content: space-between;
}

.steps-step-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4); /* дизайн 15:1913: 16px */
}

.steps-step-head > img {
  flex-shrink: 0;
}

.steps-step-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* дизайн 15:1916: 8px */
  min-width: 0;
}

.steps-step-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;   /* Argent CF Light */
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: 0.02em; /* дизайн: 0.48px при 24px */
  color: var(--color-white);
}

.steps-step-desc {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 400;  /* дизайн 15:1918: Jost Regular */
  line-height: 1.5;
  color: var(--color-white);
  text-shadow: var(--shadow-text);
}

.steps-photo {
  display: block;
  width: 100%;
  height: 21.5625rem; /* 345px */
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* --- Mobile (разумен пас, без Figma вариант) ------------------------------ */
@media (max-width: 64em) {
  .steps-grid {
    flex-direction: column;
    gap: var(--space-12);
  }

  .steps-heading {
    font-size: var(--text-3xl);
  }

  .steps-photo {
    height: auto;
    aspect-ratio: 435 / 345;
  }
}