/* ==========================================================================
   PERFECT ECOTECH - LAYOUT ARCHITECTURE
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-narrow {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Sections */
.section {
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.section-sm {
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
}

.section-lg {
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
}

.section-alt {
  background-color: #FFFFFF;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section-neutral {
  background-color: var(--color-bg);
}

.section-water {
  background-color: var(--color-water-light);
  border-top: 1px solid rgba(8, 121, 201, 0.15);
  border-bottom: 1px solid rgba(8, 121, 201, 0.15);
}

.section-solar {
  background-color: var(--color-solar-light);
  border-top: 1px solid rgba(53, 168, 83, 0.15);
  border-bottom: 1px solid rgba(53, 168, 83, 0.15);
}

.section-power {
  background-color: var(--color-power-light);
  border-top: 1px solid rgba(245, 124, 0, 0.15);
  border-bottom: 1px solid rgba(245, 124, 0, 0.15);
}

.section-navy {
  background-color: var(--color-primary-navy);
  color: #FFFFFF;
}

.section-navy h1, 
.section-navy h2, 
.section-navy h3, 
.section-navy h4 {
  color: #FFFFFF;
}

.section-navy p {
  color: #CBD5E1;
}

.section-cta-band {
  background-color: var(--color-primary-navy);
  color: #FFFFFF;
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
  border-top: 4px solid var(--color-water);
  text-align: center;
}

.section-cta-band h2 {
  color: #FFFFFF;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--spacing-3);
}

.section-cta-band p {
  color: #CBD5E1;
  font-size: var(--fs-md);
  max-width: 680px;
  margin: 0 auto var(--spacing-6) auto;
  line-height: var(--lh-body);
}

/* Grid Layouts */
.grid {
  display: grid;
  gap: var(--spacing-6);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Flex Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }