/**
 * VesselNexus — B2B Ads & Promotions (P11)
 *
 * 广告位（vnx-ad-slot）、金色置顶/高亮徽章（vnx-badge--promo-*）、
 * 市场挂牌推广购买行（vnx-promo-row）、首页置顶区（vnx-promoted-*）。
 */

/* ── 广告位 ─────────────────────────────────────────────────── */
.vnx-ad-slot {
  position: relative;
  margin: var(--vnx-space-4) 0 var(--vnx-space-6);
}

.vnx-ad-slot__label {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15, 42, 63, .55);
  padding: 2px 8px;
  border-radius: 10px;
}

.vnx-ad-slot__link {
  display: block;
  border-radius: var(--vnx-radius-lg, 12px);
  overflow: hidden;
}

.vnx-ad-slot__link img {
  display: block;
  width: 100%;
  max-height: 110px;
  object-fit: cover;
}

.vnx-ad-slot--ship_detail_sidebar .vnx-ad-slot__link img {
  max-height: 200px;
}

.vnx-ad-slot--ships_list .vnx-ad-slot__link img {
  max-height: 140px;
}

.vnx-ad-slot__text {
  display: block;
  padding: var(--vnx-space-4);
  text-align: center;
  font-weight: 600;
  color: var(--vnx-white);
  background: linear-gradient(135deg, var(--vnx-ocean-600), var(--vnx-ocean-800));
}

/* ── 置顶 / 高亮徽章（金色） ────────────────────────────────── */
.vnx-badge--promo-top,
.vnx-badge--promo-feat {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: middle;
}

.vnx-badge--promo-top {
  color: #5b4300;
  background: linear-gradient(135deg, #ffd76a, #f5b90f);
  border: 1px solid #e0a800;
}

.vnx-badge--promo-feat {
  color: #4a3a00;
  background: linear-gradient(135deg, #ffe9a8, #f7c948);
  border: 1px solid #ecc33a;
}

/* ── P24 经纪人投递来源徽章（中性灰蓝） ────────────────────── */
.vnx-badge--broker {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: middle;
  color: #33536b;
  background: #e8eef5;
  border: 1px solid #c3d3e2;
}

/* ── 市场挂牌：推广购买行（作者可见） ──────────────────────── */
.vnx-promo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15, 42, 63, .15);
}

.vnx-promo-row__label {
  font-size: 12px;
  color: var(--vnx-text-secondary, #5b6b77);
}

.vnx-promo-btn {
  font-size: 12px;
  line-height: 1.4;
  padding: 3px 10px;
  border: 1px solid rgba(15, 42, 63, .25);
  border-radius: 999px;
  background: #fff;
  color: var(--vnx-text-primary, #0f2a3f);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.vnx-promo-btn:hover {
  border-color: var(--vnx-ocean-500);
  background: #f0f7fb;
}

/* ── 首页置顶推广区（HP 网格上方独立渲染） ────────────────── */
.vnx-promoted-section {
  margin: var(--vnx-space-6) 0 var(--vnx-space-4);
}

.vnx-promoted-section__title {
  font-size: var(--vnx-text-lg, 1.125rem);
  font-weight: 700;
  margin: 0 0 var(--vnx-space-3);
  color: var(--vnx-text-primary, #0f2a3f);
}

.vnx-promoted-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--vnx-space-4);
}

.vnx-promoted-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--vnx-space-4);
  border: 1px solid rgba(245, 185, 15, .55);
  border-radius: var(--vnx-radius-lg, 12px);
  background: linear-gradient(180deg, #fffdf4, #fff);
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}

.vnx-promoted-card:hover {
  box-shadow: 0 4px 14px rgba(15, 42, 63, .12);
  transform: translateY(-1px);
}

.vnx-promoted-card .vnx-badge--promo-top,
.vnx-promoted-card .vnx-badge--promo-feat {
  align-self: flex-start;
}

.vnx-promoted-card__name {
  font-weight: 700;
  color: var(--vnx-text-primary, #0f2a3f);
}

.vnx-promoted-card__meta {
  font-size: 12px;
  color: var(--vnx-text-secondary, #5b6b77);
}

.vnx-promoted-card__price {
  font-size: var(--vnx-text-sm, 14px);
  font-weight: 700;
  color: var(--vnx-ocean-700, #14527d);
}

/* ── 详情页侧栏：置顶在售 widget ───────────────────────────── */
.vnx-widget--featured {
  margin-bottom: var(--vnx-space-5);
}

/* ── P13: 空位招商卡 ────────────────────────────────────────── */
.vnx-ad-slot--vacant {
  border: 2px dashed var(--vnx-color-border, #C9CDD6);
  border-radius: var(--vnx-radius-lg, 12px);
  background: repeating-linear-gradient(
    -45deg,
    var(--vnx-color-bg-soft, #F6F7FB),
    var(--vnx-color-bg-soft, #F6F7FB) 14px,
    #FFFFFF 14px,
    #FFFFFF 28px
  );
  padding: 18px 16px;
  text-align: center;
}

.vnx-ad-slot--vacant .vnx-ad-slot__label {
  position: static;
  display: inline-block;
  margin-bottom: 8px;
  background: transparent;
  color: var(--vnx-text-secondary, #5b6b77);
  border: 1px solid var(--vnx-color-border, #C9CDD6);
}

.vnx-ad-slot__vacant-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--vnx-ocean-700, #14527d);
  text-decoration: none;
}

.vnx-ad-slot__vacant-link:hover {
  color: var(--vnx-ocean-900, #0A1628);
  text-decoration: underline;
}

/* ── P13: 广告卡询盘按钮 ────────────────────────────────────── */
.vnx-ad-slot__contact {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--vnx-ocean-700, #14527d);
  background: #fff;
  border: 1px solid var(--vnx-ocean-700, #14527d);
  border-radius: var(--vnx-radius-md, 8px);
  cursor: pointer;
}

.vnx-ad-slot__contact:hover {
  background: var(--vnx-ocean-700, #14527d);
  color: #fff;
}

.vnx-ad-slot__link--contact {
  border: 0;
  background: none;
  padding: 0;
  width: 100%;
  cursor: pointer;
  text-align: inherit;
}