/* 衡真坊｜合作頁 V2；所有樣式限制於 .hz-collaboration */
.hz-collaboration {
  --hz-primary: #8b4d3b;
  --hz-secondary: #b28a55;
  --hz-dark: #1a1a18;
  --hz-light: #f7f3ea;
  --hz-bg: var(--hz-light);
  --hz-surface: #fffdf8;
  --hz-surface-alt: #f0e9dd;
  --hz-text: #29241f;
  --hz-muted: #625c54;
  --hz-border: rgba(93, 70, 49, .2);
  --hz-accent: var(--hz-primary);
  --hz-accent-contrast: #fff;
  --hz-shadow: 0 12px 32px rgba(56, 42, 31, .07);
  --hz-xs: clamp(.72rem, .68rem + .18vw, .82rem);
  --hz-sm: clamp(.8rem, .75rem + .25vw, .95rem);
  --hz-base: clamp(.91rem, .83rem + .34vw, 1.07rem);
  --hz-lg: clamp(1rem, .92rem + .45vw, 1.24rem);
  --hz-h3: clamp(1.08rem, .96rem + .6vw, 1.4rem);
  --hz-h2: clamp(1.4rem, 1.08rem + 1.5vw, 2.25rem);
  --hz-h1: clamp(1.7rem, 1.15rem + 2.8vw, 3.55rem);
  background: var(--hz-bg);
  color: var(--hz-text);
  font-size: var(--hz-base);
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.hz-collaboration, .hz-collaboration * { box-sizing: border-box; }
.hz-collaboration .hz-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hz-collaboration .hz-icon { width: 1.5em; height: 1.5em; display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hz-collaboration .hz-container { width: min(100% - clamp(1.25rem, 5vw, 4rem), 1120px); margin-inline: auto; }
.hz-collaboration .hz-narrow { max-width: 860px; }
.hz-collaboration .hz-container > .breadcrumb { margin-block: 0; padding-block: clamp(.75rem, 2vw, 1.25rem); overflow-x: auto; }
.hz-collaboration a { color: inherit; }
.hz-collaboration a:focus-visible { outline: 3px solid var(--hz-secondary); outline-offset: 4px; }
.hz-collaboration h1, .hz-collaboration h2, .hz-collaboration h3, .hz-collaboration p { margin-top: 0; }
.hz-collaboration h1, .hz-collaboration h2, .hz-collaboration h3 { line-height: 1.38; letter-spacing: .02em; }
.hz-collaboration h1 { font-size: var(--hz-h1); }
.hz-collaboration h2 { font-size: var(--hz-h2); margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.hz-collaboration h3 { font-size: var(--hz-h3); }
.hz-collaboration p { margin-bottom: 1em; }
.hz-collaboration .hz-eyebrow { color: var(--hz-accent); font-size: var(--hz-xs); letter-spacing: .16em; font-weight: 800; margin-bottom: .8em; }
.hz-collaboration .hz-section { padding-block: clamp(2.75rem, 6vw, 5rem); }
.hz-collaboration .hz-section-alt { background: var(--hz-surface-alt); }
.hz-collaboration .hz-section-intro { max-width: 780px; color: var(--hz-muted); margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.hz-collaboration .hz-disclaimer { font-size: var(--hz-sm); color: var(--hz-muted); line-height: 1.8; margin-top: 1.25rem; margin-bottom: 0; }

/* Hero */
.hz-collaboration .hz-hero { padding-block: clamp(2.5rem, 6.5vw, 5.75rem); background: radial-gradient(ellipse at 90% 15%, rgba(178,138,85,.13), transparent 48%), var(--hz-bg); }
.hz-collaboration .hz-hero-inner { max-width: 960px; }
.hz-collaboration .hz-hero h1 { max-width: 900px; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.hz-collaboration .hz-lead { color: var(--hz-primary); font-size: clamp(1.12rem, .98rem + .85vw, 1.7rem); font-weight: 750; line-height: 1.65; margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.hz-collaboration .hz-hero-description { max-width: 750px; color: var(--hz-muted); font-size: var(--hz-lg); }
.hz-collaboration .hz-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.hz-collaboration .hz-button { display: inline-flex; justify-content: center; align-items: center; gap: .5em; min-height: 46px; padding: .75em 1.35em; border: 1px solid var(--hz-primary); border-radius: 999px; text-decoration: none; font-size: var(--hz-base); font-weight: 700; line-height: 1.4; transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.hz-collaboration .hz-button:hover { transform: translateY(-2px); }
.hz-collaboration .hz-button-primary { color: var(--hz-accent-contrast); background: var(--hz-primary); }
.hz-collaboration .hz-button-primary:hover { background: #713c2d; color: #fff; }
.hz-collaboration .hz-button-outline { color: var(--hz-primary); background: transparent; }
.hz-collaboration .hz-button-outline:hover { background: rgba(139,77,59,.08); }

/* 服務三卡 */
.hz-collaboration .hz-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(.7rem, 2vw, 1.2rem); }
.hz-collaboration .hz-service-card, .hz-collaboration .hz-choice-card { min-width: 0; background: var(--hz-surface); border: 1px solid var(--hz-border); border-radius: 18px; padding: clamp(1rem, 2.5vw, 1.7rem); box-shadow: var(--hz-shadow); }
.hz-collaboration .hz-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: clamp(2.8rem, 5vw, 3.6rem); height: clamp(2.8rem, 5vw, 3.6rem); border-radius: 15px; background: rgba(178,138,85,.13); color: var(--hz-primary); margin-bottom: .9rem; }
.hz-collaboration .hz-service-card h3, .hz-collaboration .hz-choice-card h3 { margin-bottom: .5rem; }
.hz-collaboration .hz-service-card p, .hz-collaboration .hz-choice-card p { font-size: var(--hz-sm); color: var(--hz-muted); margin-bottom: 0; }
.hz-collaboration .hz-center-note { max-width: 870px; margin: 1.5rem auto 0; color: var(--hz-muted); font-size: var(--hz-sm); text-align: center; }

/* 作品封面 */
.hz-collaboration .hz-work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(.85rem, 2.5vw, 1.5rem); }
.hz-collaboration .hz-work-card { min-width: 0; background: var(--hz-surface); border: 1px solid var(--hz-border); border-radius: 18px; overflow: hidden; box-shadow: var(--hz-shadow); }
.hz-collaboration .hz-work-link { display: block; text-decoration: none; height: 100%; }
.hz-collaboration .hz-work-link:hover .hz-read-more { text-decoration: underline; }
.hz-collaboration .hz-work-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hz-surface-alt); }
.hz-collaboration .hz-work-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.hz-collaboration .hz-work-link:hover img { transform: scale(1.035); }
.hz-collaboration .hz-work-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--hz-secondary); font-size: clamp(2rem, 4vw, 3rem); }
.hz-collaboration .hz-work-meta { padding: clamp(.9rem, 2vw, 1.35rem); }
.hz-collaboration .hz-work-type { display: block; font-size: var(--hz-xs); color: var(--hz-primary); font-weight: 700; margin-bottom: .35rem; }
.hz-collaboration .hz-work-meta h3 { margin-bottom: .5rem; }
.hz-collaboration .hz-read-more { font-size: var(--hz-sm); color: var(--hz-primary); font-weight: 700; }

/* 故事分享與合作需求 */
.hz-collaboration .hz-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(.8rem, 2vw, 1.25rem); }
.hz-collaboration .hz-choice-card { border-top: 4px solid var(--hz-secondary); }
.hz-collaboration .hz-choice-card:nth-child(2) { border-top-color: var(--hz-primary); }

