/* ============================================================
   public/assets/css/index.css · 首页专用样式
   iOS 清爽风（App Store 观感）：毛玻璃吸顶导航 / 实心蓝胶囊主按钮 /
   毛玻璃副按钮 / Hero 氛围光斑 / 自实现栅格与表格横滑（替代 Bootstrap）

   · 复用 site.css 的设计变量（--primary / --radius-pill / --shadow-* 等）
   · 由 head.php 的 $page['styles'] 机制引入，排在 site.css 之后，
     因此本文件内对 .site-header / .hero 的规则属于"首页页面级覆盖"，
     site.css 文件本身一字未改
   · 响应式：≤575 手机 → ≥768 平板起双栏 → ≥1100 由 .container 封顶居中，
     间距字号全程 clamp() 流式缩放，超大屏自动留白
   ============================================================ */

/* ------------------------------------------------------------
   ① 按钮体系（自实现，替代 Bootstrap 的 .btn 系列）
   site.css 因此无需任何改动
   ------------------------------------------------------------ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;                  /* iOS 推荐最小可点区域 */
    padding:.6rem 1.5rem;
    border:0;
    border-radius:var(--radius-pill); /* 胶囊 */
    font:inherit;
    font-size:1rem;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
    transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.97)}     /* iOS 按压回缩 */
.btn:focus-visible{outline:2px solid var(--primary-ink);outline-offset:2px}

/* 主按钮：实心蓝胶囊 + 柔和蓝晕（App Store 蓝色 CTA） */
.btn-primary{
    background:var(--primary);
    color:#fff;
    box-shadow:0 8px 20px rgba(47,107,255,.26),0 1px 2px rgba(47,107,255,.18);
}
.btn-primary:hover{background:var(--primary-ink);color:#fff}

/* 尺寸 / 布局修饰 */
.btn-block{width:100%}                                            /* 替代 Bootstrap .w-100 */

/* ------------------------------------------------------------
   ③ Hero 氛围光斑 + 大标题紧排
   用 radial-gradient 画两个柔和色斑（品牌蓝 + 免费绿），
   不用 filter:blur，低端手机也流畅；同时给 ①② 的毛玻璃提供可模糊的颜色
   覆盖项：.hero-title 的 letter-spacing（site.css 为 .3px → App Store 式 -0.02em）
   新增项：.hero 的 position/overflow 与两个伪元素
   ------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;padding:clamp(28px,5vw,48px) 0}
.hero::before,
.hero::after{
    content:"";
    position:absolute;
    width:clamp(280px,55vw,560px);
    height:clamp(280px,55vw,560px);
    border-radius:50%;
    pointer-events:none;
}
.hero::before{
    top:-22%;
    left:clamp(-180px,-12vw,-60px);
    background:radial-gradient(closest-side,rgba(47,107,255,.16),rgba(47,107,255,0));
}
.hero::after{
    bottom:-30%;
    right:clamp(-160px,-10vw,-50px);
    background:radial-gradient(closest-side,rgba(19,163,107,.13),rgba(19,163,107,0));
}
.hero .container{position:relative;z-index:1}     /* 文案压在光斑之上 */
.hero-title{letter-spacing:-.02em}
.hero-sub{margin-bottom:0}                            /* 首页 hero 副标题下面没有按钮，这段 margin 是废的，归零 */
.hero + .section{padding-top:clamp(12px,2vw,20px)}    /* 只压"紧跟 hero 的第一个 section"，后面几段不受影响 */

/* ------------------------------------------------------------
   ④ 通道双卡栅格（自实现，替代 Bootstrap 的 .row.g-4 / .col-12.col-md-6）
   手机单列 → ≥768px 平板/桌面双列；两卡天然等高
   （.channel-card 在 site.css 已有 height:100%，正好填满栅格单元）
   ------------------------------------------------------------ */
.channel-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(16px,2.5vw,24px);
    align-items:stretch;
}
@media (min-width:768px){
    .channel-grid{grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------------------------------------
   ⑤ 表格横滑容器（自实现，替代 Bootstrap 的 .table-responsive）
   窄屏时表格保持排版、整体横向滑动，不挤压换行
   ------------------------------------------------------------ */
.table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;     /* 横滑不触发浏览器"后退"手势 */
    border-radius:var(--radius-sm);    /* 与表格圆角一致，滑动时不露直角 */
}
.table-scroll>.support-table{min-width:620px}

/* ------------------------------------------------------------
   ⑥ 辅助文字（自实现，替代 Bootstrap 的 .text-secondary）
   ------------------------------------------------------------ */
.text-soft{color:var(--ink-soft)}

/* ------------------------------------------------------------
   ⑦ 降级：不支持 backdrop-filter 的老浏览器退回近实色，保证可读性
   ------------------------------------------------------------ */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .site-header{background:rgba(255,255,255,.96)}
}

