/*
 * Chuyên mục Tư vấn giám sát (/tu-van-giam-sat/, term 14) — ảnh nền cho Hero chung
 * (.vdt-blog-hero, template-parts/archive-layout.php). Chỉ nạp khi
 * is_category( 'tu-van-giam-sat' ) && ! is_search() (functions.php).
 *
 * Ảnh nền ở wp-content/uploads/anh-nen/, URL do PHP truyền qua
 * --vdt-blog-hero-bg-desktop / --vdt-blog-hero-bg-mobile (modifier .vdt-blog-hero--bg);
 * thiếu file thì giữ gradient mặc định. Mỗi breakpoint chỉ tham chiếu một biến nên
 * trình duyệt chỉ tải một ảnh.
 * - Desktop 1672×941: nửa trái nền sáng trống, công trường + mũ bảo hộ ~45–100% bề rộng.
 *   Ảnh ở ::after (::before là lưới của Hero chung), mask mờ mép trái để không lộ đường nối.
 * - Mobile 800×1421 (ảnh dọc riêng): ~35% phía trên là trời trống cho chữ, kỹ sư ở đáy;
 *   phủ toàn bộ Hero, chiều cao Hero theo tỉ lệ ảnh.
 */

body.category-tu-van-giam-sat .vdt-blog-hero--bg {
  display: flex;
  align-items: center;
  min-height: clamp(400px, 30vw, 540px);
  background: linear-gradient(160deg, #f7fbff 0%, #eef5fd 60%, #e4eefb 100%);
}

body.category-tu-van-giam-sat .vdt-blog-hero--bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 1672 / 941;
  background: var(--vdt-blog-hero-bg-desktop, none) right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 14%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 14%, #000 34%);
  pointer-events: none;
}

/* Lưới trang trí của Hero chung chỉ giữ ở vùng chữ, không đè lên ảnh. */
body.category-tu-van-giam-sat .vdt-blog-hero--bg::before {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%);
}

body.category-tu-van-giam-sat .vdt-blog-hero--bg .vdt-blog-hero__inner {
  width: 100%;
}

body.category-tu-van-giam-sat .vdt-blog-hero--bg .vdt-blog-hero__content {
  max-width: 640px;
}

/* Tablet: mép trái ảnh mờ rộng hơn để chữ luôn dễ đọc. */
@media (max-width: 1199px) {
  body.category-tu-van-giam-sat .vdt-blog-hero--bg {
    min-height: 380px;
  }

  body.category-tu-van-giam-sat .vdt-blog-hero--bg::after {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0, 0, 0, .6) 38%, #000 52%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0, 0, 0, .6) 38%, #000 52%);
  }

  body.category-tu-van-giam-sat .vdt-blog-hero--bg .vdt-blog-hero__content {
    max-width: 560px;
  }
}

/* Mobile: ảnh dọc phủ cả Hero, chữ nằm trên vùng trời; lớp phủ sáng phía trên giữ độ tương phản. */
@media (max-width: 767px) {
  body.category-tu-van-giam-sat .vdt-blog-hero--bg {
    display: block;
    min-height: calc(100vw * 1421 / 800);
    background:
      linear-gradient(180deg, rgba(247, 251, 255, .72) 0%, rgba(247, 251, 255, .45) 34%, rgba(247, 251, 255, 0) 50%),
      var(--vdt-blog-hero-bg-mobile, none) center bottom / cover no-repeat,
      linear-gradient(160deg, #f7fbff 0%, #eef5fd 60%, #e4eefb 100%);
  }

  body.category-tu-van-giam-sat .vdt-blog-hero--bg::after {
    content: none;
    background: none;
  }

  body.category-tu-van-giam-sat .vdt-blog-hero--bg::before {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 30%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 30%);
  }

  body.category-tu-van-giam-sat .vdt-blog-hero--bg .vdt-blog-hero__content {
    max-width: none;
  }
}