/*
 * HC Carlix — grid.css
 * Sistema de colunas próprio (CSS Grid, 12 colunas). Sem Bootstrap.
 * Usa os tokens do variables.css (carregado antes via joomla.asset.json).
 *
 * LINHA      .carlix-row            (container prefixado — só nosso, sem colisão)
 * COLUNAS    .col-1 .. .col-12      (span N de 12; simples)
 *
 * MAPA DE BREAKPOINTS (sincronizado JS/JSON/PHP/CSS):
 *   phone               .col-N         (< 576px, mobile-first base)
 *   largePhone          .col-sm-N      (>= 576px)
 *   tablet              .col-md-N      (>= 768px)
 *   smallDesktop        .col-lg-N      (>= 992px)
 *   largeDesktop        .col-xl-N      (>= 1200px)
 *   extraLargeDesktop   .col-xxl-N     (>= 1400px)
 *
 * EXTRAS    .col-auto / .col-hidden (e variantes por breakpoint) =
 *            largura automática / ocultar no breakpoint
 * OFFSET     .off-1 .. .off-11     (empurra a coluna para a direita)
 * AUTO       .carlix-row.cols-N     (N colunas iguais sem marcar cada uma)
 * GAP        padrão / .carlix-row--nogap / .carlix-row--gap-lg
 *            tamanho via token --carlix-grid-gap (variables.css) ou
 *            por linha: style="--carlix-grid-gap: 2rem"
 *
 * "col" só vira coluna DENTRO de .carlix-row → um .col-6 solto de um
 * componente Joomla não é afetado, e não tocamos no .row do Bootstrap.
 */

.carlix-row {
	display: grid;
	/* minmax(0, 1fr) impede que conteúdo intrinseco "empurre" o track e
	   quebre a divisao de 12 colunas (sintoma classico: col-6 ficando
	   maior que 50% por causa de uma imagem/iframe sem max-width). */
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--carlix-grid-gap, 1.5rem);
	width: 100%;
}

/* Tamanho do espaço entre colunas */
.carlix-row--nogap  { gap: 0; }
.carlix-row--gap-lg { gap: calc(var(--carlix-grid-gap, 1.5rem) * 2); }

/* Mobile-first: cada item ocupa a linha inteira por padrão */
.carlix-row > * { grid-column: 1 / -1; min-width: 0; }

/* Span explícito (vale em qualquer largura) */
.carlix-row > .col-auto { display: block; grid-column: auto; }
.carlix-row > .col-hidden { display: none; }
.carlix-row > .col-1  { display: block; grid-column: span 1; }
.carlix-row > .col-2  { display: block; grid-column: span 2; }
.carlix-row > .col-3  { display: block; grid-column: span 3; }
.carlix-row > .col-4  { display: block; grid-column: span 4; }
.carlix-row > .col-5  { display: block; grid-column: span 5; }
.carlix-row > .col-6  { display: block; grid-column: span 6; }
.carlix-row > .col-7  { display: block; grid-column: span 7; }
.carlix-row > .col-8  { display: block; grid-column: span 8; }
.carlix-row > .col-9  { display: block; grid-column: span 9; }
.carlix-row > .col-10 { display: block; grid-column: span 10; }
.carlix-row > .col-11 { display: block; grid-column: span 11; }
.carlix-row > .col-12 { display: block; grid-column: span 12; }

/* Offsets — empurram a coluna para a direita */
.carlix-row > .off-1  { grid-column-start: 2; }
.carlix-row > .off-2  { grid-column-start: 3; }
.carlix-row > .off-3  { grid-column-start: 4; }
.carlix-row > .off-4  { grid-column-start: 5; }
.carlix-row > .off-5  { grid-column-start: 6; }
.carlix-row > .off-6  { grid-column-start: 7; }
.carlix-row > .off-7  { grid-column-start: 8; }
.carlix-row > .off-8  { grid-column-start: 9; }
.carlix-row > .off-9  { grid-column-start: 10; }
.carlix-row > .off-10 { grid-column-start: 11; }
.carlix-row > .off-11 { grid-column-start: 12; }

/* ===== Breakpoint sm (>= 576px) — large phone ===== */
@media (min-width: 576px) {
	.carlix-row > .col-sm-auto { display: block; grid-column: auto; }
	.carlix-row > .col-sm-hidden { display: none; }
	.carlix-row > .col-sm-1  { display: block; grid-column: span 1; }
	.carlix-row > .col-sm-2  { display: block; grid-column: span 2; }
	.carlix-row > .col-sm-3  { display: block; grid-column: span 3; }
	.carlix-row > .col-sm-4  { display: block; grid-column: span 4; }
	.carlix-row > .col-sm-5  { display: block; grid-column: span 5; }
	.carlix-row > .col-sm-6  { display: block; grid-column: span 6; }
	.carlix-row > .col-sm-7  { display: block; grid-column: span 7; }
	.carlix-row > .col-sm-8  { display: block; grid-column: span 8; }
	.carlix-row > .col-sm-9  { display: block; grid-column: span 9; }
	.carlix-row > .col-sm-10 { display: block; grid-column: span 10; }
	.carlix-row > .col-sm-11 { display: block; grid-column: span 11; }
	.carlix-row > .col-sm-12 { display: block; grid-column: span 12; }
}

