/*
 * Chuyên mục Quản lý vận hành chung cư (/quan-ly-van-hanh-chung-cu/, term 18) — ảnh nền
 * cho Hero chung (.vdt-blog-hero, template-parts/archive-layout.php). Chỉ nạp khi
 * is_category( 'quan-ly-van-hanh-chung-cu' ) && ! 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. Ảnh gốc 1672×941: nửa trái là nền sáng trống, tòa nhà
 * nằm ~45–100% bề rộng. Ảnh nằm ở ::after (::before là lưới của Hero chung) với mask
 * làm mờ mép trái để không lộ đường nối với nền.
 */

body.category-quan-ly-van-hanh-chung-cu .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-quan-ly-van-hanh-chung-cu .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-quan-ly-van-hanh-chung-cu .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-quan-ly-van-hanh-chung-cu .vdt-blog-hero--bg .vdt-blog-hero__inner {
  width: 100%;
}

body.category-quan-ly-van-hanh-chung-cu .vdt-blog-hero--bg .vdt-blog-hero__content {
  max-width: 640px;
}

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

  body.category-quan-ly-van-hanh-chung-cu .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-quan-ly-van-hanh-chung-cu .vdt-blog-hero--bg .vdt-blog-hero__content {
    max-width: 560px;
  }
}

/* Mobile: chữ ở trên, ảnh tòa nhà (bản cắt phải 800×716) ở dưới nút; đỉnh ảnh hòa vào nền. */
@media (max-width: 767px) {
  body.category-quan-ly-van-hanh-chung-cu .vdt-blog-hero--bg {
    display: block;
    min-height: 0;
    padding-bottom: calc(66vw + 8px);
  }

  body.category-quan-ly-van-hanh-chung-cu .vdt-blog-hero--bg::after {
    top: auto;
    right: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    aspect-ratio: 800 / 716;
    background: var(--vdt-blog-hero-bg-mobile, none) center bottom / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .6) 22%, #000 40%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .6) 22%, #000 40%);
  }

  body.category-quan-ly-van-hanh-chung-cu .vdt-blog-hero--bg::before {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 40%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 40%);
  }

  body.category-quan-ly-van-hanh-chung-cu .vdt-blog-hero--bg .vdt-blog-hero__content {
    max-width: none;
  }
}