Layout Utilities

.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }

.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

// Top positioning
.top-auto { top: auto; }
.top-0 { top: 0px; }
.top-50 { top: 50%; }
.top-100 { top: 100%; }

// Right positioning
.right-auto { right: auto; }
.right-0 { right: 0px; }
.right-50 { right: 50%; }
.right-100 { right: 100%; }

// Bottom positioning
.bottom-auto { bottom: auto; }
.bottom-0 { bottom: 0px; }
.bottom-50 { bottom: 50%; }
.bottom-100 { bottom: 100%; }

// Left positioning
.left-auto { left: auto; }
.left-0 { left: 0px; }
.left-50 { left: 50%; }
.left-100 { left: 100%; }

// Absolute positioning shortcuts
.inset-0 { top: 0px; right: 0px; bottom: 0px; left: 0px; }

// Percentage-based widths
.w-1 { width: 8.3333%; }      /* 1/12 */
.w-2 { width: 16.6667%; }     /* 2/12 */
.w-3 { width: 25%; }          /* 3/12 */
.w-4 { width: 33.3333%; }     /* 4/12 */
.w-5 { width: 41.6667%; }     /* 5/12 */
.w-6 { width: 50%; }          /* 6/12 */
.w-7 { width: 58.3333%; }     /* 7/12 */
.w-8 { width: 66.6667%; }     /* 8/12 */
.w-9 { width: 75%; }          /* 9/12 */
.w-10 { width: 83.3333%; }    /* 10/12 */
.w-11 { width: 91.6667%; }    /* 11/12 */
.w-12 { width: 100%; }        /* 12/12 */

// Fixed and viewport widths
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }

// Content-based widths
.w-min { width: min-content; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }

// Rem-based widths
.w-1rem { width: 1rem; }
.w-2rem { width: 2rem; }
.w-3rem { width: 3rem; }
.w-4rem { width: 4rem; }
.w-5rem { width: 5rem; }
.w-6rem { width: 6rem; }
.w-7rem { width: 7rem; }
.w-8rem { width: 8rem; }
.w-9rem { width: 9rem; }
.w-10rem { width: 10rem; }
.w-15rem { width: 15rem; }
.w-20rem { width: 20rem; }
.w-25rem { width: 25rem; }
.w-30rem { width: 30rem; }
/* Continues up to w-30rem */

// Percentage-based heights
.h-1 { height: 8.3333%; }     /* 1/12 */
.h-2 { height: 16.6667%; }    /* 2/12 */
.h-3 { height: 25%; }         /* 3/12 */
.h-4 { height: 33.3333%; }    /* 4/12 */
.h-5 { height: 41.6667%; }    /* 5/12 */
.h-6 { height: 50%; }         /* 6/12 */
.h-7 { height: 58.3333%; }    /* 7/12 */
.h-8 { height: 66.6667%; }    /* 8/12 */
.h-9 { height: 75%; }         /* 9/12 */
.h-10 { height: 83.3333%; }   /* 10/12 */
.h-11 { height: 91.6667%; }   /* 11/12 */
.h-12 { height: 100%; }       /* 12/12 */

// Fixed and viewport heights
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }

// Content-based heights
.h-min { height: min-content; }
.h-max { height: max-content; }
.h-fit { height: fit-content; }

// Rem-based heights
.h-1rem { height: 1rem; }
.h-2rem { height: 2rem; }
.h-3rem { height: 3rem; }
.h-4rem { height: 4rem; }
.h-5rem { height: 5rem; }
.h-6rem { height: 6rem; }
.h-7rem { height: 7rem; }
.h-8rem { height: 8rem; }
.h-9rem { height: 9rem; }
.h-10rem { height: 10rem; }
.h-15rem { height: 15rem; }
.h-20rem { height: 20rem; }
.h-25rem { height: 25rem; }
.h-30rem { height: 30rem; }
/* Continues up to h-30rem */

// Minimum width
.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.min-w-min { min-width: min-content; }
.min-w-max { min-width: max-content; }
.min-w-fit { min-width: fit-content; }

