/* =============================================================================
   Секция „Попитай ни" (Figma 1:791 „Container"), четено на живо 2026-07-29.
   Вляво: eyebrow + заглавие 48 + интро (Jost Regular) + декоративен колаж
   (3 подсказки 64px икони + 2 извити стрелки, абсолютни позиции от
   дизайна). Вдясно: панел rgba(60,60,60,0.4) р16 с формата — полетата са
   истински input-и с underline (дизайн: бяло 70%), НЕ компоненти (както е
   във файла). Бутонът „Изпрати" е буквалният Disabled вариант; формата НЕ
   е жицната (чака „Контакти" потока, §4) — бутонът е type=button.
   Копи корекции „ти": „вашите"→„твоите", „Пишете"→„Пиши", „Колебаете се…
   Ви трябва? Питайте, ще Ви насочвам"→„Колебаеш се… ти трябва? Питай, ще
   те насочвам", „вашата"→„твоята", „Готови… Кажете докъде сте стигнали…
   ще Ви помогнем"→„Готов… Кажи докъде стигна… ще ти помогнем".
   Mobile: разумен пас.
   ============================================================================= */
.contact {
  padding-block: var(--space-16);
}

.contact-inner {
  max-width: var(--container-narrow); /* дизайн 15:2254: 1132, не 1332 */
  margin: 0 auto;
  padding-inline: var(--space-4);
  display: flex;
  align-items: stretch;
  gap: var(--space-16); /* дизайн: 64px */
}

.contact-info {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 29.875rem; /* 478px (редизайн 15:2256) */
}

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

.contact-heading {
  margin: 0 0 1.125rem; /* дизайн: 18px */
  max-width: 23rem; /* 368px */
  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);
}

.contact-lead {
  margin: 0 0 var(--space-6);
  font-size: var(--text-lg);
  font-weight: 400; /* дизайн: Jost Regular */
  line-height: 1.5; /* Subheading L: 18/1.5 (15:2265) */
  color: var(--color-white);
}

/* Декоративният колаж — позициите са дословни от дизайна */
.contact-collage {
  position: relative;
  width: 27.5625rem; /* 441px */
  height: 20.3125rem; /* 325px (дизайн 15:2266) */
}

.contact-collage img,
.contact-hint {
  position: absolute;
}

.contact-collage-arrow-a {
  left: 5.8125rem; /* 93px */
  top: 4.3125rem; /* 69px */
}

.contact-collage-arrow-b {
  left: 7.875rem; /* 126px */
  top: 9.5rem; /* 152px */
  transform: scaleX(-1);
}

.contact-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.contact-hint p {
  margin: 0;
  font-size: 0.9375rem; /* дизайн: 15px */
  font-weight: 400;
  line-height: 1.5; /* Body S: 15/1.5 (15:2274) */
  color: var(--color-white);
}

.contact-hint img {
  position: static;
  flex-shrink: 0;
}

.contact-hint-a {
  left: 3.8125rem; /* 61px */
  top: 0;
  width: 15.875rem;
}

.contact-hint-b {
  left: 10.1875rem; /* 163px */
  top: 5.4375rem; /* 87px */
  width: 17.375rem;
}

.contact-hint-c {
  left: 0;
  top: 10.25rem; /* 164px */
  width: 11.375rem;
  flex-direction: column;
  gap: 0.3125rem;
  text-align: center;
}

/* --- Формата --------------------------------------------------------------- */
.contact-form {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* дизайн: 20px между групата, съгласията и бутона */
  padding: var(--space-6); /* дизайн: 24px */
  background: color-mix(in srgb, var(--surface-panel) 40%, transparent);
  border-radius: var(--radius-panel);
}

/* Четирите полета са отделна група с 18px помежду си (дизайн 15:2288) */
.contact-fields {
  display: flex;
  flex-direction: column;
  gap: 1.125rem; /* 18px */
  flex: 1;
  min-height: 0;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* дизайн: 12px */
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 70%, transparent);
  padding-bottom: 0;
}

.contact-field label {
  font-family: var(--font-display);
  font-weight: 300;          /* Argent CF Light */
  font-size: var(--text-xl); /* дизайн 15:2290: 20px */
  line-height: 1.5;
  color: var(--color-white);
}

/* „Тема": етикетът и стрелката са на един ред (дизайн 15:2296) */
.contact-field-labelrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.contact-field-labelrow img {
  flex-shrink: 0;
  transform: rotate(180deg);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  background: transparent;
  border: 0;
  outline: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-white);
  resize: vertical;
}

.contact-field-select select {
  appearance: none;
}

.contact-field-message {
  flex: 1;
  min-height: 0;
}

.contact-field-message textarea {
  flex: 1;
  min-height: 0;
  resize: none;
}

.contact-consents {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* дизайн: 6px */
}

.contact-consent {
  display: flex;
  align-items: center; /* дизайн 15:2305: 14px кутия центрирана в 20px ред */
  gap: 0.5625rem; /* дизайн: 9px */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm); /* Body XS: 14px */
  line-height: 1.4;
  color: var(--color-white);
}

.contact-consent a {
  color: var(--color-white);
  text-decoration: underline;
}

.contact-consent input {
  appearance: none;
  width: 0.875rem; /* 14px */
  height: 0.875rem;
  margin: 0;
  background: var(--color-input-border);
  flex-shrink: 0;
  cursor: pointer;
}

.contact-consent input:checked {
  background: var(--color-gold);
}

.contact-submit {
  align-self: flex-start;
  min-width: 9.75rem; /* 156px */
  height: 3rem;       /* 48px (дизайн 15:2314) */
  background: var(--surface-action-dark); /* буквалният Disabled вариант */
  border-color: transparent;
  color: var(--color-white);
  cursor: pointer;
}

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

  .contact-info {
    max-width: none;
  }

  .contact-collage {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .contact-collage img[class^="contact-collage-arrow"] {
    display: none;
  }

  .contact-hint {
    position: static;
    width: auto;
  }

  .contact-hint-c {
    flex-direction: row;
    text-align: left;
  }

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