/* =============================================================
   eteg-base.css — estilos compartilhados por todos os widgets ETEG
   Carregado uma vez pelo plugin (handle: eteg-base).
   Os tokens de valor vêm de eteg-tokens.css (var(--eteg-*)).
   ============================================================= */

/* ── Box-sizing — escopo de todos os elementos eteg- ────────── */
/* stylelint-disable selector-max-universal */
[class^="eteg-"] *,
[class^="eteg-"] *::before,
[class^="eteg-"] *::after,
[class*=" eteg-"] *,
[class*=" eteg-"] *::before,
[class*=" eteg-"] *::after {
  box-sizing: border-box;
}
/* stylelint-enable selector-max-universal */

/* ── .eteg-container — wrapper de largura máxima centrado ───── */
/* Uso: <div class="eteg-container"> dentro do bloco principal   */
.eteg-container {
  width: 100%;
  max-width: var(--eteg-layout-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--eteg-container-padding-mobile, 16px);
}

@media (min-width: 768px) {
  .eteg-container {
    padding-inline: var(--eteg-container-padding-tablet, 20px);
  }
}

@media (min-width: 1024px) {
  .eteg-container {
    padding-inline: var(--eteg-container-padding-desktop, 24px);
  }
}

/* ── .eteg-section — padding de seção responsivo ─────────────── */
/* Uso: adicionar à classe raiz do widget ou a um wrapper interno */
.eteg-section {
  padding-block: var(--eteg-section-padding-mobile, 48px);
}

@media (min-width: 768px) {
  .eteg-section {
    padding-block: var(--eteg-section-padding-tablet, 64px);
  }
}

@media (min-width: 1024px) {
  .eteg-section {
    padding-block: var(--eteg-section-padding-desktop, 96px);
  }
}