/* ============================================================
   Xuzhou Xuzhirui Technology Co., Ltd - Image Assets Config
   Background image URL configuration
   Modify this file to update all background images across the site
   ============================================================ */

:root {
  /* ========== Homepage ========== */
  --img-home-hero:       url('../images/home-hero.jpg');
  --img-home-services:   url('../images/home-services.jpg');

  /* ========== Service Page ========== */
  --img-service-hero:    url('../images/service-hero.jpg');
  --img-service-integ:   url('../images/service-integ.jpg');

  /* ========== About Page ========== */
  --img-about-hero:      url('../images/about-hero.jpg');
  --img-about-philosophy: url('../images/about-philosophy.jpg');

  /* ========== Contact Page ========== */
  --img-contact-hero:    url('../images/contact-hero.jpg');
  --img-contact-partner: url('../images/contact-partner.jpg');

  /* ========== Homepage Value Cards ========== */
  --img-card-essentials:  url('../images/card-essentials.jpg');
  --img-card-visibility:  url('../images/card-visibility.jpg');
  --img-card-sme:         url('../images/card-sme.jpg');
}

/* ========== Background Image Utility Classes ========== */
.hero-bg              { background-image: var(--img-home-hero); }
.services-preview-bg  { background-image: var(--img-home-services); }

.service-hero-bg      { background-image: var(--img-service-hero); }
.service-integ-bg     { background-image: var(--img-service-integ); }

.about-hero-bg        { background-image: var(--img-about-hero); }
.about-philosophy-bg  { background-image: var(--img-about-philosophy); }

.contact-hero-bg      { background-image: var(--img-contact-hero); }
.contact-partner-bg   { background-image: var(--img-contact-partner); }

.card-bg-essentials  { background-image: var(--img-card-essentials); }
.card-bg-visibility  { background-image: var(--img-card-visibility); }
.card-bg-sme         { background-image: var(--img-card-sme); }

/* Card with background image overlay */
.card-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.card-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(38, 36, 34, 0.88) 0%, rgba(38, 36, 34, 0.72) 100%);
  z-index: 1;
  border-radius: inherit;
}

.card-bg > * {
  position: relative;
  z-index: 2;
}

.bg-fallback          { background-color: var(--color-dark-charcoal); }