/* 站内搜索结果页（/website/search，模板 website.list_hybrid）的排版。
 *
 * 这份文件此前不存在，而结果页用的是**下拉条目**的模板（one_hybrid，
 * class="dropdown-item"）：`o_search_result_item` / `o_image_64_contain` 这些
 * class 在全站没有一条规则，于是图片按原始尺寸铺开、每一条都是一个横跨整页
 * 的 flex 行。"搜索结果页没有排版"是字面意义上的。
 *
 * 三种形态（由内容源声明 SearchSource.Layout，见 vectors 的 core/frontend）：
 *
 *   grid   有图有价     商品      卡片网格
 *   media  有图有摘要   课程      横向媒体行
 *   text   只有文字     页面/课时  标题 + 路径 + 摘要
 *
 * 两条贯穿始终的规矩：
 *
 *   - **只用变量与 Bootstrap 的既有令牌**（--o-color-*、--bs-*），不写死颜色。
 *     主题能换掉整套配色（theme.css 的 o_cc1~o_cc5），写死的那一处会在换主题
 *     之后变成唯一一块不跟着变的地方，而没人会想到来这儿找。
 *   - **图位永远有尺寸**。图是异步加载的，不给容器定高的话每张图落地都会把
 *     后面的内容推一次 —— 那是 CLS，表现为"页面自己在跳"，而截图里看不出来。
 */

/* ── 查询条 ───────────────────────────────────────────────────────────── */

.o_search_page .o_search_title {
    line-height: 1.3;
}

.o_search_page .o_search_notes .badge {
    font-size: .8125rem;
}

/* ── 类型标签行 ───────────────────────────────────────────────────────── */

.o_search_tabs .nav-link {
    border: 1px solid var(--bs-border-color, #dee2e6);
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.o_search_tabs .nav-link.active {
    border-color: transparent;
}

/* 徽章要在两种底色上都读得出来：未选中是浅底深字，选中那一枚坐在深色 pill 上，
   继承色再叠一层半透明白底 —— 固定成 bg-secondary 的话，选中态就是深色套深色。 */
.o_search_tab_count {
    background-color: rgba(0, 0, 0, .08);
    color: inherit;
    font-weight: 400;
}

.o_search_tabs .nav-link.active .o_search_tab_count {
    background-color: rgba(255, 255, 255, .25);
}

/* ── 分节 ─────────────────────────────────────────────────────────────── */

.o_search_section + .o_search_section {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding-top: 1.5rem;
}

.o_search_section_head h2 {
    letter-spacing: .04em;
}

/* 命中词的高亮。<mark> 的浏览器默认是刺眼的纯黄底，一页几十处会盖过内容本身；
   这里只保留一点底色并继承文字色。 */
.o_search_page mark {
    background-color: rgba(var(--bs-warning-rgb, 255, 193, 7), .28);
    color: inherit;
    padding: 0 .1em;
    border-radius: 2px;
}

/* ── grid：卡片网格 ───────────────────────────────────────────────────── */

.o_search_card {
    border-color: var(--bs-border-color, #dee2e6);
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
    overflow: hidden;
}

.o_search_card:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

/* 定高的图位：见文件头第二条。aspect-ratio 在这里不够 —— 卡片在窄屏是两列、
   宽屏是四列，宽度变化很大，而一行里的卡片必须齐平。 */
.o_search_card_media {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.o_search_card_media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.o_search_card_media .fa {
    font-size: 2.5rem;
    opacity: .5;
}

/* 名称最多两行。截断而不是让它撑高卡片：一行里最长的那个名字会把整行都撑成
   它的高度，而网格的可扫性全靠行与行对齐。 */
.o_search_card_name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* ── media：横向媒体行 ────────────────────────────────────────────────── */

.o_search_media + .o_search_media,
.o_search_text + .o_search_text {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.o_search_media {
    transition: background-color .15s ease-in-out;
}

.o_search_media:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.o_search_media_thumb {
    width: 96px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-radius: .375rem;
    overflow: hidden;
}

.o_search_media_thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.o_search_media_thumb .fa {
    font-size: 1.75rem;
    opacity: .5;
}

/* flex 子项的默认 min-width 是 auto，长标题会把它顶出容器而不是换行/截断 ——
   表现是右边那栏价格被挤出屏幕。 */
.o_search_media > .flex-grow-1 {
    min-width: 0;
}

/* ── text：标题 + 路径 + 摘要 ─────────────────────────────────────────── */

/* 路径这一行是给人认路用的（"这是网站的哪一块"），像搜索引擎结果里的那条绿字。
   用 success 令牌而不是写死绿色，深色主题下才不会变成一块看不见的字。 */
.o_search_url {
    color: var(--bs-success-text-emphasis, #146c43);
    word-break: break-all;
}

.o_search_text_name {
    line-height: 1.4;
}

.o_search_text_name:hover {
    text-decoration: underline;
}

/* 摘要最多两行：三行以上就不再是"扫"，而是"读"。 */
.o_search_summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 零结果 ───────────────────────────────────────────────────────────── */

.o_search_empty .o_search_hot a:hover {
    background-color: var(--bs-secondary-bg, #e9ecef) !important;
}

/* ── 窄屏 ─────────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    /* 标签行在手机上横着排不下：允许横向滚动，而不是折成三行把结果推到屏外。 */
    .o_search_tabs .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .o_search_tabs .nav::-webkit-scrollbar {
        display: none;
    }

    .o_search_tabs .nav-link {
        white-space: nowrap;
    }

    .o_search_card_media {
        height: 110px;
    }

    .o_search_media_thumb {
        width: 72px;
        height: 56px;
    }
}

/* ── 概念直达卡 ───────────────────────────────────────────────────────── */

/* 它长得像一条结果，但去处完全不同（一个类目页，不是一件商品）—— 所以给它一条
   左边框和一层浅底，让人一眼看出"这一条不一样"。种类标签由模板画出来。 */
.o_search_concept {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 3px solid var(--bs-primary, #0d6efd);
    border-radius: .375rem;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    transition: background-color .15s ease-in-out;
}

.o_search_concept:hover {
    background-color: var(--bs-secondary-bg, #e9ecef);
}

/* ── 推广位 ───────────────────────────────────────────────────────────── */

/* 与概念卡同一种"这一条不一样"的语言，但换个强调色：两者会同时出现（搜一个既是
   类目又配了推广位的词），一模一样的话就分不出哪个是运营放的。 */
.o_search_promo {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 3px solid var(--bs-warning, #ffc107);
    border-radius: .375rem;
    transition: background-color .15s ease-in-out;
}

.o_search_promo:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.o_search_promo_img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex: 0 0 auto;
}