/* ============================================================
   CAPABILITIES.CSS
   "Technology that Understands Business" section —
   two rows of four capability items, light background.
   ============================================================ */


/* ------------------------------------------------------------
   1. SECTION WRAPPER
   ------------------------------------------------------------ */
.capabilities {
  padding: 60px 0 50px;
  width: 100%;
}

/* Inner content block — max 1000px centred.
   At 1440px viewport (page-wrapper 1408px inner):
   auto margin = (1408 - 1000) / 2 = 204px → total from screen edge = 220px
   matches Figma's px-[162.75px] + centred inner block exactly. */
.capabilities__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;        /* Figma: gap-[28.5px] between heading and grid */
}


/* ------------------------------------------------------------
   2. SECTION HEADING
   ------------------------------------------------------------ */
.cap-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;        /* Figma: gap-[1.5px] */
}

/* "/  capabilites  /" breadcrumb label */
.cap-label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 21px;
  color: #111111;
}

/* "Technology that Understands Business" */
.cap-title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 45px;
  line-height: 52.5px;
  letter-spacing: -0.05em;   /* Figma: -2.25px at 45px */
  color: #111111;
  max-width: 553px;           /* Figma: w-[552.75px] — keeps 2-line break */
}


/* ------------------------------------------------------------
   3. CAPABILITY GRID  (two rows of four items)
   ------------------------------------------------------------ */
.cap-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;       /* Figma: gap-[40.5px] between rows */
  width: 100%;
}

.cap-row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;      /* all items same height → icons align at bottom */
  width: 100%;
}


/* ------------------------------------------------------------
   4. INDIVIDUAL CAPABILITY ITEM
   ------------------------------------------------------------ */
.cap-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* text block top, icon bottom */
  gap: 28px;                       /* Figma: gap-[27.75px] */
  width: 218px;                    /* Figma: w-[217.5px] */
  flex-shrink: 0;
}

/* Text block — title + description */
.cap-item__text {
  display: flex;
  flex-direction: column;
  gap: 13px;                       /* Figma: gap-[12.75px] */
}

.cap-item__title {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  line-height: 26.25px;
  color: #111111;
}

.cap-item__desc {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 22.5px;
  color: #333333;
}


/* ------------------------------------------------------------
   5. ICON BOX  (42×42 grey rounded square)
   ------------------------------------------------------------ */
.cap-icon {
  width: 42px;
  height: 42px;
  background: #e9ebed;
  border-radius: 11px;         /* Figma: rounded-[11.25px] */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cap-icon img {
  width: 21px;
  height: 21px;
  display: block;
  object-fit: contain;
}


/* ------------------------------------------------------------
   6. RESPONSIVE
   ------------------------------------------------------------ */

/* Tablet (≤ 1060px) — inner block gains side padding */
@media (max-width: 1060px) {
  .capabilities__inner {
    padding: 0 24px;
  }
}

/* Mid-tablet (≤ 900px) — 2 columns per row */
@media (max-width: 900px) {
  .cap-row {
    flex-wrap: wrap;
    gap: 32px;
  }

  .cap-item {
    width: calc(50% - 16px);
  }
}

/* Mobile (≤ 600px) — single column */
@media (max-width: 600px) {
  .capabilities {
    padding: 48px 0 36px;
  }

  .cap-title {
    font-size: 34px;
    line-height: 42px;
  }

  .cap-row {
    gap: 24px;
  }

  .cap-item {
    width: 100%;
  }
}