/* ═══════════════════════════════════════════════════════════════
   Box 35 - Thoughtfully Designed (矩形卡片网格)
   自适应宽高 / 6 张图文矩形卡片
   ═══════════════════════════════════════════════════════════════ */

.section-features {
  width: 100%;
  min-height: 100vh;
  padding: clamp(56px, 7vw, 96px) 20px;
  background-color: #ebe9e3;
  background-image: url('../images/bg4-6.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-features .container {
  max-width: var(--content-max, 1280px);
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* 顶部小标签 */
.section-features .section-tagline {
  color: #bc994b;
  font-size: 14px;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
}

/* 主标题 —— 两行显示，随屏幕自适应缩放
   注意：woocommerce.css 里有全局 .section-title{display:flex;border-bottom...}
   会让 text-align 失效并多出下划线，这里显式复位 */
.section-features .section-title {
  display: block;
  border-bottom: none;
  padding-bottom: 0;
  gap: 0;
  color: #192a44;
  font-family: 'Merriweather', serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.18;
  text-align: center;
  max-width: none;
  margin: 18px auto 0;
}

/* ───────────────────────────────────────────────
   卡片网格
   ─────────────────────────────────────────────── */
.tf-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
}

.tf-row {
  display: flex;
  gap: clamp(16px, 1.8vw, 24px);
}

/* 单张卡片 */
.tf-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  min-height: clamp(190px, 17vw, 240px);
  padding: clamp(26px, 2.6vw, 38px) clamp(28px, 2.8vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease;
}

.tf-card--wide   { flex: 1.62; }
.tf-card--narrow { flex: 1; }

/* 第三行：05 矩形更窄，06 矩形更长 */
.tf-c5 { flex: 0.8; }
.tf-c6 { flex: 2; }

.tf-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(25, 42, 68, 0.22);
}

/* 卡片内容 */
.tf-body {
  position: relative;
  z-index: 2;
  max-width: 480px;
}

.tf-num {
  display: block;
  font-family: 'Merriweather', serif;
  font-weight: 700;
  font-size: clamp(46px, 4.4vw, 62px);
  line-height: 1;
  opacity: 0.32;
  margin-bottom: -18px;
}

.tf-title {
  position: relative;
  font-family: 'Merriweather', serif;
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.25;
  margin: 0;
}

.tf-desc {
  margin: 14px 0 0;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 22px;
  opacity: 0.92;
}

/* 右对齐卡片 (06) */
.tf-card--right { align-items: flex-end; }
.tf-card--right .tf-body { text-align: right; margin-left: auto; }

/* ───────────────────────────────────────────────
   各卡片背景与配色
   ─────────────────────────────────────────────── */

