/* =====================================================================
   WEBSITE MAP PAGE (网站地图) — Mobile-first (xs < 576px)
   Design references:
   - XS (<576): 1614_115418 (480px)
   - SM (>=576): 1614_114658 (576px)
   - MD (>=768): 1614_113896 (768px)
   - LG (>=992): 1614_113132 (992px)
   - XL (>=1200): 1614_112368 (1200px)
   - XXL (>=1400): 1614_111595 (1400px)
   - XXXL (>=1920): 1614_110825 (1920px)
   ===================================================================== */

:root {
  --wm-blue: #26a7fe;
  --wm-green: #02cb64;
  --wm-t-1: #000000e5;
  --wm-t-2: #000000b2;
  --wm-t-3: #00000080;
  --wm-t-4: #00000099;
  --wm-title: #132a3f;
  --wm-border: #d6d6d6;
  --wm-card: #f5f5f5;
  --wm-gradient: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%);
}

.wm-page {
  background: #ffffff;
  font-family: Figtree, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
}

.wm-page a {
  text-decoration: none;
}

/* =====================================================================
   HERO — XS (<576px)
   ===================================================================== */
.wm-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 20px;
  overflow: hidden;
}

.wm-hero-bg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-radius: 20px;
  background-color: #ffffff;
  padding: 100px 0;
  overflow: hidden;
  background-image: url(../images/common/review-bg.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.wm-hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 16px;
}

.wm-hero-title {
  margin: 0;
  color: var(--wm-title);
  font-size: 60px;
  font-weight: 800;
  line-height: 78px;
  text-align: center;
}

.wm-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
}

.wm-crumb {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  border-radius: 4px;
  padding: 4px;
  color: var(--wm-t-3);
  font-size: 18px;
  line-height: 29px;
}

.wm-crumb-icon,
.wm-crumb-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.wm-crumb--active {
  background: var(--wm-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  padding: 2px 4px;
}

.wm-breadcrumb a.wm-crumb:hover {
  background: var(--wm-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =====================================================================
   SECTIONS — XS (<576px)
   ===================================================================== */
.wm-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  padding: 100px 20px;
  row-gap: 40px;
}

.wm-section--flush {
  padding: 0 20px;
}

.wm-section--tips {
  padding: 140px 20px;
}

.wm-section-title {
  margin: 0;
  align-self: stretch;
  text-align: center;
  color: var(--wm-t-1);
  font-size: 48px;
  font-weight: 700;
  line-height: 67px;
}

/* ---- Link lists (Navigation / Others / Community) ---- */
.wm-links {
  display: grid;
  grid-template-columns: 1fr;
  align-self: stretch;
  column-gap: 20px;
  row-gap: 20px;
}

.wm-link {
  display: flex;
  align-items: center;
  align-self: stretch;
  border-radius: 20px;
  background: var(--wm-card);
  padding: 20px 40px;
  height: 100px;
  color: var(--wm-t-1);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}

.wm-link:hover {
  background: #e9f6ff;
  color: var(--wm-blue);
}

/* ---- Products ---- */
.wm-products {
  display: grid;
  grid-template-columns: 1fr;
  align-self: stretch;
  column-gap: 20px;
  row-gap: 20px;
}

.wm-product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: center;
  border-radius: 20px;
  background: var(--wm-card);
  padding: 20px 40px;
  min-height: 100px;
  row-gap: 8px;
}

.wm-product-name {
  margin: 0;
  align-self: stretch;
  color: var(--wm-t-1);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}

.wm-product-links {
  display: inline-flex;
  align-items: center;
  column-gap: 8px;
}

.wm-product-link {
  color: var(--wm-blue);
  font-size: 16px;
  line-height: 19px;
}

.wm-product-link:hover {
  color: #51b9fd;
}

.wm-product-divider {
  background: #00000038;
  width: 1px;
  height: 16px;
}

/* ---- All Tips ---- */
.wm-tips-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 40px;
}

.wm-tips-col {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  row-gap: 40px;
}

.wm-tips-cat {
  border: 1px solid var(--wm-border);
  border-radius: 20px;
  overflow: hidden;
}

.wm-tips-cat-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--wm-card);
  padding: 24px;
  height: 80px;
  color: var(--wm-t-1);
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  text-align: center;
}

.wm-tips-list {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  list-style: disc;
  list-style-position: outside;
  margin: 0;
  padding: 40px 20px 40px 40px;
  row-gap: 12px;
}

.wm-tips-list li::marker {
  color: var(--wm-t-4);
}

.wm-tips-link {
  color: var(--wm-t-4);
  font-size: 18px;
  line-height: 32px;
}

.wm-tips-link:hover,
.wm-tips-list li:hover::marker {
  color: var(--wm-blue);
}

/* =====================================================================
   LG (>=992px) — links 3-col / products 2-col / tips 2-col
   ===================================================================== */
@media (min-width: 992px) {
  .wm-tips-grid {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: 20px;
  }

  .wm-tips-col {
    flex: 1;
    width: auto;
  }
}

/* =====================================================================
   SM (>=576px) — links/products 2 columns
   ===================================================================== */
@media (min-width: 576px) {
  .wm-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .wm-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================================
   MD (>=768px) — links/products 3 columns
   ===================================================================== */
@media (min-width: 768px) {
  .wm-links {
    grid-template-columns: repeat(3, 1fr);
  }

  .wm-products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =====================================================================
   XL (>=1600px) side padding 240px / XXXL (>=1920px) 320px, tips 2 cols
   ===================================================================== */
@media (min-width: 1600px) {
  .wm-section {
    padding: 100px 240px;
  }

  .wm-section--flush {
    padding: 0 240px;
  }

  .wm-section--tips {
    padding: 140px 240px;
  }

  .wm-tips-grid {
    justify-content: center;
    column-gap: 40px;
  }

  .wm-tips-col {
    width: 540px;
    flex-shrink: 0;
  }
}

@media (min-width: 1920px) {
  .wm-section {
    padding: 100px 320px;
  }

  .wm-section--flush {
    padding: 0 320px;
  }

  .wm-section--tips {
    padding: 140px 320px;
  }

  .wm-tips-col {
    width: 620px;
  }
}

/* Mobile (<420px): hero title font-size 48px */
@media (max-width: 420px) {
  .wm-hero-title {
    font-size: 48px;
  }
}