/* ============================================================================
 * home-aside.css — 首页首屏右侧「发布」竖列 + 右下角联系客服浮窗
 *                  （**仅 index.html 引用**，配合 /assets/home-aside.js）
 * ----------------------------------------------------------------------------
 * 两块东西：
 *   ① .hero-side  —— 发布入口（发布商品或服务 / 发布需求 / 发布报价）
 *        位置（所有宽度一致）：**搜索卡下方、『商品与服务目录』之前**那一格。
 *        由 home-aside.js 注入在 `form.catalog-filter` 之后 —— 纯正常流、
 *        零定位，插入顺序本身就是位置。
 *        排布：< 641px 竖着堆（按钮整宽）；≥ 641px 一行三等分（见「一·二」）。
 *   ② .hp-card + .hp-fab —— 扫码直达浮窗 + 右下角客服按钮，≥1025px 才有
 *
 * 版本演进（避免下次又踩）：
 *   v1 把扫码卡直接摆在首屏右上角 → 桌面端显得拥挤，且把发布按钮挤到了最顶上，
 *   与左侧内容高度完全对不齐。v2 起：扫码卡**移出首屏**，改成挂在浮动客服按钮
 *   上的浮窗；首屏右侧只留发布入口。
 *
 * 复用：主包 CSS 里躺着一整套 .home-quick-btn（实测 JS 里 0 次引用，是 dead CSS，
 *   但样式完整且正是为这个场景设计的），这里直接拿来用，只覆盖布局尺寸。
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * 一、发布竖列
 * -------------------------------------------------------------------------- */
.hero-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* 竖列里的按钮一律撑满列宽（主包只在 ≤640 给了 width:100%，桌面要靠这条）
   特异性 (0,2,0) > 主包 (0,1,0)，任何宽度下都稳 */
.hero-side .home-quick-btn {
  width: 100%;
  height: 46px;
  font-size: 14.5px;
  border-radius: 11px;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease,
    box-shadow 0.16s ease;
}

/* 主 CTA：品牌红渐变实底，是整个首屏最重的一颗按钮 */
.hero-side .home-quick-btn.publish {
  height: 50px;
  background-image: linear-gradient(135deg, #d33f2c 0%, #b5301f 100%);
  border-color: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
  gap: 9px;
  box-shadow: 0 16px 32px -14px rgba(201, 54, 40, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.hero-side .home-quick-btn.publish:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 38px -14px rgba(201, 54, 40, 1),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.hero-side .home-quick-btn.publish svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* 两个次级入口：并排、各占一半 */
.hp-pub-sub {
  display: flex;
  gap: 10px;
}

/* 次级按钮做成"玻璃白"：在实景图上比纯白块更透气，也不抢主 CTA 的视觉 */
.hp-pub-sub .home-quick-btn {
  flex: 1 1 0;
  height: 42px;
  font-size: 13px;
  border-radius: 10px;
  /* 图标 + 文字：主包的 .home-quick-btn 已经是 inline-flex 居中，
     但没给 gap（它原本只服务"纯文字"按钮），这里补上 */
  gap: 6px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--c-ink, #26211d);
  border-color: transparent;
  font-weight: 800;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
}

/* 次级图标比主 CTA 的（18px）小一号即可，别等比例缩太狠 ——
   15px 时喇叭的喇叭口和价签的圆孔都会糊掉，16px 才认得出来 */
.hp-pub-sub .home-quick-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.hp-pub-sub .home-quick-btn:hover {
  background: #fff;
  color: var(--c-primary, #c93628);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
 * 一·二、≥641px：发布区块从「竖列」改成「一行三键」的动作条
 * ----------------------------------------------------------------------------
 * 位置没变（都在这块槽位里），变的是排布：手机上一行放不下三个按钮，
 * 竖着堆；≥641 一行放得下，横排更像参考稿那条「搜索框下面一排按钮」。
 *
 * 配比：主 CTA 占 1 份，`.hp-pub-sub` 这个组占 2 份、组内两个各占 1 份
 * → 视觉上是**三等分**，但红色主 CTA 靠渐变与字重保持主次关系。
 *
 * ⚠️ 高度必须三个一起写死 48px。基础样式里主 CTA 是 50px、次级是 42px，
 *   竖列时高度不同没关系，横排就会一个凸出一个凹进去。
 *   又因为 `.hero-side .home-quick-btn.publish`(0,3,0) 压得住
 *   `.hero-side .home-quick-btn`(0,2,0)，48px 得**分别写在两条规则里**。
 * -------------------------------------------------------------------------- */
@media (min-width: 641px) {
  .hero-side {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
  }

  /* 基础样式里的 width:100% 是竖列口径，横排要交还给 flex 分配 */
  .hero-side .home-quick-btn,
  .hp-pub-sub .home-quick-btn {
    width: auto;
  }

  .hero-side .home-quick-btn.publish {
    flex: 1 1 0;
    height: 48px;
    font-size: 14.5px;
  }

  .hp-pub-sub {
    flex: 2 1 0;
    gap: 12px;
  }

  .hp-pub-sub .home-quick-btn {
    flex: 1 1 0;
    height: 48px;
    font-size: 13.5px;
  }
}

/* ---------------------------------------------------------------------------
 * 一·三、≥1025px：发布条已在「搜索卡右上方」，不再占整行
 *         → 三等分失去意义，改成按内容定宽（主 CTA 略宽）
 * ----------------------------------------------------------------------------
 * `.hero > .wrap` 第 2 列是 `auto`（= 本元素的 max-content 宽），
 * 所以这里的 min-width 直接决定那一栏多宽、以及左列标题还剩多少余地：
 *   主 CTA 186 + 次级 116×2 + 间隙 12×2 ≈ 442px
 * 1440px 下左列约 770px（副标题 `max-width:720px` 刚好放得下）；
 * 窄到 1025px 时左列约 515px，标题仍两行、副标题转两行 —— 可接受。
 * -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .hero-side .home-quick-btn.publish {
    flex: 0 0 auto;
    min-width: 186px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hp-pub-sub {
    flex: 0 0 auto;
  }

  .hp-pub-sub .home-quick-btn {
    flex: 0 0 auto;
    min-width: 116px;
  }
}

/* ---------------------------------------------------------------------------
 * 二、扫码直达浮窗（挂在右下角客服按钮上的面板，不进首屏）
 * -------------------------------------------------------------------------- */
.hp-card {
  display: none; /* 默认收起，点客服按钮才展开 */
  position: fixed;
  right: 22px;
  bottom: 88px; /* 正好落在 50px 高的客服按钮上方 + 16px 间隙 */
  z-index: 85;
  width: 252px;
  padding: 14px 14px 12px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(
      130% 90% at 0% 0%,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0) 62%
    ),
    rgba(26, 30, 35, 0.94);
  box-shadow: 0 34px 66px -30px rgba(0, 0, 0, 0.88),
    0 2px 10px -4px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform-origin: 100% 100%;
  animation: hpCardIn 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hp-card.open {
  display: block;
}

/* 顶部一道品牌渐变细线，给深色卡一个"抬头" */
.hp-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(
    90deg,
    #e04a2e 0%,
    #f0a63c 40%,
    rgba(240, 166, 60, 0) 100%
  );
}

@keyframes hpCardIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-card {
    animation: none;
  }
}

.hp-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 2px;
}

.hp-card-head b {
  font-size: 14.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fff;
}

/* 右上角那颗小红点（活体提示），推到最右边 */
.hp-card-live {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18);
  animation: hpDot 2.4s ease-in-out infinite;
}

@keyframes hpDot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-card-live {
    animation: none;
  }
}

