/* ============================================================
   contact.css — 联系我们页面样式
   ============================================================ */

/* ---------- Hero ---------- */
.contact-hero{text-align:center;padding:4rem 0 2.5rem;background:linear-gradient(180deg,var(--color-bg-tertiary),var(--color-bg))}
.contact-hero h1{font-size:clamp(1.8rem,4.5vw,2.4rem);font-weight:900;margin-bottom:.7rem}
.contact-hero p{color:var(--color-text-secondary);font-size:1rem;margin:0 auto;max-width:560px}

/* ---------- Layout ---------- */
.contact-layout{display:grid;grid-template-columns:300px 1fr;gap:2.5rem;align-items:start}

/* ---------- Info Cards ---------- */
.contact-info{display:flex;flex-direction:column;gap:1rem}
.contact-info-card{background:var(--color-bg-card);border:1.5px solid var(--color-border);border-radius:var(--radius-md);padding:1.25rem 1.4rem;transition:all var(--transition-fast)}
.contact-info-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.contact-info-icon{font-size:1.6rem;margin-bottom:.5rem}
.contact-info-card h3{font-size:1rem;font-weight:700;margin-bottom:.35rem;color:var(--color-heading)}
.contact-info-card p{font-size:.85rem;color:var(--color-text-secondary);line-height:1.65;margin:0}
.contact-info-card a{color:var(--color-primary);font-weight:600;word-break:break-all}
.contact-info-card a:hover{color:var(--color-primary-dark)}

/* ---------- Form Card ---------- */
.contact-form-card{background:var(--color-bg-card);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:2.25rem 2.5rem;box-shadow:var(--shadow-md)}
.contact-form-title{font-size:1.3rem;font-weight:800;margin-bottom:1.5rem;color:var(--color-heading)}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:.88rem;font-weight:600;color:var(--color-heading);margin-bottom:.45rem}
.form-required{color:#e11d48}
.form-group input,.form-group textarea{width:100%;padding:.75rem 1rem;border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-size:.92rem;font-family:inherit;color:var(--color-text);background:var(--color-bg);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);resize:vertical}
.form-group input:focus,.form-group textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-glow)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--color-text-muted)}
.form-count{text-align:right;font-size:.75rem;color:var(--color-text-muted);margin-top:.3rem}

/* ---------- Alert ---------- */
.form-alert{padding:.85rem 1.1rem;border-radius:var(--radius-md);font-size:.88rem;margin-bottom:1.25rem;line-height:1.5}
.form-alert-success{background:rgba(16,185,129,.1);border:1.5px solid rgba(16,185,129,.4);color:#059669}
.form-alert-error{background:rgba(225,29,72,.08);border:1.5px solid rgba(225,29,72,.35);color:#e11d48}

.contact-submit{width:100%}
.contact-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}

@media(max-width:900px){
    .contact-layout{grid-template-columns:1fr}
}
@media(max-width:640px){
    .contact-hero{padding:3rem 0 2rem}
    .contact-form-card{padding:1.5rem 1.25rem}
    .form-row{grid-template-columns:1fr;gap:0}
}