/* ===========================
   XG – Grid moderno, “Bootstrap-friendly”
   - Namespace exclusivo: xg-
   - 12 colunas por padrão
   - Gaps configuráveis (ou zero)
   - Utilitários responsivos
   =========================== */

/* Variáveis padrões (você pode sobrescrever no :root ou em um container) */
:root {
  --xg-gap: 16px;          /* espaçamento padrão entre itens */
  --xg-cols: 12;           /* número de colunas padrão */
  --xg-min: 0;             /* largura mínima de cada célula (para auto-fit) */
}

/* Container de grid */
.xg {
  display: grid;
  grid-template-columns: repeat(var(--xg-cols), minmax(0, 1fr));
  gap: var(--xg-gap);
  /* Evita interferência visual quando itens têm borda/background */
  align-items: start;
}

/* Versão “auto-fit” para cards responsivos (opcional):
   distribui itens com largura mínima e expande até 1fr */
.xg-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--xg-min, 220px), 1fr));
  gap: var(--xg-gap);
}

/* ======= Gutters (espaçamentos) ======= */
.xg-gap-0   { --xg-gap: 0; }
.xg-gap-4   { --xg-gap: 4px; }
.xg-gap-8   { --xg-gap: 8px; }
.xg-gap-12  { --xg-gap: 12px; }
.xg-gap-16  { --xg-gap: 16px; }  /* default */
.xg-gap-20  { --xg-gap: 20px; }
.xg-gap-24  { --xg-gap: 24px; }
.xg-gap-32  { --xg-gap: 32px; }

/* ======= Colunas (span) – desktop/mobile-first =======
   Use .xg-col-N (1..12) para definir quantas colunas o item ocupa.
   Dica: combine com utilitários responsivos abaixo (.xg-sm-col-*, etc.) */
[class*="xg-col-"] { min-width: 0; } /* evita overflow de conteúdo */
.xg-col-1  { grid-column: span 1; }
.xg-col-2  { grid-column: span 2; }
.xg-col-3  { grid-column: span 3; }
.xg-col-4  { grid-column: span 4; }
.xg-col-5  { grid-column: span 5; }
.xg-col-6  { grid-column: span 6; }
.xg-col-7  { grid-column: span 7; }
.xg-col-8  { grid-column: span 8; }
.xg-col-9  { grid-column: span 9; }
.xg-col-10 { grid-column: span 10; }
.xg-col-11 { grid-column: span 11; }
.xg-col-12 { grid-column: span 12; }

/* ======= Helpers de “linha”/quebra ======= */
/* Força item a iniciar em nova linha (útil em arranjos específicos) */
.xg-break { grid-column: 1 / -1; }

/* ======= Alinhamentos úteis ======= */
.xg-items-start    { align-items: start; }
.xg-items-center   { align-items: center; }
.xg-items-end      { align-items: end; }
.xg-justify-start  { justify-items: start; }
.xg-justify-center { justify-items: center; }
.xg-justify-end    { justify-items: end; }
.xg-content-start  { justify-content: start; }
.xg-content-center { justify-content: center; }
.xg-content-end    { justify-content: end; }

/* ======= Responsividade (breakpoints próprios, sem conflitar com Bootstrap) =======
   Quebras inspiradas no Bootstrap, mas com prefixo xg- */
@media (min-width: 576px) {
  .xg-sm-cols-2  { --xg-cols: 2; }
  .xg-sm-cols-3  { --xg-cols: 3; }
  .xg-sm-cols-4  { --xg-cols: 4; }
  .xg-sm-cols-6  { --xg-cols: 6; }
  .xg-sm-cols-12 { --xg-cols: 12; }

  .xg-sm-col-1  { grid-column: span 1; }
  .xg-sm-col-2  { grid-column: span 2; }
  .xg-sm-col-3  { grid-column: span 3; }
  .xg-sm-col-4  { grid-column: span 4; }
  .xg-sm-col-5  { grid-column: span 5; }
  .xg-sm-col-6  { grid-column: span 6; }
  .xg-sm-col-7  { grid-column: span 7; }
  .xg-sm-col-8  { grid-column: span 8; }
  .xg-sm-col-9  { grid-column: span 9; }
  .xg-sm-col-10 { grid-column: span 10; }
  .xg-sm-col-11 { grid-column: span 11; }
  .xg-sm-col-12 { grid-column: span 12; }

  .xg-sm-gap-0  { --xg-gap: 0; }
  .xg-sm-gap-8  { --xg-gap: 8px; }
  .xg-sm-gap-16 { --xg-gap: 16px; }
  .xg-sm-gap-24 { --xg-gap: 24px; }
}