/* 故事保存與授權 */
.hz-collaboration .hz-publication-text { font-size: var(--hz-base); line-height: 2; }
.hz-collaboration .hz-principle-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.hz-collaboration .hz-principle { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; min-width: 0; padding: 1rem .7rem; border: 1px solid var(--hz-border); border-radius: 12px; background: var(--hz-surface); color: var(--hz-primary); font-size: var(--hz-sm); font-weight: 700; text-align: center; }
.hz-collaboration .hz-principle .hz-icon { width: 1.35em; height: 1.35em; }

/* 合作流程 */
.hz-collaboration .hz-process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(.55rem, 2vw, 1.2rem); list-style: none; margin: 0; padding: 0; }
.hz-collaboration .hz-process-grid li { min-width: 0; position: relative; text-align: center; padding: clamp(1rem, 2vw, 1.5rem) .5rem; }
.hz-collaboration .hz-process-grid li:not(:last-child)::after { content: '→'; position: absolute; right: -.7rem; top: 2rem; color: var(--hz-secondary); font-size: var(--hz-lg); }
.hz-collaboration .hz-process-icon { display: flex; align-items: center; justify-content: center; width: clamp(3rem, 6vw, 4rem); height: clamp(3rem, 6vw, 4rem); border-radius: 50%; background: var(--hz-surface-alt); color: var(--hz-primary); margin: 0 auto .6rem; }
.hz-collaboration .hz-process-num { display: block; color: var(--hz-secondary); font-size: var(--hz-xs); font-weight: 800; letter-spacing: .08em; }
.hz-collaboration .hz-process-grid h3 { font-size: clamp(.95rem, .85rem + .45vw, 1.25rem); margin: .25rem 0; }
.hz-collaboration .hz-process-grid p { font-size: var(--hz-sm); color: var(--hz-muted); margin: 0; }

