/**
 * AI 工具详情页 —— 头部工具卡
 *
 * 配合子主题覆盖的 TempParts/single-links.php 使用。
 * 仅在 is_singular('links') 时加载（见 inc/tools.php）。
 *
 * ── 为什么是「内嵌卡片」而不是「通栏出血」──────────────────────────
 * 参考图里深色区域是顶到边的。做成出血要写 margin:0 -28px ——
 * 那个 28px 是父主题 .single-article 的 padding，移动端还会变。
 * 一旦父主题调了内边距，这里就会露出一条错位的白边，而且不容易被发现。
 *
 * 内嵌卡片没有这个耦合：白盒子的内边距怎么变，卡片都贴着内容区走。
 * 「不像文章页」这个目的靠深色 + 布局已经达成了，不必赌那个数字。
 */

/* =========================================================================
 * 一、外壳
 * ====================================================================== */

.b2c-tool-hero {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    margin: 0 0 26px;
    padding: 26px 26px 22px;
    background: #0e1216;
    color: #fff;
}

/*
 * 背景光晕：把 logo 放大、糊掉，当作这块深色区域的底色。
 *
 * 这样每个工具的头部会带上自己品牌色的味道，而不是 125 个工具长一个样，
 * 又不需要额外准备任何素材 —— 用的还是列表页那张 logo。
 *
 * scale 要大于 1：blur 会让元素边缘往内衰减成透明，
 * 不放大的话四个角会透出底下的纯黑，像四块脏斑。
 */
.b2c-tool-hero-glow {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.6);
    filter: blur(64px) saturate(190%);
    opacity: .62;
}

/* 压一层暗色，保证白字对比度不受 logo 明暗影响 */
.b2c-tool-hero-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg, rgba(10, 14, 18, .52), rgba(10, 14, 18, .88));
}

.b2c-tool-hero-inner {
    position: relative;
    z-index: 1;
}

/* =========================================================================
 * 二、logo + 名称
 * ====================================================================== */

.b2c-tool-hero-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.b2c-tool-hero-logo {
    width: 84px;
    height: 84px;
    flex: none;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    padding: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

.b2c-tool-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}

/* 没有 logo 时用名称首字 */
.b2c-tool-hero-logo-text {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 36px;
    font-weight: 800;
}

.b2c-tool-hero-title {
    min-width: 0;
}

/*
 * ⚠️ 父主题写了 .single-link h1{font-size:24px} —— 两条选择器
 *    权重相同（都是 0,0,1,1），靠加载顺序决胜。子主题 CSS 在后面，
 *    所以能赢；但为了不依赖加载顺序，这里把选择器写长一点。
 */
.b2c-tool-hero .b2c-tool-hero-title h1 {
    margin: 0;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    word-break: break-word;
}

.b2c-tool-hero-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.b2c-tool-hero-cats a {
    font-size: 12.5px;
    line-height: 1;
    padding: 6px 11px;
    border-radius: 20px;
    color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .12);
    transition: background .18s ease, color .18s ease;
}

.b2c-tool-hero-cats a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .22);
}

/* =========================================================================
 * 三、摘要
 * ====================================================================== */

.b2c-tool-hero-desc {
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .72);
    /* 最多三行，长短不一的工具描述不会把头部撑得高矮不齐 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================================
 * 四、操作区
 * ====================================================================== */

.b2c-tool-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── 打开网站 ─────────────────────────────────── */

.b2c-tool-hero-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 30px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--b2color, #0066ff);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    transition: transform .18s ease, filter .18s ease;
}

.b2c-tool-hero-visit:hover {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.b2c-tool-hero-visit .b2font {
    font-size: 18px;
}

/* ── 点赞（已下线）───────────────────────────────
 *
 * 1.29.0 起模板不再渲染 .single-link-rating（实际没人点赞）。
 * 这条只是兜底：万一将来子主题的模板覆盖失效、回退到父版，
 * 父版会在文章底部渲染一个点赞块，这里一并藏掉，
 * 免得出现「头部没有、底部又冒出来」的不一致。
 */
.single-link .single-link-rating {
    display: none;
}

/* ── 举报 ─────────────────────────────────────── */

.b2c-tool-hero-report {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 46px;
    padding: 0 12px;
    border: 0;
    background: none;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: color .18s ease;
    /* 次要操作，推到最右边去 */
    margin-left: auto;
}

.b2c-tool-hero-report:hover {
    color: rgba(255, 255, 255, .8);
}

.b2c-tool-hero-report .b2font {
    font-size: 16px;
}

/* =========================================================================
 * 五、原头部的收尾
 * ====================================================================== */

/* 头部已经有大标题了，正文区不需要再空一截 */
.b2c-has-hero .entry-content {
    min-height: 0;
}

/* =========================================================================
 * 六、移动端
 * ====================================================================== */

@media screen and (max-width: 768px) {

    .b2c-tool-hero {
        border-radius: 12px;
        padding: 20px 18px 18px;
        margin-bottom: 20px;
    }

    .b2c-tool-hero-head {
        gap: 14px;
        margin-bottom: 14px;
    }

    .b2c-tool-hero-logo {
        width: 62px;
        height: 62px;
        border-radius: 15px;
        padding: 6px;
    }

    .b2c-tool-hero .b2c-tool-hero-title h1 {
        font-size: 20px;
    }

    .b2c-tool-hero-desc {
        font-size: 13.5px;
        line-height: 1.8;
        margin-bottom: 18px;
        -webkit-line-clamp: 4;
    }

    /*
     * 手机上这块只剩「打开网站」一个动作（点赞已下线、举报见下），
     * 给它整行宽度 —— 目的单一，点按区域也最大。
     */
    .b2c-tool-hero-actions {
        gap: 10px;
    }

    .b2c-tool-hero-visit {
        width: 100%;
        height: 44px;
        padding: 0 20px;
    }

    /*
     * 移动端不显示「举报」—— 手机上这块只留一个「打开网站」，
     * 目的单一、点按区域也更大。桌面端保留。
     */
    .b2c-tool-hero-report {
        display: none;
    }
}