/* ============================================================================
 * Layout utilities — flex / grid helpers and alignment.
 * Atomic, single-responsibility, namespaced with `wb-`.
 * ========================================================================== */

.wb-flex            { display: flex; }
.wb-inline-flex     { display: inline-flex; }
.wb-flex-col        { flex-direction: column; }
.wb-flex-row        { flex-direction: row; }
.wb-flex-wrap       { flex-wrap: wrap; }
.wb-flex-nowrap     { flex-wrap: nowrap; }
.wb-flex-1          { flex: 1 1 0%; }
.wb-flex-auto       { flex: 1 1 auto; }
.wb-flex-none       { flex: none; }

.wb-items-start     { align-items: flex-start; }
.wb-items-center    { align-items: center; }
.wb-items-end       { align-items: flex-end; }
.wb-items-stretch   { align-items: stretch; }
.wb-items-baseline  { align-items: baseline; }

.wb-justify-start   { justify-content: flex-start; }
.wb-justify-center  { justify-content: center; }
.wb-justify-end     { justify-content: flex-end; }
.wb-justify-between { justify-content: space-between; }
.wb-justify-around  { justify-content: space-around; }
.wb-justify-evenly  { justify-content: space-evenly; }

.wb-self-start      { align-self: flex-start; }
.wb-self-center     { align-self: center; }
.wb-self-end        { align-self: flex-end; }

.wb-grow-0          { flex-grow: 0; }
.wb-grow-1          { flex-grow: 1; }
.wb-shrink-0        { flex-shrink: 0; }

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

.wb-inset-0         { inset: 0; }
.wb-top-0           { top: 0; }
.wb-right-0         { right: 0; }
.wb-bottom-0        { bottom: 0; }
.wb-left-0          { left: 0; }

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

/* Sizing */
.wb-w-full          { width: 100%; }
.wb-h-full          { height: 100%; }
.wb-min-h-screen    { min-height: 100vh; }
.wb-max-w-full      { max-width: 100%; }

/* Aspect ratio (modern) */
.wb-aspect-square   { aspect-ratio: 1 / 1; }
.wb-aspect-video    { aspect-ratio: 16 / 9; }
.wb-aspect-portrait { aspect-ratio: 3 / 4; }
.wb-aspect-card     { aspect-ratio: 4 / 3; }