/* Global Grid Spacing System
   Applies consistent row-gap spacing to all grid sections across all pages
   Prevents card/item elements from touching while maintaining clean spacing
*/

/* ================================================
   GENERAL ROW SPACING
   ================================================ */

/* Features Section (Home, About, Services) */
.features-area .features-items,
.features-area .row,
.single-item {
  row-gap: 20px;
}

/* Process/Steps Section */
.work-process-area .row,
.work-process-area .process-item {
  row-gap: 24px;
}

/* Testimonials Section */
.testimonials-area .row,
.testimonial-item {
  row-gap: 20px;
}

/* Services/Products Grid */
.services-area .row,
.service-items .row {
  row-gap: 20px;
}

/* Portfolio/Projects Grid */
.portfolio-area .row,
.project-area .row {
  row-gap: 20px;
}

/* Blog/Articles Grid */
.blog-area .row,
.blog-items .row {
  row-gap: 20px;
}

/* Pricing Section */
.pricing-area .row,
.pricing-items .row {
  row-gap: 24px;
}

/* Team Section */
.team-area .row,
.team-items .row {
  row-gap: 20px;
}

/* Clients/Partners Section */
.clients-area .row,
.partners-area .row {
  row-gap: 16px;
}

/* General container rows */
.container > .row {
  row-gap: 20px;
}

/* ================================================
   RESPONSIVE SPACING
   ================================================ */

/* Tablet adjustments */
@media (max-width: 991px) {
  .features-area .features-items,
  .features-area .row,
  .work-process-area .row,
  .testimonials-area .row,
  .services-area .row,
  .portfolio-area .row,
  .blog-area .row,
  .pricing-area .row,
  .team-area .row,
  .container > .row {
    row-gap: 18px;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .features-area .features-items,
  .features-area .row,
  .work-process-area .row,
  .testimonials-area .row,
  .services-area .row,
  .portfolio-area .row,
  .blog-area .row,
  .pricing-area .row,
  .team-area .row,
  .container > .row {
    row-gap: 16px;
  }
}

/* Small mobile adjustments */
@media (max-width: 576px) {
  .features-area .features-items,
  .features-area .row,
  .work-process-area .row,
  .testimonials-area .row,
  .services-area .row,
  .portfolio-area .row,
  .blog-area .row,
  .pricing-area .row,
  .team-area .row,
  .container > .row {
    row-gap: 12px;
  }
}

/* ================================================
   REMOVE INDIVIDUAL MARGINS (prevents double-spacing)
   ================================================ */

.service-item,
.portfolio-item,
.blog-item,
.team-member,
.testimonial-item,
.pricing-item,
.process-step,
.feature-item,
.single-item {
  margin-top: 0;
  margin-bottom: 0;
}

/* ================================================
   SPECIFIC SECTION OVERRIDES
   ================================================ */

/* Services area - already has row-gap defined in service-icon-fix.css */
.services-area .row {
  row-gap: 20px;
}

/* Align center rows don't always need top gap */
.row.align-center {
  row-gap: 20px;
}

/* Ensure even padding consistency */
.container {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 20px;
}

@media (max-width: 768px) {
  .container {
    --bs-gutter-y: 16px;
  }
}