/* ==========================================================================
   shangqiu-yongcheng.css · 永城市属地页
   骨架：登机票根首屏 + 说永城 + 三类工地票根卡 + 项目站点轴 + 岗位表 + 三件事 + 相关
   ========================================================================== */

/* ---------- 1. 登机票根首屏 ---------- */
.et-hero {
  padding: 120px 0 0;
  background:
    radial-gradient(1200px 480px at 85% -10%, var(--khaki-100), transparent 60%),
    var(--mist);
}
.et-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 46px;
}
.et-lead { font-size: 16.5px; color: var(--ink-soft); max-width: 560px; margin: 18px 0 26px; }
.et-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* 登机牌卡 */
.et-pass {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  display: grid;
  grid-template-columns: 1fr 118px;
  overflow: hidden;
  transform: rotate(.6deg);
}
.et-pass-main { padding: 22px 22px 18px; }
.et-pass-ey {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;
  color: var(--ink-faint);
}
.et-pass-name { display: block; font-size: 20px; margin: 6px 0 14px; color: var(--khaki-800); }
.et-pass-route { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.et-pass-route em { display: block; font-style: normal; font-size: 11px; color: var(--ink-faint); letter-spacing: .14em; }
.et-pass-route b { font-size: 16px; color: var(--ink); }
.et-pass-arr { color: var(--stamp); font-weight: 700; letter-spacing: .05em; }
.et-pass-meta { display: flex; flex-direction: column; gap: 5px; border-top: 1px dashed var(--line-strong); padding-top: 12px; }
.et-pass-meta span { font-size: 12.5px; color: var(--ink-soft); }
.et-pass-meta b { color: var(--khaki-700, var(--khaki-600)); font-weight: 700; }
.et-pass-stub {
  background: var(--sand);
  border-left: 2px dashed var(--line-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 14px 8px;
}
.et-stamp-pill {
  border: 2px solid var(--stamp); color: var(--stamp); border-radius: 50px;
  font-size: 11px; letter-spacing: .14em; font-weight: 700; padding: 3px 10px;
  transform: rotate(-8deg);
}
.et-stub-no { font-family: var(--font-mono); font-size: 11px; color: var(--khaki-600); writing-mode: vertical-rl; letter-spacing: .1em; }

/* 实景数据带 */
.et-strip { background: var(--paper); border-top: 1px solid var(--line); }
.et-strip-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.et-si {
  padding: 20px 22px; border-left: 1px dashed var(--line-strong);
  display: flex; flex-direction: column; gap: 3px;
}
.et-si:first-child { border-left: 0; }
.et-si b { font-size: 16px; color: var(--khaki-800); }
.et-si span { font-size: 13px; color: var(--ink-soft); }

/* ---------- 2. 说永城 ---------- */
.et-about-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center;
}
.et-about-copy p { color: var(--ink-soft); margin-bottom: 14px; }
.et-about-photo img { border-radius: var(--radius-m); box-shadow: var(--shadow-s); }
.et-about-photo figcaption { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }

/* ---------- 3. 三类工地票根卡 ---------- */
.et-sitegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.et-site {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-s);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.et-site:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }
.et-site-img img { width: 100%; aspect-ratio: 8/5; object-fit: cover; }
.et-site-body { padding: 18px 20px 20px; }
.et-site-tag {
  display: inline-block; font-size: 12px; letter-spacing: .08em; color: var(--stamp);
  border: 1px solid var(--stamp); border-radius: 50px; padding: 2px 12px; margin-bottom: 10px;
}
.et-site-body h3 { margin-bottom: 8px; }
.et-site-body p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* ---------- 4. 项目站点轴 ---------- */
.et-tl { max-width: 760px; margin-inline: auto; }
.et-tl .tl-row { --tw: 78px; --aw: 40px; padding: 14px 0; }
.et-tl .tl-time { display: grid; place-items: center; }
.et-tl .tl-time em {
  font-family: var(--font-mono); font-style: normal; font-size: 13px;
  color: var(--khaki-600); letter-spacing: .08em;
}
.et-nodot {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--khaki-400);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: var(--stamp);
  transform: rotate(-10deg);
}
.et-node-last .et-nodot { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.et-tl .tl-body h3 { margin-bottom: 4px; }
.et-tl .tl-body p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* ---------- 5. 岗位需求表 ---------- */
.et-table {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 8px 22px 18px; box-shadow: var(--shadow-s); max-width: 860px; margin-inline: auto;
}
.et-table th { background: var(--sand); font-size: 14px; }
.et-table td, .et-table th { border-bottom: 1px solid var(--line); }
.et-table-note { font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 0; }

/* ---------- 6. 三件事 ---------- */
.et-svgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.et-sv {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 26px 24px; box-shadow: var(--shadow-s); position: relative;
}
.et-sv-no {
  font-family: var(--font-mono); font-size: 13px; color: var(--stamp);
  letter-spacing: .1em; display: block; margin-bottom: 12px;
}
.et-sv h3 { margin-bottom: 10px; }
.et-sv p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.et-sv a { color: var(--khaki-600); font-weight: 600; }
.et-sv a:hover { color: var(--stamp); }

/* ---------- 7. 相关推荐 ---------- */
.et-relgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.et-rel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 22px; box-shadow: var(--shadow-s); display: block;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.et-rel:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); }
.et-rel-tag { font-size: 12px; color: var(--ink-faint); letter-spacing: .1em; }
.et-rel h3 { margin: 8px 0; }
.et-rel p { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .et-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .et-pass { max-width: 520px; }
  .et-about-grid { grid-template-columns: 1fr; gap: 28px; }
  .et-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .et-si:nth-child(3) { border-left: 0; }
  .et-si:nth-child(n+3) { border-top: 1px dashed var(--line-strong); }
}
@media (max-width: 768px) {
  .et-sitegrid, .et-svgrid, .et-relgrid { grid-template-columns: 1fr; }
  .et-tl .tl-row { --tw: 60px; }
  .et-pass { grid-template-columns: 1fr; }
  .et-pass-stub { flex-direction: row; border-left: 0; border-top: 2px dashed var(--line-strong); }
  .et-stub-no { writing-mode: horizontal-tb; }
}
@media (max-width: 520px) {
  .et-strip-grid { grid-template-columns: 1fr; }
  .et-si { border-left: 0; border-top: 1px dashed var(--line-strong); }
  .et-si:first-child { border-top: 0; }
}