@media (min-width: 768px) {
  .xg-md-cols-2  { --xg-cols: 2; }
  .xg-md-cols-3  { --xg-cols: 3; }
  .xg-md-cols-4  { --xg-cols: 4; }
  .xg-md-cols-6  { --xg-cols: 6; }
  .xg-md-cols-12 { --xg-cols: 12; }

  .xg-md-col-1  { grid-column: span 1; }
  .xg-md-col-2  { grid-column: span 2; }
  .xg-md-col-3  { grid-column: span 3; }
  .xg-md-col-4  { grid-column: span 4; }
  .xg-md-col-5  { grid-column: span 5; }
  .xg-md-col-6  { grid-column: span 6; }
  .xg-md-col-7  { grid-column: span 7; }
  .xg-md-col-8  { grid-column: span 8; }
  .xg-md-col-9  { grid-column: span 9; }
  .xg-md-col-10 { grid-column: span 10; }
  .xg-md-col-11 { grid-column: span 11; }
  .xg-md-col-12 { grid-column: span 12; }

  .xg-md-gap-0  { --xg-gap: 0; }
  .xg-md-gap-8  { --xg-gap: 8px; }
  .xg-md-gap-16 { --xg-gap: 16px; }
  .xg-md-gap-24 { --xg-gap: 24px; }
}

@media (min-width: 992px) {
  .xg-lg-cols-2  { --xg-cols: 2; }
  .xg-lg-cols-3  { --xg-cols: 3; }
  .xg-lg-cols-4  { --xg-cols: 4; }
  .xg-lg-cols-6  { --xg-cols: 6; }
  .xg-lg-cols-12 { --xg-cols: 12; }

  .xg-lg-col-1  { grid-column: span 1; }
  .xg-lg-col-2  { grid-column: span 2; }
  .xg-lg-col-3  { grid-column: span 3; }
  .xg-lg-col-4  { grid-column: span 4; }
  .xg-lg-col-5  { grid-column: span 5; }
  .xg-lg-col-6  { grid-column: span 6; }
  .xg-lg-col-7  { grid-column: span 7; }
  .xg-lg-col-8  { grid-column: span 8; }
  .xg-lg-col-9  { grid-column: span 9; }
  .xg-lg-col-10 { grid-column: span 10; }
  .xg-lg-col-11 { grid-column: span 11; }
  .xg-lg-col-12 { grid-column: span 12; }

  .xg-lg-gap-0  { --xg-gap: 0; }
  .xg-lg-gap-12 { --xg-gap: 12px; }
  .xg-lg-gap-16 { --xg-gap: 16px; }
  .xg-lg-gap-24 { --xg-gap: 24px; }
  .xg-lg-gap-32 { --xg-gap: 32px; }
}

@media (min-width: 1200px) {
  .xg-xl-cols-12 { --xg-cols: 12; } /* redundante, mas explícito */
  .xg-xl-gap-0   { --xg-gap: 0; }
  .xg-xl-gap-16  { --xg-gap: 16px; }
  .xg-xl-gap-32  { --xg-gap: 32px; }
}

/* ======= Utilitário opcional: linhas divisórias verticais/horizontais ======= */
/* Ative “guides” rápidos para debug/layout (desligue em produção) */
.xg-debug > * { outline: 1px dashed rgba(0,0,0,.1); }