/* 聯絡 */
.hz-collaboration .hz-contact { background: linear-gradient(140deg, rgba(178,138,85,.1), transparent 65%), var(--hz-bg); text-align: center; }
.hz-collaboration .hz-contact-intro { max-width: 740px; margin-inline: auto; }
.hz-collaboration .hz-contact-actions { display: flex; flex-direction: column; align-items: center; gap: .7rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.hz-collaboration .hz-contact-button { max-width: 100%; }
.hz-collaboration .hz-contact-button .hz-icon { width: 1.15em; height: 1.15em; }
.hz-collaboration .hz-email { font-size: var(--hz-sm); color: var(--hz-muted); margin: 0; }
.hz-collaboration .hz-email a { color: var(--hz-primary); text-underline-offset: .2em; }
.hz-collaboration .hz-contact .hz-disclaimer { max-width: 720px; margin-inline: auto; }

/* 手機與極窄螢幕 */
@media (max-width: 760px) {
  .hz-collaboration .hz-service-grid { grid-template-columns: 1fr; }
  .hz-collaboration .hz-service-card { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: .85rem; align-items: center; }
  .hz-collaboration .hz-service-card .hz-icon-wrap { grid-row: span 2; margin: 0; }
  .hz-collaboration .hz-service-card h3 { margin: 0; }
  .hz-collaboration .hz-service-card p { margin: 0; }
  .hz-collaboration .hz-principle-grid { grid-template-columns: 1fr; }
  .hz-collaboration .hz-principle { justify-content: flex-start; }
}
@media (max-width: 540px) {
  .hz-collaboration .hz-work-grid, .hz-collaboration .hz-choice-grid { grid-template-columns: 1fr; }
  .hz-collaboration .hz-process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hz-collaboration .hz-process-grid li:nth-child(2)::after { content: none; }
  .hz-collaboration .hz-process-grid li:nth-child(3)::after { content: '→'; }
  .hz-collaboration .hz-actions { flex-direction: column; align-items: stretch; }
  .hz-collaboration .hz-actions .hz-button { width: 100%; }
}
@media (max-width: 260px) {
  .hz-collaboration .hz-process-grid { grid-template-columns: 1fr; }
  .hz-collaboration .hz-process-grid li::after { content: none !important; }
  .hz-collaboration .hz-service-card { grid-template-columns: 1fr; }
  .hz-collaboration .hz-service-card .hz-icon-wrap { grid-row: auto; margin-bottom: .4rem; }
  .hz-collaboration .hz-button { padding-inline: .6em; }
}

/* 深色模式：系統偏好 + 常見手動切換寫法 */
@media (prefers-color-scheme: dark) {
  .hz-collaboration { --hz-bg: #1a1a18; --hz-surface: #262521; --hz-surface-alt: #22211e; --hz-text: #f1eadd; --hz-muted: #c8bdaf; --hz-border: rgba(240,220,190,.18); --hz-accent: #d6aa7d; --hz-shadow: none; }
  .hz-collaboration .hz-lead, .hz-collaboration .hz-work-type, .hz-collaboration .hz-read-more, .hz-collaboration .hz-email a, .hz-collaboration .hz-icon-wrap, .hz-collaboration .hz-principle, .hz-collaboration .hz-process-icon { color: #d6aa7d; }
  .hz-collaboration .hz-button-outline { color: #e5b99d; border-color: #d6aa7d; }
}
html.dark .hz-collaboration, body.dark .hz-collaboration, html[data-theme="dark"] .hz-collaboration, body[data-theme="dark"] .hz-collaboration {
  --hz-bg: #1a1a18; --hz-surface: #262521; --hz-surface-alt: #22211e; --hz-text: #f1eadd; --hz-muted: #c8bdaf; --hz-border: rgba(240,220,190,.18); --hz-accent: #d6aa7d; --hz-shadow: none;
}
html.light .hz-collaboration, body.light .hz-collaboration, html[data-theme="light"] .hz-collaboration, body[data-theme="light"] .hz-collaboration {
  --hz-bg: #f7f3ea; --hz-surface: #fffdf8; --hz-surface-alt: #f0e9dd; --hz-text: #29241f; --hz-muted: #625c54; --hz-border: rgba(93,70,49,.2); --hz-accent: var(--hz-primary); --hz-shadow: 0 12px 32px rgba(56,42,31,.07);
}
@media (prefers-reduced-motion: reduce) {
  .hz-collaboration .hz-button, .hz-collaboration .hz-work-image img { transition: none; }
}