/* ═══════════════════════════════════════════════════════════════
   柔姿恒 · 「发现美好」样式
   结构：① 类目九宫格（.fx-catgrid / .fx-catcell）
         ② 类目内容列表「上图下文」（.fx-articles / .fx-art）
   依赖：css/hls.css（底栏等共用组件）+ css/rzh-home.css（品牌外壳）
   本文件只写 .fx- 前缀的类。
   ═══════════════════════════════════════════════════════════════ */

/* ── 页头（九宫格视图）── */
.fx-top{
  /* 上方 72px 给固定的品牌栏留位，否则大标题会被顶栏压住 */
  padding:72px 18px 4px;
  background:
    radial-gradient(22rem 13rem at 112% 0%,rgba(72,168,168,.20),transparent 62%),
    linear-gradient(172deg,#F2FAFB 0%,#E6F4F7 100%);
}
.fx-top h1{
  margin:0;font-size:26px;font-weight:800;color:var(--r-deep,#2C6B6B);letter-spacing:.06em;
}
.fx-top p{
  margin:9px 0 0;font-size:12.5px;color:var(--r-muted,#6B7B7B);letter-spacing:.04em;line-height:1.8;
}

/* ── ① 类目九宫格 ────────────────────────────────── */
.fx-catgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
  padding:16px 18px 10px;background:var(--r-bg,#E6F4F7);
}
.fx-catcell{
  position:relative;display:block;border-radius:13px;overflow:hidden;
  background:#FFFFFF;box-shadow:0 3px 10px rgba(44,107,107,.10);
  border:1px solid rgba(44,107,107,.06);transition:transform 150ms;
}
.fx-catcell:active{transform:scale(.965);}
/* 近正方形媒体区：padding 撑高，兼容不支持 aspect-ratio 的旧内核 */
.fx-catcell .ph{
  position:relative;width:100%;padding-bottom:108%;overflow:hidden;
  background:linear-gradient(150deg,#54B2B2,#2C6B6B);
}
.fx-catcell .ph img{
  position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;
}
.fx-catcell .ov{
  position:absolute;left:0;right:0;bottom:0;padding:24px 9px 9px;
  background:linear-gradient(180deg,rgba(10,36,38,0),rgba(10,36,38,.80));
}
.fx-catcell .ov .nm{color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;line-height:1.4;}
.fx-catcell .ov .ct{color:rgba(255,255,255,.80);font-size:10.5px;margin-top:3px;}
/* 没有封面图时：品牌色底 + 居中类目名。
   注意：.ph 是靠 padding-bottom 撑高的，它自身内容盒高度为 0，
   所以文字层必须**绝对定位铺满整格**才能真正垂直居中。 */
.fx-catcell .ph-plain{
  position:absolute;left:0;top:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.fx-catcell .ph-plain .nm{color:#fff;font-size:14px;font-weight:800;letter-spacing:.06em;line-height:1.4;text-align:center;padding:0 6px;}
.fx-catcell .ph-plain .ct{color:rgba(255,255,255,.78);font-size:10.5px;}

/* ── ② 列表视图页头 ─────────────────────────────── */
.fx-cathead{
  padding:70px 18px 4px;
  background:
    radial-gradient(22rem 13rem at 112% 0%,rgba(72,168,168,.20),transparent 62%),
    linear-gradient(172deg,#F2FAFB 0%,#E6F4F7 100%);
}
.fx-cathead .back{
  display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;
  color:var(--r-main,#48A8A8);margin-bottom:10px;
}
.fx-cathead h1{
  margin:0;font-size:24px;font-weight:800;color:var(--r-deep,#2C6B6B);letter-spacing:.05em;
}
.fx-cathead .sub{
  margin:8px 0 0;font-size:12.5px;color:var(--r-muted,#6B7B7B);letter-spacing:.04em;line-height:1.8;
}

/* ── 列表页类目切换 ─────────────────────────────── */
.fx-catbar{
  display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;
  padding:14px 18px 12px;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#E6F4F7 62%,rgba(230,244,247,0) 100%);
}
.fx-catbar::-webkit-scrollbar{display:none;}
.fx-chip{
  flex:none;display:inline-flex;align-items:center;height:34px;padding:0 17px;
  border-radius:var(--r-pill,999px);
  font-size:13.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;
  background:#FFFFFF;color:var(--r-main,#48A8A8);
  border:1px solid rgba(72,168,168,.28);
  font-family:inherit;transition:background 160ms,color 160ms;
}
.fx-chip.on{
  background:linear-gradient(96deg,var(--r-main,#48A8A8),#5FB8B8);
  color:#fff;border-color:transparent;box-shadow:0 5px 14px rgba(72,168,168,.32);
}
.fx-chip:active{transform:scale(.96);}

/* ── ② 文章列表：上图下文 ───────────────────────── */
.fx-articles{padding:2px 18px 6px;background:var(--r-bg,#E6F4F7);}
.fx-art{
  display:block;background:#FFFFFF;border-radius:15px;overflow:hidden;margin-bottom:13px;
  box-shadow:0 4px 14px rgba(44,107,107,.09);border:1px solid rgba(44,107,107,.05);
  transition:transform 150ms;
}
.fx-art:active{transform:scale(.985);}
/* 封面：约 5:3，横幅感与公众号文章列表一致 */
.fx-art .ph{position:relative;width:100%;padding-bottom:60%;overflow:hidden;background:#EAF4F5;}
.fx-art .ph img{
  position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;
}
.fx-art .ph .noimg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#9FB9B9;
}
.fx-art .fx-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;font-size:15px;padding-left:4px;
}
.fx-art .bd{padding:13px 15px 15px;}
.fx-art h3{
  margin:0;font-size:15.5px;font-weight:800;color:#26494A;line-height:1.55;letter-spacing:.01em;
}
.fx-art p{
  margin:8px 0 0;font-size:12.5px;line-height:1.8;color:#6B8282;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.fx-art .meta{
  margin-top:11px;display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:#9FB2B2;letter-spacing:.02em;
}

/* ── 视频播放角标（通用）────────────────────────── */
.fx-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.42);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-style:normal;font-size:13px;padding-left:3px;box-sizing:border-box;
}

/* ── 空态 ── */
.fx-none{
  margin:8px 18px 20px;padding:38px 16px;text-align:center;
  background:#FFFFFF;border-radius:16px;border:1px dashed rgba(72,168,168,.3);
}
.fx-none b{display:block;font-size:15px;color:var(--r-deep,#2C6B6B);font-weight:800;}
.fx-none span{display:block;margin-top:8px;font-size:12.5px;color:var(--r-muted,#6B7B7B);line-height:1.8;}

/* ── 尾部提示 ── */
.fx-foot{
  margin:14px 18px 0;text-align:center;font-size:11.5px;color:#93AAAA;line-height:1.9;
}
/* 底部留白：rzh-home.css 里把 .has-bnav 的 body 内距置 0 了，这里补上固定底栏的空间，
   保证深色/同色底一直铺到页面底、内容不被底栏压住 */
.fx-spacer{height:88px;}

/* ── 详情浮层 ── */
.fx-modal{
  position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;
  background:rgba(12,32,34,.62);backdrop-filter:blur(3px);
}
.fx-modal[hidden]{display:none;}
.fx-modal-bd{
  width:100%;max-width:520px;margin:0 auto;box-sizing:border-box;
  background:#FFFFFF;border-radius:20px 20px 0 0;
  padding:14px 16px calc(76px + env(safe-area-inset-bottom,0px));
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  position:relative;animation:fxUp .22s ease-out;
}
@keyframes fxUp{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.fx-close{
  position:absolute;right:10px;top:8px;width:34px;height:34px;border:none;background:none;
  font-size:26px;line-height:1;color:#9FB9B9;cursor:pointer;font-family:inherit;
}
.fx-media{
  width:100%;border-radius:14px;overflow:hidden;background:#EAF4F5;margin-top:26px;
}
.fx-media img,.fx-media video{width:100%;display:block;max-height:62vh;object-fit:contain;background:#0E1F21;}
.fx-modal h3{
  margin:14px 2px 0;font-size:17px;font-weight:800;color:var(--r-deep,#2C6B6B);
  line-height:1.5;letter-spacing:.02em;
}
.fx-modal .fx-desc{
  margin:9px 2px 0;font-size:13.5px;line-height:1.9;color:#44605F;white-space:pre-wrap;
}
.fx-modal .fx-go{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:18px 0 0;height:46px;border-radius:var(--r-pill,999px);
  background:linear-gradient(96deg,var(--r-main,#48A8A8),#5FB8B8);color:#fff;
  font-size:15px;font-weight:800;letter-spacing:.08em;box-sizing:border-box;
}
.fx-empty-media{
  padding:34px 12px;text-align:center;font-size:12.5px;color:#9FB9B9;
}