/**
 * LAYOUT FIX - Proper Centering and Alignment
 * Date: 2026-03-12
 * Fixes: Service cards, sections, footer alignment issues
 */

/* ============================================
   CONTAINER CENTERING - GLOBAL FIX
   ============================================ */

.container,
section > .container,
.section-container,
div.container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--space-4, 24px) !important;
  padding-right: var(--space-4, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Container contents should be centered */
.container > h1,
.container > h2,
.container > h3,
.container > h4,
.container > h5,
.container > h6,
.container > p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Wider container for service grids */
.services-container,
.grid-container {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--space-4, 24px) !important;
  padding-right: var(--space-4, 24px) !important;
}

/* ============================================
   SERVICE CARDS GRID - PERFECT CENTERING
   ============================================ */

.services-grid,
.card-grid,
.services > div[style*="grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: var(--space-4, 24px) !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-4, 24px) !important;
  justify-items: center !important;
  align-items: start !important;
}

/* Responsive grid breakpoints */
@media (min-width: 1024px) {
  .services-grid,
  .card-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .services-grid,
  .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .services-grid,
  .card-grid {
    grid-template-columns: 1fr !important;
    max-width: 500px !important;
  }
}

/* ============================================
   INDIVIDUAL CARDS - CENTERED CONTENT
   ============================================ */

.card,
.service-card,
a.card,
a.service-card {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.card-content,
.card-body,
.card > div {
  width: 100% !important;
  padding: var(--space-4, 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.card h3,
.card-title,
.card p,
.card-description {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================
   SECTIONS - CONSISTENT CENTERING
   ============================================ */

section {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

section > * {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--space-4, 24px) !important;
  padding-right: var(--space-4, 24px) !important;
}

/* Section headers - fully centered */
.section-header {
  text-align: center !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--space-4, 24px) !important;
  padding-right: var(--space-4, 24px) !important;
  margin-bottom: var(--space-6, 48px) !important;
}

.section-header * {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-header .section-label,
.section-label {
  display: block !important;
  text-align: center !important;
  margin: 0 auto var(--space-2, 16px) !important;
}

.section-header h2,
.section-header .section-title,
section h2,
section .section-title {
  text-align: center !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--space-3, 24px) !important;
}

.section-header p,
.section-header .section-description,
section p,
section .section-description {
  text-align: center !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================
   FOOTER - PROPER CENTERING
   ============================================ */

footer {
  width: 100% !important;
  max-width: 100% !important;
}

footer .container,
footer > div {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--space-4, 24px) !important;
  padding-right: var(--space-4, 24px) !important;
}

/* Footer columns */
footer .footer-columns,
footer > div > div {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: var(--space-6, 40px) !important;
}

footer .footer-column {
  flex: 1 1 200px !important;
  min-width: 200px !important;
}

@media (max-width: 768px) {
  footer .footer-columns {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  footer .footer-column {
    text-align: center !important;
    width: 100% !important;
  }
}

/* ============================================
   HERO SECTION - CENTERED
   ============================================ */

.hero,
.hero-content {
  text-align: center !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--space-4, 24px) !important;
  padding-right: var(--space-4, 24px) !important;
}

.hero h1,
.hero-title {
  text-align: center !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero p,
.hero-subtitle {
  text-align: center !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-cta,
.hero-buttons {
  display: flex !important;
  justify-content: center !important;
  gap: var(--space-3, 16px) !important;
  flex-wrap: wrap !important;
}

/* ============================================
   METRICS SECTION - CENTERED GRID
   ============================================ */

.metrics-grid,
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: var(--space-4, 24px) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-4, 24px) !important;
  justify-items: center !important;
}

.metric-card,
.stat-card {
  text-align: center !important;
  width: 100% !important;
  max-width: 280px !important;
}

/* ============================================
   INSIGHTS/BLOG GRID - CENTERED
   ============================================ */

.insights-grid,
.blog-grid,
.articles-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: var(--space-4, 24px) !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-4, 24px) !important;
  justify-items: center !important;
}

/* ============================================
   PROJECT CARDS - CENTERED
   ============================================ */

.projects-grid,
.portfolio-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  gap: var(--space-5, 32px) !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-4, 24px) !important;
  justify-items: center !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 1440px) {
  .container,
  section > .container {
    max-width: 1200px !important;
  }
  
  .services-container,
  .grid-container {
    max-width: 1300px !important;
  }
}

