/* СТРАНИЦА „ЗА НАС“: Регистрационни данни, текстово съдържание и изображения */

/* ============================================================
   ОСНОВЕН КОНТЕЙНЕР НА СТРАНИЦАТА
   - ограничена ширина 1100–1200px за четими редове
   - отстояние от хедъра, за да няма застъпване
   ============================================================ */
.about-page {
  /* Малко отстояние под общата заглавна лента — картата е с margin:30px, така се избягва прекалено голяма празна зона */
  padding-top: 8px;
  padding-bottom: 64px;
}
.about-page .container {
  max-width: 1160px;
}

/* ============================================================
   РЕГИСТРАЦИОНЕН БЛОК (зелена карта с фирмените регистрации)
   - не заема цялата ширина на голям монитор (ограничен е)
   - двете регистрации са ясно разделени с разделител
   - на широк екран стоят една до друга, на мобилен – една под друга
   ============================================================ */
.company-registration-card {
  max-width: 580px;
  margin: 24px auto;
  padding: 16px 22px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #0d851f 0%, #4caf50 100%);
  border: 2px solid #076414;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(13, 133, 31, 0.3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 24px;
}
/* Всяка регистрация (Уганда / Великобритания) */
.company-registration-section {
  flex: 1 1 220px;
  min-width: 0;
}
/* „Registered company in …“ — второстепенен надпис, по-малки букви */
.company-registration-title {
  font-size: 0.75rem;    /* 12px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.9;
  margin-bottom: 4px;
}
/* Име на компанията — най-важното, по-едри букви */
.company-registration-name {
  margin-bottom: 4px;
  font-size: 1.0625rem;  /* 17px */
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.company-registration-number {
  font-size: 0.8125rem;  /* 13px */
  margin-bottom: 3px;
  /* дълъг номер да не излиза извън картата на мобилен */
  overflow-wrap: anywhere;
}
.company-registration-tax {
  font-size: 0.6875rem;  /* 11px */
  overflow-wrap: anywhere;
}
.company-registration-registry {
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
}
.company-registration-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin-top: 7px;
  padding: 4px 14px;
  color: #076414;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.company-registration-check:hover,
.company-registration-check:focus-visible {
  color: #076414;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
/* Вертикален разделител между двете регистрации (на широк екран) */
.company-registration-divider {
  width: 1px;
  align-self: stretch;
  min-height: 60px;
  background: rgba(255, 255, 255, 0.35);
}

/* ============================================================
   ТЕКСТОВО СЪДЪРЖАНИЕ „ЗА НАС“
   - четлив размер и равномерни разстояния между абзаците
   ============================================================ */
.about-section {
  padding: 0;
}
.about-content {
  color: var(--text, #2b2b2b);
  font-size: 1.0625rem;  /* ~17px */
  line-height: 1.75;
}
.about-content p {
  margin: 0 0 20px;
}
.about-content strong {
  color: var(--green-dark, #143620);
}

/* ============================================================
   ИЗОБРАЖЕНИЯ В СЪДЪРЖАНИЕТО
   - редуват се ляво/дясно спрямо текста на широк екран
   - запазени пропорции, не излизат извън контейнера
   - надписите под тях са центрирани
   ============================================================ */
.founder-image-container,
.kim-image-container,
.about-image-container,
.gorilla-image-container {
  margin: 10px 0 24px;
  max-width: 360px;
}
/* Снимката на основателя стои вдясно до свързания текст */
.founder-image-container {
  float: right;
  margin-left: 32px;
}
/* Снимката на Ким стои вляво и текстът на статията я обтича */
.kim-image-container {
  float: left;
  margin-right: 32px;
}
/* Снимката от Queen Elizabeth стои вляво */
.about-image-container {
  float: left;
  margin-right: 32px;
}
/* Снимката на горилата стои вдясно (редуване) */
.gorilla-image-container {
  float: right;
  margin-left: 32px;
}
/* Самите изображения: адаптивни, със запазени пропорции */
.founder-image,
.kim-image,
.about-image,
.gorilla-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
/* Надпис под изображението (центриран, курсив) */
.image-caption {
  margin-top: 8px;
  font-size: 0.875rem;
  font-style: italic;
  text-align: center;
  color: var(--muted, #666);
}

/* Изчистване на обтичането след последния плаващ елемент,
   без нужда от празни <div style="clear:both"> в HTML */
.about-content::after {
  content: "";
  display: block;
  clear: both;
}

/* На desktop картата е разширена с още 25% (771px → 964px) */
@media (min-width: 901px) {
  .company-registration-card {
    max-width: 964px;
  }
}

/* ============================================================
   RESPONSIVE — ТАБЛЕТ И ПО-МАЛКИ (≤ 900px)
   изображенията минават на собствен ред, текстът не ги обтича
   ============================================================ */
@media (max-width: 900px) {
  .founder-image-container,
  .kim-image-container,
  .about-image-container,
  .gorilla-image-container {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   RESPONSIVE — МОБИЛНИ (≤ 600px)
   регистрационният блок се събира вертикално, номерата остават в екрана
   ============================================================ */
@media (max-width: 600px) {
  .about-page {
    padding-top: 28px;
  }
  .about-content {
    font-size: 1rem;     /* 16px за мобилни */
    line-height: 1.7;
  }
  /* Регистрациите една под друга + хоризонтален разделител */
  .company-registration-card {
    flex-direction: column;
    gap: 14px;
    padding: 20px 18px;
  }
  /* В колонен режим flex-basis важи за височината — нулираме го, за да няма празно място */
  .company-registration-section {
    flex: 0 0 auto;
  }
  .company-registration-divider {
    width: 80px;
    min-height: 1px;
    height: 1px;
    align-self: center;
  }
  /* Изображенията заемат пълната ширина на реда */
  .founder-image-container,
  .about-image-container,
  .gorilla-image-container {
    max-width: 100%;
  }
}