/* ==========================================================================
   h5-page.css
   Universum 2026 大学生最具吸引力雇主 H5 页 - 本页专用样式
   共用样式继承自 theme.css / components.css
   ========================================================================== */

/* ========== 0. 顶部导航（返回 + 标题，真实 H5 风格） ========== */
/* iPhone 刘海屏适配：通过 env(safe-area-inset-top) 让顶部内容不被刘海遮挡 */
.page-nav {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 14px;
  /* iOS fallback：iOS 11.0-11.2 使用 constant，iOS 11.3+ 使用 env */
  padding-top: calc(8px + constant(safe-area-inset-top));
  padding-top: calc(8px + env(safe-area-inset-top));
}
.page-nav-back {
  width: 32px;
  height: 32px;
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  text-decoration: none;
  color: #2b2018;
  flex-shrink: 0;
}
.page-nav-back:active { opacity: .5; }
.page-nav-back svg { width: 20px; height: 20px; display: block; }
.page-nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  color: #2b2018;
  white-space: nowrap;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== 1. 顶部品牌区（左上角布局） ========== */
.brand-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 3px;
}

/* 左上角布局变体 */
.brand-header--left {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
}

.brand-header--left .brand-logo {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.brand-header--left .brand-text {
  flex: 1;
  min-width: 0;
}

.brand-header--left .brand-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}

.brand-header--left .brand-subtitle {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 1px;
  letter-spacing: 1.2px;
  text-align: left;
}

/* ========== 2. 轮播图（海报样式扩展） ========== */
.poster-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

/* 隐藏 mock 模式下海报本身的覆盖提示 */
.poster-slide::after { display: none !important; }

/* 轮播图 iframe 海报（poster.html / poster2.html / poster3.html）
   海报原始 1200×675，iframe 内 body 固定该尺寸，
   外部通过 JS 动态 transform: scale() 缩放到容器宽高，海报完整呈现。 */
.slide-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  height: 675px;
  border: 0;
  display: block;
  pointer-events: none;
  background: transparent;
  transform-origin: top left;
}

/* 轮播图仅展示原始海报，不增加任何浮层/logo/角标 */
.slide-corner-logo,
.slide-badge-cover { display: none !important; }

/* 整图点击层：覆盖在 iframe 之上，纯透明，触发详情页跳转
   iframe 已 pointer-events: none，本层接收 click 事件；
   拖动手势不触发 click，因此不影响 swiper 左右切换。 */
.slide-click-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  background: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, .08);
}
.slide-click-layer:active {
  background: rgba(0, 0, 0, .04);
}

/* ========== 3. 获奖企业区 ========== */
.company-section {
  padding: 16px 0 18px;
}

.company-section .section-title {
  padding: 0 16px;
}

/* ========== 4. 雇主特质区（词云） ========== */
.traits-section {
  background: linear-gradient(160deg, #ffffff 0%, #fef6ee 100%);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

.traits-section::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(226, 84, 32, .12) 0%, transparent 70%);
  pointer-events: none;
}

/* 椭圆形容词云容器：饱满云朵样式，去掉虚线边框 */
.traits-cloud {
  position: relative;
  display: flex;
  flex-direction: column;          /* 每行作为子项纵向堆叠 */
  justify-content: center;         /* 整体在垂直方向居中 → 上下稀中间密 */
  align-items: stretch;            /* 子项铺满横向 */
  gap: 4px 0;                      /* 行间垂直间距 */
  margin: 8px auto 6px;
  width: 100%;
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  padding: 30px 24px 24px;
  border-radius: 32% / 30%;        /* 柔和椭圆，避免边缘裁切文字 */
  border: 0;
  /* 双色径向 + 线性渐变叠加：饱满的暖色云朵氛围 */
  background:
    radial-gradient(ellipse at 25% 18%, rgba(255, 220, 180, .55) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 82%, rgba(255, 195, 140, .42) 0%, transparent 58%),
    linear-gradient(160deg, #ffffff 0%, #fff4e3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 1px rgba(226, 84, 32, .08),
    0 8px 22px rgba(234, 110, 46, .06);
  box-sizing: border-box;
  z-index: 1;
  overflow: hidden;
}
/* 词云单行：每行水平居中 */
.traits-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0 10px;
  flex: 0 0 auto;
  white-space: nowrap;
  width: 100%;
  line-height: 1.4;
}

