/* ==========================================================================
 * 船联汇 VesselNexus — B1 Hero Section
 * ==========================================================================
 * 首页全宽 Hero 横幅：深蓝渐变底 + 船舶剪影 + 搜索框 + 统计数据
 *
 * 依赖: vnx-design-tokens.css
 *
 * 布局 (PC):
 *   ┌────────────────────────────────────────────┐
 *   │  船联汇 VesselNexus                         │
 *   │  Global Ship B2B Data & Transaction Hub     │
 *   │  ┌─────────────────────────────────────┐    │
 *   │  │  🔍  Search vessels by IMO / name…  │    │
 *   │  └─────────────────────────────────────┘    │
 *   │  📊 12,000+ Ships  ·  3,500+ Brokers  · …  │
 *   └────────────────────────────────────────────┘
 *
 * @package VesselNexus
 * @version 2.0.0
 * ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   §1. HERO CONTAINER
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  padding: calc(var(--vnx-header-height) + var(--vnx-space-16)) var(--vnx-space-6) var(--vnx-space-16);
  overflow: hidden;

  /* 深海渐变背景 */
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(27, 77, 133, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(14, 44, 76, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(14, 44, 76, 0.6) 0%, transparent 60%),
    linear-gradient(180deg, #0A1628 0%, #0D1F3C 40%, #112952 100%);
}

/* ── 网格纹理叠加 ── */
.vnx-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image:
    linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* ── 底部波浪装饰 ── */
.vnx-hero::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 80px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath d='M0,40 C240,0 480,80 720,40 C960,0 1200,80 1440,40 L1440,80 L0,80 Z' fill='%23f4f4f7'/%3E%3C/svg%3E") bottom/cover no-repeat;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   §2. HERO INNER — 内容区
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vnx-space-8);
}

/* ═══════════════════════════════════════════════════════════════════════
   §3. HERO HEADING
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-hero__title {
  font-family: var(--vnx-font-family-display);
  font-size: var(--vnx-text-5xl);     /* 61px */
  font-weight: var(--vnx-font-extrabold);
  line-height: var(--vnx-leading-tight);
  color: var(--vnx-white);
  letter-spacing: var(--vnx-tracking-tight);
  margin: 0;
}

.vnx-hero__title-accent {
  display: block;
  color: var(--vnx-gold-400);
}

.vnx-hero__subtitle {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-lg);       /* 20px */
  font-weight: var(--vnx-font-regular);
  line-height: var(--vnx-leading-relaxed);
  color: var(--vnx-ocean-200);
  max-width: 600px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   §4. HERO SEARCH BAR — 搜索框
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-hero__search {
  width: 100%;
  max-width: 640px;
}

.vnx-search-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--vnx-white);
  border-radius: var(--vnx-radius-xl);
  box-shadow: var(--vnx-shadow-2xl), 0 0 0 1px rgba(255,255,255,0.08);
  overflow: hidden;
  transition: box-shadow var(--vnx-duration-normal) var(--vnx-ease-out);
}

.vnx-search-bar:focus-within {
  box-shadow: var(--vnx-shadow-2xl),
              0 0 0 3px rgba(212, 152, 10, 0.3),
              0 0 32px rgba(212, 152, 10, 0.1);
}

/* 搜索图标 */
.vnx-search-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 56px;
  flex-shrink: 0;
  color: var(--vnx-gray-500);
}

.vnx-search-bar__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* 输入框 */
.vnx-search-bar__input {
  flex: 1;
  height: 56px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--vnx-font-family-body);
  font-size: var(--vnx-text-base);
  color: var(--vnx-text-primary);
  padding: 0 var(--vnx-space-2);
  min-width: 0;
}

.vnx-search-bar__input::placeholder {
  color: var(--vnx-gray-500);
}

/* 搜索按钮 */
.vnx-search-bar__btn {
  height: 44px;
  margin: 6px 6px 6px 0;
  padding: 0 var(--vnx-space-6);
  border: none;
  border-radius: var(--vnx-radius-lg);
  background: linear-gradient(135deg, var(--vnx-ocean-600), var(--vnx-ocean-500));
  color: var(--vnx-white);
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--vnx-duration-fast), transform var(--vnx-duration-fast);
}

