/* ============================================================================
   flexgrid.css — custom flexbox layout system for the new PHP app.
   Self-contained (no Bootstrap dependency). Mobile-first, 12-column.

   Core ideas:
     .fg-container            centered max-width wrapper
     .fg-row                  flex row (wraps), gap-driven gutters
     .fg-col / .fg-col-{1..12}  column spans out of 12
     .fg-col-{sm,md,lg}-{n}   responsive spans
     .fg-{d,md}-...           flex helpers (justify/align/direction/gap)
   Breakpoints: sm 576, md 768, lg 992, xl 1200.
   ============================================================================ */

:root {
    --fg-gap: 1rem;
    --fg-container-max: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Containers ──────────────────────────────────────────────────────────── */
.fg-container,
.fg-container-fluid {
    width: 100%;
    padding-inline: var(--fg-gap);
    margin-inline: auto;
}
.fg-container { max-width: var(--fg-container-max); }

/* ── Rows & columns ──────────────────────────────────────────────────────── */
.fg-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fg-gap);
    align-items: stretch;
}
.fg-row.fg-nowrap { flex-wrap: nowrap; }
.fg-row.fg-tight  { --fg-gap: 0.5rem; }
.fg-row.fg-flush  { --fg-gap: 0; }

/* Base column: grow/shrink, share the row equally when no span given. */
.fg-col {
    flex: 1 1 0;
    min-width: 0;   /* allow shrink so long content doesn't blow out the row */
}
.fg-col-auto { flex: 0 0 auto; width: auto; min-width: 0; }

/* Fixed spans out of 12. Width accounts for the flex gap via calc(). */
.fg-col-1  { flex: 0 0 calc(8.3333%  - var(--fg-gap) * 11/12); max-width: calc(8.3333%  - var(--fg-gap) * 11/12); }
.fg-col-2  { flex: 0 0 calc(16.6667% - var(--fg-gap) * 10/12); max-width: calc(16.6667% - var(--fg-gap) * 10/12); }
.fg-col-3  { flex: 0 0 calc(25%      - var(--fg-gap) * 9/12);  max-width: calc(25%      - var(--fg-gap) * 9/12); }
.fg-col-4  { flex: 0 0 calc(33.3333% - var(--fg-gap) * 8/12);  max-width: calc(33.3333% - var(--fg-gap) * 8/12); }
.fg-col-5  { flex: 0 0 calc(41.6667% - var(--fg-gap) * 7/12);  max-width: calc(41.6667% - var(--fg-gap) * 7/12); }
.fg-col-6  { flex: 0 0 calc(50%      - var(--fg-gap) * 6/12);  max-width: calc(50%      - var(--fg-gap) * 6/12); }
.fg-col-7  { flex: 0 0 calc(58.3333% - var(--fg-gap) * 5/12);  max-width: calc(58.3333% - var(--fg-gap) * 5/12); }
.fg-col-8  { flex: 0 0 calc(66.6667% - var(--fg-gap) * 4/12);  max-width: calc(66.6667% - var(--fg-gap) * 4/12); }
.fg-col-9  { flex: 0 0 calc(75%      - var(--fg-gap) * 3/12);  max-width: calc(75%      - var(--fg-gap) * 3/12); }
.fg-col-10 { flex: 0 0 calc(83.3333% - var(--fg-gap) * 2/12);  max-width: calc(83.3333% - var(--fg-gap) * 2/12); }
.fg-col-11 { flex: 0 0 calc(91.6667% - var(--fg-gap) * 1/12);  max-width: calc(91.6667% - var(--fg-gap) * 1/12); }
.fg-col-12 { flex: 0 0 100%; max-width: 100%; }

