/* ========================================
 * Tailwind utility classes — קובץ מצומצם
 * רק ה-classes שבשימוש בקבצי האתר.
 * החליף את https://cdn.tailwindcss.com (3-4MB → ~3KB).
 *
 * מקור: tailwindcss.com (MIT)
 * הסקאלה: 1unit = 0.25rem = 4px
 * Breakpoints: sm=640px · md=768px · lg=1024px
 * ======================================== */

/* ---------- Layout ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.grid { display: grid; }
.hidden { display: none; }
.relative { position: relative; }

/* ---------- Grid ---------- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-12 { grid-column: span 12 / span 12; }
.order-1 { order: 1; }
.order-2 { order: 2; }

/* ---------- Flex alignment ---------- */
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* ---------- Gap ---------- */
.gap-1\.5 { gap: 0.375rem; }   /* 6px  */
.gap-3   { gap: 0.75rem; }     /* 12px */
.gap-4   { gap: 1rem; }        /* 16px */
.gap-5   { gap: 1.25rem; }     /* 20px */
.gap-6   { gap: 1.5rem; }      /* 24px */
.gap-7   { gap: 1.75rem; }     /* 28px */
.gap-8   { gap: 2rem; }        /* 32px */
.gap-10  { gap: 2.5rem; }      /* 40px */

/* ---------- Margin ---------- */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-4    { margin-left: 1rem; margin-right: 1rem; }
.my-1    { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-4    { margin-top: 1rem; }
.mt-5    { margin-top: 1.25rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-8    { margin-top: 2rem; }
.mt-10   { margin-top: 2.5rem; }
.mt-16   { margin-top: 4rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-8    { margin-bottom: 2rem; }

/* ---------- Padding ---------- */
.pt-2    { padding-top: 0.5rem; }
.pt-6    { padding-top: 1.5rem; }
.pb-4    { padding-bottom: 1rem; }
.px-6    { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4    { padding-top: 1rem; padding-bottom: 1rem; }
.py-5    { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-20   { padding-top: 5rem; padding-bottom: 5rem; }

/* ---------- Width / Max-width ---------- */
.w-full { width: 100%; }
.max-w-\[1320px\] { max-width: 1320px; }

/* ---------- Height ---------- */
.min-h-screen { min-height: 100vh; }

/* ---------- Typography ---------- */
.text-center { text-align: center; }
.leading-tight { line-height: 1.25; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.no-underline { text-decoration: none; }

/* ========================================
 *  Responsive — md (≥ 768px)
 * ======================================== */
@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========================================
 *  Responsive — sm (≥ 640px)
 * ======================================== */
@media (min-width: 640px) {
  .sm\:block { display: block; }
}

/* ========================================
 *  Responsive — lg (≥ 1024px)
 * ======================================== */
@media (min-width: 1024px) {
  .lg\:px-12   { padding-left: 3rem; padding-right: 3rem; }
  .lg\:py-24   { padding-top: 6rem; padding-bottom: 6rem; }
  .lg\:py-32   { padding-top: 8rem; padding-bottom: 8rem; }
  .lg\:gap-8   { gap: 2rem; }
  .lg\:gap-16  { gap: 4rem; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-5  { grid-column: span 5 / span 5; }
  .lg\:col-span-7  { grid-column: span 7 / span 7; }
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
}