/* ================================================
   GRDBNKSYSTEM — Bank Grid & Layout Utility System
   Prefix: bnk-  (no conflicts with Bootstrap/theme)
   No container styles — layout utilities only
   ================================================ */

/* ------------------------------------------------
   CSS Tokens
   ------------------------------------------------ */
:root {
    --bnk-gap-xs:  4px;
    --bnk-gap-sm:  8px;
    --bnk-gap-md:  16px;
    --bnk-gap-lg:  24px;
    --bnk-gap-xl:  32px;
    --bnk-gap-2xl: 48px;

    --bnk-sp-1:  4px;
    --bnk-sp-2:  8px;
    --bnk-sp-3:  12px;
    --bnk-sp-4:  16px;
    --bnk-sp-5:  20px;
    --bnk-sp-6:  24px;
    --bnk-sp-8:  32px;
    --bnk-sp-10: 40px;
    --bnk-sp-12: 48px;
    --bnk-sp-16: 64px;
}

/* ------------------------------------------------
   Row (Flexbox)
   ------------------------------------------------ */
.bnk-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bnk-gap-md);
    box-sizing: border-box;
}
.bnk-row > * { box-sizing: border-box; }

.bnk-row-gap-0   { gap: 0; }
.bnk-row-gap-xs  { gap: var(--bnk-gap-xs); }
.bnk-row-gap-sm  { gap: var(--bnk-gap-sm); }
.bnk-row-gap-md  { gap: var(--bnk-gap-md); }
.bnk-row-gap-lg  { gap: var(--bnk-gap-lg); }
.bnk-row-gap-xl  { gap: var(--bnk-gap-xl); }
.bnk-row-gap-2xl { gap: var(--bnk-gap-2xl); }

/* ------------------------------------------------
   Columns — base (all screens)
   ------------------------------------------------ */
.bnk-col      { flex: 1 1 0%; min-width: 0; }
.bnk-col-auto { flex: 0 0 auto; width: auto; }

.bnk-col-1  { flex: 0 0 calc(8.333%  - var(--bnk-gap-md)); }
.bnk-col-2  { flex: 0 0 calc(16.667% - var(--bnk-gap-md)); }
.bnk-col-3  { flex: 0 0 calc(25%     - var(--bnk-gap-md)); }
.bnk-col-4  { flex: 0 0 calc(33.333% - var(--bnk-gap-md)); }
.bnk-col-5  { flex: 0 0 calc(41.667% - var(--bnk-gap-md)); }
.bnk-col-6  { flex: 0 0 calc(50%     - var(--bnk-gap-md)); }
.bnk-col-7  { flex: 0 0 calc(58.333% - var(--bnk-gap-md)); }
.bnk-col-8  { flex: 0 0 calc(66.667% - var(--bnk-gap-md)); }
.bnk-col-9  { flex: 0 0 calc(75%     - var(--bnk-gap-md)); }
.bnk-col-10 { flex: 0 0 calc(83.333% - var(--bnk-gap-md)); }
.bnk-col-11 { flex: 0 0 calc(91.667% - var(--bnk-gap-md)); }
.bnk-col-12 { flex: 0 0 100%; }

/* Tablet ≥768px */
@media (min-width: 768px) {
    .bnk-col-md-1  { flex: 0 0 calc(8.333%  - var(--bnk-gap-md)); }
    .bnk-col-md-2  { flex: 0 0 calc(16.667% - var(--bnk-gap-md)); }
    .bnk-col-md-3  { flex: 0 0 calc(25%     - var(--bnk-gap-md)); }
    .bnk-col-md-4  { flex: 0 0 calc(33.333% - var(--bnk-gap-md)); }
    .bnk-col-md-5  { flex: 0 0 calc(41.667% - var(--bnk-gap-md)); }
    .bnk-col-md-6  { flex: 0 0 calc(50%     - var(--bnk-gap-md)); }
    .bnk-col-md-7  { flex: 0 0 calc(58.333% - var(--bnk-gap-md)); }
    .bnk-col-md-8  { flex: 0 0 calc(66.667% - var(--bnk-gap-md)); }
    .bnk-col-md-9  { flex: 0 0 calc(75%     - var(--bnk-gap-md)); }
    .bnk-col-md-10 { flex: 0 0 calc(83.333% - var(--bnk-gap-md)); }
    .bnk-col-md-11 { flex: 0 0 calc(91.667% - var(--bnk-gap-md)); }
    .bnk-col-md-12 { flex: 0 0 100%; }
}

