/*
 * LGK Vision & Mission — style.css
 */

.lgk-vm {
  padding: var(--lgk-space-7) 0;
  background-color: transparent;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.lgk-vm__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: var(--lgk-space-5);
}

/* ── Cột trái: ảnh fill 100% chiều cao cột phải ─────────────────────────── */
.lgk-vm__image-col {
  border-radius: var(--lgk-radius-lg);
  overflow: hidden;
  /* fill toàn bộ chiều cao grid row */
  align-self: stretch;
}

.lgk-vm__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.lgk-vm__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--lgk-blue-100);
}

/* ── Cột phải: 3 hàng bằng nhau, chiều cao tổng vừa phải ────────────────── */
.lgk-vm__cards-col {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--lgk-space-5);
  max-height: 500px;
}

/* Cards + ảnh giữa đều là grid item — tự chia đều */
.lgk-vm__card {
  padding: var(--lgk-space-5) var(--lgk-space-6);
  border-radius: var(--lgk-radius-lg);
  background-color: var(--lgk-blue-100);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.lgk-vm__card--mission {
  background-color: var(--lgk-pink-400);
}

.lgk-vm__card h3 {
  font-family: var(--lgk-font);
  font-weight: var(--lgk-weight-bold);
  font-size: var(--lgk-size-lg);
  color: var(--lgk-blue-900);
  margin: 0 0 var(--lgk-space-2);
}

.lgk-vm__card--mission h3 {
  color: var(--lgk-white);
}

.lgk-vm__card p {
  font-family: var(--lgk-font);
  font-size: var(--lgk-size-sm);
  line-height: var(--lgk-leading-normal);
  color: var(--lgk-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lgk-vm__card--mission p {
  color: var(--lgk-white);
}

/* Ảnh giữa */
.lgk-vm__image2-wrap {
  border-radius: var(--lgk-radius-lg);
  overflow: hidden;
}

.lgk-vm__image2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.lgk-vm__image2-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--lgk-blue-100);
  border-radius: var(--lgk-radius-lg);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lgk-vm__layout {
    grid-template-columns: 1fr;
  }

  .lgk-vm__image-col {
    aspect-ratio: 16 / 9;
  }
}