/*
 * utilities.css
 * Classes auxiliares reutilizáveis: grid, flex, gap, height e visibilidade.
 */

/* ---------- Grid ----------------------------------------------------------- */
.jrx-grid {
	display: grid;
	gap: var(--jrx-grid-gap);
}
.jrx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jrx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jrx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jrx-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jrx-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 991px) {
	.jrx-grid { grid-template-columns: repeat(var(--jrx-grid-cols-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.jrx-grid { grid-template-columns: repeat(var(--jrx-grid-cols-mobile, 1), minmax(0, 1fr)); }
}

/* ---------- Flex ----------------------------------------------------------- */
.jrx-flex { display: flex; }
.jrx-flex-col { display: flex; flex-direction: column; }
.jrx-flex-wrap { flex-wrap: wrap; }
.jrx-items-center { align-items: center; }
.jrx-justify-center { justify-content: center; }
.jrx-justify-between { justify-content: space-between; }

/* ---------- Gap ------------------------------------------------------------ */
.jrx-gap-sm { gap: 0.5rem; }
.jrx-gap-md { gap: var(--jrx-grid-gap, 1.5rem); }
.jrx-gap-lg { gap: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- Height --------------------------------------------------------- */
.jrx-h-full { height: 100%; }
.jrx-min-h-full { min-height: 100%; }
.jrx-h-100vh { min-height: 100vh; }

/* ---------- Visibilidade responsiva ---------------------------------------- */
@media (max-width: 767px)  { .jrx-section.is-hidden-mobile  { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .jrx-section.is-hidden-tablet  { display: none !important; } }
@media (min-width: 992px) { .jrx-section.is-hidden-desktop { display: none !important; } }