/* ============================================================================
   LAYOUT UTILITIES
   ============================================================================ */


/* Display */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }


/* Flex Direction */
.flex-row         { flex-direction: row; }
.flex-col         { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }


/* Flex Wrap */
.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }


/* Justify Content */
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }


/* Align Items */
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }


/* Align Self */
.self-start   { align-self: flex-start; }
.self-end     { align-self: flex-end; }
.self-center  { align-self: center; }
.self-stretch { align-self: stretch; }


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


/* Gap */
.gap-3xs { gap: var(--space-3xs); }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }


/* Flex Grow / Shrink */
.flex-1    { flex: 1; }
.flex-half { flex: 0 0 50%; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }
.grow      { flex-grow: 1; }
.shrink    { flex-shrink: 1; }
.shrink-0  { flex-shrink: 0; }


/* Overflow */
.overflow-auto    { overflow: auto; }
.overflow-hidden  { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll  { overflow: scroll; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }


/* Position */
.static   { position: static; }
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky   { position: sticky; }


/* Z-Index */
.z-0    { z-index: 0; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-50   { z-index: 50; }
.z-100  { z-index: 100; }
.z-1000 { z-index: 1000; }


/* Width */
.w-full   { width: 100%; }
.w-auto   { width: auto; }
.w-screen { width: 100vw; }


/* Max Width */
.max-w-xs  { max-width: 320px; }
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 640px; }
.max-w-lg  { max-width: 720px; }
.max-w-xl  { max-width: 960px; }
.max-w-2xl { max-width: 1200px; }


/* Height */
.h-full   { height: 100%; }
.h-auto   { height: auto; }
.h-screen { height: 100vh; }


/* Max Height */
.max-h-40 { max-height: 160px; }
.max-h-48 { max-height: 192px; }
.max-h-64 { max-height: 256px; }
.max-h-80 { max-height: 320px; }
.max-h-96 { max-height: 384px; }


/* Container */
.container {
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
.container-fluid {
    width: 100%;
    padding: 0 var(--space-2xl);
    margin-left: auto;
    margin-right: auto;
}

/* Section — padding padrão de seção com container centralizado */
.section {
    padding: var(--space-2xl) 0;
    margin-left: auto;
    margin-right: auto;
}

/* Wireframe page structure */
.wireframe-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wireframe-main { flex: 1; }

.wireframe-footer {
    padding: var(--space-xl);
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.wireframe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-xl);
    border-bottom: 1px solid var(--color-border);
    height: 4rem;
}

.wireframe-nav {
    padding: var(--space-2xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.wireframe-nav li { margin-bottom: var(--space-xs); }
.wireframe-nav a { color: var(--color-accent); }
.wireframe-nav a:hover { text-decoration: underline; }


/* Responsive */

@media (max-width: 768px) {
    .section { padding: var(--space-lg) var(--space-md); }
    .wireframe-header { padding: var(--space-md); }
}