/* ============================================================
   Service Card Bento Grid — 服务分类卡片网格
   Dependencies: 依赖父级 card 元素上的 .scheme-dark / .scheme-light
   ============================================================ */

/* ── 区域容器 ── */
.service-grid-section {
  padding: 120px 64px;
  max-width: 1280px;
  margin: 0 auto;
}
.service-grid-section--no-padding {
  padding: 0;
}
.service-grid-heading {
  text-align: center;
  margin-bottom: 80px;
}
.service-grid-heading--left {
  text-align: left;
}
.service-grid-heading--left .service-grid-divider {
  margin: 0;
}
.service-grid-heading h2 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0B192C;
  margin: 0 0 16px;
}
.service-grid-divider {
  width: 96px;
  height: 4px;
  background: linear-gradient(135deg, var(--checknow-accent) 0%, #F1D592 50%, var(--checknow-accent) 100%);
  margin: 0 auto;
}
.service-grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 24px;
}

/* ponytail: 首页 columns modifier — 由后台服务入口配置控制 */
.cn-home-services--cols-2 .service-grid-container { grid-template-columns: repeat(2, 1fr); }
.cn-home-services--cols-3 .service-grid-container { grid-template-columns: repeat(3, 1fr); }
.cn-home-services--cols-4 .service-grid-container { grid-template-columns: repeat(4, 1fr); }

/* ponytail: 模块副标题 */
.service-grid-subtitle {
  font-size: 16px;
  line-height: 1.5;
  color: #5a6a7e;
  margin: -8px 0 20px;
  text-align: center;
}

/* ponytail: 查看全部按钮 */
.service-grid-footer {
  text-align: center;
  margin-top: 40px;
}
.service-grid-all-link {
  display: inline-block;
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: var(--checknow-primary);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s;
}
.service-grid-all-link:hover {
  background: #153e8a;
  color: #fff;
}

/* ── 卡片容器 ── */
.card {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.3s;
  color: inherit;
  position: relative;
  min-height: 200px;
  height: 100%;
}
.card:hover { color: inherit; }
.scheme-dark:hover,
.scheme-dark:hover * { color: inherit !important; }

/* ── Grid 跨列跨行尺寸 ── */
.size-1x1 { grid-column: span 1; grid-row: span 1; }
.size-2x1 { grid-column: span 2; grid-row: span 1; }
.size-2x2 { grid-column: span 2; grid-row: span 2; }
.size-4x1 { grid-column: 1 / -1; grid-row: span 1; }
.size-4x2 { grid-column: 1 / -1; grid-row: span 2; }

/* ── 图片布局 ── */
/* fill：图片作背景，absolute 铺满 */
.image-fill { position: relative; }
.card-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform 0.4s;
}
.image-fill:hover .card-bg {
  transform: scale(1.05);
}
.card-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,25,46,0.82) 0%, rgba(10,25,46,0.25) 100%);
}

/* left / right：CSS Grid 两列 */
.image-left,
.image-right {
  display: grid !important;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  align-items: stretch;
}
/* left：图片左列，内容右列 */
.image-left .card-image-side { grid-column: 1; grid-row: 1; }
.image-left .card-icon,
.image-left .card-content,
.image-left .card-cta      { grid-column: 2; }
/* right：内容左列，图片右列 */
.image-right .card-image-side { grid-column: 2; grid-row: 1; }
.image-right .card-icon,
.image-right .card-content,
.image-right .card-cta       { grid-column: 1; }

.card-image-side {
  overflow: hidden;
  min-height: 200px;
}
.card-image-side img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.card:hover .card-image-side img {
  transform: scale(1.05);
}

/* left/right 无图片时退化为单列 */
.image-left:not(.has-image),
.image-right:not(.has-image) {
  display: flex !important;
  flex-direction: column;
}

/* 图标固定在卡片顶部 */
.card-icon {
  display: block;
  padding: 20px 0 0 20px;
  z-index: 2;
}

