/* ==========================================================================
   InBanchina — Spacing & Vertical Rhythm Utilities
   File: assets/css/_spacing.css
   Note: token-based. Override tokens in :root or via GP Customizer if needed.
   ========================================================================== */

/* 1) Design tokens: rhythm + palette hooks */
:root{
    /* --- Typography rhythm (edit these to match your real type scale) --- */
    --ib-font-size-base: 16px;                 /* base reference */
    --ib-line-height: 1.6;                     /* global body line-height */
    --ib-leading: calc(var(--ib-font-size-base) * var(--ib-line-height));

    /* Vertical rhythm unit (baseline-ish) */
    --ib-rhythm: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);

    /* Spacing scale (multipliers of rhythm) */
    --ib-space-0: 0;
    --ib-space-1: calc(var(--ib-rhythm) * 0.5);
    --ib-space-2: calc(var(--ib-rhythm) * 0.75);
    --ib-space-3: calc(var(--ib-rhythm) * 1);
    --ib-space-4: calc(var(--ib-rhythm) * 1.5);
    --ib-space-5: calc(var(--ib-rhythm) * 2);
    --ib-space-6: calc(var(--ib-rhythm) * 3);
    --ib-space-7: calc(var(--ib-rhythm) * 4);

    /* --- Palette hooks (use your real variables if present) --- */
    /* If you already have theme vars like --ib-color-primary, set them elsewhere.
       These are only fallbacks. */
    --ib-color-primary: var(--gp-primary, #0b5fff);
    --ib-color-muted:   var(--gp-muted, #6b7280);
    --ib-color-border:  var(--gp-border, #e5e7eb);

    /* Helpers */
    --ib-flow-gap: var(--ib-space-4);
    --ib-stack-gap: var(--ib-space-4);
}

/* 2) Flow for editorial content (Gutenberg content, posts) */
.ib-flow > * + *{
    margin-top: var(--ib-flow-gap);
}

/* Optional: tighter flow for dense content */
.ib-flow-tight > * + *{ margin-top: var(--ib-space-3); }
.ib-flow-loose > * + *{ margin-top: var(--ib-space-5); }

/* 3) Stack for components (cards, widgets, sections) */
.ib-stack > * + *{
    margin-top: var(--ib-stack-gap);
}
.ib-stack-sm > * + *{ margin-top: var(--ib-space-2); }
.ib-stack-md > * + *{ margin-top: var(--ib-space-4); }
.ib-stack-lg > * + *{ margin-top: var(--ib-space-6); }

/* 4) Margin utilities (bottom-first convention) */
.ib-mt-0{ margin-top: var(--ib-space-0) !important; }
.ib-mt-1{ margin-top: var(--ib-space-1) !important; }
.ib-mt-2{ margin-top: var(--ib-space-2) !important; }
.ib-mt-3{ margin-top: var(--ib-space-3) !important; }
.ib-mt-4{ margin-top: var(--ib-space-4) !important; }
.ib-mt-5{ margin-top: var(--ib-space-5) !important; }
.ib-mt-6{ margin-top: var(--ib-space-6) !important; }
.ib-mt-7{ margin-top: var(--ib-space-7) !important; }

.ib-mb-0{ margin-bottom: var(--ib-space-0) !important; }
.ib-mb-1{ margin-bottom: var(--ib-space-1) !important; }
.ib-mb-2{ margin-bottom: var(--ib-space-2) !important; }
.ib-mb-3{ margin-bottom: var(--ib-space-3) !important; }
.ib-mb-4{ margin-bottom: var(--ib-space-4) !important; }
.ib-mb-5{ margin-bottom: var(--ib-space-5) !important; }
.ib-mb-6{ margin-bottom: var(--ib-space-6) !important; }
.ib-mb-7{ margin-bottom: var(--ib-space-7) !important; }

/* 5) Padding utilities (vertical) */
.ib-py-1{ padding-top: var(--ib-space-1) !important; padding-bottom: var(--ib-space-1) !important; }
.ib-py-2{ padding-top: var(--ib-space-2) !important; padding-bottom: var(--ib-space-2) !important; }
.ib-py-3{ padding-top: var(--ib-space-3) !important; padding-bottom: var(--ib-space-3) !important; }
.ib-py-4{ padding-top: var(--ib-space-4) !important; padding-bottom: var(--ib-space-4) !important; }
.ib-py-5{ padding-top: var(--ib-space-5) !important; padding-bottom: var(--ib-space-5) !important; }
.ib-py-6{ padding-top: var(--ib-space-6) !important; padding-bottom: var(--ib-space-6) !important; }

/* 6) Section spacing helpers (common landing patterns) */
.ib-section{
    padding-top: var(--ib-space-6);
    padding-bottom: var(--ib-space-6);
}
.ib-section--tight{
    padding-top: var(--ib-space-4);
    padding-bottom: var(--ib-space-4);
}
.ib-section--loose{
    padding-top: var(--ib-space-7);
    padding-bottom: var(--ib-space-7);
}

/* 7) Divider helper (vertical rhythm + palette) */
.ib-divider{
    border-top: 1px solid var(--ib-color-border);
    margin-top: var(--ib-space-6);
    margin-bottom: var(--ib-space-6);
}

/* 8) Reset helpers */
.ib-no-margin{ margin: 0 !important; }
.ib-no-padding{ padding: 0 !important; }