.vnx-search-bar__btn:hover {
  background: linear-gradient(135deg, var(--vnx-ocean-500), var(--vnx-ocean-400));
  transform: scale(1.02);
}

.vnx-search-bar__btn:active {
  transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════════════════
   §5. HERO STATS — 数据卡片行
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-hero__stats {
  display: flex;
  gap: var(--vnx-space-10);
  flex-wrap: wrap;
  justify-content: center;
}

.vnx-stat-item {
  text-align: center;
}

.vnx-stat-item__value {
  display: block;
  font-family: var(--vnx-font-family-display);
  font-size: var(--vnx-text-3xl);     /* 39px */
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-white);
  line-height: 1;
}

.vnx-stat-item__value--gold {
  color: var(--vnx-gold-400);
}

.vnx-stat-item__label {
  display: block;
  margin-top: var(--vnx-space-1);
  font-size: var(--vnx-text-sm);
  color: var(--vnx-ocean-300);
  letter-spacing: var(--vnx-tracking-wide);
}

/* ═══════════════════════════════════════════════════════════════════════
   §6. HERO SCROLL INDICATOR
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vnx-space-1);
  color: var(--vnx-ocean-400);
  animation: vnx-bob-down 2s ease-in-out infinite;
  cursor: pointer;
}

.vnx-scroll-hint__text {
  font-size: var(--vnx-text-xs);
  letter-spacing: var(--vnx-tracking-wider);
  text-transform: uppercase;
}

.vnx-scroll-hint__arrow {
  width: 16px;
  height: 16px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

@keyframes vnx-bob-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   §7. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1023px) {
  .vnx-hero {
    min-height: 480px;
    padding: calc(var(--vnx-header-height-mobile) + var(--vnx-space-12)) var(--vnx-space-5) var(--vnx-space-12);
  }

  .vnx-hero__title {
    font-size: var(--vnx-text-3xl);    /* 39px */
  }

  .vnx-hero__subtitle {
    font-size: var(--vnx-text-base);
    max-width: 440px;
  }

  .vnx-hero__inner {
    gap: var(--vnx-space-6);
  }

  .vnx-search-bar {
    border-radius: var(--vnx-radius-lg);
  }

  .vnx-search-bar__icon {
    width: 44px;
    height: 48px;
  }

  .vnx-search-bar__input {
    height: 48px;
    font-size: var(--vnx-text-sm);
  }

  .vnx-search-bar__btn {
    height: 38px;
    margin: 5px 5px 5px 0;
    padding: 0 var(--vnx-space-4);
  }

  .vnx-hero__stats {
    gap: var(--vnx-space-6);
  }

  .vnx-stat-item__value {
    font-size: var(--vnx-text-2xl);    /* 31px */
  }
}

/* Phone */
@media (max-width: 479px) {
  .vnx-hero {
    min-height: 400px;
    padding: calc(var(--vnx-header-height-mobile) + var(--vnx-space-10)) var(--vnx-space-4) var(--vnx-space-8);
  }

  .vnx-hero__title {
    font-size: var(--vnx-text-2xl);    /* 31px */
  }

  .vnx-hero__subtitle {
    font-size: var(--vnx-text-sm);
    max-width: 320px;
  }

  .vnx-hero__inner {
    gap: var(--vnx-space-5);
  }

  /* 搜索框 → 堆叠布局 */
  .vnx-search-bar {
    flex-wrap: wrap;
    background: transparent;
    box-shadow: none;
    gap: var(--vnx-space-2);
  }

  .vnx-search-bar__icon {
    display: none;
  }

  .vnx-search-bar__input {
    width: 100%;
    height: 48px;
    background: var(--vnx-white);
    border-radius: var(--vnx-radius-lg);
    padding: 0 var(--vnx-space-4);
  }

  .vnx-search-bar__btn {
    width: 100%;
    height: 48px;
    margin: 0;
    border-radius: var(--vnx-radius-lg);
  }

  .vnx-hero__stats {
    gap: var(--vnx-space-4);
  }

  .vnx-stat-item__value {
    font-size: var(--vnx-text-xl);     /* 25px */
  }

  .vnx-stat-item__label {
    font-size: var(--vnx-text-xs);
  }
}