/* ============================================================
 * 合作与交流 — 页面级样式（cooperation）
 * 全局 tokens / .container / .btn / .section-head 系列 / topbar / footer
 * 已在 assets/site.css；本文件只含 cooperation 专属区块。
 * 源：design/claude-design/cooperation.html <style>
 * ============================================================ */

/* ---------- Page hero ---------- */
.page-hero {
  background: var(--brand-navy);
  color: var(--text-on-dark);
  padding: 80px 0 88px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 360px; height: 320px;
  background-image: radial-gradient(rgba(217, 178, 94, .22) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse at top right, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top right, black, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.page-hero-inner {
  max-width: 780px;
  position: relative;
  z-index: 1;
}
.page-hero .kicker-light {
  color: var(--brand-gold-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.page-hero h1 {
  color: #fff;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.3px;
  margin-top: var(--s-4);
  max-width: 720px;
}
.page-hero p.lead {
  margin-top: var(--s-6);
  font-size: 16.5px;
  color: var(--text-on-dark);
  line-height: 1.8;
  max-width: 720px;
}

/* ---------- Modes (three ways we help) ---------- */
/* auto-fit：按可用宽度自然回流（桌面 3 列 → 平板 2 列 → 手机 1 列），
 * 不依赖固定断点，避免 1024–1080 小笔记本/平板骤塌成单列全宽卡。 */
.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--s-6);
}
.mode-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  gap: var(--s-3);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mode-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.mode-badge {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(184, 134, 47, .12);
  color: var(--brand-gold-ink);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.mode-badge svg { width: 26px; height: 26px; display: block; }
.mode-card h3 {
  color: var(--brand-navy);
  font-size: 19px;
  font-weight: 750;
  margin-top: var(--s-2);
}
.mode-card p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Cases ---------- */
.cases { background: var(--bg-subtle); }
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-6);
}
.case-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px 1fr;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.case-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.case-img {
  background:
    linear-gradient(135deg, rgba(46, 109, 180, .08), rgba(184, 134, 47, .08)),
    var(--bg-subtle);
  border-right: 1px solid var(--border);
  min-height: 160px;
}
.case-body {
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.case-body h3 {
  color: var(--brand-navy);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.4;
}
.case-body p {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.notebar {
  margin-top: var(--s-6);
  padding: 14px 18px;
  border-left: 3px solid var(--brand-gold);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.7;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---------- Form section ---------- */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.formcard {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 28px 24px;
}
.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.form .tworow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.field {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: #9AA5B6; }
.field:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(46, 109, 180, .12);
}
textarea.field { min-height: 120px; resize: vertical; }

.checkrow {
  display: flex; align-items: flex-start;
  gap: 10px;
  margin-top: var(--s-2);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
  cursor: pointer;
}
.checkrow input {
  margin-top: 4px;
  accent-color: var(--brand-blue);
  flex-shrink: 0;
}
.checkrow a { color: var(--brand-blue); }

.form button {
  align-self: flex-start;
  margin-top: var(--s-2);
}

.altbox {
  background: linear-gradient(180deg, rgba(46, 109, 180, .04), rgba(184, 134, 47, .03));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.altbox .alt-kicker {
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.altbox .alt-email {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-navy);
  word-break: break-all;
}
.altbox .alt-email a { color: inherit; text-decoration: none; }
.altbox .alt-email a:hover { color: var(--brand-blue); text-decoration: underline; }
.altbox .alt-note {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ---------- Trust band ---------- */
.trust { background: var(--bg-subtle); }
.trust .section-head { margin-bottom: var(--s-6); }
.trust-lead {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  max-width: 880px;
  margin-bottom: var(--s-6);
}
.factbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.factchip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--brand-navy);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
a.factchip:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  text-decoration: none;
}
span.factchip { color: var(--text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* .modes-grid / .cases-grid 已交给 auto-fit 自适应回流，不再硬塞断点 */
  .contact-split { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 880px) {
  .page-hero { padding: 56px 0 64px; }
  .case-card { grid-template-columns: 120px 1fr; }
  .form .tworow { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .case-card { grid-template-columns: 1fr; }
  .case-img { min-height: 100px; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ---------- 区块主题适配：补回 band 纵向 padding ----------
 * 原型 band 是 <section>，吃 site.css 的 `section { padding: 96px 0 }`；
 * 区块版 band 是 <div>，拿不到，需按 band 类显式补回。
 * .page-hero 自带 padding:80px 0 88px（更高优先级），不在此列。 */
.modes,
.cases,
.contact,
.trust { padding-block: 96px; }
@media (max-width: 880px) {
  .modes,
  .cases,
  .contact,
  .trust { padding-block: 64px; }
}

/* 区块适配：section-head 后的内容块（modes-grid / contact-split）作为 .container 的 flow 子级，
 * 被 WP 叠加 24px block-gap → 与 section-head 的 margin-bottom(48px) 相加成 72px，比原型(48px)宽。
 * 清掉这些块的 block-gap margin，head→内容 间距交还 section-head margin-bottom，与原型一致。 */
.modes-grid,
.contact-split { margin-block-start: 0; }

/* ============================================================
 * Forminator 表单皮肤（合作表单 #61）— 套用原型 .field 观感
 * ------------------------------------------------------------
 * 原型是 placeholder-only 干净输入 + navy pill 提交；Forminator default
 * 设计自带深色 label / 红星 / 行间距，与原型不符（"有点丑"）。下面在 .formcard
 * 作用域内只改外观，保留 Forminator 提交管线（通知 office@ / 条目）。
 * Forminator default 选择器特异度约 (0,4,0)，关键视觉属性用 !important 兜稳。
 * ============================================================ */

/* 整体走 grid 两列：机构名称 + 联系人 并排，其余整行（对齐原型 .tworow + 竖排） */
.formcard form.forminator-custom-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  align-content: start;
}
.formcard form.forminator-custom-form > * { grid-column: 1 / -1; min-width: 0; }
.formcard .forminator-row:has(.forminator-field-text) { grid-column: span 1; }

/* 清掉 Forminator 行/列/字段自带间距与描边，间距交给 grid gap */
.formcard .forminator-row,
.formcard .forminator-col,
.formcard .forminator-field {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
.formcard .forminator-response-message:empty { display: none !important; }

/* 隐藏可见 label（原型靠 placeholder），但保留给屏幕阅读器 */
.formcard .forminator-label {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important;
}

/* 输入 / 文本域 = 原型 .field */
.formcard .forminator-input,
.formcard .forminator-textarea {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-size: 15px !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.formcard .forminator-textarea {
  --forminator-textarea-min-height: 120px;
  min-height: 120px !important;
  resize: vertical;
}
.formcard .forminator-input::placeholder,
.formcard .forminator-textarea::placeholder { color: #9AA5B6 !important; opacity: 1; }
.formcard .forminator-input:focus,
.formcard .forminator-textarea:focus {
  outline: none !important;
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 4px rgba(46, 109, 180, .12) !important;
}

/* 同意行：checkbox + 说明文字 一行，文字 muted（对齐原型 .checkrow） */
.formcard .forminator-checkbox__wrapper {
  display: flex; align-items: flex-start; gap: 10px; margin-top: var(--s-1);
}
.formcard .forminator-checkbox__label {
  color: var(--text-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}
.formcard .forminator-checkbox__label a { color: var(--brand-blue) !important; }

/* 提交按钮 = .btn .btn-navy（navy pill） */
.formcard .forminator-button-submit {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: auto !important;
  margin-top: var(--s-2);
  padding: 12px 24px !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--radius-pill) !important;
  background: var(--brand-navy) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none !important;
  transition: transform .15s ease, background .15s ease;
}
.formcard .forminator-button-submit:hover {
  background: var(--brand-navy-ink) !important;
  transform: translateY(-1px);
}