/**
 * Integrity Cleaning - Modern Container Queries
 * Container-type support for component-level responsiveness
 * @version 2026.02.19
 */

/* Enable container queries on card grids */
.card-grid,
.service-grid,
.testimonial-grid,
.review-grid {
  container-type: inline-size;
  container-name: cards;
}

/* Responsive cards based on container width */
@container cards (min-width: 300px) {
  .card,
  .service-card {
    padding: 1.5rem;
  }
}

@container cards (min-width: 500px) {
  .card-grid,
  .service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@container cards (min-width: 700px) {
  .card-grid,
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Modern fluid container */
.container-modern {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.container-narrow {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.container-wide {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Auto-fit grids with container queries */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

.grid-auto-fit-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

/* Responsive spacing that scales with viewport */
.section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

.section-sm {
  padding-block: clamp(2rem, 5vw, 4rem);
}

.section-lg {
  padding-block: clamp(4rem, 10vw, 8rem);
}

/* Safe area inset support */
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-left {
  padding-left: env(safe-area-inset-left);
}

.safe-area-right {
  padding-right: env(safe-area-inset-right);
}

.safe-area-all {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Prevent layout shift with aspect ratio */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
  aspect-ratio: 1 / 1;
}

.aspect-ratio-3-2 {
  aspect-ratio: 3 / 2;
}