/* ===================================================================
   HOME.CSS - Homepage below-the-fold styles
   Stats · Practice grid · Why us · Testimonials · Tools · Blog · FAQ · CTA
   =================================================================== */

/* ----- Stats Section ----- */
#stats {
  padding: var(--space-12) 0;
}

#stats .grid-4 {
  gap: var(--space-4);
}

@media (min-width: 768px) {
  #stats .grid-4 {
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .card-stat {
    border-right: 1px solid var(--border-dark);
    padding: var(--space-8) var(--space-4);
  }
  .card-stat:last-child {
    border-right: none;
  }
}

/* ----- Why Choose Us ----- */
.why-card {
  text-align: center;
  padding: var(--space-6);
}

.why-icon {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--bg-page);
  border-radius: var(--radius-lg);
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--shadow-sm);
}

.why-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.why-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ----- Testimonials on gold background need adjusted card styles ----- */
.section-gold .testimonial-card {
  background: var(--bg-page);
}

/* ----- Blog Card Image Placeholder Gradients ----- */
.blog-card:nth-child(1) .blog-card-image {
  background: linear-gradient(
    135deg,
    var(--navy-light) 0%,
    var(--gold-soft) 100%
  );
}

.blog-card:nth-child(2) .blog-card-image {
  background: linear-gradient(
    135deg,
    var(--gold-soft) 0%,
    var(--navy-light) 100%
  );
}

.blog-card:nth-child(3) .blog-card-image {
  background: linear-gradient(
    135deg,
    var(--navy-light) 0%,
    var(--off-white) 100%
  );
}

/* ----- CTA Section ----- */
#contact-cta {
  text-align: center;
}

#contact-cta .section-header {
  max-width: 700px;
}