/* =================================================
   Search Page · Section Head（最终版 + 响应式对齐母版）
   目标：沿用“功能 section-head”同一套响应节奏
================================================= */

.section-head{position:relative;}

/* ===== Banner 主视觉（背景图版） ===== */
.section-head .p-banner{
  position:relative;
  background:url("/skin/images/banner-search.jpg") center/cover no-repeat;
  height:460px;
  padding:155px 0 85px;
  color:#fff;
  text-align:center;
}

/* 文字可读性遮罩 */
.section-head .p-banner:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
}

/* 内容层级 */
.section-head .p-banner .container{
  position:relative;
  z-index:2;
}

/* 主标题 */
.section-head .p-banner h2{
  margin:0;
  font-size:52px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:1.5px;
  color:#fff;
}

/* 副标题 */
.section-head .p-banner h3{
  margin:18px 0 0;
  font-size:18px;
  font-weight:400;
  letter-spacing:5px;
  opacity:.85;
  color:#fff;
}

/* ===== 底部信息条（bar） ===== */
.section-head .page_nav{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:56px;
  line-height:56px;
  background:linear-gradient(
    to right,
    rgba(0,0,0,.45),
    rgba(0,0,0,.25) 40%,
    rgba(0,0,0,.15)
  );
  backdrop-filter:blur(6px);
  z-index:3;
}

.section-head .page_nav .container{
  position:relative;
  height:56px;
  padding-left:22px;
}

/* 面包屑 */
.section-head .page_nav .c-breadcrumb{
  position:absolute;
  left:22px;
  bottom:0;
  height:56px;
  display:flex;
  align-items:center;
}

.section-head .page_nav .c-breadcrumb li{
  display:flex;
  align-items:center;
  font-size:16px;
}

.c-breadcrumb .sep{
  margin:0 8px;
  opacity:.6;
}

/* =================================================
   响应式（模仿功能 section-head 的断点节奏）
================================================= */

/* <= 1440 */
@media (max-width:1800px){
  .section-head .p-banner{
    height:452px;
    padding:170px 0 86px;
  }
  .section-head .p-banner h2{
    font-size:52px;
  }
  .section-head .p-banner h3{
    font-size:22px;
  }
}

/* <= 1200 */
@media (max-width:1200px){
  .section-head .p-banner{
    height:375px;
    padding:150px 0 100px;
  }
  .section-head .p-banner h2{
    font-size:40px;
  }

  .section-head .page_nav,
  .section-head .page_nav .container{
    height:52px;
    line-height:52px;
  }
  .section-head .page_nav .c-breadcrumb{
    height:52px;
  }
  .section-head .page_nav .c-breadcrumb li{
    font-size:15px;
  }
}

/* <= 992：隐藏面包屑（与母版一致） */
@media (max-width:992px){
  .section-head .page_nav .c-breadcrumb{
    display:none;
  }
}

/* <= 768 */
@media (max-width:768px){
  .section-head .p-banner{
    height:245px;
    padding:100px 0 80px;
  }
  .section-head .p-banner h2{
    font-size:30px;
    letter-spacing:1px;
  }
  .section-head .p-banner h3{
    font-size:16px;
    letter-spacing:3px;
  }

  .section-head .page_nav,
  .section-head .page_nav .container{
    height:48px;
    line-height:48px;
  }
}



/* =================================================
   Search · Content
   作用范围：.search-page 内
================================================= */

/* 主体区 */
.search-page{
  padding: 32px 0 56px;
}

/* =================================================
   Search Box 
================================================= */

.search-box{
  margin: 0 auto 36px;
}

.search-form{
  width: min(860px, 100%);
  margin: 0 auto;
  position: relative;
}

/* 输入框放大 */
.search-form .ui-pill-input{
  width: 100%;
  height: 46px;
  font-size: 15px;
  padding: 0 64px 0 18px; /* 右侧预留给按钮 */
}