// Maximum width
.max-w-full { max-width: 100%; }
.max-w-screen { max-width: 100vw; }
.max-w-min { max-width: min-content; }
.max-w-max { max-width: max-content; }
.max-w-fit { max-width: fit-content; }
.max-w-none { max-width: none; }

// Minimum height
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-min { min-height: min-content; }
.min-h-max { min-height: max-content; }
.min-h-fit { min-height: fit-content; }

// Maximum height
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }
.max-h-min { max-height: min-content; }
.max-h-max { max-height: max-content; }
.max-h-fit { max-height: fit-content; }
.max-h-none { max-height: none; }

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

// Directional overflow
.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }

.z-auto { z-index: auto; }
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }

// Small screens (≥576px)
.sm\\:block { /* display: block at sm+ */ }
.sm\\:w-full { /* width: 100% at sm+ */ }
.sm\\:absolute { /* position: absolute at sm+ */ }
// ... all layout classes with sm: prefix

// Medium screens (≥768px)
.md\\:flex { /* display: flex at md+ */ }
.md\\:h-screen { /* height: 100vh at md+ */ }
.md\\:relative { /* position: relative at md+ */ }
// ... all layout classes with md: prefix

// Large screens (≥992px)
.lg\\:inline-block { /* display: inline-block at lg+ */ }
.lg\\:w-6 { /* width: 50% at lg+ */ }
.lg\\:sticky { /* position: sticky at lg+ */ }
// ... all layout classes with lg: prefix

// Extra large screens (≥1200px)
.xl\\:hidden { /* display: none at xl+ */ }
.xl\\:max-w-screen { /* max-width: 100vw at xl+ */ }
.xl\\:fixed { /* position: fixed at xl+ */ }
// ... all layout classes with xl: prefix

<!-- Show on mobile, hide on desktop -->
<div class="block md:hidden">
  <button class="w-full p-3 bg-primary text-white border-none border-round">
    Mobile Menu
  </button>
</div>

<!-- Hide on mobile, show on desktop -->
<nav class="hidden md:flex gap-4">
  <a href="#" class="text-color no-underline">Home</a>
  <a href="#" class="text-color no-underline">About</a>
  <a href="#" class="text-color no-underline">Contact</a>
</nav>

<div class="min-h-screen flex flex-column">
  <header class="p-4 bg-primary text-white">
    <h1 class="m-0">Header</h1>
  </header>
  
  <main class="flex-1 p-4">
    <div class="h-full flex align-items-center justify-content-center">
      <p class="text-center">Content that takes remaining height</p>
    </div>
  </main>
  
  <footer class="p-4 surface-section text-center">
    <p class="m-0">Footer</p>
  </footer>
</div>

<div class="fixed inset-0 bg-black-alpha-50 flex align-items-center justify-content-center z-5">
  <div class="relative w-full max-w-30rem mx-3 bg-white border-round shadow-3">
    <button class="absolute top-0 right-0 w-3rem h-3rem flex align-items-center justify-content-center border-none bg-transparent cursor-pointer">
      ×
    </button>
    
    <div class="p-6">
      <h2 class="m-0 mb-4 text-xl font-bold">Modal Title</h2>
      <p class="m-0 mb-6 text-color-secondary">Modal content goes here.</p>
      
      <div class="flex gap-2 justify-content-end">
        <button class="px-4 py-2 border-1 border-surface-300 bg-transparent border-round">
          Cancel
        </button>
        <button class="px-4 py-2 bg-primary text-white border-none border-round">
          Confirm
        </button>
      </div>
    </div>
  </div>
</div>

