/* ====================================================================
   GRID LAYOUT & COLOR FIXES
   Fixes asymmetric 4-box grids and replaces brown/tan colors
   ==================================================================== */

/* Fix for 4-box grid layouts - ensure symmetric spacing and sizing */
.grid,
.blog-grid,
.link-grid,
.featured-grid,
.services-grid {
  display: grid !important;
  gap: 1.5rem !important; /* Consistent gap between items */
  margin-top: 2rem !important;
}

/* Ensure 4-column grid on desktop */
@media (min-width: 1200px) {
  .grid:has(.card:nth-child(4)),
  .blog-grid:has(.blog-card:nth-child(4)),
  .link-grid,
  .services-grid {
    grid-template-columns: repeat(4, 1fr) !important; /* Equal-width columns */
  }
}

/* Alternative: Force 4 columns for 4-item grids with narrower max-width */
@media (min-width: 992px) {
  .grid:has(.card:nth-child(4)):not(:has(.card:nth-child(5))),
  .blog-grid:has(.blog-card:nth-child(4)):not(:has(.blog-card:nth-child(5))),
  .services-grid:has(.service-card:nth-child(4)):not(:has(.service-card:nth-child(5))) {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 2-column grid on tablets */
@media (min-width: 768px) and (max-width: 1199px) {
  .grid,
  .blog-grid,
  .link-grid,
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Single column on mobile */
@media (max-width: 767px) {
  .grid,
  .blog-grid,
  .link-grid,
  .services-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Ensure all cards/boxes have equal height and consistent padding */
.card,
.blog-card,
.link-item,
.pain-card,
.program-card,
.format-card,
.story-card,
.service-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Make cards more compact in 4-item grids */
.services-grid:has(.service-card:nth-child(4)):not(:has(.service-card:nth-child(5))) .service-card {
  padding: 1.25rem !important;
}

/* Center align text in service cards for better appearance with less content */
.service-card {
  text-align: center !important;
}

.service-card .service-icon {
  margin: 0 auto 1rem !important;
  font-size: 2.5rem !important;
  color: #432d70 !important;
}

.service-card .service-title {
  font-size: 1.1rem !important;
  margin-bottom: 0.75rem !important;
  color: #1e293b !important;
}

.service-card .service-description {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: #64748b !important;
}

/* Fix asymmetric content within cards */
.card > *,
.blog-card > *,
.pain-card > *,
.program-card > * {
  margin-bottom: 0.75rem;
}

.card > *:last-child,
.blog-card > *:last-child,
.pain-card > *:last-child,
.program-card > *:last-child {
  margin-bottom: 0;
  margin-top: auto; /* Push last element to bottom for alignment */
}

/* Replace brown/tan colors with more appealing alternatives */
/* Replace browns with elegant purples, blues, or grays */

/* Fix any brown backgrounds */
[style*="background: #8B6914"],
[style*="background: #A0522D"],
[style*="background: #D2691E"],
[style*="background: #964B00"],
[style*="background: #6F4E37"],
[style*="background: #996515"],
[style*="background: #CD853F"],
[style*="background: #BC9A6A"],
[style*="background: tan"],
[style*="background: brown"],
[style*="background: chocolate"],
[style*="background: sienna"],
[style*="background-color: #8B6914"],
[style*="background-color: #A0522D"],
[style*="background-color: #D2691E"],
[style*="background-color: #964B00"],
[style*="background-color: #6F4E37"],
[style*="background-color: #996515"],
[style*="background-color: #CD853F"],
[style*="background-color: #BC9A6A"],
[style*="background-color: tan"],
[style*="background-color: brown"],
[style*="background-color: chocolate"],
[style*="background-color: sienna"] {
  background-color: #5d4489 !important; /* Elegant purple to match brand */
}

/* Replace brown text colors */
[style*="color: #8B6914"],
[style*="color: #A0522D"],
[style*="color: #D2691E"],
[style*="color: #964B00"],
[style*="color: #6F4E37"],
[style*="color: #996515"],
[style*="color: #CD853F"],
[style*="color: #BC9A6A"],
[style*="color: tan"],
[style*="color: brown"],
[style*="color: chocolate"],
[style*="color: sienna"] {
  color: #432d70 !important; /* Deep purple for text */
}

/* Replace brown borders */
[style*="border-color: #8B6914"],
[style*="border-color: #A0522D"],
[style*="border-color: #D2691E"],
[style*="border-color: #964B00"],
[style*="border-color: #6F4E37"],
[style*="border-color: #996515"],
[style*="border-color: #CD853F"],
[style*="border-color: #BC9A6A"],
[style*="border-color: tan"],
[style*="border-color: brown"],
[style*="border-color: chocolate"],
[style*="border-color: sienna"] {
  border-color: #5d4489 !important;
}

/* CSS class-based brown color replacements */
.bg-brown,
.bg-tan,
.brown,
.tan {
  background-color: #f8fafc !important; /* Light gray background */
  color: #1e293b !important; /* Dark text for contrast */
}

.text-brown,
.text-tan {
  color: #432d70 !important;
}

.border-brown,
.border-tan {
  border-color: #e2e8f0 !important;
}

/* Specific fixes for common brown shades in grids */
.mil-card[style*="background"],
.pain-card[style*="background"],
.program-card[style*="background"] {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

/* Fix for solution boxes in training.html */
.solution-box {
  background: linear-gradient(135deg, #10b981, #059669) !important; /* Keep green gradient */
  color: white !important;
  padding: 0.75rem !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
}

/* Ensure proper hover states for cards */
.card:hover,
.blog-card:hover,
.link-item:hover,
.pain-card:hover,
.program-card:hover,
.format-card:hover,
.service-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

/* Fix grid spacing for site-viewer.html */
.link-grid .link-item {
  background: #f8f9fa !important;
  border: 1px solid #e2e8f0 !important;
}

.link-grid .link-item:hover {
  background: #432d70 !important;
  border-color: #432d70 !important;
}

/* Ensure proper grid alignment */
.grid > *,
.blog-grid > *,
.link-grid > * {
  min-height: 200px; /* Minimum height for consistency */
}

/* Fix for testimonial boxes */
.testimonial {
  background: #f8fafc !important;
  border-left-color: #fbbf24 !important; /* Keep yellow accent */
}

/* Fix any remaining brown gradients */
[style*="linear-gradient"][style*="#8B6914"],
[style*="linear-gradient"][style*="#996515"],
[style*="linear-gradient"][style*="#BC9A6A"],
[style*="linear-gradient"][style*="brown"],
[style*="linear-gradient"][style*="tan"] {
  background: linear-gradient(135deg, #5d4489 0%, #432d70 100%) !important;
}

/* Ensure text remains readable on new backgrounds */
.card h3,
.pain-card h3,
.program-card h3,
.format-card h3 {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* Fix for any inline styles with brown hex codes */
*[style*="#8B6914"],
*[style*="#A0522D"],
*[style*="#D2691E"],
*[style*="#964B00"],
*[style*="#6F4E37"],
*[style*="#996515"],
*[style*="#CD853F"],
*[style*="#BC9A6A"] {
  /* Replace with brand colors */
  background-color: inherit !important;
}