.card-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* 文字位置：只控制 .card-content 内部垂直，不影响图标和 CTA */
.pos-end .card-content    { justify-content: flex-end; }
.pos-center .card-content { justify-content: center; }
.pos-start .card-content  { justify-content: flex-start; }

/* ── 深蓝底金黄字 (暗黑稳重风) ── */
.scheme-dark {
  background: #0A192E;
  color: #fff;
}
.scheme-dark .card-title { color: #F1C40F; font-size: 26px !important; font-weight: 600; line-height: 1.3; margin: 0 0 4px; }
.scheme-dark .card-desc  { color: rgba(255,255,255,0.8); font-size: 16px !important; line-height: 1.5 !important; margin: 0 0 8px; }
.scheme-dark .card-cta   { color: #F1C40F; font-size: 14px !important; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }
.scheme-dark .card-icon  { color: #F1C40F; }.scheme-dark .card-icon img { filter: brightness(0) invert(1); }.scheme-dark .card-cta-arrow { font-size: 13px; }
/* hover 不变色 */
.scheme-dark:hover .card-title { color: #F1C40F !important; }
.scheme-dark:hover .card-desc  { color: rgba(255,255,255,0.8) !important; }
.scheme-dark:hover .card-icon  { color: #F1C40F !important; }
.scheme-dark:hover .card-cta   { color: #F1C40F !important; }
.scheme-dark:hover .cta-button { color: #fff !important; background: #F1C40F !important; }
.scheme-dark .card-child-item {
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
.scheme-dark .card-child-item:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
}

/* ── 白底深蓝字 (明亮现代风) ── */
.scheme-light {
  background: #fff;
  color: #0B192C;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(229,231,235,1);
}
.scheme-light:hover { border-color: #F1C40F; }
.scheme-light .card-title { color: #0B192C; font-size: 26px !important; font-weight: 600; line-height: 1.3; margin: 0 0 4px; }
.scheme-light .card-desc  { color: #555555; font-size: 16px !important; line-height: 1.5 !important; margin: 0 0 8px; }
.scheme-light .card-cta   { color: #F1C40F; font-size: 14px !important; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }
.scheme-light .card-icon  { color: #0B192C; }
.scheme-light .card-cta-arrow { font-size: 13px; }
.scheme-light .card-child-item {
  color: #0B192C;
  border-color: rgba(11,25,44,0.2);
}
.scheme-light .card-child-item:hover {
  background: rgba(11,25,44,0.05);
  border-color: rgba(11,25,44,0.4);
}

/* ── CTA 共用样式（独立在卡片底部右侧）── */
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: gap 0.2s;
  cursor: pointer;
  align-self: flex-start;
  margin: 0 0 20px 20px;
}
.card-cta:hover { gap: 16px; }
/* 按钮样式 */
.cta-button {
  padding: 10px 24px;
  border-radius: 4px;
  background: #F1C40F;
  color: #fff !important;
  border: none;
}
.cta-button:hover { background: #E0B800; }
.scheme-dark .cta-button:hover {
  background: #E0B800;
}

/* ── 响应式：移动端所有尺寸收为 1 列 ── */
@media (max-width: 768px) {
  .service-grid-section {
    padding: 60px 20px;
  }
  .service-grid-heading h2 {
    font-size: 32px;
    line-height: 40px;
  }
  .service-grid-container {
    grid-template-columns: 1fr;
  }
  /* 移动端所有卡片 1 列宽，保持各自行高 */
  .size-1x1, .size-2x1, .size-2x2, .size-4x1, .size-4x2 {
    grid-column: span 1 !important;
  }
  .image-left,
  .image-right {
    display: grid !important;
    grid-template-columns: 1fr;
  }
  .image-left .card-image-side,
  .image-right .card-image-side {
    grid-column: 1; grid-row: 1;
    min-height: 180px;
  }
  .image-left .card-icon,
  .image-left .card-content,
  .image-left .card-cta,
  .image-right .card-icon,
  .image-right .card-content,
  .image-right .card-cta {
    grid-column: 1;
  }
}