/**
 * Service Card — 共享品牌视觉（前端 + 后台预览共用）
 *
 * BEM class 前缀: cn-service-card
 * 变量由外层的 .checknow-home（前端）或 .cn-admin-card-preview（后台）注入
 */

/* ponytail: 后台预览独立加载，:root fallback 确保变量可用 */
:root {
  --checknow-primary-dark: #0A192E;
  --checknow-primary: #0A2463;
  --checknow-accent: #D4AF37;
  --checknow-accent-dark: #B89326;
  --checknow-dark-2: #F4F6F9;
  --checknow-border: #E5E7EB;
  --checknow-text-light: #4B5563;
  --checknow-white: #FFFFFF;
  --checknow-radius-sm: 8px;
  --cn-card-light-surface: rgba(255,255,255,.46);
  --cn-card-light-border: rgba(15,35,58,.12);
}

/* ═══ 卡片容器 ═══ */
.cn-service-card {
  position: relative;
  border-radius: var(--checknow-radius-sm);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

/* ── 配色 ── */
.cn-service-card--dark {
  /* ponytail: 降低饱和度，偏灰蓝底色，视觉更柔和 */
  background: linear-gradient(145deg, #111D32 0%, #0E1A2E 100%);
  color: var(--checknow-white);
}
.cn-service-card--light {
  /*
   * Transparent surface: the parent section colour remains visible through
   * the card. Contexts with dark backgrounds can override the two variables.
   */
  background: var(--cn-card-light-surface);
  color: var(--checknow-primary);
  border: 1px solid var(--cn-card-light-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(12px) saturate(.82);
  backdrop-filter: blur(12px) saturate(.82);
}

/* 浅色卡片带背景图时，也保持透明收尾而不是铺一层实色。 */
.cn-service-card--light.cn-service-card--img-fill .cn-service-card__overlay {
  background: linear-gradient(
    to top,
    rgba(255,255,255,.76) 0%,
    rgba(255,255,255,.20) 52%,
    transparent 100%
  );
}

/* ═══ 图片层（fill 模式） ═══ */
.cn-service-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

/* ═══ 遮罩层 ═══ */
.cn-service-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ponytail: 透明底渐变遮罩，降低饱和度，增加层次感 */
.cn-service-card--dark .cn-service-card__overlay {
  background: linear-gradient(
    to top,
    rgba(15,22,35,0.72) 0%,
    rgba(15,22,35,0.25) 50%,
    transparent 100%
  );
}

/* ── fill + dark: 品牌滤镜 + 渐变遮罩 ── */
.cn-service-card--dark.cn-service-card--img-fill .cn-service-card__image {
  filter: saturate(.48) brightness(.64) contrast(1.1);
}
.cn-service-card--dark.cn-service-card--img-fill .cn-service-card__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(15,22,38,.88) 0%,
    rgba(15,22,38,.78) 48%,
    rgba(15,22,38,.58) 100%
  );
}
.cn-service-card--dark.cn-service-card--img-fill .cn-service-card__overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top, rgba(15,22,38,.58) 0%, transparent 45%);
}

/* ── contain + dark: 水印模式 ── */
.cn-service-card--dark.cn-service-card--img-contain {
  background: var(--checknow-primary-dark) !important;
}
.cn-service-card--dark.cn-service-card--img-contain .cn-service-card__image {
  filter: none !important;
  background-size: contain !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
}
.cn-service-card--dark.cn-service-card--img-contain .cn-service-card__overlay {
  background: none !important;
}
.cn-service-card--dark.cn-service-card--img-contain .cn-service-card__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(15,22,38,.85) 0%, rgba(15,22,38,.70) 100%);
}
.cn-service-card--dark.cn-service-card--img-contain .cn-service-card__overlay::before {
  display: none;
}

