/* =========================================================
   Curiouser · 2026-09-27 新增的三块
     #cx-cmos  camp 详情页的 Camp Classes 照片拼图（原来是七个圆图标）
     .cj-btn / .cj-pics  首页 journeys：原来两列格子只有一张卡，右边空一半
     #cx-mem   首页 Membership（版式照搬 KL 站 family-club-what-we-do）
   拼图的写法跟 /parties/ 上那块 .ph-mosaic 一致：照片铺满、底部压一层渐变、
   白字压在左下角。第一块占 2x2，七块在 5 列里正好铺满两行。
   左右留白跟全站一致：80px（>1024）/ 30px（768-1024）/ 20px（<768）
   ========================================================= */
#cx-cmos,#cx-mem{--ink:#3F4D51;--muted:#53666F;--rust:#B0533E;--cream:#F7F2EB;--sand:#CFC8C0}
#cx-cmos *,#cx-mem *{box-sizing:border-box}

/* ---------- camp 详情页的 ENQUIRE 按钮 ----------
   原来的 BOOK A CAMP（3c309c0）在 post-4767.css 里有自己的 text-align:left，
   新加的这个没有，会继承到居中，看起来就跟上面那个错开。这里对齐回去。 */
.cx-campenq{text-align:left;margin-top:14px}
.cx-campenq .elementor-widget-container{text-align:left}
.cx-campenq a{text-decoration:none}

/* ---------- Camp Classes 照片拼图 ---------- */
/* 原来这块挂在 .elementor-element-4169b6e 上的下留白（桌面 86 / 手机 49），
   块换掉之后自己带上，否则下面那条笔刷会贴得太近 */
#cx-cmos{padding:0 0 86px}
#cx-cmos .cm-in{padding-left:80px;padding-right:80px}
#cx-cmos .cm-sub{margin:0 0 24px;max-width:46em;font:400 15px/25px Lato,sans-serif;color:var(--muted)}
/* 5 列 × 2 行 = 10 格，第一块占 2x2，剩下 6 块正好铺满 */
#cx-cmos .cm-mosaic{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
#cx-cmos [class^=cm-t]{position:relative;aspect-ratio:1;overflow:hidden;
  background:var(--sand) center/cover no-repeat}
#cx-cmos .cm-big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
#cx-cmos [class^=cm-t]:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,36,39,0) 30%,rgba(28,36,39,.66) 66%,rgba(28,36,39,.95) 100%)}
#cx-cmos [class^=cm-t] span{position:absolute;left:12px;right:10px;bottom:11px;z-index:2;
  color:#fff;text-align:left;font:700 14px/18px Lato,sans-serif}
#cx-cmos .cm-big span{font-size:21px;line-height:26px;left:18px;bottom:16px}

/* ---------- 首页 journeys：按钮 + 三张照片 ---------- */
/* 底色：journeys 走白、Membership 走奶油白（按 Ang 2026-09-27 的意见对调）。
   这样 Membership 下面那条笔刷（9282a7b，白底 + edge-cream.svg = 奶油在上、白在下）
   才说得通 —— 原来它上面是白的，笔刷画的却是奶油。 */
#curiouser-journeys{background:#FFFFFF !important}
/* 首页 hero（86c7670）底色也跟着换白：它底部那条笔刷是拿 mask 把照片撕开的，
   撕掉的地方露的是这个容器的底色。原来是奶油白，journeys 一换成白就会夹出一条
   12px 的奶油缝。 */
.elementor-element-86c7670{background-color:#FFFFFF !important}
#curiouser-journeys .cj-btn{margin:0 0 34px}
#curiouser-journeys .cj-btn a{text-decoration:none}
#curiouser-journeys .cj-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#curiouser-journeys .cj-pics figure{margin:0;overflow:hidden;background:#E7DFD4;height:360px}
#curiouser-journeys .cj-pics img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- 首页 Membership ---------- */
/* 上面是白的，这一块是奶油白，中间按全站的画法加一条笔刷过渡：
   笔刷带的底色用下面那一块的颜色（奶油白），笔刷本身画上面那一块的颜色（白），
   跟 2089a0d / 9282a7b 那两条是同一个做法。 */
#cx-mem{background:#F7F2EB;padding:118px 0 68px;position:relative}
#cx-mem::before{content:"";position:absolute;left:0;right:0;top:0;height:66px;pointer-events:none;
  background:url(/wp-content/uploads/curiouser/edge-white.svg) top center/100% 100% no-repeat}
#cx-mem .mem-in{padding-left:80px;padding-right:80px}
#cx-mem h2{margin:0 0 20px;font:700 40px/50px Arvo,Georgia,serif;color:var(--ink);letter-spacing:-.4px}
#cx-mem .mem-lead{margin:0 0 30px;max-width:40em;font:400 16px/27px Lato,sans-serif;color:var(--muted)}
#cx-mem .mem-cta{margin:0 0 40px}
#cx-mem .mem-cta a{text-decoration:none}
#cx-mem .mem-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#cx-mem figure{margin:0;overflow:hidden;background:#EFEAE3;height:400px}
#cx-mem img{display:block;width:100%;height:100%;object-fit:cover}

@media(max-width:1024px){
  #cx-cmos .cm-in,#cx-mem .mem-in{padding-left:30px;padding-right:30px}
  /* 平板和手机上不再留大块，第一块横跨整行当引子，剩下六块两行铺满 */
  #cx-cmos .cm-mosaic{grid-template-columns:repeat(3,1fr)}
  #cx-cmos .cm-big{grid-column:span 3;grid-row:span 1;aspect-ratio:16/7}
  #cx-cmos .cm-big span{font-size:19px;line-height:24px}
  #curiouser-journeys .cj-pics,#cx-mem .mem-row{gap:14px}
  #curiouser-journeys .cj-pics figure{height:230px}
  #cx-mem{padding:96px 0 52px}
  #cx-mem h2{font-size:32px;line-height:41px}
  #cx-mem figure{height:250px}
}
@media(max-width:767px){
  #cx-cmos .cm-in,#cx-mem .mem-in{padding-left:20px;padding-right:20px}
  #cx-cmos .cm-mosaic{grid-template-columns:repeat(2,1fr);gap:6px}
  #cx-cmos .cm-big{grid-column:span 2;aspect-ratio:16/9}
  #cx-cmos [class^=cm-t] span{font-size:13px;line-height:17px;left:10px;bottom:9px}
  #cx-cmos .cm-big span{font-size:17px;line-height:22px}
  #curiouser-journeys .cj-btn{margin-bottom:26px}
  #curiouser-journeys .cj-pics,#cx-mem .mem-row{grid-template-columns:1fr;gap:12px}
  #curiouser-journeys .cj-pics figure{height:240px}
  #cx-cmos{padding-bottom:49px}
  #cx-mem{padding:72px 0 42px}
  #cx-mem::before{height:34px}
  #cx-mem h2{font-size:27px;line-height:35px}
  #cx-mem .mem-cta{margin-bottom:28px}
  #cx-mem figure{height:240px}
}