<div class="flex min-h-screen">
  <!-- Sidebar -->
  <aside class="w-15rem md:w-20rem bg-surface-section border-right-1 border-surface-200">
    <div class="p-4">
      <h2 class="m-0 mb-4 text-lg font-bold">Navigation</h2>
      <nav class="flex flex-column gap-2">
        <a href="#" class="p-2 text-color no-underline border-round hover:surface-hover">
          Dashboard
        </a>
        <a href="#" class="p-2 text-color no-underline border-round hover:surface-hover">
          Settings
        </a>
      </nav>
    </div>
  </aside>
  
  <!-- Main content -->
  <main class="flex-1 overflow-auto">
    <div class="p-4">
      <h1 class="m-0 mb-4">Page Title</h1>
      <div class="surface-card p-4 border-round shadow-1">
        <p class="m-0">Main content area with scrollable overflow</p>
      </div>
    </div>
  </main>
</div>

<div class="grid">
  <div class="col-12 md:col-6 lg:col-4">
    <div class="surface-card border-round shadow-2 overflow-hidden">
      <!-- Image container with aspect ratio -->
      <div class="relative w-full h-12rem overflow-hidden">
        <img src="image.jpg" alt="Card image" class="absolute inset-0 w-full h-full object-cover">
      </div>
      
      <div class="p-4">
        <h3 class="m-0 mb-2 text-lg font-semibold">Card Title</h3>
        <p class="m-0 text-color-secondary">Card description</p>
      </div>
    </div>
  </div>
</div>

<div class="relative">
  <header class="sticky top-0 z-4 p-4 bg-white border-bottom-1 border-surface-200 shadow-1">
    <nav class="flex align-items-center justify-content-between">
      <div class="text-xl font-bold text-primary">Brand</div>
      <div class="flex gap-4">
        <a href="#" class="text-color no-underline">Home</a>
        <a href="#" class="text-color no-underline">About</a>
        <a href="#" class="text-color no-underline">Contact</a>
      </div>
    </nav>
  </header>
  
  <main class="p-4">
    <div style="height: 200vh;" class="bg-surface-100 border-round p-4">
      <p>Scroll to see sticky navigation in action</p>
    </div>
  </main>
</div>

<div class="w-full max-w-screen mx-auto px-4 md:px-6 lg:px-8">
  <div class="py-8 md:py-12 lg:py-16">
    <h1 class="m-0 mb-6 text-center text-2xl md:text-4xl font-bold">
      Responsive Container
    </h1>
    
    <div class="grid">
      <div class="col-12 lg:col-8 lg:col-offset-2">
        <p class="m-0 text-center text-lg text-color-secondary line-height-3">
          Content centered with responsive padding and maximum width constraints.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="relative min-h-screen">
  <!-- Page content -->
  <div class="p-4">
    <h1>Page Content</h1>
    <p>Main content goes here...</p>
  </div>
  
  <!-- Fixed action button -->
  <button class="fixed bottom-0 right-0 m-4 w-4rem h-4rem bg-primary text-white border-none border-circle shadow-3 z-3 flex align-items-center justify-content-center cursor-pointer">
    <i class="pi pi-plus text-xl"></i>
  </button>
</div>

<div class="overflow-x-auto">
  <div class="flex gap-3" style="width: max-content;">
    <div class="w-15rem h-10rem flex-shrink-0 overflow-hidden border-round">
      <img src="image1.jpg" alt="Gallery image" class="w-full h-full object-cover">
    </div>
    <div class="w-15rem h-10rem flex-shrink-0 overflow-hidden border-round">
      <img src="image2.jpg" alt="Gallery image" class="w-full h-full object-cover">
    </div>
    <div class="w-15rem h-10rem flex-shrink-0 overflow-hidden border-round">
      <img src="image3.jpg" alt="Gallery image" class="w-full h-full object-cover">
    </div>
    <!-- More images... -->
  </div>
</div>

<div class="relative p-6 bg-blue-500 border-round overflow-hidden">
  <!-- Background decoration -->
  <div class="absolute top-0 right-0 w-20rem h-20rem bg-blue-400 border-circle opacity-20 -mt-10 -mr-10"></div>
  
  <!-- Content layer -->
  <div class="relative z-1 text-white">
    <h2 class="m-0 mb-3 text-2xl font-bold">Layered Design</h2>
    <p class="m-0 text-blue-100">Content positioned above background elements</p>
  </div>
</div>