/* ==============================================================
   services.css · 我们的服务页专属样式
   --------------------------------------------------------------
   结构：
   1. Hero 顶部留白区（不带面包屑）
   2. Practice Area（左右双栏：左大图 + 右标题/描述）
   3. Our Service Culture（左右交替：第 1 行右图，第 2 行左图）
   4. Three Reasons To Choose Us（左右交替：第 1 行左图，第 2 行右图，第 3 行左图）
   5. 页脚
   ============================================================== */

/* ==============================================================
   0. 公共：渐变标题（左白右蓝）
   ============================================================== */
.services-section-title {
  font-size: clamp(1.4rem, 2.5vw, 1.875rem);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
  margin: 0 0 var(--space-10);
  background: linear-gradient(90deg, #ffffff 0%, #0095ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ==============================================================
   1. Hero 顶部留白（顶导之后的一段间距）
   ============================================================== */

.services-hero {
  position: relative;
  height: 200px;
  background:
          linear-gradient(180deg, rgba(10,23,41,0.0) 0%, rgba(10,23,41,0.0) 60%, rgba(10,23,41,0.55) 100%),
          url("../../../../assets/website/images/a18.png") center / cover no-repeat;
  overflow: hidden;
}
@media (min-width: 768px) { .services-hero { height: 420px; } }
@media (min-width: 1025px) { .services-hero { height: 520px; } }


/* ==============================================================
   2. Our Services（4 卡片网格布局）
   ============================================================== */
.practice-area {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding-block: var(--space-8) var(--space-12);
}
@media (min-width: 768px) { .practice-area { padding-block: var(--space-10) var(--space-16); } }

.practice-area__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
  margin: 0 0 var(--space-10);
  background: linear-gradient(90deg, #ffffff 0%, #0095ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

.service-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 149, 255, 0.3);
}

.service-card__heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin: 0 0 var(--space-4);
  line-height: var(--line-height-tight);
  background: linear-gradient(90deg, #ffffff 0%, #0095ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.service-card__desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-4);
  text-align: justify;
}

.service-card__label {
  color: var(--color-text-inverse);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2);
}

.service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.service-card__list li {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  padding-left: var(--space-4);
  position: relative;
}

.service-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}


/* ==============================================================
   3. Our Service Culture（左右交替）
   ============================================================== */
.service-culture {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding-block: var(--space-10) var(--space-12);
}
@media (min-width: 768px) { .service-culture { padding-block: var(--space-16); } }

.service-culture__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
@media (min-width: 768px) { .service-culture__list { gap: var(--space-12); } }

.service-culture__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 768px) {
  .service-culture__row { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .service-culture__row--reverse .service-culture__media { order: 2; }
  .service-culture__row--reverse .service-culture__content { order: 1; }
}

.service-culture__media {
  width: 100%;
  min-height: 200px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: #1a2a3a;
}
.service-culture__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) { .service-culture__media { min-height: 280px; } }

.service-culture__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  text-align: left;
}

.service-culture__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-culture__heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin: 0;
  line-height: var(--line-height-tight);
}

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


/* ==============================================================
   4. Three Reasons To Choose Us（左右交替，三行）
   ============================================================== */
.choose-us {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding-block: var(--space-10) var(--space-12);
}
@media (min-width: 768px) { .choose-us { padding-block: var(--space-16); } }

.choose-us__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 768px) { .choose-us__list { gap: var(--space-6); } }

.choose-us__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 768px) {
  .choose-us__row { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  /* 奇数行：图左文右；偶数行：图右文左 */
  .choose-us__row--reverse .choose-us__media { order: 2; }
  .choose-us__row--reverse .choose-us__content { order: 1; }
}

.choose-us__media {
  width: 100%;
  min-height: 200px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: #1a2a3a;
}
.choose-us__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) { .choose-us__media { min-height: 280px; } }

.choose-us__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}

.choose-us__heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin: 0;
  line-height: var(--line-height-tight);
}

.choose-us__desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
  text-align: justify;
}


/* ==============================================================
   5. 响应式微调
   ============================================================== */
@media (max-width: 767px) {
  .service-culture__media,
  .choose-us__media { min-height: 200px; }
}


/* ==============================================================
   6. CSS3 动画效果
   ============================================================== */

/* 6.1 滚动进入视口：淡入 + 上移 */
[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 6.2 图片悬停缩放 */
.service-culture__media img,
.choose-us__media img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-culture__media:hover img,
.choose-us__media:hover img {
  transform: scale(1.06);
}

/* 6.3 渐变标题流动动画 */
.services-section-title,
.practice-area__title {
  background-size: 200% 100%;
  animation: gradient-flow 4s ease infinite;
}

@keyframes gradient-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 6.4 内容块悬停微浮 */
.service-culture__item,
.choose-us__content {
  transition: transform 0.35s ease;
}

.service-culture__item:hover,
.choose-us__content:hover {
  transform: translateY(-6px);
}

/* 6.5 标题左侧装饰线动画 */
.service-culture__heading,
.choose-us__heading {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.35s ease;
}

.service-culture__heading::before,
.choose-us__heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, #0095ff, transparent);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-culture__heading:hover::before,
.choose-us__heading:hover::before {
  transform: translateY(-50%) scaleX(1);
}

.service-culture__heading:hover,
.choose-us__heading:hover {
  padding-left: 32px;
}

/* 6.6 减少动画偏好（无障碍） */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .services-section-title,
  .practice-area__title {
    animation: none;
  }
  .service-card,
  .service-culture__media img,
  .choose-us__media img,
  .service-culture__item,
  .choose-us__content,
  .service-culture__heading,
  .choose-us__heading {
    transition: none;
  }
}