/* 中央高光 */
.traits-cloud::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .85) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* 纯文字特质（专业风：无边框、无背景、无倾斜） */
.trait-cloud-item {
  display: inline-block;
  color: var(--cloud-color, var(--primary));
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: transform .18s, opacity .18s, color .18s;
  position: relative;
  z-index: 1;
  /* 覆盖胶囊样式 */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.trait-cloud-item:hover {
  opacity: .7;
  transform: translateY(-1px);
}

.trait-cloud-item:active {
  opacity: .55;
}

/* 五档字号（视觉层次，不与占比绑定） */
.trait-cloud-item.size-xxl { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.trait-cloud-item.size-xl  { font-size: 18px; font-weight: 700; }
.trait-cloud-item.size-lg  { font-size: 15px; font-weight: 700; }
.trait-cloud-item.size-md  { font-size: 13px; font-weight: 600; }
.trait-cloud-item.size-sm  { font-size: 11px; font-weight: 600; opacity: .82; }
.trait-cloud-item.size-xs  { font-size: 9.5px; font-weight: 600; opacity: .72; }

/* ========== 特质浮窗（共用样式，企业浮窗也在用） ========== */
.trait-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}

.trait-modal.show {
  display: flex;
  animation: fadeIn .25s;
}

.trait-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 24, 16, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.trait-modal-card {
  position: relative;
  width: calc(100% - 48px);
  max-width: 360px;
  max-height: 80vh;
  background: linear-gradient(160deg, #fff 0%, var(--primary-lighter) 100%);
  border-radius: 18px;
  padding: 28px 22px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: popIn .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.85) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.trait-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .15s, color .15s;
  z-index: 1;
}

.trait-modal-close:active {
  background: var(--primary-light);
  color: var(--primary-dark);
  transform: scale(.9);
}

.trait-modal-emoji {
  font-size: 56px;
  text-align: center;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 10px rgba(234,90,31,.25));
}

.trait-modal-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary-darker);
  text-align: center;
  margin-bottom: 6px;
}

.trait-modal-pct {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 1px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}

.trait-modal-desc {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 16px;
}

.trait-modal-examples {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-lighter) 100%);
  border-radius: 12px;
  padding: 14px 16px;
  border-left: 3px solid var(--primary);
}

.trait-modal-examples-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-darker);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.trait-modal-examples ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trait-modal-examples li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  padding: 4px 0 4px 18px;
  position: relative;
}

.trait-modal-examples li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* ========== 企业浮窗 ========== */
.company-modal-card {
  padding: 0;
}

.company-modal-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 60%, var(--primary-darker) 100%);
  padding: 28px 22px 20px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.company-modal-hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 16px;
  background: linear-gradient(180deg, transparent, var(--primary-lighter));
  border-radius: 0 0 18px 18px;
}

.company-modal-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  border: 2px solid rgba(255,255,255,.3);
  flex-shrink: 0;
}

.company-modal-info {
  flex: 1;
  min-width: 0;
}

.company-modal-name {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.company-modal-desc {
  font-size: 12px;
  opacity: .92;
  line-height: 1.4;
  margin-bottom: 6px;
}

.company-modal-tag {
  display: inline-block;
  background: rgba(255,255,255,.22);
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

.company-modal-intro {
  padding: 18px 22px 24px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text);
}

/* ========== 5. 底部访问量统计 ========== */
.page-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px 2px;
  margin-top: 0;
}

.page-footer-flame {
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(234, 110, 46, .35));
}

.page-footer-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .3px;
}

/* ========== 6. 公司详情页（company-detail.html） ========== */

/* 6.1 公司 Header（logo + 名称，紧凑布局） */
.company-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;            /* 左 4px：返回箭头/公司 logo 与下方区块文字（16px）左对齐，去除额外缩进 */
  margin: 10px 12px 0;     /* 顶部 10px：首行稍向下，缓解拥挤 */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.company-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
/* 真实 logo 模式（.has-img）：按企业 logo 原始样式展示——
   无圆形裁切/渐变底，容器加宽适配横版 logo；
   淡色底框统一衬底，白底 JPG 通过 multiply 融入底框色，
   logo 图形颜色基本保持原样 */
