/* K-Ranking 首页新版 Hero + Intelligence + Methodology（2026-08-25）
   来源：客户提供的 Ranking Page修改/index.html
   这个文件只在 category2.html 的频道首页（catid==2 且没有 tab）加载。
   导航栏保持不变（header_kranking + nav_kranking），这里只管 hero-page 以下。 */

/* ===== Variables ===== */
.kr26-new-hero-page{
  --kr-ink:#17151c;--kr-muted:#68636f;--kr-purple:#6f3cff;--kr-purple-dark:#5526dc;
  --kr-lav:#f4f1fb;--kr-line:#e5e0ed;--kr-soft:#faf9fc;--kr-max:1180px;--kr-radius:18px;
  --kr-shadow:0 18px 50px rgba(48,32,75,.09);
  color:var(--kr-ink);
}
.kr26-new-hero-page *{box-sizing:border-box}
.kr26-new-hero-page a{color:inherit;text-decoration:none}
.kr26-new-container{width:min(calc(100% - 48px),var(--kr-max));margin-inline:auto}

/* ===== Hero Visual (Screen 1) ===== */
.kr26-new-hero{position:relative;min-height:600px;display:flex;align-items:center;overflow:hidden;background-image:linear-gradient(90deg,rgba(250,249,253,.98) 0%,rgba(250,249,253,.87) 37%,rgba(250,249,253,.18) 70%),url('/static/knowwell2026/images/kranking/ranking-hero-v2.png');background-size:cover;background-position:center}
.kr26-new-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 32%,rgba(39,31,55,.05))}
.kr26-new-hero-content{position:relative;z-index:20;width:min(650px,55%);padding:64px 0}
.kr26-new-hero-category{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:0 22px;border:1px solid #2c2733;border-radius:999px;background:#e9e2f6;font-weight:650;cursor:pointer}
.kr26-new-hero-category:after{content:"\2304";font-size:.9em}
/* 2026-09-01：Browse By Category 真实下拉放进 hero。原来的 .kr26-browse 是 996px 居中块，
   这里重置成 hero 里的一个内联 pill，下拉面板照常在下方展开。 */
.kr26-new-hero-content .kr26-browse{position:relative;width:auto;margin:0 0 28px;z-index:40}
/* 触发按钮对齐 hero 里原本那颗静态 pill（.kr26-new-hero-category）：同样的圆角、底色和下拉箭头。
   之前换成真实下拉后箭头丢了，客户反馈「下拉按钮没有了」。 */
.kr26-new-hero-content .kr26-browse-trigger{width:auto;min-height:40px;height:auto;gap:10px;padding:0 22px;justify-content:center;border:1px solid #2c2733;border-radius:999px;background:#e9e2f6;font:650 1rem/1 inherit}
/* 箭头用 CSS 画，不用字体字形。原来写的是 content:"\2304"，很多字体没有这个字，
   会退化成一个位置偏高的 ^，客户反馈「按钮显示有问题」。 */
.kr26-new-hero-content .kr26-browse-trigger:after{content:"";width:7px;height:7px;flex:0 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.kr26-new-hero-content .kr26-browse.is-open .kr26-browse-trigger:after{transform:translateY(1px) rotate(225deg)}
/* 面板：旧版是 177px 宽的扁平紫块、48px 行高，落在新 hero 上会直接盖住 H1。
   这里改成白底卡片、行高收紧。
   注意：这里绝对不能加 overflow/max-height。三级栏目是以「飞出面板」的形式出现在本面板
   右侧、盒子之外的，一旦本元素变成滚动容器就会把飞出面板整个裁掉——线上配了三级栏目
   却点不出来就是这个原因。列表要多长就多长，跟 K-Ranking 细节页的下拉保持一致。 */
.kr26-new-hero-content .kr26-browse-menu{left:0;top:calc(100% + 10px);width:262px;padding:8px;border:1px solid var(--kr-line);border-radius:14px;background:#fff;box-shadow:var(--kr-shadow)}
.kr26-new-hero-content .kr26-browse-menu>div>a{height:auto;min-height:38px;padding:0 12px;justify-content:space-between;border-radius:9px;text-align:left;font-size:.95rem;line-height:1.35}
.kr26-new-hero-content .kr26-browse-menu>div:hover>a,.kr26-new-hero-content .kr26-browse-menu>div:focus-within>a{background:var(--kr-lav);font-weight:700}
/* 配合 kranking.css 里「同时只展开一个面板」的修正。上一条的 :focus-within 高亮特异度和
   kranking.css 里的重置规则相同，而本文件加载更晚会赢，所以这里再写一次重置。 */
.kr26-new-hero-content .kr26-browse-menu:hover>div:not(:hover)>a{background:transparent;font-weight:400}
.kr26-new-hero-content .kr26-browse-sub{left:calc(100% - 4px);width:216px;padding:8px;border:1px solid var(--kr-line);border-radius:14px;background:#fff;box-shadow:var(--kr-shadow)}
.kr26-new-hero-content .kr26-browse-sub a{height:auto;min-height:36px;padding:0 12px;justify-content:flex-start;border-radius:9px;text-align:left;font-size:.9rem;line-height:1.35}
.kr26-new-hero-content .kr26-browse-sub a:hover{background:var(--kr-lav);font-weight:700}
/* 有子栏目的行右侧给一个 › 提示，并让它和左侧栏目名分开 */
.kr26-new-hero-content .kr26-browse-menu>div:has(.kr26-browse-sub a)>a:after{content:"";width:6px;height:6px;flex:0 0 auto;margin-left:8px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.55}
/* hero 自己是 overflow:hidden（为了裹住背景图）。下拉列表一长就会被 hero 下边缘切掉，
   线上二级栏目多的时候必然踩到。展开状态下放开裁切，收起后恢复，背景图不受影响。 */
.kr26-new-hero:has(.kr26-browse.is-open){overflow:visible}
/* 不支持 :has() 的老浏览器兜底：下拉展开时 JS 会在 hero 上加 kr26-hero-open */
.kr26-new-hero.kr26-hero-open{overflow:visible}
.kr26-new-hero h1{margin:0 0 24px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(3.2rem,5.2vw,5.8rem);font-weight:500;line-height:.92;letter-spacing:-.055em}
.kr26-new-hero-lead{max-width:610px;margin:0;color:#38323e;font-size:1.16rem;line-height:1.75}
.kr26-new-hero-points{display:grid;gap:8px;margin:34px 0 0;padding:25px 0 0;border-top:1px solid rgba(45,36,57,.22);list-style:none;color:#2a2530;font-size:1rem}
.kr26-new-hero-points li{display:flex;align-items:center;gap:12px}
.kr26-new-hero-points li:before{content:"\2713";width:18px;color:var(--kr-ink);font-weight:800}

/* ===== Intelligence / Interactive Map (Screen 2) ===== */
.kr26-new-intelligence{padding:104px 0 96px;background:linear-gradient(#fbfafe,#fff)}
.kr26-new-intelligence-top{display:flex;justify-content:space-between;gap:40px;align-items:end}
.kr26-new-eyebrow{margin:0 0 12px;color:var(--kr-purple);font-size:.75rem;font-weight:800;letter-spacing:.14em}
.kr26-new-section-heading{max-width:690px}
.kr26-new-section-heading h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.35rem,4.6vw,4.6rem);font-weight:500;line-height:1.02;letter-spacing:-.04em}
.kr26-new-section-heading p{margin:20px 0 0;color:var(--kr-muted);font-size:1.08rem}
.kr26-new-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.kr26-new-filter{padding:8px 15px;border:1px solid #d9d2e5;border-radius:999px;background:#fff;color:#55505c;font-weight:700;font-size:.84rem;cursor:pointer;transition:.2s}
.kr26-new-filter:hover{border-color:#9d86cf}
.kr26-new-filter[aria-pressed="true"]{color:#fff;border-color:var(--kr-purple);background:var(--kr-purple)}

.kr26-new-map{position:relative;height:670px;margin-top:42px;overflow:hidden;touch-action:none;cursor:grab;user-select:none;border:1px solid #e8e4ef;border-radius:28px;background-color:#fdfcff;background-image:radial-gradient(circle at 50% 50%,transparent 0 115px,rgba(111,60,255,.045) 116px,transparent 117px 205px,rgba(111,60,255,.035) 206px,transparent 207px),radial-gradient(#cfc5e2 1px,transparent 1px);background-size:auto,28px 28px}
.kr26-new-map.dragging{cursor:grabbing}
.kr26-new-map:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 30%,rgba(255,255,255,.72) 92%)}
.kr26-new-helper{position:absolute;right:26px;top:22px;z-index:20;color:#81798c;font-size:.78rem;pointer-events:none}
.kr26-new-network{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.kr26-new-network line{stroke:#cfc6de;stroke-width:1;opacity:.46;transition:.16s}
.kr26-new-network line.active{stroke:var(--kr-purple);stroke-width:1.8;opacity:.64}
.kr26-new-node{position:absolute;z-index:3;width:132px;height:132px;padding:16px;transform:translate(-50%,-50%);border:1px solid #dcd6e6;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 10px 28px rgba(38,24,60,.06);color:var(--kr-ink);cursor:pointer;display:grid;place-content:center;text-align:center;transition:opacity .16s,border-color .2s,box-shadow .2s}
.kr26-new-node:hover,.kr26-new-node:focus-visible{border-color:#9679d4;outline:none}
.kr26-new-node:focus-visible{box-shadow:0 0 0 4px rgba(111,60,255,.2)}
.kr26-new-node.active{width:148px;height:148px;border:2px solid var(--kr-purple);box-shadow:0 0 0 9px rgba(111,60,255,.075),0 0 0 18px rgba(111,60,255,.035),0 15px 38px rgba(58,34,105,.12)}
.kr26-new-node .icon{display:grid;place-items:center;margin:0 auto 8px;width:28px;height:28px;color:var(--kr-purple);font-size:1.05rem}
.kr26-new-node strong{display:block;max-width:112px;font-size:.82rem;line-height:1.18}
.kr26-new-node.active strong{max-width:126px;font-size:.88rem}
.kr26-new-node.hidden{opacity:0;pointer-events:none}
.kr26-new-preview{position:absolute;z-index:18;width:292px;padding:23px;border:1px solid #ded8e8;border-radius:18px;background:#fff;box-shadow:var(--kr-shadow);transition:opacity .2s,transform .2s}
.kr26-new-preview .preview-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--kr-purple);background:var(--kr-lav);margin-bottom:14px}
.kr26-new-preview h3{font-family:Georgia,"Times New Roman",serif;font-size:1.65rem;line-height:1.1;margin:0 0 18px}
.kr26-new-view-all{position:absolute;right:25px;bottom:22px;z-index:20}
.kr26-new-mobile-explorer{display:none}
.kr26-new-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border:1px solid var(--kr-line);border-radius:999px;font-weight:750;cursor:pointer;transition:.22s ease;background:#fff}
.kr26-new-btn:hover{border-color:#bdb2d2;color:var(--kr-purple)}
.kr26-new-btn-primary{border-color:var(--kr-purple);color:#fff;background:var(--kr-purple)}
.kr26-new-btn-primary:hover{background:var(--kr-purple-dark);transform:translateY(-1px)}

/* ===== Methodology FAQ (Screen 3) ===== */
.kr26-new-methodology{padding:104px 0}
.kr26-new-methodology-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:90px;align-items:start}
.kr26-new-methodology .kr26-new-section-heading{position:sticky;top:116px}
.kr26-new-methodology .kr26-new-section-heading h2{font-size:clamp(2.3rem,4vw,3.8rem)}
.kr26-new-faq{border-top:1px solid var(--kr-line)}
.kr26-new-faq-item{border-bottom:1px solid var(--kr-line)}
.kr26-new-faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:25px 6px;border:0;background:transparent;text-align:left;color:var(--kr-ink);font-size:1.22rem;font-weight:720;cursor:pointer}
.kr26-new-faq-question:hover{color:var(--kr-purple)}
.kr26-new-faq-question:focus-visible{outline:2px solid var(--kr-purple);outline-offset:4px;border-radius:8px}
.kr26-new-faq-symbol{flex:0 0 32px;height:32px;border:1px solid #d7d0e2;border-radius:50%;display:grid;place-items:center;color:var(--kr-purple);font-size:1.25rem;line-height:1}
.kr26-new-faq-answer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .24s,opacity .24s}
.kr26-new-faq-answer>div{overflow:hidden;max-width:700px;padding:0 50px 27px 6px;color:var(--kr-muted)}
.kr26-new-faq-answer p{margin:0 0 16px}
.kr26-new-faq-answer p:last-child{margin-bottom:0}
.kr26-new-faq-answer ul,.kr26-new-faq-answer ol{margin:4px 0 18px;padding-left:1.35rem}
.kr26-new-faq-answer li{margin:7px 0;padding-left:4px}
.kr26-new-faq-item.open .kr26-new-faq-answer{grid-template-rows:1fr;opacity:1}
.kr26-new-faq-item.open .kr26-new-faq-question{color:var(--kr-purple)}

/* ===== Responsive ===== */
@media(max-width:850px){
 .kr26-new-hero{min-height:650px;background-image:linear-gradient(90deg,rgba(250,249,253,.96),rgba(250,249,253,.7) 66%,rgba(250,249,253,.25)),url('/static/knowwell2026/images/kranking/ranking-hero-v2.png');background-position:62% center}
 .kr26-new-hero-content{width:min(620px,78%)}
 .kr26-new-intelligence-top{align-items:flex-start;flex-direction:column}
 .kr26-new-filters{justify-content:flex-start}
 .kr26-new-map{height:610px}
 .kr26-new-node{width:112px;height:112px}
 .kr26-new-node.active{width:128px;height:128px}
 .kr26-new-preview{width:245px}
 .kr26-new-methodology-layout{grid-template-columns:1fr;gap:45px}
 .kr26-new-methodology .kr26-new-section-heading{position:static}
}
@media(max-width:620px){
 .kr26-new-container{width:min(calc(100% - 32px),var(--kr-max))}
 .kr26-new-hero{min-height:620px;align-items:flex-end;background-image:linear-gradient(180deg,rgba(250,249,253,.7),rgba(250,249,253,.96) 45%),url('/static/knowwell2026/images/kranking/ranking-hero-v2.png');background-position:72% center}
 .kr26-new-hero-content{width:100%;padding:50px 0}
 .kr26-new-hero-category{min-height:38px}
 .kr26-new-hero h1{margin:36px 0 20px;font-size:clamp(3.2rem,15vw,4.6rem)}
 .kr26-new-hero-lead{font-size:1rem;line-height:1.65}
 .kr26-new-hero-points{font-size:.92rem}
 .kr26-new-intelligence,.kr26-new-methodology{padding:72px 0}
 .kr26-new-section-heading h2{font-size:2.6rem!important}
 .kr26-new-filters{width:calc(100vw - 16px);flex-wrap:nowrap;overflow-x:auto;padding:2px 16px 8px 0;scrollbar-width:none}
 .kr26-new-map{display:none}
 .kr26-new-mobile-explorer{display:block;margin-top:30px}
 .kr26-new-mobile-card{padding:26px;border:1px solid #dcd5e7;border-radius:20px;background:#fff;box-shadow:var(--kr-shadow)}
 .kr26-new-mobile-card-top{display:flex;align-items:center;gap:12px;margin-bottom:20px}
 .kr26-new-mobile-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--kr-lav);color:var(--kr-purple)}
 .kr26-new-mobile-card h3{font-family:Georgia,"Times New Roman",serif;font-size:1.8rem;margin:0}
 .kr26-new-mobile-meta{display:grid;gap:5px;color:var(--kr-muted);font-size:.88rem;margin-bottom:20px}
 .kr26-new-mobile-card .kr26-new-btn{width:100%}
 .kr26-new-related-title{margin:28px 0 12px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
 .kr26-new-related-list{border-top:1px solid var(--kr-line)}
 .kr26-new-related-button{width:100%;padding:17px 2px;border:0;border-bottom:1px solid var(--kr-line);background:#fff;display:flex;align-items:center;justify-content:space-between;text-align:left;font-weight:720;color:var(--kr-ink)}
 .kr26-new-related-button span{color:var(--kr-purple)}
 .kr26-new-mobile-view{margin-top:20px}
 .kr26-new-methodology-layout{gap:32px}
 .kr26-new-faq-question{font-size:1.05rem;padding:21px 2px}
 .kr26-new-faq-answer>div{padding:0 5px 22px 2px}
}
@media(prefers-reduced-motion:reduce){
 .kr26-new-hero-page *,.kr26-new-hero-page *:before,.kr26-new-hero-page *:after{animation:none!important;transition:none!important}
}