@media (max-width: 1200px) {
  .container,
  section > .container {
    max-width: 960px !important;
  }
  
  .services-container,
  .grid-container {
    max-width: 1100px !important;
  }
}

@media (max-width: 768px) {
  .container,
  section > .container,
  .services-container,
  .grid-container {
    max-width: 100% !important;
    padding-left: var(--space-3, 16px) !important;
    padding-right: var(--space-3, 16px) !important;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center {
  text-align: center !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.flex-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.grid-center {
  display: grid !important;
  place-items: center !important;
}

/* ============================================
   TEXT ALIGNMENT OVERRIDES - FORCE CENTERING
   ============================================ */

/* Override any inline styles that prevent centering */
[style*="text-align: left"] h1,
[style*="text-align: left"] h2,
[style*="text-align: left"] h3,
[style*="text-align: left"] .section-header,
[style*="text-align: left"] .section-header * {
  text-align: center !important;
}

/* Force center alignment for section content */
section .container > *:not(.grid):not([style*="grid"]):not([class*="grid"]) {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* All direct children of section headers must be centered */
.section-header > * {
  text-align: center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Paragraphs with inline styles - override to center */
p[style*="max-width"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Description text under headers */
.section-description,
.hero-description,
[class*="description"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 800px !important;
}


/* ============================================
   MAJOR PROJECTS SECTION - EQUAL WIDTH CARDS
   ============================================ */

/* Projects grid - force equal width columns */
.grid-2,
.grid.grid-2,
div.grid-2,
.projects-section [style*="grid-template-columns: 1fr 1fr"],
section[style*="grid-template-columns: 1fr 1fr"] {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--space-5, 40px) !important;
  align-items: stretch !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 var(--space-4, 24px) !important;
  justify-items: center !important;
}

/* Project cards - equal height and width */
.project-card,
.grid-2 > .card,
[style*="grid-template-columns: 1fr 1fr"] > div {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 550px !important;
  height: 100% !important;
  min-height: 400px !important;
}

/* Force equal width for project card content */
.project-card > *,
[style*="grid-template-columns: 1fr 1fr"] > div > * {
  width: 100% !important;
}

/* ============================================
   PERSPECTIVES/INSIGHTS - EQUAL HEIGHT CARDS
   ============================================ */

/* Insights grid - 3 equal columns */
.insights-grid,
.perspectives-grid,
section [style*="grid-template-columns: repeat(3"] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-4, 24px) !important;
  align-items: stretch !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 var(--space-4, 24px) !important;
}

/* Article/Insight cards - equal height */
.insight-card,
.article-card,
.blog-card,
.perspectives-grid > a,
.insights-grid > a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
}

/* Card image containers - consistent height */
.insight-card img,
.article-card img,
.blog-card img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
}

/* Card content - fill remaining space */
.insight-card > div:last-child,
.article-card > div:last-child,
.blog-card > div:last-child {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* ============================================
   RESPONSIVE FIXES FOR PROJECTS/INSIGHTS
   ============================================ */

@media (max-width: 1024px) {
  /* Projects: stack to 1 column on tablet */
  .grid-2,
  .projects-section [style*="grid-template-columns: 1fr 1fr"],
  section[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Insights: 2 columns on tablet */
  .insights-grid,
  .perspectives-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  /* Both projects and insights: 1 column on mobile */
  .grid-2,
  .projects-section [style*="grid-template-columns: 1fr 1fr"],
  section[style*="grid-template-columns: 1fr 1fr"],
  .insights-grid,
  .perspectives-grid {
    grid-template-columns: 1fr !important;
    max-width: 500px !important;
  }
  
  .project-card,
  .insight-card,
  .article-card {
    min-height: auto !important;
  }
}

/* ============================================
   STAT/METRIC DISPLAYS - CENTERED
   ============================================ */

/* Large stat displays (180K, 71H, 100%, etc.) */
.stat-display,
[style*="font-size: 72px"],
[style*="font-size: 64px"],
[style*="font-size: 96px"] {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Stat containers */
.stat-container,
div[style*="text-align: center"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}