/* ===== Breakpoint md (>= 768px) — tablet ===== */
@media (min-width: 768px) {
	/* Distribuição automática igual: .carlix-row.cols-N */
	.carlix-row.cols-1  > * { grid-column: span 12; }
	.carlix-row.cols-2  > * { grid-column: span 6; }
	.carlix-row.cols-3  > * { grid-column: span 4; }
	.carlix-row.cols-4  > * { grid-column: span 3; }
	.carlix-row.cols-6  > * { grid-column: span 2; }
	.carlix-row.cols-12 > * { grid-column: span 1; }

	.carlix-row > .col-md-auto { display: block; grid-column: auto; }
	.carlix-row > .col-md-hidden { display: none; }
	.carlix-row > .col-md-1  { display: block; grid-column: span 1; }
	.carlix-row > .col-md-2  { display: block; grid-column: span 2; }
	.carlix-row > .col-md-3  { display: block; grid-column: span 3; }
	.carlix-row > .col-md-4  { display: block; grid-column: span 4; }
	.carlix-row > .col-md-5  { display: block; grid-column: span 5; }
	.carlix-row > .col-md-6  { display: block; grid-column: span 6; }
	.carlix-row > .col-md-7  { display: block; grid-column: span 7; }
	.carlix-row > .col-md-8  { display: block; grid-column: span 8; }
	.carlix-row > .col-md-9  { display: block; grid-column: span 9; }
	.carlix-row > .col-md-10 { display: block; grid-column: span 10; }
	.carlix-row > .col-md-11 { display: block; grid-column: span 11; }
	.carlix-row > .col-md-12 { display: block; grid-column: span 12; }
}

/* ===== Breakpoint lg (>= 992px) — small desktop ===== */
@media (min-width: 992px) {
	.carlix-row > .col-lg-auto { display: block; grid-column: auto; }
	.carlix-row > .col-lg-hidden { display: none; }
	.carlix-row > .col-lg-1  { display: block; grid-column: span 1; }
	.carlix-row > .col-lg-2  { display: block; grid-column: span 2; }
	.carlix-row > .col-lg-3  { display: block; grid-column: span 3; }
	.carlix-row > .col-lg-4  { display: block; grid-column: span 4; }
	.carlix-row > .col-lg-5  { display: block; grid-column: span 5; }
	.carlix-row > .col-lg-6  { display: block; grid-column: span 6; }
	.carlix-row > .col-lg-7  { display: block; grid-column: span 7; }
	.carlix-row > .col-lg-8  { display: block; grid-column: span 8; }
	.carlix-row > .col-lg-9  { display: block; grid-column: span 9; }
	.carlix-row > .col-lg-10 { display: block; grid-column: span 10; }
	.carlix-row > .col-lg-11 { display: block; grid-column: span 11; }
	.carlix-row > .col-lg-12 { display: block; grid-column: span 12; }
}

/* ===== Breakpoint xl (>= 1200px) — large desktop ===== */
@media (min-width: 1200px) {
	.carlix-row > .col-xl-auto { display: block; grid-column: auto; }
	.carlix-row > .col-xl-hidden { display: none; }
	.carlix-row > .col-xl-1  { display: block; grid-column: span 1; }
	.carlix-row > .col-xl-2  { display: block; grid-column: span 2; }
	.carlix-row > .col-xl-3  { display: block; grid-column: span 3; }
	.carlix-row > .col-xl-4  { display: block; grid-column: span 4; }
	.carlix-row > .col-xl-5  { display: block; grid-column: span 5; }
	.carlix-row > .col-xl-6  { display: block; grid-column: span 6; }
	.carlix-row > .col-xl-7  { display: block; grid-column: span 7; }
	.carlix-row > .col-xl-8  { display: block; grid-column: span 8; }
	.carlix-row > .col-xl-9  { display: block; grid-column: span 9; }
	.carlix-row > .col-xl-10 { display: block; grid-column: span 10; }
	.carlix-row > .col-xl-11 { display: block; grid-column: span 11; }
	.carlix-row > .col-xl-12 { display: block; grid-column: span 12; }
}

/* ===== Breakpoint xxl (>= 1400px) — extra large desktop ===== */
@media (min-width: 1400px) {
	.carlix-row > .col-xxl-auto { display: block; grid-column: auto; }
	.carlix-row > .col-xxl-hidden { display: none; }
	.carlix-row > .col-xxl-1  { display: block; grid-column: span 1; }
	.carlix-row > .col-xxl-2  { display: block; grid-column: span 2; }
	.carlix-row > .col-xxl-3  { display: block; grid-column: span 3; }
	.carlix-row > .col-xxl-4  { display: block; grid-column: span 4; }
	.carlix-row > .col-xxl-5  { display: block; grid-column: span 5; }
	.carlix-row > .col-xxl-6  { display: block; grid-column: span 6; }
	.carlix-row > .col-xxl-7  { display: block; grid-column: span 7; }
	.carlix-row > .col-xxl-8  { display: block; grid-column: span 8; }
	.carlix-row > .col-xxl-9  { display: block; grid-column: span 9; }
	.carlix-row > .col-xxl-10 { display: block; grid-column: span 10; }
	.carlix-row > .col-xxl-11 { display: block; grid-column: span 11; }
	.carlix-row > .col-xxl-12 { display: block; grid-column: span 12; }
}