/* ============================================================
   HOME-SERVICES.CSS — Khối "Dịch vụ" trang chủ (v1.42.0)
   ------------------------------------------------------------
   CHANGELOG v1.42.0: MOBILE (<640px, services-grid còn 1 cột)
   — .service-card (biến thể icon, KHÔNG ảnh) đổi sang
   flex-direction:row (icon trái – chữ phải), icon-wrap thu về
   48px để ĐỒNG NHẤT với .usp-item trên mobile (components.css).
   Chỉ CSS, chỉ mobile 1 cột; ≥640px giữ icon-trên như cũ. Xem
   block @media (max-width: 639.98px) cuối file.

   CHANGELOG v1.36.0: THÊM ẢNH thay icon (tuỳ chọn, sub-field
   'service_image'). Thẻ có ảnh nhận thêm modifier
   .service-card--has-image: bỏ padding phần bọc ngoài, ảnh
   .service-card__image-wrap tràn ngang + bo góc trên (giống
   .product-card__image-wrap), phần chữ chuyển padding sang
   .service-card__content — thẻ vẫn cùng khung/bóng/hover như
   trước. Thẻ CHƯA có ảnh giữ nguyên 100% layout icon-wrap cũ
   (byte-identical). Dùng toàn semantic token ⇒ đẹp cả 2 theme,
   không cần khai báo riêng cho dark mode.

   CHANGELOG v1.12.0: Lưới card đổi từ 1→2→3 cột sang
   1 (mobile) → 2 (≥640) → 3 (≥768) → 5 (≥1024). Ở desktop
   5 card nằm CÙNG 1 HÀNG NGANG. Card hẹp lại (~200px) nên ở
   ≥1024 giảm nhẹ gap lưới + padding/gap trong card cho cân,
   dùng minmax(0,1fr) chống tràn. KHÔNG đụng màu — dark mode
   giữ nguyên.
   ------------------------------------------------------------
   File MỚI, BỔ SUNG — KHÔNG sửa 6 file CSS Phase 1
   (tokens/base/components/layout/products/pages). Chỉ nạp trên
   trang chủ (xem inc/enqueue.php), sau ecolux-pages.

   Toàn bộ giá trị dùng SEMANTIC TOKEN (--color-surface, --color-text-*,
   --color-primary*, --shadow-*, --radius-*, --space-*) ⇒ dark mode
   (:root[data-theme="dark"] trong tokens.css) tự động lan tới đây,
   KHÔNG cần khai báo lại màu cho chế độ tối.

   Nhịp khối (padding-block) khớp đúng .usp-section / .spaces-section
   trong layout.css để các khối trang chủ đều nhau.
   ============================================================ */

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

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

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

/* ── Lưới card ─────────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Điện thoại lớn / tablet dọc hẹp: 2 cột */
@media (min-width: 640px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* Tablet: 3 cột (5 card không nhét vừa tablet mà không bị bóp quá nhỏ) */
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop: 5 card TRÊN 1 HÀNG NGANG.
   Card hẹp lại (~200px ở container 1200px) ⇒ thu gap lưới về
   space-4 và giảm nhẹ padding/gap trong card ở dưới cho cân đối.
   minmax(0,1fr) bảo đảm track co được, không tràn ngang. */
@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .service-card {
    padding: var(--space-5);
    gap: var(--space-3);
  }
}

/* ── Card ──────────────────────────────────────────────────── */
.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  height: 100%;
  padding: var(--card-padding);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}

@media (hover: hover) {
  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary);
  }
}

/* ── Icon ──────────────────────────────────────────────────── */
.service-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background-color: var(--color-primary-subtle);
  border-radius: var(--radius-lg);
}

.service-card__icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}

/* ── Nội dung ──────────────────────────────────────────────── */
.service-card__content {
  flex: 1;
}

.service-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-heading);
}

.service-card__desc {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* ── Ảnh dịch vụ (v1.36.0) — thay thế icon khi có ảnh ─────────
   Ratio 4:3: đủ cao để thấy rõ ảnh ở card hẹp (~200px, desktop
   5 cột) mà không kéo hàng cao quá mức so với thẻ dùng icon.
   overflow:hidden nằm ở .service-card--has-image (bo cả khối)
   + border-radius riêng ở đây cho chắc góc trên (Safari). */
.service-card__image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.service-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-default);
}