.company-logo.has-img {
  width: 72px;
  height: 44px;
  padding: 5px;          /* 底色完整包住 logo */
  box-sizing: border-box;
  background: #fdf2e7;   /* 带一点品牌橙的暖白 */
  border-radius: 10px;
  box-shadow: none;
}
.company-logo.has-img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持原始宽高比，不裁切 */
  background: transparent;
  mix-blend-mode: multiply;
}
.company-logo-letter {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
.company-name-wrap {
  flex: 1;
  min-width: 0;
}
.company-name-cn {
  font-size: 16px;
  font-weight: 800;
  color: var(--text, #333);
  margin: 0 0 1px;
  line-height: 1.2;
  letter-spacing: .3px;
}
.company-name-en {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary, #888);
  margin: 0;
  letter-spacing: 1.2px;
}

/* 6.2 通用 Section（标题 + 内容，透明背景与页面融合） */
.company-section {
  margin: 0 12px 10px;
  padding: 8px 4px 10px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.company-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.company-section-bar {
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, #E25420 0%, #F08A4B 100%);
  border-radius: 2px;
  flex-shrink: 0;
}
.company-section-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text, #333);
  margin: 0;
  letter-spacing: .3px;
}

/* 6.3 奖项区（每行 2 个 badge 并排，占满整行） */
.company-awards-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.company-award {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: linear-gradient(180deg, #fef8f3 0%, #fff5e8 100%);
  border: 1px solid #f6ddc0;
  border-radius: 12px;
  position: relative;
}
/* 奖项分类标签（右上角胶囊）：三档配色与轮播海报主色一一对应
   · 行业奖     → 海报深橙 #E25420（默认样式）
   · 专业奖     → 海报金黄 #F0A431（.cat-professional）
   · 雇主形象奖 → 海报青绿 #17A08F（.cat-image）
   分类名→类名的映射在 company-detail.html 奖章渲染处（catCls），
   新增分类或调整色号请两处同步。 */
.company-award-cat {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #E25420 0%, #EA6E2E 100%);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 0 11px 0 10px;
  letter-spacing: .5px;
  z-index: 2;
}
/* 专业奖：海报金黄 */
.company-award-cat.cat-professional {
  background: linear-gradient(135deg, #F0A431 0%, #FFB340 100%);
}
/* 雇主形象奖：海报青绿 */
.company-award-cat.cat-image {
  background: linear-gradient(135deg, #17A08F 0%, #4FA898 100%);
}
.company-award-medal {
  width: 100%;
  aspect-ratio: 2 / 1; /* 固定宽高比，保证不同比例图片下行高一致 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.company-award-medal img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 等比缩放居中，不裁切不变形 */
  display: block;
}
.company-award-info {
  line-height: 1.3;
}
.company-award-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #333);
  margin-bottom: 2px;
}
.company-award-tag {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary, #888);
  letter-spacing: .5px;
}

/* 6.4 公司介绍（2 张图 + 文字） */
.company-intro-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.company-intro-image {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
/* ── 单张真实照片的横幅布局 ──────────────────────────────────
   规则：公司介绍图支持 0/1/2 张真实照片（introImages 里带 src 的项）。
   · 2 张时：保持 2 列网格，每张 4:3 半宽（默认样式）
   · 仅 1 张时：JS 会给该图加 .span-2 类 → 跨满整行 + 16:9 横幅比例，
     避免单张照片缩在半行格子里显得空旷
   判断逻辑在 company-detail.html 渲染 introImages 处（introImages.length === 1），
   修改比例或触发条件请两处同步调整。 */
.company-intro-image.span-2 {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
.company-intro-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .18) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(0, 0, 0, .15) 0%, transparent 40%);
  pointer-events: none;
}
.company-intro-emoji {
  font-size: 36px;
  position: relative;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .15));
}
/* 真实照片介绍图：图片铺满格子（标签文字已取消，仅保留 alt） */
.company-intro-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  z-index: 0;
}
.company-intro-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text, #333);
  letter-spacing: .2px;
  text-align: justify;
}

/* 6.5 CEO 寄语 */
.company-ceo-card {
  position: relative;
  padding: 12px 12px 12px;
  background: linear-gradient(135deg, #fef8f3 0%, #fff5e8 100%);
  border-radius: 12px;
  border: 1px solid rgba(234, 110, 46, .12);
}
.company-ceo-quote-mark {
  position: absolute;
  top: -10px;
  left: 12px;
  font-size: 56px;
  font-weight: 900;
  font-family: Georgia, serif;
  color: rgba(234, 110, 46, .25);
  line-height: 1;
  user-select: none;
}
.company-ceo-text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text, #333);
  letter-spacing: .2px;
  text-align: justify;
  position: relative;
}
.company-ceo-signature {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(234, 110, 46, .2);
}
.company-ceo-name {
  font-size: 14px;
  font-weight: 800;
  color: #E25420;
}
.company-ceo-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #888);
  letter-spacing: .3px;
}

/* 6.6 返回首页按钮 */
.home-return-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 12px 4px;
}
.home-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #E25420 0%, #F08A4B 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(226, 84, 32, .25);
  transition: transform .2s, box-shadow .2s, opacity .2s;
  text-decoration: none;
  letter-spacing: .5px;
  -webkit-tap-highlight-color: transparent;
}
.home-return-btn:active {
  transform: scale(.96);
  box-shadow: 0 2px 6px rgba(226, 84, 32, .25);
  opacity: .9;
}
.home-return-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
/* ========== 小程序 web-view 环境：隐藏 H5 返回按钮（原生导航栏已有返回） ========== */
.in-miniprogram .back-top {
  display: none;
}

/* ========== 标题行（返回按钮左对齐 + 标题同行） ========== */
.heading-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.back-top {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 4px 6px 4px 0;
  -webkit-tap-highlight-color: transparent;
}
.back-top:active {
  opacity: .55;
}
.back-top svg {
  width: 16px;
  height: 16px;
  display: block;
}