/* ============================================
   СИСТЕМА-ІНВЕСТ — Сторінка «Про компанію»
   ЛИШЕ нові/унікальні блоки: intro / mission-vision / principles /
   history / capabilities / info-split (image+text).
   Реюз (не дублювати!) зі style.css + kartonna.css:
   header/footer (партіали), breadcrumb-bar, metrics, contact-cta,
   kt-h2/kt-sub/.accent, .section, .container(-narrow), .btn.

   Типографіка звірена 1:1 з Figma-експортом design/about_page_figma.*:
   заголовки/мітки/цифри — Gilroy (--font-display); текст/тайтли принципів — Inter (--font-body).
   Колір тексту — СУЦІЛЬНИЙ navy #002343 (var(--color-navy)), не приглушений;
   teal (--color-teal) — лише акценти (іконки, активний рік, .accent). lh: заголовки ~1.2, текст ~1.5.
   ============================================ */

/* ---------- Intro (Про компанію: H1 зліва + центрований лід-блок) ---------- */
.about-intro-title {
  font-family: var(--font-display);
  font-weight: 700;                       /* Gilroy Bold */
  text-transform: uppercase;
  color: var(--color-navy);
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.2;
  letter-spacing: 0.3px;
  margin: 0 0 40px;
}
.about-lead { max-width: 660px; margin: 0 auto; }   /* текстовий блок — по центру сторінки */
/* ⚠️ theme-only [bugfix 18]: 1:1 як .mv-title (24 фікс., uppercase).
   Специфічність .about-lead p.about-lead-title (0,2,1) — інакше .about-lead p (0,1,1)
   перебиває клас і заголовок рендериться Inter 16 (саме це й було багом). */
.about-lead p.about-lead-title,
.about-lead-title {
  font-family: var(--font-display);
  font-weight: 700;                       /* Gilroy Bold 24 */
  text-transform: uppercase;
  color: var(--color-navy);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  margin: 0 0 22px;
}
.about-lead p {
  font-family: var(--font-body);
  color: var(--color-navy);
  line-height: 1.5;
  font-size: 16px;
  margin: 0 0 16px;
}
.about-lead p:last-child { margin-bottom: 0; }

/* Місія/Візія — H3-тір (24px), тож перекриваємо глобальний .section h2 (54).
   Специфічність .section h2.mv-title (0-2-1) > .section h2 (0-1-1). */
.section h2.mv-title { font-size: clamp(20px, 2vw, 24px); }

/* ---------- Місія / Візія (2 колонки, центральний вертикальний роздільник) ---------- */
.mv-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 980px;
  margin: 0 auto;
}
.mv-grid::before {                 /* роздільник по центру між колонками */
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: 1px;
  background: var(--color-teal);
  transform: translateX(-50%);
}
.mv-title {
  font-family: var(--font-display);
  font-weight: 700;                       /* Gilroy Bold 24 */
  text-transform: uppercase;
  color: var(--color-navy);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  margin: 0 0 22px;
}
.mv-body p {
  font-family: var(--font-body);
  color: var(--color-navy);
  line-height: 1.5;
  font-size: 16px;
  margin: 0 0 18px;
}
.mv-body p:last-child { margin-bottom: 0; }
.mv-body p.mv-lead { font-weight: 600; }   /* лід-абзац — Inter SemiBold */

/* ---------- Наші принципи (6 пунктів, 2 колонки, іконка + тайтл + текст) ---------- */
.principles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 120px;
  margin: 48px auto 0;   /* ⚠️ theme-only [bugfix 19]: на всю ширину контейнера (було max-width 1120) — уніфікація з marking */
}
.principle-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.principle-icon { color: var(--color-teal); display: inline-flex; flex-shrink: 0; }  /* іконка — teal */
/* Іконка принципу в темі = завантажене зображення (не inline-SVG). ⚠️ ДОДАНО В ТЕМІ понад статику. */
.principle-icon img { width: 24px; height: 24px; object-fit: contain; }   /* ⚠️ theme-only [bugfix 19]: 24 (було 22) */
.principle-title {
  font-family: var(--font-body);
  font-weight: 600;                       /* Inter SemiBold */
  text-transform: uppercase;
  color: var(--color-navy);               /* navy, НЕ teal */
  font-size: 16px;
  letter-spacing: 0.3px;
  margin: 0;
}
.principle p {
  font-family: var(--font-body);
  margin: 0;
  padding-left: 34px;
  color: var(--color-navy);
  line-height: 1.5;
  font-size: 16px;
}

