/* ============================================================
   招商加盟页（join.html）— 对齐 MasterGo 设计稿 WTolO7dz
   三屏：Hero / 加盟支持(三栏) / 品牌合作(双卡)
   注：图片均为真实门店素材占位，待业务替换为招商加盟专属素材
   ============================================================ */

/* 内容容器：跟随设计稿 1560 居中（1920 画布下约 180..1740） */
.jf-wrap{width:100%;max-width:1560px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
/* 品牌合作区专用：设计稿双卡内容宽 1802（116..1802），比三栏区更宽 */
.jf-wrap--wide{max-width:1802px}

/* ---------- 01 Hero（1920×820，双图交叉淡入轮播） ---------- */
.jf-hero{position:relative;height:820px;min-height:420px;overflow:hidden;background:#2189eb}
.jf-hero__media,.jf-hero__slide{position:absolute;inset:0}
.jf-hero__slide{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s ease}
.jf-hero__slide.is-active{opacity:1;visibility:visible}
.jf-hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* 首屏左右箭头（2026-11-10 阿凯：箭头要显示）。复用 jn-slider__nav 描边圆环规范，
   左右垂直居中；窄屏 44px。单张时由 JS 加 .is-single 隐藏。 */
.jf-hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4}
.jf-hero__arrow--prev{left:20px}
.jf-hero__arrow--next{right:20px}
.jf-hero__arrow:active{transform:translateY(-50%) scale(.94)}
.jf-hero.is-single .jf-hero__arrow{display:none}
.jf-hero__pagination{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:12px}
.jf-hero__dot{width:14px;height:14px;padding:0;border:2px solid #fff;border-radius:50%;background:transparent;box-shadow:0 1px 6px rgba(0,0,0,.3);cursor:pointer}
.jf-hero__dot.is-active{background:#fff}
.jf-hero__dot:focus-visible{outline:3px solid #03234b;outline-offset:3px}
.jf-hero.is-single .jf-hero__pagination{display:none}
.jf-hero__cta{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;
  font-size:16px;line-height:1.79;text-decoration:none;z-index:2;white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.35)}
/* 17×26 白色半透明胶囊 + 下箭头，逐字取自设计稿 14:7150 的 SVG */
.jf-hero__pill{width:17px;height:26px;flex:none;animation:jf-hero-bob 2s ease-in-out infinite}
.jf-hero__pill rect:first-of-type{transition:fill-opacity .3s ease}
.jf-hero__cta:hover .jf-hero__pill rect:first-of-type{fill-opacity:.34}
@keyframes jf-hero-bob{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.jf-hero__pill{animation:none}.jf-hero__slide{transition:none}}

/* ---------- 02 加盟支持（1920×921，白底） ---------- */
.jf-support{background:#fff;padding:96px 0 104px}
.jf-support__title{font-family:var(--ff-title);font-weight:700;color:#000;text-align:center;font-size:clamp(40px,4.4vw,60px);line-height:1.2;margin:0 0 64px;letter-spacing:1px}
.jf-support__carousel{position:relative;display:flex;align-items:center;gap:32px}
.jf-support__viewport{overflow:hidden;flex:1}
.jf-support__track{display:flex;gap:60px;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.jf-support__col{flex:0 0 calc((100% - 120px)/3);min-width:0}
/* 箭头统一到 .ux-arrow 规范：浅底用品牌蓝描边环 */
.jf-support__arrow{
  width:62px;height:62px;padding:0;border:2px solid currentColor;
  border-radius:50%;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--brand);
  transition:background-color .2s ease,transform .2s ease,opacity .2s ease;
}
.jf-support__arrow:hover{background:rgba(0,103,255,.1)}
.jf-support__arrow:active{transform:scale(.94)}
.jf-support__arrow:disabled{opacity:.28;cursor:not-allowed;background:transparent}
.jf-support__arrow svg{width:42%;height:42%}
.jf-support__media{position:relative;width:100%;aspect-ratio:480/400;border-radius:20px;overflow:hidden;margin-bottom:28px}
.jf-support__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.jf-support__name{font-family:var(--ff-title);font-size:clamp(28px,2.6vw,40px);font-weight:700;color:#000;text-align:left;line-height:1.2;margin:0 0 16px}
.jf-support__desc{font-size:16px;line-height:1.8;color:#757575;margin:0;text-align:left}

/* ---------- 03 品牌合作（1920×921，浅灰底） ---------- */
.jf-brands{background:#F7F7F7;padding:96px 0 104px}
.jf-brands__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:46px}
.jf-brand-card{position:relative;border-radius:20px;overflow:hidden}
.jf-brand-card--red{background:var(--zlys,#E60012);transition:background-color .3s ease}
.jf-brand-card--white{background:#fff;transition:background-color .3s ease}
/* 色块随 hover 切换：左邻右舍默认红；生活驿站默认白，hover 变品牌绿（标题/CTA 转白） */
.jf-brand-card--white .jf-brand-card__title,.jf-brand-card--white .jf-brand-card__cta{transition:color .3s ease}
.jf-brand-card--white:hover{background:var(--shyz,#21B354)}
.jf-brand-card--white:hover .jf-brand-card__title,
.jf-brand-card--white:hover .jf-brand-card__cta{color:#fff}
/* 互斥：任意时刻仅一张高亮。生活驿站被 hover 时，左邻右舍红卡还原白底黑字 */
.jf-brand-card--red .jf-brand-card__title,
.jf-brand-card--red .jf-brand-card__cta{transition:color .3s ease}
.jf-brands:has(.jf-brand-card--white:hover) .jf-brand-card--red{background:#fff}
.jf-brands:has(.jf-brand-card--white:hover) .jf-brand-card--red .jf-brand-card__title,
.jf-brands:has(.jf-brand-card--white:hover) .jf-brand-card--red .jf-brand-card__cta{color:#000}
.jf-brand-card__media{position:relative;width:100%;aspect-ratio:820/509}
.jf-brand-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 门店形象图：压在图片右下角，横跨图片与色带分界线。按设计稿比例随卡片缩放：
   红卡 165/820=20.12%宽 · 右距53/820=6.46% · 跨界24/509=4.72%高
   白卡 173/820=21.10%宽 · 右距49/820=5.98% · 跨界26/509=5.11%高
   注：img.jf 双类压过 .jf-brand-card__media img(0-1-1)，并显式重置 inset 遗留的 left/top */
.jf-brand-card__media img.jf-brand-card__storefront{position:absolute;left:auto;top:auto;right:6.46%;bottom:-4.72%;width:20.12%;height:auto;object-fit:contain;z-index:2;display:block}
.jf-brand-card--white .jf-brand-card__media img.jf-brand-card__storefront{right:5.98%;bottom:-5.11%;width:21.1%}
.jf-brand-card__band{padding:34px 51px 42px}
/* text-wrap:balance —— 两句话都是 13 字，1280/1024/375 会折行；不 balance 会断出「端」「分」这种孤字 */
.jf-brand-card__title{font-family:var(--ff-title);font-size:clamp(28px,2.6vw,40px);font-weight:700;line-height:1.2;margin:0 0 16px;text-wrap:balance}
.jf-brand-card--red .jf-brand-card__title{color:#fff}
.jf-brand-card--white .jf-brand-card__title{color:#000}
.jf-brand-card__cta{display:inline-flex;align-items:center;gap:10px;font-size:24px;text-decoration:none;line-height:1.2}
.jf-brand-card--red .jf-brand-card__cta{color:#fff}
.jf-brand-card--white .jf-brand-card__cta{color:#000}
.jf-brand-card__cta svg{width:22px;height:22px;transition:transform .3s ease}
.jf-brand-card__cta:hover svg{transform:translateX(5px)}

/* ---------- 响应式 ---------- */
@media (max-width:1023px){
  .jf-support__grid{grid-template-columns:1fr;gap:48px;max-width:520px;margin:0 auto}
  .jf-brands__grid{grid-template-columns:1fr;gap:32px;max-width:560px;margin:0 auto}
  .jf-brand-card__logo{left:32px}
  .jf-brand-card__band{padding:28px 32px 34px}
}
@media (max-width:639px){
  /* 横版 KV 在手机上完整保留左右品牌字样与门店，避免 cover 裁断。 */
  /* 高度全站统一（2026-11-10）：min(820px,88vw)，原 280px 偏矮 */
  .jf-hero{height:min(820px,88vw);min-height:min(820px,88vw)}
  .jf-hero__arrow{width:44px;height:44px}
  .jf-hero__arrow--prev{left:12px}
  .jf-hero__arrow--next{right:12px}
  .jf-hero__slide img{object-fit:cover;object-position:center}
  .jf-hero__arrow{width:44px;height:44px}
  .jf-hero__arrow--prev{left:12px}
  .jf-hero__arrow--next{right:12px}
  .jf-hero__slide img{object-fit:contain}
  .jf-support{padding:64px 0 72px}
  .jf-brands{padding:64px 0 72px}
  .jf-support__title{margin-bottom:48px}
  .jf-brand-card__title{font-size:26px}
  .jf-brand-card__cta{font-size:20px}

  /* 加盟支持：桌面三列公式 flex:0 0 calc((100% - 120px)/3) 在窄屏算成 18px 宽，
     文字被压成竖排（走查实测 col 宽 18px / viewport 175px）。
     移动端改为「一屏一列 + 露出下一列一点」，
     保留横向滑动手势，但每列必须能正常读字。 */
  .jf-support__carousel{gap:0}
  .jf-support__viewport{margin:0 -20px;padding:0 20px}
  .jf-support__track{gap:16px}
  .jf-support__col{flex:0 0 84%}
  .jf-support__media{aspect-ratio:16/10;border-radius:14px;margin-bottom:18px}
  .jf-support__name{font-size:22px;margin-bottom:10px}
  .jf-support__desc{font-size:15px;line-height:1.75}
  /* 窄屏箭头取舍：箭头是 carousel 的直接子元素，绝对定位只能相对整个轮播区，
     无论放哪都会压到卡片文字（实测压过小标题，也压过正文末行）。
     移动端改为「手势滑动 + 底部圆点」，把箭头整个收掉 ——
     这是移动端轮播的通行做法，也不牺牲任何可读性。
     圆点由 JS 按当前索引生成，见 business-loader / franchise 轮播脚本。 */
  .jf-support__carousel{gap:0;position:relative;margin-bottom:36px}
  .jf-support__viewport{margin:0 -20px;padding:0 20px}
  .jf-support__track{gap:16px}
  .jf-support__media{margin-bottom:18px}
  .jf-support__arrow{display:none}

  /* 窄屏分页圆点：箭头收起来后的唯一位置提示。
     圆点是 .jf-support__carousel 的子元素，而 carousel 是 flex 布局
     （子项：prev / viewport / next），圆点会成为第四个 flex 项并横排进来。
     所以改成 absolute，锚到 carousel 底部居中，脱离 flex 流。 */
  .jf-support__dots{
    position:absolute;left:0;right:0;bottom:-30px;
    display:flex;justify-content:center;align-items:center;gap:8px;
    z-index:5;
  }
  .jf-support__dot{
    width:8px;height:8px;padding:0;border:0;border-radius:50%;
    background:#D8DCE3;cursor:pointer;
    transition:background .25s ease,transform .25s ease;
  }
  .jf-support__dot.is-active{background:var(--brand);transform:scale(1.25)}
}