/* =========================================
   3. ЛЕЙАУТ И ГЕОМЕТРИЯ (layout.css)
========================================= */

/* --- Flexbox --- */
.flex      { display: flex; }
.iflex     { display: inline-flex; }
.flex-col  { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1    { flex: 1; }

/* Выравнивание Align Items (Вертикаль в frow) */
.ai-c  { align-items: center; }
.ai-s  { align-items: flex-start; }
.ai-e  { align-items: flex-end; }
.ai-st { align-items: stretch; }

/* Выравнивание Justify Content (Горизонталь в frow) */
.jc-c  { justify-content: center; }
.jc-s  { justify-content: flex-start; }
.jc-e  { justify-content: flex-end; }
.jc-sb { justify-content: space-between; }

/* --- Grid --- */
.grid   { display: grid; }
.igrid  { display: inline-grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* --- Gaps (Просветы) --- */
.gap1 { gap: 1px; }
.gap2  { gap: 2px; }
.gap5  { gap: 5px; }
.gap10 { gap: 10px; }
.gap15 { gap: 15px; }
.gap20 { gap: 20px; }
.gap30 { gap: 30px; }

/* --- Размеры --- */
.w100p { width: 100%; }
.w50p  { width: 50%; }
.w33p  { width: 33.33%; }
.h100p { height: 100%; }

.w5 { width: 5px; } .w10 { width: 10px; } .w20 { width: 20px; } .w40 { width: 40px; } .w50 { width: 50px; }
.w100 { width: 100px; } .w200 { width: 200px; } .w300 { width: 300px; } .w400 { width: 400px; }
.w500 { width: 500px; } .w600 { width: 600px; } .w800 { width: 800px; }

.min-w200 { min-width: 200px; }
.min-w300 { min-width: 300px; }
.min-w400 { min-width: 400px; }
.min-w500 { min-width: 500px; }
.min-w600 { min-width: 600px; }

.mxw200 { max-width: 200px; } .mxw400 { max-width: 400px; }
.mxw600 { max-width: 600px; } .mxw800 { max-width: 800px; }

.h5 { height: 5px; } .h7 { height: 7px; } .h10 { height: 10px; } .h20 { height: 20px; } .h25 { height: 25px; } .h40 { height: 40px; } .h50 { height: 50px; }
.h100 { height: 100px; } .h200 { height: 200px; } .h300 { height: 300px; }

/* --- Отступы (Margins & Paddings) --- */
.m0 { margin: 0; } .m5 { margin: 5px; } .m10 { margin: 10px; } .m20 { margin: 20px; } .m30 { margin: 30px; }
.mt5 { margin-top: 5px; } .mt10 { margin-top: 10px; } .mt20 { margin-top: 20px; }
.mb5 { margin-bottom: 5px; } .mb10 { margin-bottom: 10px; } .mb20 { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; }
.ml5 { margin-left: 5px; } .ml10 { margin-left: 10px; } .ml20 { margin-left: 20px; }
.mr5 { margin-right: 5px; } .mr10 { margin-right: 10px; } .mr20 { margin-right: 20px; }
.mha { margin-left: auto; margin-right: auto; }

.p0 { padding: 0; } .p2 { padding: 2px; } .p5 { padding: 5px; } .p10 { padding: 10px; } .p15 { padding: 15px; } .p20 { padding: 20px; } .p30 { padding: 30px; }
.pt5 { padding-top: 5px; } .pt10 { padding-top: 10px; } .pt20 { padding-top: 20px; }
.pb5 { padding-bottom: 5px; } .pb10 { padding-bottom: 10px; } .pb20 { padding-bottom: 20px; }
.pl5 { padding-left: 5px; } .pl10 { padding-left: 10px; } .pl20 { padding-left: 20px; }
.pr5 { padding-right: 5px; } .pr10 { padding-right: 10px; } .pr20 { padding-right: 20px; }

/* Горизонтальные и Вертикальные отступы */
.px3 { padding-left: 3px; padding-right: 3px; }
.px5 { padding-left: 5px; padding-right: 5px; }
.px10 { padding-left: 10px; padding-right: 10px; }
.px20 { padding-left: 20px; padding-right: 20px; }
.py5 { padding-top: 5px; padding-bottom: 5px; }
.py10 { padding-top: 10px; padding-bottom: 10px; }
.py20 { padding-top: 20px; padding-bottom: 20px; }

.my2 { margin-top: 2px; margin-bottom: 2px; }
.my5 { margin-top: 5px; margin-bottom: 5px; }

/* --- Позиционирование --- */
.pr { position: relative; }
.pa { position: absolute; }
.pf { position: fixed; }
.ps { position: sticky; }
.t0 { top: 0; } .r0 { right: 0; } .b0 { bottom: 0; } .l0 { left: 0; }

.shrink-0 { flex-shrink: 0; }