/* ============================================================
   适老智家 · 关于我们
   只放本页专有版式，公共部分全部复用 styles.css
   ============================================================ */

/* ---- 我们是谁 -------------------------------------------- */
.who-box {
  padding: 40px 28px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.who-box h2 {
  margin: 0 0 18px;
  font-size: clamp(1.44rem, 4.4vw, 2.1rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
  text-wrap: balance;
}
.who-box p {
  margin: 0 0 16px;
  font-size: 1.1rem;
  line-height: 1.7;
  font-weight: 700;
  color: var(--ink-2);
}
.who-box p:last-of-type { margin-bottom: 0; }
.who-box strong { color: var(--ink); font-weight: 900; }

.who-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.who-tags li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .52rem 1.05rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}
.who-tags li svg { width: 1.15rem; height: 1.15rem; color: var(--brand-strong); }

/* ============================================================
   体验中心
   ============================================================ */
.center-box {
  padding: 40px 28px;
  border-radius: var(--r);
  background: var(--brand-soft);
  border: 2px solid #f0dccd;
}
.center-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.center-head svg {
  width: 3.2rem;
  height: 3.2rem;
  flex: none;
  color: var(--brand-strong);
}
.center-head h2 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 4.4vw, 2.05rem);
  font-weight: 900;
  line-height: 1.25;
}
.center-head p {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink-2);
}

.center-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.center-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px;
  background: #fff;
  border: 2px solid #f0dccd;
  border-radius: var(--r-sm);
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.5;
}
.center-list svg {
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  color: var(--brand-strong);
}
.center-addr {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 2px dashed #e9cdb8;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.6;
}
.center-addr svg {
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  margin-top: .1rem;
  color: var(--brand-strong);
}

/* ============================================================
   服务范围
   ============================================================ */
.area-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.area-card {
  padding: 28px 24px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r);
}
.area-card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 1.3rem;
  font-weight: 900;
}
.area-card h3 svg {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  color: var(--brand-strong);
}
.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.area-tags li {
  padding: .45rem .95rem;
  border-radius: 999px;
  background: var(--bg);
  border: 2px solid var(--line);
  font-size: .98rem;
  font-weight: 800;
  color: var(--ink-2);
}
.area-card p {
  margin: 16px 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink-2);
}

/* ============================================================
   服务承诺
   ============================================================ */
.promise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.promise-card {
  display: flex;
  gap: 18px;
  padding: 28px 24px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.promise-num {
  width: 3.1rem;
  height: 3.1rem;
  flex: none;
  border-radius: 50%;
  background: var(--brand-strong);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 900;
}
.promise-card h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: .02em;
}
.promise-card p {
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.65;
  font-weight: 700;
  color: var(--ink-2);
}

/* ============================================================
   常见问题
   ============================================================ */
.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.faq-item {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--brand); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 4.3rem;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 1.14rem;
  font-weight: 900;
  line-height: 1.45;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background-color: var(--brand-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a3814' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 5.6v12.8M5.6 12h12.8'/%3E%3C/svg%3E");
  background-size: 1.2rem;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color .16s;
}
.faq-item[open] summary::after {
  background-color: var(--brand-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M5.6 12h12.8'/%3E%3C/svg%3E");
}
.faq-item summary:hover::after { background-color: var(--brand-soft); }
.faq-item[open] summary:hover::after { background-color: var(--brand-strong); }
.faq-item p {
  margin: 0;
  padding: 0 22px 22px;
  font-size: 1.06rem;
  line-height: 1.7;
  font-weight: 700;
  color: var(--ink-2);
}

/* ============================================================
   响应式
   ============================================================ */
@media (min-width: 660px) {
  .center-list { grid-template-columns: repeat(2, 1fr); }
  .area-grid   { grid-template-columns: repeat(2, 1fr); }
  .promise-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-list    { grid-template-columns: repeat(2, 1fr); align-items: start; }
}

@media (min-width: 960px) {
  .who-box     { padding: 52px 48px; }
  .center-box  { padding: 52px 44px; }
  .area-grid   { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  /* 图标与标题改为上下排，标题才有整行宽度，不再断在中间 */
  .center-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
  }
  .center-head svg { width: 2.6rem; height: 2.6rem; }
  .center-head h2 { font-size: 1.5rem; }
  /* 四个标签排成 2×2；小屏去掉图标只留文字，才塞得进一格 */
  .who-tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
  }
  .who-tags li {
    justify-content: center;
    padding: .58rem .5rem;
    font-size: 1rem;
  }
  .who-tags li svg { display: none; }
  .promise-card { gap: 14px; padding: 24px 20px; }
  .promise-num { width: 2.7rem; height: 2.7rem; font-size: 1.32rem; }
}