/* ── Responsive spans ────────────────────────────────────────────────────── */
@media (min-width: 576px) {
    .fg-col-sm-3  { flex: 0 0 calc(25%      - var(--fg-gap) * 9/12);  max-width: calc(25%      - var(--fg-gap) * 9/12); }
    .fg-col-sm-4  { flex: 0 0 calc(33.3333% - var(--fg-gap) * 8/12);  max-width: calc(33.3333% - var(--fg-gap) * 8/12); }
    .fg-col-sm-6  { flex: 0 0 calc(50%      - var(--fg-gap) * 6/12);  max-width: calc(50%      - var(--fg-gap) * 6/12); }
    .fg-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
    .fg-col-md-2  { flex: 0 0 calc(16.6667% - var(--fg-gap) * 10/12); max-width: calc(16.6667% - var(--fg-gap) * 10/12); }
    .fg-col-md-3  { flex: 0 0 calc(25%      - var(--fg-gap) * 9/12);  max-width: calc(25%      - var(--fg-gap) * 9/12); }
    .fg-col-md-4  { flex: 0 0 calc(33.3333% - var(--fg-gap) * 8/12);  max-width: calc(33.3333% - var(--fg-gap) * 8/12); }
    .fg-col-md-6  { flex: 0 0 calc(50%      - var(--fg-gap) * 6/12);  max-width: calc(50%      - var(--fg-gap) * 6/12); }
    .fg-col-md-8  { flex: 0 0 calc(66.6667% - var(--fg-gap) * 4/12);  max-width: calc(66.6667% - var(--fg-gap) * 4/12); }
    .fg-col-md-9  { flex: 0 0 calc(75%      - var(--fg-gap) * 3/12);  max-width: calc(75%      - var(--fg-gap) * 3/12); }
    .fg-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
    .fg-col-lg-3  { flex: 0 0 calc(25%      - var(--fg-gap) * 9/12);  max-width: calc(25%      - var(--fg-gap) * 9/12); }
    .fg-col-lg-4  { flex: 0 0 calc(33.3333% - var(--fg-gap) * 8/12);  max-width: calc(33.3333% - var(--fg-gap) * 8/12); }
    .fg-col-lg-6  { flex: 0 0 calc(50%      - var(--fg-gap) * 6/12);  max-width: calc(50%      - var(--fg-gap) * 6/12); }
    .fg-col-lg-8  { flex: 0 0 calc(66.6667% - var(--fg-gap) * 4/12);  max-width: calc(66.6667% - var(--fg-gap) * 4/12); }
    .fg-col-lg-9  { flex: 0 0 calc(75%      - var(--fg-gap) * 3/12);  max-width: calc(75%      - var(--fg-gap) * 3/12); }
}

/* ── Flex utilities ──────────────────────────────────────────────────────── */
.fg-flex        { display: flex; }
.fg-inline-flex { display: inline-flex; }
.fg-column      { flex-direction: column; }
.fg-wrap        { flex-wrap: wrap; }
.fg-grow        { flex: 1 1 auto; }
.fg-gap         { gap: var(--fg-gap); }
.fg-gap-sm      { gap: 0.5rem; }
.fg-gap-lg      { gap: 1.5rem; }

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

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

.fg-self-center { align-self: center; }
.fg-ml-auto     { margin-left: auto; }
.fg-mr-auto     { margin-right: auto; }

/* ── Spacing helpers (rem scale 0..5) ────────────────────────────────────── */
.fg-m-0{margin:0}.fg-m-1{margin:.25rem}.fg-m-2{margin:.5rem}.fg-m-3{margin:1rem}.fg-m-4{margin:1.5rem}.fg-m-5{margin:3rem}
.fg-mt-0{margin-top:0}.fg-mt-1{margin-top:.25rem}.fg-mt-2{margin-top:.5rem}.fg-mt-3{margin-top:1rem}.fg-mt-4{margin-top:1.5rem}
.fg-mb-0{margin-bottom:0}.fg-mb-1{margin-bottom:.25rem}.fg-mb-2{margin-bottom:.5rem}.fg-mb-3{margin-bottom:1rem}.fg-mb-4{margin-bottom:1.5rem}
.fg-p-0{padding:0}.fg-p-1{padding:.25rem}.fg-p-2{padding:.5rem}.fg-p-3{padding:1rem}.fg-p-4{padding:1.5rem}

/* ── Responsive display ──────────────────────────────────────────────────── */
.fg-hide { display: none !important; }
@media (min-width: 768px) {
    .fg-md-hide  { display: none !important; }
    .fg-md-show  { display: initial !important; }
    .fg-md-flex  { display: flex !important; }
}
@media (max-width: 767.98px) {
    .fg-sm-only-hide { display: none !important; }
}