/*
 * Layout Container
 * Equivalent to Tailwind's container class
 * Provides a responsive wrapper with auto margins
 */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}

/*
 * Display Utilities
 * Direct equivalents to Tailwind's display utilities:
 * .block = block
 * .flex = flex
 */
.block { display: block; }
.flex { display: flex; }

/*
 * Height Utilities
 * Matches Tailwind's height utilities:
 * .h-full = h-full
 * .min-h-screen = min-h-screen
 */
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/*
 * Flexbox Utilities
 * Direct equivalents to Tailwind's flexbox utilities:
 * .flex-row = flex-row
 * .flex-col = flex-col
 * .flex-wrap = flex-wrap
 * .items-center = items-center
 * .justify-center = justify-center
 */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

/*
 * Spacing Utilities
 * Matches Tailwind's spacing scale:
 * .gap-2 = gap-2 (0.5rem)
 * .gap-3 = gap-3 (0.75rem)
 * .gap-4 = gap-4 (1rem)
 * .gap-6 = gap-6 (1.5rem)
 * .mx-auto = mx-auto
 * .mb-2 = mb-2
 * .p-4 = p-4
 */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-2 { margin-bottom: 0.5rem; }
.p-4 { padding: 1rem; }

/*
 * Main Content Area
 * Replaces Tailwind's min-h-[calc(100%-64px)]
 * Ensures main content area fills available space minus header
 */
main {
  min-height: calc(100% - 64px);
}

/*
 * Responsive Breakpoints
 * Matches Tailwind's sm: breakpoint (640px)
 * .sm\:text-8xl = sm:text-8xl
 * .sm\:text-[2rem] = sm:text-[2rem]
 * .sm\:text-[1.5rem] = sm:text-[1.5rem]
 * .sm\:gap-6 = sm:gap-6
 */
@media (min-width: 640px) {
  .sm\:text-8xl { font-size: 6rem; }
  .sm\:text-\[2rem\] { font-size: 2rem; }
  .sm\:text-\[1\.5rem\] { font-size: 1.5rem; }
  .sm\:gap-6 { gap: 1.5rem; }
}