/* Desktop ≥1024px */
@media (min-width: 1024px) {
    .bnk-col-lg-1  { flex: 0 0 calc(8.333%  - var(--bnk-gap-md)); }
    .bnk-col-lg-2  { flex: 0 0 calc(16.667% - var(--bnk-gap-md)); }
    .bnk-col-lg-3  { flex: 0 0 calc(25%     - var(--bnk-gap-md)); }
    .bnk-col-lg-4  { flex: 0 0 calc(33.333% - var(--bnk-gap-md)); }
    .bnk-col-lg-5  { flex: 0 0 calc(41.667% - var(--bnk-gap-md)); }
    .bnk-col-lg-6  { flex: 0 0 calc(50%     - var(--bnk-gap-md)); }
    .bnk-col-lg-7  { flex: 0 0 calc(58.333% - var(--bnk-gap-md)); }
    .bnk-col-lg-8  { flex: 0 0 calc(66.667% - var(--bnk-gap-md)); }
    .bnk-col-lg-9  { flex: 0 0 calc(75%     - var(--bnk-gap-md)); }
    .bnk-col-lg-10 { flex: 0 0 calc(83.333% - var(--bnk-gap-md)); }
    .bnk-col-lg-11 { flex: 0 0 calc(91.667% - var(--bnk-gap-md)); }
    .bnk-col-lg-12 { flex: 0 0 100%; }
}

/* Mobile — stack everything */
@media (max-width: 767px) {
    .bnk-col-sm-12 { flex: 0 0 auto; width: 100% !important; }
}

/* ------------------------------------------------
   CSS Grid Layouts
   ------------------------------------------------ */
.bnk-grid {
    display: grid;
    gap: var(--bnk-gap-lg);
    box-sizing: border-box;
}

/* Equal columns — display:grid included so class works standalone */
.bnk-grid-1 { display: grid; grid-template-columns: repeat(1, 1fr); }
.bnk-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.bnk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.bnk-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.bnk-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); }
.bnk-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); }

/* Asymmetric grids */
.bnk-grid-1-2   { display: grid; grid-template-columns: 1fr 2fr; }
.bnk-grid-2-1   { display: grid; grid-template-columns: 2fr 1fr; }
.bnk-grid-1-3   { display: grid; grid-template-columns: 1fr 3fr; }
.bnk-grid-3-1   { display: grid; grid-template-columns: 3fr 1fr; }
.bnk-grid-1-1-2 { display: grid; grid-template-columns: 1fr 1fr 2fr; }
.bnk-grid-2-1-1 { display: grid; grid-template-columns: 2fr 1fr 1fr; }

