/* ============================================================
   HOME-VE-ECOLUX.CSS — Khối "Về Ecolux" trang chủ (v1.23.0)
   ------------------------------------------------------------
   Khối MỚI ở cuối trang chủ: cột chữ (eyebrow + tiêu đề + mô tả
   + 1 nút CTA) bên trái, 3 ảnh nằm ngang bên phải/trên (mobile
   cuộn ngang), 4 mục năng lực (icon + tiêu đề + mô tả) nằm ngang
   bên dưới (mobile 2×2).

   NỀN TỐI: dùng .section--dark (base.css) — --color-bg-inverse /
   --color-text-inverse tự đảo màu đúng theo :root[data-theme] mà
   KHÔNG cần khai báo lại ở đây (nền tối trong CẢ light lẫn dark
   theme của site, đúng yêu cầu "khớp dark theme site").

   ⚠️ base.css có rule element-selector "h1..h6{color:...}" và
   "p{color:...}" (đặt màu chữ TỐI mặc định) — các rule này áp
   trực tiếp lên chính thẻ, KHÔNG bị màu kế thừa từ .section--dark
   ghi đè (thuộc tính khai báo trực tiếp luôn thắng giá trị kế
   thừa, bất kể specificity). Vì vậy MỌI phần tử chữ trong khối
   này đều phải khai màu tường minh — mượn đúng cặp token
   --color-footer-* (footer cũng là "nền tối cố định" tương tự,
   và --color-footer-bg trùng giá trị với --color-bg-inverse ở CẢ
   hai theme ⇒ tương phản luôn đạt chuẩn).

   File MỚI, BỔ SUNG — KHÔNG sửa 6 file CSS Phase 1
   (tokens/base/components/layout/products/pages) và KHÔNG sửa
   home-services.css/home-quy-trinh.css. Chỉ nạp trên trang chủ
   (xem inc/enqueue.php), sau ecolux-pages.
   ============================================================ */

/* ── Nhịp khối ─────────────────────────────────────────────── */
.about-ecolux-section {
  padding-block: var(--section-py-sm);
}

@media (min-width: 768px) {
  .about-ecolux-section {
    padding-block: var(--section-py-md);
  }
}

@media (min-width: 1280px) {
  .about-ecolux-section {
    padding-block: var(--section-py-lg);
  }
}

/* ── Hàng trên: chữ trái + ảnh phải (mobile-first: xếp chồng) ── */
.about-ecolux__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .about-ecolux__top {
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
  }

  .about-ecolux__content {
    flex: 0 0 auto;
    width: 38%;
    min-width: 320px;
  }

  .about-ecolux__images {
    flex: 1 1 auto;
    min-width: 0; /* chống tràn ngang trong flex item */
  }
}

/* ── Cột chữ ───────────────────────────────────────────────── */
.about-ecolux__eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary); /* vàng brand — đọc rõ trên nền tối */
}

.about-ecolux__heading {
  margin: 0 0 var(--space-4);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-footer-heading); /* ghi đè rule h1..h6 (màu tối) của base.css */
}

@media (min-width: 768px) {
  .about-ecolux__heading {
    font-size: var(--text-4xl);
  }
}

.about-ecolux__desc {
  margin: 0 0 var(--space-6);
  max-width: 52ch;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-footer-text); /* ghi đè rule p (màu tối) của base.css */
}

.about-ecolux__cta {
  margin-top: var(--space-2);
}

/* ── 3 ảnh ─────────────────────────────────────────────────── */
.about-ecolux__images {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0 0 var(--space-2); /* chỗ cho thanh cuộn không đè lên ảnh */
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.about-ecolux__images::-webkit-scrollbar {
  height: 6px;
}

.about-ecolux__images::-webkit-scrollbar-thumb {
  background-color: var(--color-footer-border);
  border-radius: var(--radius-full);
}

.about-ecolux__image-item {
  flex: 0 0 68%;
  max-width: 280px;
  scroll-snap-align: start;
  border-radius: var(--radius-xl);
  overflow: hidden; /* bo góc ảnh theo card, không tràn */
  box-shadow: var(--shadow-lg);
}

.about-ecolux__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover; /* ảnh không bao giờ méo/tràn dù tỉ lệ gốc khác */
}

@media (min-width: 640px) {
  .about-ecolux__image-item {
    flex: 0 0 45%;
    max-width: 320px;
  }
}

/* Desktop: hết cuộn ngang, 3 ảnh chia đều theo cột phải */
@media (min-width: 1024px) {
  .about-ecolux__images {
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .about-ecolux__image-item {
    flex: 1 1 0;
    min-width: 0; /* chống tràn ngang, cho phép co */
    max-width: none;
  }
}

/* ── 4 mục năng lực ────────────────────────────────────────── */
.about-ecolux__features {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--color-footer-border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile: 2×2 */
  gap: var(--space-6) var(--space-5);
}

@media (min-width: 768px) {
  .about-ecolux__features {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* tablet+/desktop: 1 hàng ngang */
    gap: var(--space-6);
  }
}

.about-ecolux__feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0; /* chống tràn ngang khi mô tả dài */
}

.about-ecolux__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background-color: var(--color-primary-subtle);
  border-radius: var(--radius-lg);
}

.about-ecolux__feature-icon-svg {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
}

.about-ecolux__feature-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: var(--color-footer-heading); /* ghi đè rule h1..h6 (màu tối) của base.css */
}

.about-ecolux__feature-desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-footer-muted); /* ghi đè rule p (màu tối) của base.css */
}

/* ── Giảm chuyển động cho người bật prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .about-ecolux__images {
    scroll-behavior: auto;
  }
}