/* ═══════════════════════════════════════════════════════
   GCDAY : Layout primitives
   Maps the Webflow Base_Section / Container Regular /
   Grid / Hero / c-header_* styles.
═══════════════════════════════════════════════════════ */

/* ─── Section padding rhythm (Base_Section + Services + About) */

.base-section {
  position: relative;
  padding: var(--sp-9) var(--page-gutter) var(--sp-7);
}

.base-section--inverse {
  padding: var(--sp-7) var(--page-gutter) var(--sp-9);
}

@media (max-width: 991px) {
  .base-section,
  .base-section--inverse {
    padding: var(--sp-8) var(--page-gutter-sm);
  }
}

@media (max-width: 478px) {
  .base-section,
  .base-section--inverse {
    padding-bottom: 0;
  }
}

/* ─── Containers (Container Regular / 2 / Container 3) */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--prose {
  max-width: var(--container-prose);
}

.container--padded {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

@media (max-width: 767px) {
  .container--padded {
    padding-left: var(--page-gutter-sm);
    padding-right: var(--page-gutter-sm);
  }
}

/* ─── c-header content over imagery (header text + hero img) */

.c-header_container {
  overflow: hidden;
  padding-bottom: 0.5em;
}

.c-header_content {
  position: relative;
  z-index: 2;
}

.c-header_text {
  white-space: pre-wrap;
}

.c-header_img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 40vw;
  min-width: 100%;
  margin-top: 5em;
  border-radius: 0.6em;
}

.c-header_img-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .c-header_img { height: 60vw; }
}

@media (max-width: 767px) {
  .c-header_img { height: 80vw; margin-top: 3em; }
}

@media (max-width: 478px) {
  .c-header_img { height: 100vw; }
}

/* ─── Grids (Grid, Grid_Left, Grid_Right, Hero Wrapper 2) */

.grid {
  display: grid;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
}

.grid--left {
  grid-template-columns: 1fr 0.75fr;
}

.grid--right {
  grid-template-columns: 0.75fr 1fr;
}

@media (max-width: 767px) {
  .grid,
  .grid--left,
  .grid--right {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

.hero-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-8);
}

.hero-split {
  display: flex;
  flex-direction: column;
  max-width: 50%;
  align-items: flex-start;
}

@media (max-width: 991px) {
  .hero-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-7);
  }
  .hero-split { max-width: 100%; }
}

/* ─── Centered / Left / Right sections */

.centered-section {
  width: 100%;
  max-width: var(--container-prose);
  margin: var(--sp-5) auto var(--sp-7);
}

@media (max-width: 991px) {
  .centered-section { max-width: 728px; }
}

@media (max-width: 478px) {
  .centered-section { max-width: none; }
}

/* ─── Helper: vertical stack */

.stack > * + * {
  margin-top: var(--sp-4);
}

.stack-lg > * + * {
  margin-top: var(--sp-7);
}
