/* 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. Structural helper classes for
   this site's unique hero (two-slide auto-slider with dots/arrows) /
   games (stacked .games-category sections) / payments-providers
   (grouped rows) layout. */

/* ---- hero.php: two-slide slider gets its own controls layer ---- */
.hero-slider--controlled {
  position: relative;
}

/* ---- header.php: two sidebar sections wrapped side-by-side ---- */
.side-panel__row {
  display: flex;
  gap: 10px;
}

.side-panel__row .side-panel__section {
  flex: 1;
  min-width: 0;
}

/* ---- footer.php: nav columns split into two visual tiers ---- */
.footer__tier {
  border-radius: var(--radius-lg);
}

.footer__tier + .footer__tier {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

/* ---- 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);
  }
  .side-panel__row {
    flex-direction: column;
  }
}