/* Layout overrides only, loaded after style.css. Brand colors live in
   style.css's own :root — not redefined here, so the brand palette set
   there is the one that actually renders. */

/* ---- hero.php: full-bleed background slide, content bottom-left ---- */
.hero-slide--full {
  align-items: flex-end;
  padding-bottom: 26px;
}

.hero-slide--full .hero-slide__image {
  width: 100%;
}

.hero-slide--full .hero-slide__content {
  max-width: 460px;
}

/* ---- payments-providers.php: grouped rows instead of grid/carousel ---- */
.providers-row-group {
  margin-bottom: 18px;
}

.providers-row-group:last-child {
  margin-bottom: 0;
}

.providers-row-group__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  display: block;
}

.providers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.providers-row .provider-card {
  width: 132px;
}

.payments-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.payments-row .payment-card {
  width: 88px;
}

@media (max-width: 380px) {
  .providers-row .provider-card {
    width: calc(50% - 5px);
  }
  .payments-row .payment-card {
    width: calc(33.33% - 7px);
  }
}