/* ═══ Badge ═══ */
.cn-service-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: none;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.cn-service-card__badge--visible { display: inline-block; }
.cn-service-card__badge--featured    { background: var(--checknow-accent); color: var(--checknow-primary-dark); }
.cn-service-card__badge--popular     { background: #f59e0b; color: var(--checknow-white); }
.cn-service-card__badge--new         { background: #10b981; color: var(--checknow-white); }
.cn-service-card__badge--coming_soon { background: #6366f1; color: var(--checknow-white); }

/* ═══ 内容区域（z-index > overlay） ═══ */
.cn-service-card__body {
  position: relative;
  z-index: 4;
  padding: 32px;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 文字位置由前后台共同使用，避免预览与真实卡片采用不同判断。 */
.cn-service-card--text-start .cn-service-card__body { justify-content: flex-start; }
.cn-service-card--text-center .cn-service-card__body { justify-content: center; }
.cn-service-card--text-end .cn-service-card__body { justify-content: flex-end; }

/* 左右图文布局。图片和内容规则放在共享文件，前台与预览同步生效。 */
.cn-service-card--img-left,
.cn-service-card--img-right {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  align-items: stretch;
}
.cn-service-card--img-right {
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
}
.cn-service-card--img-left .cn-service-card__image,
.cn-service-card--img-right .cn-service-card__image {
  position: relative;
  inset: auto;
  min-height: 100%;
}
.cn-service-card--img-right .cn-service-card__image { order: 2; }
.cn-service-card--img-left .cn-service-card__body { grid-column: 2; }
.cn-service-card--img-right .cn-service-card__body { grid-column: 1; grid-row: 1; }
.cn-service-card--img-left .cn-service-card__overlay,
.cn-service-card--img-right .cn-service-card__overlay { display: none; }

.cn-service-card--small .cn-service-card__body {
  padding: 28px 24px;
}

/* ═══ 标题 ═══ */
.cn-service-card__title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.3;
}

.cn-service-card--dark .cn-service-card__title { color: #E8D5A3; }
.cn-service-card--light .cn-service-card__title { color: #101A2C; }

.cn-service-card--small .cn-service-card__title {
  font-size: 18px;
}

/* ═══ 简介 ═══ */
.cn-service-card__desc {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.cn-service-card--dark .cn-service-card__desc { color: rgba(255,255,255,.62); }
.cn-service-card--light .cn-service-card__desc { color: var(--checknow-text-light); }

.cn-service-card--small .cn-service-card__desc {
  font-size: 13px;
  flex: 1;
  margin-bottom: auto;
}

/* ═══ CTA ═══ */
.cn-service-card__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: gap 0.2s;
  margin-top: auto;
  text-decoration: none;
  pointer-events: auto;
}

.cn-service-card--dark .cn-service-card__cta { color: var(--checknow-accent); }
.cn-service-card--light .cn-service-card__cta { color: var(--checknow-accent-dark); }

.cn-service-card__cta:hover { gap: 10px; }

.cn-service-card__cta--button {
  width: fit-content;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

@media (max-width: 782px) {
  .cn-service-card--img-left,
  .cn-service-card--img-right {
    display: flex;
  }
  .cn-service-card--img-left .cn-service-card__image,
  .cn-service-card--img-right .cn-service-card__image {
    order: 0;
    min-height: 180px;
  }
}

.cn-service-card--small .cn-service-card__cta {
  margin-top: 16px;
  font-size: 16px;
  align-self: flex-end;
}

/* ═══ 尺寸 — 首页、Hub 与后台预览共用同一尺寸语义 ═══ */
.cn-service-card--size-1x1 { grid-column: span 1; grid-row: span 1; min-height: 200px; }
.cn-service-card--size-2x1 { grid-column: span 2; grid-row: span 1; min-height: 200px; }
.cn-service-card--size-2x2 { grid-column: span 2; grid-row: span 2; min-height: 400px; }
.cn-service-card--size-4x1 { grid-column: 1 / -1; grid-row: span 1; min-height: 200px; }
.cn-service-card--size-4x2 { grid-column: 1 / -1; grid-row: span 2; min-height: 400px; }

@media (max-width: 782px) {
  .cn-service-card--size-1x1,
  .cn-service-card--size-2x1,
  .cn-service-card--size-2x2,
  .cn-service-card--size-4x1,
  .cn-service-card--size-4x2 {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 200px;
  }
}

/* ═══ 深色无图卡片：底色由 .cn-service-card--dark 的 gradient 控制 ═══ */

/* ═══ 深色+图片 通用文字覆盖 ═══ */
.cn-service-card--dark.cn-card--has-image .cn-service-card__title { color: #E8D5A3 !important; }
.cn-service-card--dark.cn-card--has-image .cn-service-card__desc { color: rgba(255,255,255,.62) !important; }
.cn-service-card--dark.cn-card--has-image .cn-service-card__cta { color: var(--checknow-accent) !important; }

/* ═══ Hub 布局差异仅保留在 hub.css 中，卡片视觉统一由本文件控制 ═══ */