/* ============================================================
   联系我们相关页面样式
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-xl);
}

.contact-card {
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 92, 175, 0.1);
  box-shadow: 0 18px 38px rgba(9, 29, 61, 0.1);
}

.contact-card h3 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-base);
}

.contact-card p {
  color: var(--color-gray);
  margin-bottom: var(--spacing-sm);
}

.contact-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-card li {
  margin-bottom: var(--spacing-sm);
  padding-left: 1.4rem;
  position: relative;
  color: var(--color-dark-text);
}

.contact-card li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-secondary);
}

.contact-highlight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-xl);
}

.contact-highlight .stat-box {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 92, 175, 0.12);
}

.form-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
}

.form-columns .form-group {
  margin-bottom: 0;
}

.form-section {
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 92, 175, 0.1);
  box-shadow: 0 18px 38px rgba(9, 29, 61, 0.1);
}

.form-section h3 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-base);
}

.form-section p {
  color: var(--color-gray);
  margin-bottom: var(--spacing-base);
}

.form-feedback-inline {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
}

.map-wrapper {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(9, 29, 61, 0.15);
  border: 1px solid rgba(0, 92, 175, 0.12);
  margin-bottom: var(--spacing-xl);
}

.map-wrapper img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-xl);
}

.route-card {
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 92, 175, 0.1);
  box-shadow: 0 18px 38px rgba(9, 29, 61, 0.1);
}

.route-card h3 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-base);
}

.route-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.route-card li {
  margin-bottom: var(--spacing-sm);
  padding-left: 1.4rem;
  position: relative;
}

.route-card li::before {
  content: '▹';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-secondary);
}

.emergency-block {
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(0, 92, 175, 0.18));
  border: 1px solid rgba(0, 92, 175, 0.12);
  box-shadow: 0 18px 38px rgba(9, 29, 61, 0.12);
}

.emergency-block h3 {
  color: var(--color-secondary);
  margin-bottom: var(--spacing-base);
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-xl);
}

.channel-card {
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 92, 175, 0.1);
  box-shadow: 0 18px 38px rgba(9, 29, 61, 0.1);
}

.channel-card h3 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-base);
}

.channel-card p {
  color: var(--color-gray);
}

.channel-meta {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  margin-top: var(--spacing-sm);
}

@media (max-width: 768px) {
  .form-columns {
    grid-template-columns: 1fr;
  }
}