/* Joy 1.0 "Lia" — utilitários atômicos
   Camada enxuta e moldável: nasce pequena e cresce sob demanda,
   ao contrário do fluidui-utilities.css (gerado exaustivamente).

   Variantes responsivas usam o prefixo `{breakpoint}:` (como no Tailwind),
   escrito à mão sem build step — só o conjunto realmente usado, não a
   combinatória inteira. Escala reaproveita os dois breakpoints que o
   resto do Joy já usa, pra não criar uma terceira convenção:
     md  -> @media (max-width: 900px)  tablet e abaixo
     sm  -> @media (max-width: 600px)  celular e abaixo */

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

/* Grid */
.joy-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.joy-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.joy-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

/* Gap */
.joy-gap-1 { gap: var(--joy-space-1); }
.joy-gap-2 { gap: var(--joy-space-2); }
.joy-gap-3 { gap: var(--joy-space-3); }
.joy-gap-4 { gap: var(--joy-space-4); }
.joy-gap-5 { gap: var(--joy-space-5); }
.joy-gap-6 { gap: var(--joy-space-6); }

/* Margin / Padding (t=top, b=bottom, x=horizontal, y=vertical) */
.joy-mt-2 { margin-top: var(--joy-space-2); }
.joy-mt-3 { margin-top: var(--joy-space-3); }
.joy-mt-4 { margin-top: var(--joy-space-4); }
.joy-mt-5 { margin-top: var(--joy-space-5); }
.joy-mt-6 { margin-top: var(--joy-space-6); }
.joy-mb-2 { margin-bottom: var(--joy-space-2); }
.joy-mb-3 { margin-bottom: var(--joy-space-3); }
.joy-mb-4 { margin-bottom: var(--joy-space-4); }
.joy-mb-5 { margin-bottom: var(--joy-space-5); }
.joy-mb-0 { margin-bottom: 0; }
.joy-py-2 { padding-top: var(--joy-space-2); padding-bottom: var(--joy-space-2); }
.joy-py-4 { padding-top: var(--joy-space-4); padding-bottom: var(--joy-space-4); }
.joy-px-4 { padding-left: var(--joy-space-4); padding-right: var(--joy-space-4); }

/* Texto */
.joy-text-center { text-align: center; }
.joy-text-left { text-align: left; }
.joy-text-accent { color: var(--joy-accent); }
.joy-text-muted { color: var(--joy-text-muted); }
.joy-text-sm { font-size: 0.9rem; }
.joy-text-lg { font-size: 1.2rem; }
.joy-text-xl { font-size: 1.5rem; }
.joy-text-2xl { font-size: 2rem; }
.joy-text-3xl { font-size: 2.75rem; }
.joy-font-semibold { font-weight: 600; }
.joy-font-bold { font-weight: 700; }

/* Largura / display */
.joy-w-full { width: 100%; }
.joy-max-w-sm { max-width: 480px; }
.joy-max-w-md { max-width: 720px; }
.joy-mx-auto { margin-left: auto; margin-right: auto; }
.joy-hidden { display: none; }
.joy-block { display: block; }
.joy-relative { position: relative; }

/* Raio (fora dos componentes que já têm raio próprio) */
.joy-rounded-sm { border-radius: var(--joy-radius-sm); }
.joy-rounded-md { border-radius: var(--joy-radius-md); }
.joy-rounded-lg { border-radius: var(--joy-radius-lg); }
.joy-rounded-pill { border-radius: var(--joy-radius-pill); }

/* Ordem (útil pra reordenar item de grid/flex em telas menores) */
.joy-order-first { order: -1; }
.joy-order-last { order: 999; }

@media (max-width: 900px) {
    .joy-grid-2, .joy-grid-3, .joy-grid-4 { grid-template-columns: 1fr; }

    .md\:joy-hidden { display: none; }
    .md\:joy-block { display: block; }
    .md\:joy-flex { display: flex; }
    .md\:joy-flex-col { display: flex; flex-direction: column; }
    .md\:joy-text-center { text-align: center; }
    .md\:joy-text-left { text-align: left; }
    .md\:joy-w-full { width: 100%; }
    .md\:joy-order-first { order: -1; }
    .md\:joy-order-last { order: 999; }
}

@media (max-width: 600px) {
    .sm\:joy-hidden { display: none; }
    .sm\:joy-block { display: block; }
    .sm\:joy-flex { display: flex; }
    .sm\:joy-flex-col { display: flex; flex-direction: column; }
    .sm\:joy-text-center { text-align: center; }
    .sm\:joy-text-left { text-align: left; }
    .sm\:joy-w-full { width: 100%; }
    .sm\:joy-order-first { order: -1; }
    .sm\:joy-order-last { order: 999; }
}