/* 按钮：固定右侧 + 绝对居中 */
.search-form .ui-pill-icon{
  width: 40px;
  height: 40px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;

  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 关键：彻底禁用公共伪元素绘制（不然必“串味”） */
.search-form .ui-pill-icon::before,
.search-form .ui-pill-icon::after{
  content: none !important;
}

/* 放大镜：SVG 居中渲染（永远不跑偏） */
.search-form .ui-pill-icon{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='11' cy='11' r='6.5' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='2'/>\
<path d='M16.6 16.6 L21 21' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='2' stroke-linecap='round'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* Hover（桌面端） */
@media (hover:hover){
  .search-form .ui-pill-icon:hover{
    background-color: rgba(46,49,146,.06);
  }
  .search-form .ui-pill-icon:hover{
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='11' cy='11' r='6.5' fill='none' stroke='%232e3192' stroke-width='2'/>\
<path d='M16.6 16.6 L21 21' fill='none' stroke='%232e3192' stroke-width='2' stroke-linecap='round'/>\
</svg>");
  }
}

/* 键盘可访问性 */
.search-form .ui-pill-icon:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(46,49,146,.12);
}


/* ===============================
   搜索结果区
=============================== */
.search-results{
  width: min(1200px, 100%);
  margin: 0 auto;
}

/* ===============================
   单条搜索卡片
=============================== */
.s-card{
  display: flex;
  align-items: flex-start;
  gap: 26px;

  padding: 22px 26px;
  background: #fff;

  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;                /* ← 圆角在这里 */
  box-shadow: 0 1px 12px rgba(0,0,0,.04);

  transition: box-shadow .25s ease, border-color .25s ease;
}

.s-card + .s-card{
  margin-top: 18px;
}

/* hover 反馈（桌面端） */
@media (hover:hover){
  .s-card:hover{
    border-color: rgba(46,49,146,.18);
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
  }
}

/* ===============================
   左侧封面
=============================== */
.s-card-media{
  flex: 0 0 220px;
  width: 220px;
  height: 140px;

  border-radius: 10px;
  overflow: hidden;

  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
}

.s-card-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===============================
   右侧内容
=============================== */
.s-card-body{
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
}

/* 标题 */
.s-card-title{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.28;
  font-weight: 700;
}

.s-card-title a{
  color: rgba(0,0,0,.86);
  text-decoration: none;
}

@media (hover:hover){
  .s-card-title a:hover{
    color: var(--brand);
  }
}

/* 摘要（两行限制） */
.s-card-desc{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(0,0,0,.62);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===============================
   标签区
=============================== */
.s-card-meta{
  display: flex;
  align-items: center;
  gap: 12px;
}

.s-pill{
  height: 32px;
  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 2px solid rgba(46,49,146,.55);
  border-radius: 999px;
  background: transparent;

  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
}

/* ===============================
   移动端适配
=============================== */
@media (max-width: 768px){
  .search-page{
    padding: 24px 0 44px;
  }

  .s-card{
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px;
    border-radius: 12px;
  }

  .s-card-media{
    width: 100%;
    height: 180px;
    flex: 0 0 auto;
  }

  .s-card-title{
    font-size: 18px;
  }

  .s-pill{
    height: 30px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* =================================================
   Search · Empty State（无背景框）
================================================= */

.search-empty{
  width: min(860px, 100%);
  margin: 32px auto 0;
  text-align: center;
}

/* 主提示 */
.search-empty p{
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(0,0,0,.68);
}

/* 次级说明 */
.search-empty p:last-child{
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(0,0,0,.55);
}

/* 推荐链接 */
.search-empty a{
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

@media (hover:hover){
  .search-empty a:hover{
    text-decoration: underline;
  }
}

/* 轻出现动画（无位移感，不像弹窗） */
.search-empty{
  animation: emptyFadeIn .2s ease-out both;
}

@keyframes emptyFadeIn{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

/* 移动端 */
@media (max-width: 768px){
  .search-empty{
    margin-top: 24px;
  }

  .search-empty p{
    font-size: 14px;
  }
}