/* 01 — 深蓝图，金色标题 */
.tf-c1 {
  background-image: linear-gradient(90deg, rgba(16,26,48,0.9) 0%, rgba(16,26,48,0.55) 45%, rgba(16,26,48,0.12) 100%), url('../images/pic4-1.png');
}
.tf-c1 .tf-num   { color: #bc994b; opacity: 0.55; }
.tf-c1 .tf-title { color: #d6ad58; }

/* 02 — 浅色图，深色文字 */
.tf-c2 {
  background-image: linear-gradient(90deg, rgba(235,233,227,0.92) 0%, rgba(235,233,227,0.55) 55%, rgba(235,233,227,0.05) 100%), url('../images/pic4-2.png');
  color: #2c3a52;
}
.tf-c2 .tf-num   { color: #192a44; opacity: 0.22; }
.tf-c2 .tf-title { color: #192a44; }

/* 03 — 暖色浅图，深色文字 */
.tf-c3 {
  background-image: linear-gradient(90deg, rgba(238,231,219,0.9) 0%, rgba(238,231,219,0.5) 60%, rgba(238,231,219,0.05) 100%), url('../images/pic4-3.png');
  color: #2c3a52;
}
.tf-c3 .tf-num   { color: #192a44; opacity: 0.22; }
.tf-c3 .tf-title { color: #192a44; }

/* 04 — 深绿图，白色文字 */
.tf-c4 {
  background-image: linear-gradient(90deg, rgba(20,34,28,0.88) 0%, rgba(20,34,28,0.5) 45%, rgba(20,34,28,0.1) 100%), url('../images/pic4-4.png');
}
.tf-c4 .tf-num   { color: #ffffff; opacity: 0.3; }
.tf-c4 .tf-title { color: #ffffff; }

/* 05 — 纯金色块，无图 */
.tf-c5 {
  background-image: linear-gradient(135deg, #c9a24a 0%, #b88f37 100%);
}
.tf-c5 .tf-num   { color: #ffffff; opacity: 0.38; }
.tf-c5 .tf-title { color: #ffffff; }

/* 06 — 深蓝图，白色文字，右对齐 */
.tf-c6 {
  background-image: linear-gradient(270deg, rgba(16,26,48,0.9) 0%, rgba(16,26,48,0.5) 45%, rgba(16,26,48,0.12) 100%), url('../images/pic4-5.png');
}
.tf-c6 .tf-num   { color: #ffffff; opacity: 0.3; }
.tf-c6 .tf-title { color: #ffffff; }

/* ───────────────────────────────────────────────
   入场动效
   ─────────────────────────────────────────────── */
.js .section-features [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease;
}
.section-features [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 逐张错峰入场 */
.section-features .section-title { transition-delay: 0.05s; }
.tf-c1 { transition-delay: 0.12s; }
.tf-c2 { transition-delay: 0.20s; }
.tf-c3 { transition-delay: 0.28s; }
.tf-c4 { transition-delay: 0.36s; }
.tf-c5 { transition-delay: 0.44s; }
.tf-c6 { transition-delay: 0.52s; }

/* hover 时取消入场延迟，保证悬停即时响应 */
.tf-card:hover { transition-delay: 0s; }

/* ───────────────────────────────────────────────
   卡片内文字逐层入场（序号 → 标题 → 描述）
   随该卡片 .is-visible 触发，比卡片本身稍晚
   ─────────────────────────────────────────────── */
.js .section-features .tf-card .tf-title,
.js .section-features .tf-card .tf-desc {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 序号仅做位移，透明度保持各卡自有的水印浓度 */
.js .section-features .tf-card .tf-num {
  transform: translateY(18px);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-features .tf-card.is-visible .tf-num   { transform: translateY(0); transition-delay: 0.06s; }
.section-features .tf-card.is-visible .tf-title { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.section-features .tf-card.is-visible .tf-desc  { opacity: 1; transform: translateY(0); transition-delay: 0.30s; }

/* hover 时文字不带延迟，避免悬停时序号/标题再次错峰 */
.tf-card:hover .tf-num,
.tf-card:hover .tf-title,
.tf-card:hover .tf-desc { transition-delay: 0s; }

/* ───────────────────────────────────────────────
   响应式
   ─────────────────────────────────────────────── */

/* 平板：标题略缩小 */
@media (max-width: 900px) {
  .section-features .section-title {
    font-size: clamp(28px, 5.4vw, 40px);
  }
}

/* 中小屏：卡片改为单列堆叠 */
@media (max-width: 768px) {
  .tf-row {
    flex-direction: column;
  }
  .tf-card--wide,
  .tf-card--narrow {
    flex: 1 1 auto;
    width: 100%;
  }
  .tf-card {
    min-height: 200px;
  }
  /* 移动端文字一律左对齐，保证可读 */
  .tf-card--right { align-items: stretch; }
  .tf-card--right .tf-body { text-align: left; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .section-features [data-reveal],
  .section-features .tf-card .tf-title,
  .section-features .tf-card .tf-desc {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* 序号只复位位移，保留各卡自有的水印浓度 */
  .section-features .tf-card .tf-num {
    transform: none !important;
    transition: none !important;
  }
}