/* =============================================================================
   LAYOUT  —  grelha e contentores
   -----------------------------------------------------------------------------
   Breakpoints (convenção — custom properties não funcionam em @media):
     sm  ≥ 576px    md ≥ 768px    lg ≥ 1025px    xl ≥ 1400px
   ========================================================================== */

/* -----------------------------------------------------------------------------
   .lbc-grid  —  grelha responsiva simples
   Base: 1 coluna. `.grid-columns-N` expande até N colunas nos breakpoints.
   --------------------------------------------------------------------------- */
.lbc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lbc-gutter);
  padding-left: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .lbc-grid.grid-columns-2,
  .lbc-grid.grid-columns-3,
  .lbc-grid.grid-columns-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .lbc-grid.grid-columns-3 { grid-template-columns: repeat(3, 1fr); }
  .lbc-grid.grid-columns-4 { grid-template-columns: repeat(4, 1fr); }
  .lbc-grid.grid-columns-5 { grid-template-columns: repeat(5, 1fr); }
  .lbc-grid.grid-columns-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Variante fluida: colunas de largura mínima, sem media queries. */
.lbc-grid.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--lbc-grid-min, 16rem), 1fr));
}

/* -----------------------------------------------------------------------------
   .fullwidth-first-column
   Primeira coluna de banners/heros que ocupa 100% em mobile e, a partir de md,
   fica alinhada à direita com uma largura máxima ~= metade do contentor.
   Aplicar na coluna/`container` Elementor (herda de .elementor-element.e-child).
   --------------------------------------------------------------------------- */
.elementor-element.e-child.fullwidth-first-column,
.fullwidth-first-column {
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element.e-child.fullwidth-first-column,
  .fullwidth-first-column {
    max-width: 515px;
    margin-left: auto;
  }
}

@media (min-width: 1140px) and (max-width: 1599px) {
  .elementor-element.e-child.fullwidth-first-column,
  .fullwidth-first-column {
    max-width: 570px;
    margin-left: auto;
  }
}

@media (min-width: 1600px) {
  .elementor-element.e-child.fullwidth-first-column,
  .fullwidth-first-column {
    max-width: 750px;
    margin-left: auto;
  }
}