/* Auto-fit responsive cards */
.bnk-grid-auto-xs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.bnk-grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.bnk-grid-auto-md { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bnk-grid-auto-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.bnk-grid-auto-xl { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* Responsive grid overrides — tablet */
@media (min-width: 768px) {
    .bnk-grid-md-1 { display: grid; grid-template-columns: repeat(1, 1fr); }
    .bnk-grid-md-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
    .bnk-grid-md-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
    .bnk-grid-md-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
}

/* Responsive grid overrides — desktop */
@media (min-width: 1024px) {
    .bnk-grid-lg-1 { display: grid; grid-template-columns: repeat(1, 1fr); }
    .bnk-grid-lg-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
    .bnk-grid-lg-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
    .bnk-grid-lg-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
    .bnk-grid-lg-5 { display: grid; grid-template-columns: repeat(5, 1fr); }
    .bnk-grid-lg-6 { display: grid; grid-template-columns: repeat(6, 1fr); }
}

/* Force single column on mobile */
@media (max-width: 767px) {
    .bnk-grid-stack,
    .bnk-grid-1, .bnk-grid-2, .bnk-grid-3,
    .bnk-grid-4, .bnk-grid-5, .bnk-grid-6,
    .bnk-grid-1-2, .bnk-grid-2-1, .bnk-grid-1-3, .bnk-grid-3-1,
    .bnk-grid-1-1-2, .bnk-grid-2-1-1 {
        grid-template-columns: 1fr !important;
    }
}

/* ------------------------------------------------
   Gap Utilities
   ------------------------------------------------ */
.bnk-gap-0   { gap: 0; }
.bnk-gap-xs  { gap: var(--bnk-gap-xs); }
.bnk-gap-sm  { gap: var(--bnk-gap-sm); }
.bnk-gap-md  { gap: var(--bnk-gap-md); }
.bnk-gap-lg  { gap: var(--bnk-gap-lg); }
.bnk-gap-xl  { gap: var(--bnk-gap-xl); }
.bnk-gap-2xl { gap: var(--bnk-gap-2xl); }

.bnk-rgap-xs  { row-gap: var(--bnk-gap-xs); }
.bnk-rgap-sm  { row-gap: var(--bnk-gap-sm); }
.bnk-rgap-md  { row-gap: var(--bnk-gap-md); }
.bnk-rgap-lg  { row-gap: var(--bnk-gap-lg); }
.bnk-rgap-xl  { row-gap: var(--bnk-gap-xl); }

.bnk-cgap-xs  { column-gap: var(--bnk-gap-xs); }
.bnk-cgap-sm  { column-gap: var(--bnk-gap-sm); }
.bnk-cgap-md  { column-gap: var(--bnk-gap-md); }
.bnk-cgap-lg  { column-gap: var(--bnk-gap-lg); }
.bnk-cgap-xl  { column-gap: var(--bnk-gap-xl); }

/* ------------------------------------------------
   Flex Utilities
   ------------------------------------------------ */
.bnk-flex        { display: flex; }
.bnk-iflex       { display: inline-flex; }
.bnk-flex-col    { flex-direction: column; }
.bnk-flex-row    { flex-direction: row; }
.bnk-flex-wrap   { flex-wrap: wrap; }
.bnk-flex-nowrap { flex-wrap: nowrap; }

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

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

.bnk-as-start   { align-self: flex-start; }
.bnk-as-end     { align-self: flex-end; }
.bnk-as-center  { align-self: center; }
.bnk-as-stretch { align-self: stretch; }

.bnk-f1         { flex: 1 1 0%; }
.bnk-f-auto     { flex: 1 1 auto; }
.bnk-f-none     { flex: none; }
.bnk-f-grow     { flex-grow: 1; }
.bnk-f-shrink-0 { flex-shrink: 0; }

/* ------------------------------------------------
   Alignment Utilities
   ------------------------------------------------ */
.bnk-text-left   { text-align: left; }
.bnk-text-center { text-align: center; }
.bnk-text-right  { text-align: right; }

.bnk-place-center { place-items: center; }
.bnk-place-start  { place-items: start; }
.bnk-place-end    { place-items: end; }

/* ------------------------------------------------
   Spacing — Padding
   ------------------------------------------------ */
.bnk-p-0  { padding: 0; }
.bnk-p-1  { padding: var(--bnk-sp-1); }
.bnk-p-2  { padding: var(--bnk-sp-2); }
.bnk-p-3  { padding: var(--bnk-sp-3); }
.bnk-p-4  { padding: var(--bnk-sp-4); }
.bnk-p-5  { padding: var(--bnk-sp-5); }
.bnk-p-6  { padding: var(--bnk-sp-6); }
.bnk-p-8  { padding: var(--bnk-sp-8); }
.bnk-p-10 { padding: var(--bnk-sp-10); }
.bnk-p-12 { padding: var(--bnk-sp-12); }
.bnk-p-16 { padding: var(--bnk-sp-16); }

.bnk-px-0  { padding-left: 0;                    padding-right: 0; }
.bnk-px-2  { padding-left: var(--bnk-sp-2);      padding-right: var(--bnk-sp-2); }
.bnk-px-4  { padding-left: var(--bnk-sp-4);      padding-right: var(--bnk-sp-4); }
.bnk-px-6  { padding-left: var(--bnk-sp-6);      padding-right: var(--bnk-sp-6); }
.bnk-px-8  { padding-left: var(--bnk-sp-8);      padding-right: var(--bnk-sp-8); }
.bnk-px-12 { padding-left: var(--bnk-sp-12);     padding-right: var(--bnk-sp-12); }

.bnk-py-0  { padding-top: 0;                     padding-bottom: 0; }
.bnk-py-2  { padding-top: var(--bnk-sp-2);       padding-bottom: var(--bnk-sp-2); }
.bnk-py-4  { padding-top: var(--bnk-sp-4);       padding-bottom: var(--bnk-sp-4); }
.bnk-py-6  { padding-top: var(--bnk-sp-6);       padding-bottom: var(--bnk-sp-6); }
.bnk-py-8  { padding-top: var(--bnk-sp-8);       padding-bottom: var(--bnk-sp-8); }
.bnk-py-10 { padding-top: var(--bnk-sp-10);      padding-bottom: var(--bnk-sp-10); }
.bnk-py-12 { padding-top: var(--bnk-sp-12);      padding-bottom: var(--bnk-sp-12); }
.bnk-py-16 { padding-top: var(--bnk-sp-16);      padding-bottom: var(--bnk-sp-16); }

.bnk-pt-0  { padding-top: 0; }
.bnk-pt-2  { padding-top: var(--bnk-sp-2); }
.bnk-pt-4  { padding-top: var(--bnk-sp-4); }
.bnk-pt-6  { padding-top: var(--bnk-sp-6); }
.bnk-pt-8  { padding-top: var(--bnk-sp-8); }
.bnk-pt-12 { padding-top: var(--bnk-sp-12); }

.bnk-pb-0  { padding-bottom: 0; }
.bnk-pb-2  { padding-bottom: var(--bnk-sp-2); }
.bnk-pb-4  { padding-bottom: var(--bnk-sp-4); }
.bnk-pb-6  { padding-bottom: var(--bnk-sp-6); }
.bnk-pb-8  { padding-bottom: var(--bnk-sp-8); }
.bnk-pb-12 { padding-bottom: var(--bnk-sp-12); }

.bnk-pl-0  { padding-left: 0; }
.bnk-pl-4  { padding-left: var(--bnk-sp-4); }
.bnk-pl-6  { padding-left: var(--bnk-sp-6); }
.bnk-pl-8  { padding-left: var(--bnk-sp-8); }

.bnk-pr-0  { padding-right: 0; }
.bnk-pr-4  { padding-right: var(--bnk-sp-4); }
.bnk-pr-6  { padding-right: var(--bnk-sp-6); }
.bnk-pr-8  { padding-right: var(--bnk-sp-8); }

/* ------------------------------------------------
   Spacing — Margin
   ------------------------------------------------ */
.bnk-m-0    { margin: 0; }
.bnk-m-auto { margin: auto; }
.bnk-mx-auto { margin-left: auto; margin-right: auto; }
.bnk-my-auto { margin-top: auto;  margin-bottom: auto; }

.bnk-mt-0  { margin-top: 0; }
.bnk-mt-2  { margin-top: var(--bnk-sp-2); }
.bnk-mt-4  { margin-top: var(--bnk-sp-4); }
.bnk-mt-6  { margin-top: var(--bnk-sp-6); }
.bnk-mt-8  { margin-top: var(--bnk-sp-8); }
.bnk-mt-12 { margin-top: var(--bnk-sp-12); }
.bnk-mt-16 { margin-top: var(--bnk-sp-16); }

.bnk-mb-0  { margin-bottom: 0; }
.bnk-mb-2  { margin-bottom: var(--bnk-sp-2); }
.bnk-mb-4  { margin-bottom: var(--bnk-sp-4); }
.bnk-mb-6  { margin-bottom: var(--bnk-sp-6); }
.bnk-mb-8  { margin-bottom: var(--bnk-sp-8); }
.bnk-mb-12 { margin-bottom: var(--bnk-sp-12); }
.bnk-mb-16 { margin-bottom: var(--bnk-sp-16); }

.bnk-ml-auto { margin-left: auto; }
.bnk-mr-auto { margin-right: auto; }

/* ------------------------------------------------
   Display / Visibility
   ------------------------------------------------ */
.bnk-block        { display: block; }
.bnk-inline-block { display: inline-block; }
.bnk-hidden       { display: none; }
.bnk-w-full       { width: 100%; }
.bnk-h-full       { height: 100%; }

@media (max-width: 767px)                        { .bnk-hide-sm { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023px){ .bnk-hide-md { display: none !important; } }
@media (min-width: 1024px)                       { .bnk-hide-lg { display: none !important; } }
@media (max-width: 767px)                        { .bnk-show-sm { display: block !important; } }
@media (min-width: 768px)                        { .bnk-show-md { display: block !important; } }