/* ---------- Історія розвитку (картка: сітка років + опис) ---------- */
.history-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 56px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 44px rgba(0, 35, 67, 0.07);
  padding: 44px 48px;
  max-width: 1000px;
  margin: 48px auto 0;
}
.history-years {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 22px 30px;
  align-content: start;
}
.history-year {
  font-family: var(--font-display);
  font-weight: 600;                       /* Gilroy SemiBold 20 */
  font-size: 20px;
  color: var(--color-navy);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}
.history-year:hover { color: var(--color-teal-light); }
.history-year.is-active { color: var(--color-teal); }
.history-detail { border-left: 1px solid var(--color-teal); padding-left: 40px; }   /* бірюзова лінія, як у дизайні */
.history-detail-title {
  font-family: var(--font-display);
  font-weight: 700;                       /* Gilroy Bold 24 */
  text-transform: uppercase;
  color: var(--color-navy);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  margin: 0 0 16px;
}
.history-detail p { margin: 0 0 12px; font-family: var(--font-body); color: var(--color-navy); line-height: 1.5; font-size: 16px; }   /* ⚠️ theme-only [bugfix 20]: абзаци */
.history-detail p:last-child { margin-bottom: 0; }

/* ---------- Виробничі можливості (фото + сітка navy-карток) ---------- */
.capabilities-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: stretch;
  margin-top: 48px;
}
.capabilities-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}
.cap-label {
  font-family: var(--font-display);
  font-weight: 700;                       /* Gilroy Bold 24 */
  text-transform: uppercase;
  color: var(--color-navy);
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: 0.3px;
  line-height: 1.3;
  margin: 0 0 24px;
}
.cap-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cap-card {
  background: var(--color-navy);
  color: #fff;
  border-radius: 12px;
  padding: 26px 24px;
  min-height: 118px;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;                       /* Inter SemiBold 16 */
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.3px;
  line-height: 1.4;
}

/* ---------- Info-split (фото + текст: «Якість і контроль», «Чому обирають») ---------- */
.info-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;   /* дефолт; перекривається опцією вертикального вирівнювання */
  margin-top: 48px;
}
/* Опція вертикального вирівнювання колонок (тулбар блоку): верх / низ. */
.info-split.is-valign-top .info-split-grid { align-items: start; }
.info-split.is-valign-bottom .info-split-grid { align-items: end; }
.info-split-media img { width: 100%; border-radius: 18px; display: block; }
.info-split-body h3 {
  font-family: var(--font-body);
  font-weight: 700;                       /* Inter Bold, підзаголовок «Виробничі партнери» */
  text-transform: uppercase;
  color: var(--color-navy);
  font-size: 16px;
  letter-spacing: 0.2px;
  margin: 8px 0 12px;
}
.info-split-body p {
  font-family: var(--font-body);
  color: var(--color-navy);
  line-height: 1.5;
  font-size: 16px;
  margin: 0 0 18px;
}
.info-split-body p:last-child { margin-bottom: 0; }
.info-split-body p.is-strong {           /* виділений абзац: Gilroy SemiBold 20 */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 20px);
  line-height: 1.35;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .mv-grid { grid-template-columns: 1fr; gap: 0; }
  .mv-grid::before { display: none; }                    /* вертикальну лінію ховаємо */
  .mv-col + .mv-col {                                     /* горизонтальний роздільник між блоками */
    border-top: 1px solid var(--color-teal);
    margin-top: 36px;
    padding-top: 36px;
  }
  .principles-grid { grid-template-columns: 1fr; gap: 32px; max-width: 560px; }
  .history-card { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
  .history-detail { border-left: 0; border-top: 1px solid var(--color-teal); padding-left: 0; padding-top: 28px; }
  .capabilities-grid { grid-template-columns: 1fr; gap: 32px; }
  .info-split-grid { grid-template-columns: 1fr; gap: 32px; }
  .info-split.is-reverse .info-split-media { order: -1; }
}
@media (max-width: 560px) {
  .cap-cards { grid-template-columns: 1fr; }
  .history-years { grid-template-columns: repeat(4, auto); }
  .history-card { padding: 28px 24px; }
}