/* ------------------------------------------------------------
   ⑧ 通道卡标题序号圆点（①②按"排序后的位置"走，付费在前时它就是①）
   纯 CSS 画圆而非用 Unicode ①②：跨平台渲染一致、大小颜色可控，
   复用 --primary / --radius-pill，与主按钮同色，呼应 App Store 观感。
   aria-hidden 让读屏跳过它（顺序是纯视觉装饰，标题文字本身已表意），
   标题可被索引的文字也因此不掺入这个数字。
   做成 inline-flex 而非把 .channel-title 改 flex：长标题（付费那条）窄屏会换行，
   inline 下圆点稳待首行行首、后续行正常回到左边，不会出现圆点垂直居中在两行之间的怪样。
   ------------------------------------------------------------ */
.channel-no{
    display:inline-flex;
    align-items:center;        /* 数字在圆内垂直居中 */
    justify-content:center;    /* 数字在圆内水平居中 */
    flex:0 0 auto;
    width:1.5em;
    height:1.5em;
    margin-right:.45em;
    border-radius:var(--radius-pill);
    background:var(--primary);
    color:#fff;
    font-size:.8em;
    font-weight:800;
    line-height:1;
    font-variant-numeric:tabular-nums;
    /* 关键修改：中文视觉重心比拉丁 x-height 中点高，单用 middle 圆点会偏低；
       这里相对自身上移一点点补偿。 */
    vertical-align:middle;
    position:relative;
    top:-.15em;
}

/* ------------------------------------------------------------
   ⑨ 版本兼容徽标（.channel-meta 里"支持 …"的版本号）
   把原来"仅加粗"的版本号做成 App Store 式浅底胶囊：淡色底 + 同色系深字 + 行首 ✓。
   免费卡走绿（与系统"免费色"--free 同源，语义贴）、付费卡走红（避免与下方实心蓝 CTA 撞色）；
   两者都是"淡底胶囊"，与下方"实心蓝"CTA 是两种质感，并不撞蓝。
   复用 --radius-pill，和导航 pill / 访问统计胶囊同一套胶囊语言。
   ✓ 用 ::before 生成：不进 DOM 文本 → 百度不收录它、读屏一般跳过（纯装饰）；
   版本号本身仍是真实文字，SEO 与无障碍都不受影响。
   文字未直接用 --free（#13a36b 在浅底上对比 <4.5:1），改用更深的绿以达标——
   故此处出现一个 home.css 局部深绿色值，site.css 仍一字未改。
   ------------------------------------------------------------ */
.ver-badge{
    display:inline-flex;
    align-items:center;
    gap:.3em;
    padding:.12em .62em;
    border-radius:var(--radius-pill);
    font-size:.92em;          /* 略小于正文，靠"底色+加粗"跳出来，而非靠变大 */
    font-weight:700;
    line-height:1.35;
    white-space:nowrap;       /* 让"iOS/iPadOS 14.0 – 16.6.1"整体折行，不在中途断开 */
    /* 与前文"安装工具…"同行垂直居中。中文视觉重心比拉丁 x-height 中点高，
       单用 middle 会让徽标偏低，故同 .channel-no 的做法，相对自身上移一点点补偿。
       -.1em 是经验起点，按实际渲染在 -.05em ~ -.15em 间微调到肉眼最齐即可。 */
    vertical-align:middle;
    position:relative;
    top:-.1em;
}
.ver-badge::before{
    content:"✓";
    font-weight:900;
    font-size:.95em;
}
/* 免费卡：绿色淡底 + 深绿字（比 --free 更暗，为对比达标） */
.ver-badge--free{
    background:#e6f6ee;
    color:#0a7a4d;
}
/* 付费卡：蓝色淡底（与 hero 顶部 #eaf1ff 同色）+ 品牌深蓝字 --primary-ink */
.ver-badge--paid{
    background:#ffe9ec;   /* 红色淡底，替掉蓝底避免撞色 */
    color:#c01a3b;        /* 深红字：在此淡底上≈5.2:1，过 AA；#ff2d55 做小字最多 3.65:1，不达标 */
}