/* =========================================================
   XG – Bordeamentos (não conflitam com Bootstrap)
   - Cores, espessuras, lados, estilos, raio, sombra
   - Divisores entre itens (horizontal/vertical) que respeitam o gap
   ========================================================= */

/* Variáveis (sobrescreva onde quiser) */
:root{
  --xg-border-color: #e0e0e0;
  --xg-border-color-strong: #cfcfcf;
  --xg-border-radius: 8px;
}

/* ---------- Bordas genéricas ---------- */
.xg-border        { border: 1px solid var(--xg-border-color); }
.xg-border-0      { border: 0 !important; }
.xg-border-2      { border-width: 2px; border-style: solid; border-color: var(--xg-border-color-strong); }
.xg-border-3      { border-width: 3px; border-style: solid; border-color: var(--xg-border-color-strong); }

.xg-border-dashed { border-style: dashed !important; }
.xg-border-dotted { border-style: dotted !important; }

/* Lados específicos */
.xg-border-t { border-top:    1px solid var(--xg-border-color); }
.xg-border-r { border-right:  1px solid var(--xg-border-color); }
.xg-border-b { border-bottom: 1px solid var(--xg-border-color); }
.xg-border-l { border-left:   1px solid var(--xg-border-color); }

/* ---------- Raio (arredondamentos) ---------- */
.xg-rounded    { border-radius: var(--xg-border-radius); }
.xg-rounded-0  { border-radius: 0; }
.xg-rounded-sm { border-radius: 4px; }
.xg-rounded-md { border-radius: 8px; }
.xg-rounded-lg { border-radius: 12px; }
.xg-rounded-xl { border-radius: 16px; }
.xg-rounded-2xl{ border-radius: 24px; }
.xg-rounded-pill { border-radius: 9999px; }

/* ---------- Sombras (sutileza clássica) ---------- */
.xg-shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.xg-shadow    { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.xg-shadow-lg { box-shadow: 0 6px 20px rgba(0,0,0,.12); }

/* ---------- Divisores entre itens ----------
   Regras visuais entre filhos do grid.
   Funcionam COM OU SEM gap: usamos pseudo-elementos deslocados
   metade do gap para “fechar” a linha.
*/

/* Divisor vertical entre colunas (use no container .xg ou .xg-auto) */
.xg-divide-x { position: relative; }
.xg-divide-x > * { position: relative; }
.xg-divide-x > * + *::before{
  content:"";
  position:absolute;
  left: calc(-1 * var(--xg-gap, 0px) / 2);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--xg-border-color);
  pointer-events:none;
}

/* Divisor horizontal entre linhas */
.xg-divide-y { position: relative; }
.xg-divide-y > * { position: relative; }
.xg-divide-y > *::after{
  /* traço embaixo de cada item... */
  content:"";
  position:absolute;
  left: 0; right: 0;
  bottom: calc(-1 * var(--xg-gap, 0px) / 2);
  height: 1px;
  background: var(--xg-border-color);
  pointer-events:none;
}
/* ...exceto na “última linha” quando não há gap (heurística simples): */
.xg-gap-0.xg-divide-y > *:nth-last-child(-n+var(--xg-cols, 12))::after{ display:none; }

/* ---------- Regras utilitárias de cor (opcionais) ---------- */
.xg-border-light  { --xg-border-color:#eee; }
.xg-border-mid    { --xg-border-color:#ddd; }
.xg-border-strong { --xg-border-color:#cfcfcf; }

/* ---------- Regras para “cartões” ---------- */
.xg-card {
  background:#fff;
  border:1px solid var(--xg-border-color);
  border-radius: var(--xg-border-radius);
}

/* ---------- Divisores soltos (elementos) ---------- */
.xg-vrule{
  display:inline-block;
  width:1px; min-height:1em; background:var(--xg-border-color);
}
.xg-hrule{
  display:block;
  height:1px; width:100%; background:var(--xg-border-color);
}

/* ---------- Modo escuro opcional ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --xg-border-color:#2b2b2b;
    --xg-border-color-strong:#3a3a3a;
  }
}