/* layout.css */

/* Container widths, spacing, grid, responsive adjustments */

.container,
.human-centered-wrapper,
.start-conversation-wrapper,
.penguin-platform-wrapper,
.what-we-do-wrapper {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 24px;
}

/* Global container width applies to all except header, hero, footer */
body:not(#header):not(#hero):not(#footer) .container {
  max-width: 1200px;
}

/* Flex wrappers for two column sections */
.human-centered-wrapper,
.start-conversation-wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px; /* space between columns */
}

/* Two column layout */
.human-centered-left,
.human-centered-right,
.start-conversation-left,
.start-conversation-right {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
  box-sizing: border-box;
}

/* Responsive adjustments */

/* Stack columns below 720px */
@media (max-width: 720px) {
  .human-centered-wrapper,
  .start-conversation-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .human-centered-left,
  .human-centered-right,
  .start-conversation-left,
  .start-conversation-right {
    max-width: 100%;
    flex: 1 1 100%;
    min-width: auto;
  }
}

/* Three column layout for wider screens */
@media (min-width: 1200px) {
  .what-we-do-card {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

/* Grid utility for general grids */
.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Utility for 3-column grids */
.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Spacing and padding for sections */
section {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Remove horizontal gap for small screens */
@media (max-width: 576px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }
}