@media (hover: hover) {
  .service-card:hover .service-card__image {
    transform: scale(1.03);
  }
}

/* ── Biến thể CÓ ẢNH (v1.36.0) ─────────────────────────────────
   Selector kép .service-card.service-card--has-image (đặc thù
   0,0,2,0) để LUÔN thắng rule .service-card gốc — kể cả rule
   trong @media (min-width:1024px) ở trên đặt padding/gap riêng
   cho desktop — bất kể thứ tự khai báo trong file. Ảnh tràn hết
   viền thẻ (không padding), phần chữ lấy lại padding ở
   .service-card__content, gap giữa ảnh và chữ = 0 (khoảng cách
   thực tế đến từ padding-top của .service-card__content). */
.service-card.service-card--has-image {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.service-card.service-card--has-image .service-card__content {
  padding: var(--card-padding);
}

/* ── Biến thể CÓ LINK (v1.28.0) ───────────────────────────────
   Cùng cơ chế a.space-card (v1.27.0, components.css): khi có link,
   class .service-card chuyển thẳng sang thẻ <a> (không phải <li>
   hay div lồng bên trong) ⇒ toàn bộ CSS .service-card/.service-card:hover
   ở trên áp dụng y nguyên (kể cả "nâng shadow nhẹ" khi hover đã có
   sẵn), KHÔNG cần rule layout mới, KHÔNG đụng .service-card khi nó
   nằm trên <li> (thẻ không link). Chỉ bổ sung 2 rule dưới đây, chỉ
   nhắm riêng biến thể <a>. */
a.service-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.service-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Ảnh dịch vụ — padding chữ ở desktop (v1.36.0) ─────────────
   Đặt Ở CUỐI FILE (không lồng trong @media 1024 phía trên) để
   chắc chắn thắng rule ".service-card.service-card--has-image
   .service-card__content { padding: var(--card-padding) }" ở
   trên — cùng độ đặc thù (0,0,3,0), CSS lấy rule khai báo SAU
   khi hoà điểm, nên phải đứng sau trong file mới có tác dụng.
   Khớp đúng mức đã thu gọn desktop (var(--space-5)) mà thẻ dùng
   icon đang dùng, để 2 kiểu thẻ cân nhau trên cùng một hàng. */
@media (min-width: 1024px) {
  .service-card.service-card--has-image .service-card__content {
    padding: var(--space-5);
  }
}

/* ── v1.42.0: Mobile 1 cột (<640px) — icon TRÁI, chữ PHẢI ──────
   Chủ site chốt: khối Dịch vụ và khối USP (.usp-item, components.css)
   phải nhìn ĐỒNG NHẤT trên điện thoại. .usp-item đã là row (icon trái –
   chữ phải) ở mọi mobile/tablet <1280px; ở đây áp cùng kiểu cho
   .service-card NHƯNG chỉ khi .services-grid còn 1 CỘT (<640px, xem
   dòng 62 phía trên) — từ 640px trở lên card vào lưới 2/3/5 cột, thẻ
   hẹp lại nên GIỮ icon-trên như cũ để chữ không bị bóp quá hẹp.
   Loại trừ .service-card--has-image: ảnh 4:3 tràn ngang không đặt bên
   trái được, biến thể ảnh GIỮ NGUYÊN dọc (ảnh trên – chữ dưới).
   icon-wrap 48px + icon 24px = ĐÚNG cỡ .usp-item__icon-wrap/__icon
   trên mobile (components.css dòng ~1510-1525) để 2 khối cân nhau.
   KHÔNG cần chỉnh gap/padding vì .service-card đã dùng chung token
   --space-4 / --card-padding với .usp-item (dòng 93-99 phía trên và
   components.css dòng ~1486-1492) — sẵn khớp nhau. */
@media (max-width: 639.98px) {
  .service-card:not(.service-card--has-image) {
    flex-direction: row;
    align-items: flex-start;
  }

  .service-card:not(.service-card--has-image) .service-card__icon-wrap {
    width: 48px;
    height: 48px;
  }

  .service-card:not(.service-card--has-image) .service-card__icon {
    width: 24px;
    height: 24px;
  }
}