/* Bootstrap fixed-width containers (live site grid) */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  max-width: 540px;
}

@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: var(--container-max); } }

/* Catalog row is full-bleed on the live site (container-fluid + side padding) */
.catalog .container {
  max-width: none;
  padding: 0 30px;
}

@media (min-width: 1200px) {
  .catalog .container { padding: 0 50px; }
}

section {
  padding: 4rem 0;
}

section.catalog {
  background: var(--color-cream);
}

section.catalog.catalog--tour {
  background: var(--color-ink);
  color: #fff;
}

section.oncobeauty,
section.promo-cta {
  background: var(--color-ink);
  color: #fff;
}

section.promo-row--alt {
  background: var(--color-cream);
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

.welcome__grid,
.automotive__grid,
.oncobeauty__grid,
.promo-row__grid,
.promo-cta__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* Promo page: live site uses asymmetric column splits (Bootstrap col-6/col-4,
   col-5/col-4), not an even 1fr/1fr split like the other pages' grids above */
@media (min-width: 768px) {
  .promo-row__grid { grid-template-columns: 5fr 4fr; }
  .promo-row--alt .promo-row__grid { grid-template-columns: 4fr 5fr; }
  .promo-cta__grid { grid-template-columns: 4fr 5fr; }
}

section.promo-360 {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
}

.clients__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: center;
  margin-top: 2.5rem;
}

.contact-info__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (max-width: 575px) {
  .catalog__grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 992px) {
  .catalog__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .catalog__grid--tour {
    grid-template-columns: repeat(3, 1fr);
  }
  .clients__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Text + media grids stay single-column until 1024px — at 768-1023 the two
   columns get too narrow for the longer languages (DE especially: text wraps to
   a hard ragged column and the CTA button breaks onto two lines). */
@media (min-width: 1024px) {
  .welcome__grid,
  .automotive__grid,
  .oncobeauty__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  section.promo-360 {
    grid-template-columns: 1fr 1fr;
  }
  .contact-info__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .contact-form__grid {
    grid-template-columns: 1fr 1fr;
  }
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}