/* 收起按钮 */
.hp-card-x {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.hp-card-x:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* 一行 = 二维码 + 名称 + 名称下的红金短杠 */
.hp-qr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.045);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.hp-qr + .hp-qr {
  margin-top: 9px;
}

.hp-qr:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
}

/* 二维码白底方块（canvas 在里面渲染） */
.hp-qr-img {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.6);
}

.hp-qr-img canvas,
.hp-qr-img img {
  display: block;
  width: 100%;
  height: 100%;
}

.hp-qr-txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hp-qr-txt b {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}

/* 名称下那道短红杠 —— 参考稿里最抢眼的细节 */
.hp-qr-txt em {
  display: block;
  width: 28px;
  height: 2.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e04a2e 0%, #f0a63c 100%);
}

/* ---------------------------------------------------------------------------
 * 三、右下角浮动客服按钮
 * -------------------------------------------------------------------------- */
.hp-fab {
  display: none; /* 默认隐藏，≥1025px 才出现 */
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 86; /* 高于浮窗，收起时可点；低于顶栏(1000)与弹窗 */
  width: 50px;
  height: 50px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background: rgba(26, 30, 35, 0.92);
  color: #c9ccd0;
  cursor: pointer;
  box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.hp-fab:hover {
  background: var(--c-primary, #c93628);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

.hp-fab[aria-expanded="true"] {
  background: var(--c-primary, #c93628);
  color: #fff;
  border-color: transparent;
}

.hp-fab svg {
  width: 22px;
  height: 22px;
}

/* ---------------------------------------------------------------------------
 * 四、断点
 * -------------------------------------------------------------------------- */

/* 桌面：客服按钮与浮窗上线（浮窗仍默认收起） */
@media (min-width: 1025px) {
  .hp-fab {
    display: grid;
  }
}

/* 首次打开浮窗时给它一个展开动画；脚本负责加 .open */
@media (max-width: 1024px) {
  /* 手机 / 平板：用户明确要求隐藏这两块 */
  .hp-card,
  .hp-fab {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * 手机（≤640）：**发布区块放回「搜索卡下方」那一格**（用户 2026-09-14 第三次定稿）
 * ----------------------------------------------------------------------------
 * 迭代史：
 *   v1 手机上整宽堆叠，铺在搜索卡下面 —— 也就是现在这个形态；
 *   v2 用户看过手机效果后要求连区块一起隐藏（`display:none`），首屏只剩标题+搜索；
 *   v3（现在）用户截图圈出「搜索卡下方 → 商品与服务目录」之间那块 41px 空白，
 *      要求把发布区块放回这一格，手机上照旧显示。
 *      → 所以这一档**不需要任何 CSS**：基础样式（flex 竖列 + 按钮 width:100%）
 *        本来就是为这个位置写的，删掉 v2 的 display:none 即自动复原。
 *
 * ⚠️ 这块空白不是"多余的间距"，而是 .hero-side 的槽位 —— 它的 DOM 位置就在
 *    `form.catalog-filter` 之后、`a.hero-catalog-link` 之前（由 home-aside.js 注入）。
 *    以后想"收窄这块空白"，先想清楚是不是要连发布入口一起去掉。
 *
 * 实测坐标（390px）：搜索卡底 y=738，.hero-catalog-link 顶 y=779。
 * -------------------------------------------------------------------------- */