/* ==========================================================================
   KOBIL — Secure Messenger & Documents — Section: AI at the Core
   Figma: desktop 6154:78162 (1360x630 — px 40 py 80, gap 130, copy 558,
   photo 592x470 r=20) · mobile 6149:69693 (369x717 — copy 337, photo
   337x267.7 below it).
   ========================================================================== */

.sec-smd-ai {
  display: flex;
  align-items: center;
  gap: var(--w130);
  width: 100%;
  padding: var(--w80) var(--w40);
}

.smd-ai__copy {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--w28);
  width: var(--w558);
}

.smd-ai__title {
  display: flex;
  gap: var(--w12);
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
  white-space: nowrap;
}

.smd-ai__title-accent { color: var(--blue); }

/* Desktop spaces the title and all three items evenly (28); the phone frame
   uses 32 after the title and 24 between the items. */
.smd-ai__items {
  display: flex;
  flex-direction: column;
  gap: var(--w28);
}

.smd-ai__item {
  display: flex;
  flex-direction: column;
  gap: var(--w8);
}

.smd-ai__item-title {
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 600;
  line-height: var(--w26);
  color: var(--navy);
}

.smd-ai__item-text {
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy-70);
}

.smd-ai__photo {
  flex: none;
  width: var(--w592);
  height: var(--w470);
  max-width: none;
  border-radius: var(--w20);
  object-fit: cover;
}

@media (max-width: 768px) {
  .sec-smd-ai {
    flex-direction: column;
    align-items: stretch;
    gap: var(--m32);
    padding: var(--m60) var(--m16) var(--m20);
  }

  .smd-ai__copy { width: 100%; gap: var(--m32); }
  .smd-ai__items { gap: var(--m24); }
  .smd-ai__title { gap: var(--m12); font-size: var(--m34); line-height: 1.2; }
  .smd-ai__item { gap: var(--m8); }
  .smd-ai__item-title { font-size: var(--m18); line-height: var(--m24); }
  .smd-ai__item-text { font-size: var(--m14); line-height: var(--m20); }

  .smd-ai__photo {
    width: 100%;
    height: var(--m267);
    border-radius: var(--m20);
  }
}