﻿/* ===========================================
   COMPONENT: Mission & Vision Cards
   "When Health Decisions Matter Most, Clarity Counts"
   =========================================== */

.mission-vision-section { background: transparent; }
.mission-vision-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-12);
}
.mission-vision-intro h2 { margin-bottom: var(--space-4); }

.mission-vision-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
.mv-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  background: var(--glass-bg, rgba(255,255,255,.55));
  backdrop-filter: var(--glass-blur, blur(24px) saturate(180%));
  -webkit-backdrop-filter: var(--glass-blur, blur(24px) saturate(180%));
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  border: 1px solid var(--glass-border, rgba(255,255,255,.32));
  box-shadow:
    var(--glass-highlight, inset 0 1px 0 rgba(255,255,255,.85)),
    var(--shadow-teal-md, 0 4px 18px rgba(14,139,127,.18)),
    0 1px 4px rgba(0,0,0,.06);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.mv-card:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 36px rgba(14,139,127,.22),
    0 4px 12px rgba(0,0,0,.08),
    0 24px 52px rgba(14,139,127,.10);
}
.mv-card-img {
  display: block;
  width: calc(100% + calc(var(--space-8) * 2));
  height: 160px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-5);
}
.mv-card-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, rgba(14,139,127,.18), rgba(94,234,212,.12));
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-teal-dark);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
  border: 1px solid rgba(14,139,127,.20);
  box-shadow: 0 2px 8px rgba(14,139,127,.14);
}
.mv-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.mv-card p  { font-size: var(--text-sm); line-height: 1.8; }

/* Bottom trust strip inside this section */
.mission-vision-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(14,139,127,.18);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80), 0 2px 12px rgba(14,139,127,.10);
  flex-wrap: wrap;
}
.mv-trust-item {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-navy); font-weight: 500;
}
.mv-trust-item i { color: var(--color-teal); }

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

