/* ===== WHY CHOOSE US PARTIAL ===== */
/* Structure: sub-header + heading, 4-col card grid; same container/card look as FAQ. */
/* Semantic: why-choose-us, why-choose-us__card, why-choose-us-header, why-choose-us-label, why-choose-us-title, why-choose-us-subtitle, why-choose-us-grid, why-choose-us-card, why-choose-us-icon, why-choose-us-card-title, why-choose-us-card-desc */

.section.why-choose-us {
  padding-top: var(--space-12, 48px);
  padding-bottom: var(--space-12, 48px);
}

/* Container: same width as FAQ/Features */
.why-choose-us .container {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Inner card: same background and borders as .faq-section__card */
.why-choose-us__card {
  background: var(--card-bg);
  border: 1px solid var(--line2);
  border-radius: 1.5rem;
  padding: 2rem;
}

@media (min-width: 640px) {
  .why-choose-us__card {
    padding: 3rem;
  }
}

.why-choose-us-header {
  text-align: center;
  margin-bottom: var(--space-8, 32px);
}

/* Optional small-caps sub-label (theme accent) */
.why-choose-us-label {
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cta);
  margin-bottom: var(--space-2);
}

.why-choose-us-title {
  color: var(--color-text-primary);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.why-choose-us-subtitle {
  color: var(--color-text-muted);
  font-size: 1rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* Grid: 1 col mobile, 2 at 640px, 4 at 1024px (blog-style so 4 fit per row) */
.why-choose-us-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6, 24px);
}

@media (min-width: 640px) {
  .why-choose-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .why-choose-us-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8, 32px);
  }
}

/* Card: grid cell controls width; min-width 0 prevents overflow */
.why-choose-us-card {
  min-width: 0;
  background: var(--glass);
  border: 1px solid var(--line2);
  border-radius: var(--r, 20px);
  padding: var(--space-6, 24px);
  transition: border-color 0.2s ease;
}

.why-choose-us-card:hover {
  border-color: var(--line1);
}

.why-choose-us-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--cta);
}

.why-choose-us-icon svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.why-choose-us-card-title {
  color: var(--color-text-primary);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.why-choose-us-card-desc {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
}