/* =========================================
   LAYOUT — SBZSolar
   ========================================= */

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-sm  { max-width: var(--container-sm);  }
.container-md  { max-width: var(--container-md);  }
.container-lg  { max-width: var(--container-lg);  }
.container-2xl { max-width: var(--container-2xl); }

/* ---- Section spacing ---- */
.section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-32));
}

.section-sm {
  padding-block: clamp(var(--space-12), 5vw, var(--space-20));
}

.section-lg {
  padding-block: clamp(var(--space-24), 10vw, 10rem);
}

/* ---- Section headers ---- */
.section-header {
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.section-header.centered {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-header p {
  max-width: 56ch;
}

.section-header.centered p {
  text-align: center;
}

/* ---- Grid systems ---- */
.grid {
  display: grid;
  gap: var(--space-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); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-auto-md { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

/* ---- Flex utilities ---- */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start  { justify-content: flex-start; }
.gap-2   { gap: var(--space-2); }
.gap-4   { gap: var(--space-4); }
.gap-6   { gap: var(--space-6); }
.gap-8   { gap: var(--space-8); }
.gap-12  { gap: var(--space-12); }

/* ---- Backgrounds ---- */
.bg-white  { background-color: var(--color-white); }
.bg-gray   { background-color: var(--color-gray-50); }
.bg-navy   { background-color: var(--color-navy); }
.bg-dark   { background-color: var(--color-navy-deep); }
.bg-gradient { background: var(--gradient-hero); }

/* ---- Two-column split layouts ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: center;
}

.split.reverse > *:first-child { order: 2; }
.split.reverse > *:last-child  { order: 1; }

.split-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.split-content p {
  max-width: unset;
}

/* ---- Image wrappers ---- */
.img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-ratio-16-9  { aspect-ratio: 16/9; }
.img-ratio-4-3   { aspect-ratio: 4/3; }
.img-ratio-3-2   { aspect-ratio: 3/2; }
.img-ratio-1-1   { aspect-ratio: 1; }
.img-ratio-9-16  { aspect-ratio: 9/16; }

/* ---- Spacing helpers ---- */
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

/* ---- Divider ---- */
.divider {
  width: 48px;
  height: 3px;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
  margin-block: var(--space-6);
}

.divider.centered { margin-inline: auto; }

/* ---- Stats bar ---- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stats-bar .stat-item {
  background: var(--color-white);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.bg-navy .stats-bar { background: rgba(255,255,255,0.1); }
.bg-navy .stat-item  { background: rgba(255,255,255,0.04); }

/* ---- Main content offset for sticky header ---- */
main {
  padding-top: var(--header-height);
}

.hero-section {
  margin-top: calc(-1 * var(--header-height));
  padding-top: var(--header-height);
}