/* ============================================
   ZHICAI About Page Styles — about.css
   ============================================ */

/* --- Company Intro Layout --- */
.about-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(166, 124, 82, 0.15);
  background: var(--color-bg-alt);
  aspect-ratio: 4/3;
  width: 100%;
}

.about-placeholder-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-kraft-light) 100%);
  opacity: 0.8;
}

/* --- MVV Card Styles --- */
.mvv-card {
  text-align: center;
  transition: all var(--transition-base);
  border: 1px solid var(--color-border);
}

.mvv-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-kraft);
}

@media (max-width: 768px) {
  .mvv-card {
    padding: var(--space-4) !important;
  }
  
  .mvv-card span[style*="font-size: 3rem"] {
    font-size: 2rem !important;
    margin-bottom: var(--space-1) !important;
  }
  
  .mvv-card h3 {
    margin-bottom: var(--space-1) !important;
    font-size: var(--text-lg) !important;
  }
  
  .mvv-card p {
    margin-bottom: 0 !important;
    font-size: var(--text-sm) !important;
    line-height: 1.5 !important;
  }
  
  .mvv-card p.color-kraft {
    font-size: var(--text-base) !important;
    margin-top: var(--space-1) !important;
  }
}