/* ===================================
   企业文化页面样式 - culture.css
   北京颂宸行科技有限公司官网
   =================================== */

.page-banner { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%); margin-top: 80px; overflow: hidden; }
.page-banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1; }
.page-banner-content { position: relative; z-index: 2; text-align: center; color: white; }
.page-banner-content h1 { font-size: 48px; font-weight: bold; margin-bottom: 16px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); }
.page-banner-content p { font-size: 20px; margin-bottom: 24px; opacity: 0.95; }
.breadcrumb { font-size: 16px; color: rgba(255, 255, 255, 0.9); }
.breadcrumb a { color: rgba(255, 255, 255, 0.9); transition: color 0.3s ease; }
.breadcrumb a:hover { color: var(--secondary-color); }
.breadcrumb span { margin: 0 8px; }

.values-section { padding: 96px 0; }
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.value-card { background: white; padding: 48px 32px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); text-align: center; transition: all 0.3s ease; }
.value-card:hover { transform: translateY(-10px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15); }
.value-icon { font-size: 56px; margin-bottom: 20px; }
.value-card h3 { font-size: 22px; font-weight: bold; color: var(--primary-color); margin-bottom: 16px; }
.value-card p { font-size: 15px; line-height: 1.8; color: var(--text-medium); }

.mission-vision-section { padding: 96px 0; }
.mission-vision-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.mv-card { background: white; padding: 64px 48px; border-radius: 16px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); transition: all 0.4s ease; }
.mv-card:hover { transform: translateY(-12px); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.15); }
.mv-icon-large { font-size: 80px; margin-bottom: 32px; }
.mv-card h2 { font-size: 32px; font-weight: bold; color: var(--primary-color); margin-bottom: 24px; }
.mv-card p { font-size: 18px; line-height: 2; color: var(--text-medium); }

.activities-section { padding: 96px 0; }
.activities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.activity-item { position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; }
.activity-item:hover { transform: scale(1.05); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2); }
.activity-item img { width: 100%; height: 300px; object-fit: cover; display: block; }
.activity-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); padding: 24px; color: white; }
.activity-overlay h4 { font-size: 20px; font-weight: bold; margin-bottom: 8px; }
.activity-overlay p { font-size: 14px; opacity: 0.9; }

@media (max-width: 1200px) {
    .values-grid { grid-template-columns: repeat(3, 1fr); }
    .mission-vision-wrapper { grid-template-columns: 1fr; gap: 32px; }
    .activities-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .page-banner { height: 300px; }
    .page-banner-content h1 { font-size: 36px; }
    .page-banner-content p { font-size: 18px; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .mv-card { padding: 48px 32px; }
    .mv-icon-large { font-size: 64px; }
    .mv-card h2 { font-size: 28px; }
    .mv-card p { font-size: 16px; }
}

@media (max-width: 768px) {
    .page-banner { height: 250px; margin-top: 64px; }
    .page-banner-content h1 { font-size: 28px; }
    .page-banner-content p { font-size: 16px; }
    .values-grid { grid-template-columns: 1fr; gap: 24px; }
    .value-card { padding: 32px 24px; }
    .value-icon { font-size: 48px; }
    .mv-card { padding: 40px 24px; }
    .mv-icon-large { font-size: 56px; }
    .mv-card h2 { font-size: 24px; }
    .activities-grid { grid-template-columns: 1fr; }
    .activity-item img { height: 250px; }
}