/* ============================================================
   首页 —— 医院小程序风格
   ============================================================ */

.page-home {
  min-height: 100vh;
  background: var(--bg, #f4f7fb);
  padding-bottom: 0.1rem;
}

/* ---------------- 顶部大楼背景 ---------------- */

.home-hero {
  position: relative;
  height: auto;
  aspect-ratio: 900 / 500;
  min-height: 4rem;
  overflow: hidden;
}

.home-hero-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 底部压暗渐变，保证白字可读 */
.home-hero-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(10, 30, 60, 0.18) 0%,
    rgba(10, 30, 60, 0.05) 40%,
    rgba(10, 30, 60, 0.55) 100%
  );
}

.home-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.64rem;
  padding: 0 0.4rem;
  color: #ffffff;
  text-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.35);
}

.home-hero-name {
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.02rem;
  line-height: 1.3;
}

.home-hero-sub {
  margin-top: 0.12rem;
  font-size: 0.25rem;
  opacity: 0.92;
  letter-spacing: 0.03rem;
}

/* ---------------- 白色浮层内容区 ---------------- */

.home-body {
  position: relative;
  margin-top: -0.44rem;
  background: var(--bg, #f4f7fb);
  border-radius: 0.32rem 0.32rem 0 0;
  padding: 0.28rem 0.28rem 0;
  min-height: 4rem;
}

/* ---------------- 服务简介 ---------------- */

.intro-card {
  position: relative;
  background: linear-gradient(135deg, var(--brand, #1a6fd4), var(--brand-dark, #12589f));
  border-radius: 0.24rem;
  padding: 0.34rem 0.32rem 0.32rem;
  color: #ffffff;
  box-shadow: 0 0.08rem 0.22rem rgba(26, 111, 212, 0.28);
  overflow: hidden;
}

/* 右上角装饰圆 */
.intro-card::after {
  content: '';
  position: absolute;
  right: -0.5rem;
  top: -0.6rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.intro-badge {
  display: inline-block;
  padding: 0.06rem 0.18rem;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.22rem;
  letter-spacing: 0.02rem;
}

.intro-title {
  margin-top: 0.16rem;
  font-size: 0.36rem;
  font-weight: 700;
  letter-spacing: 0.01rem;
}

.intro-text {
  margin-top: 0.12rem;
  font-size: 0.25rem;
  line-height: 1.75;
  opacity: 0.94;
}

/* ---------------- 区块标题 ---------------- */

.section-head {
  display: flex;
  align-items: center;
  margin: 0.36rem 0.06rem 0.2rem;
}

.section-bar {
  width: 0.08rem;
  height: 0.3rem;
  border-radius: 0.04rem;
  background: var(--brand, #1a6fd4);
  margin-right: 0.14rem;
}

.section-title {
  font-size: 0.32rem;
  font-weight: 600;
  color: var(--text, #1a1d21);
}

/* ---------------- 公告 ---------------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.12rem;
  margin-bottom: 0.24rem;
  padding: 0.22rem 0.26rem;
  background: #fff9e8;
  border: 0.01rem solid #f6e3b4;
  border-radius: 0.18rem;
  font-size: 0.26rem;
  color: #8a6417;
  line-height: 1.65;
}

.notice-error {
  background: #fdecec;
  border-color: #f7cfd0;
  color: #a02429;
}

.notice-icon {
  flex: none;
  font-size: 0.26rem;
}

/* ---------------- 功能卡片 ---------------- */

.func-item-hover {
  background: #f7f8fa;
}

.func-list {
  margin-top: 0.04rem;
}

.func-item {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.32rem 0.3rem;
  background: #ffffff;
  border-radius: 0.22rem;
  box-shadow: 0 0.02rem 0.1rem rgba(16, 24, 40, 0.05);
  margin-bottom: 0.2rem;
}

.func-item:active {
  background: #fafbfc;
}

.func-icon {
  flex: none;
  width: 0.88rem;
  height: 0.88rem;
  border-radius: 0.22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  line-height: 1;
  background: var(--brand-soft, #e8f2fd);
  overflow: hidden;
}

.func-icon-img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: block;
}

.func-main {
  flex: 1;
  min-width: 0;
}

.func-title {
  font-size: 0.31rem;
  font-weight: 600;
  color: var(--text, #1a1d21);
}

.func-desc {
  margin-top: 0.06rem;
  font-size: 0.25rem;
  color: var(--text-3, #8b939f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.func-arrow {
  flex: none;
  color: #c8ccd3;
  font-size: 0.3rem;
}

/* ---------------- 缴费须知 ---------------- */

.tips-card {
  background: #ffffff;
  border-radius: 0.22rem;
  box-shadow: 0 0.02rem 0.1rem rgba(16, 24, 40, 0.05);
  padding: 0.14rem 0.3rem;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 0.16rem;
  padding: 0.18rem 0;
  font-size: 0.26rem;
  color: var(--text-2, #5c6470);
  line-height: 1.65;
}

.tip-item + .tip-item {
  border-top: 0.01rem solid #f2f4f7;
}

.tip-no {
  flex: none;
  width: 0.34rem;
  height: 0.34rem;
  margin-top: 0.04rem;
  border-radius: 50%;
  background: var(--brand-soft, #e8f2fd);
  color: var(--brand-dark, #12589f);
  font-size: 0.22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* ---------------- 空态 / 加载 ---------------- */

.card {
  background: #ffffff;
  border-radius: 0.22rem;
  box-shadow: 0 0.02rem 0.1rem rgba(16, 24, 40, 0.05);
  overflow: hidden;
}

.empty {
  padding: 0.8rem 0.4rem;
  text-align: center;
  color: var(--text-3, #8b939f);
}

.empty-icon {
  font-size: 0.64rem;
  margin-bottom: 0.14rem;
  opacity: 0.75;
}

.empty-text {
  font-size: 0.27rem;
}

.loading {
  padding: 1.2rem 0;
  text-align: center;
  color: var(--text-3, #8b939f);
  font-size: 0.27rem;
}

/* ---------------- 底部 ---------------- */

.footer-tips {
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.23rem;
  color: var(--text-3, #8b939f);
  line-height: 1.7;
}

.footer-link {
  display: inline-block;
  margin-top: 0.22rem;
  padding: 0.1rem 0.2rem;
  font-size: 0.23rem;
  color: #b8bec7;
}