/* ==========================================================================
   AIM Bento Grid — Pass 2 of the Site Details card refactor
   --------------------------------------------------------------------------
   A single 12-column CSS Grid that lets each card declare its own width and
   height. Replaces the rigid two-mode system (square 360px top-grid + 300px-
   capped collapsible strips) with a flexible cell pattern:

     <div class="aim-bento">
         <div class="aim-bento-cell aim-bento-cell--third aim-bento-cell--h-fixed-lg">
             <SomeCard />
         </div>
         ...
     </div>

   Default cell = full-width (12 cols), auto height. Modifier classes give
   common widths (--quarter, --third, --half, --two-thirds, --three-quarters,
   --full) and heights (--h-sm/md/lg/xl, --h-fixed-md/lg). For arbitrary
   sizes, set the --bento-cols / --bento-min-h / --bento-max-h CSS variables
   directly on the cell (escape hatch).

   Width modifiers degrade gracefully on smaller screens:
       wide → narrow cells stay wide as long as it makes sense
       at <=1200px, --quarter and --third become --half (1/2 width)
       at <=768px, every cell goes full-width
   ========================================================================== */

.aim-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem;
    width: 100%;
}

.aim-bento-cell {
    /* Width: span N of 12 cols. Default = full-width. */
    grid-column: span var(--bento-cols, 12);

    /* Height: opt-in via modifier class or --bento-min-h variable. */
    min-height: var(--bento-min-h, auto);
    max-height: var(--bento-max-h, none);

    /* The cell is a flex container so the card inside fills it. */
    display: flex;
    flex-direction: column;
    min-width: 0;       /* allow content shrink in narrow cols */
    min-height: 0;
    overflow: hidden;   /* fixed-height cells clip; auto-height cells grow */
}

/* The card inside fills the cell. Works for any direct child whether it's
   .sm-card, .selectable-card, or the workflow's nested wrapper. */
.aim-bento-cell > * {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
}

/* When a fixed-height cell contains a card, let the card's body scroll
   internally rather than overflow the cell. */
.aim-bento-cell[style*="--bento-max-h"] > .sm-card,
.aim-bento-cell.aim-bento-cell--h-fixed-md > .sm-card,
.aim-bento-cell.aim-bento-cell--h-fixed-lg > .sm-card,
.aim-bento-cell.aim-bento-cell--h-fixed-xl > .sm-card {
    overflow: hidden;
}

.aim-bento-cell[style*="--bento-max-h"] > .sm-card > .sm-card-body,
.aim-bento-cell.aim-bento-cell--h-fixed-md > .sm-card > .sm-card-body,
.aim-bento-cell.aim-bento-cell--h-fixed-lg > .sm-card > .sm-card-body,
.aim-bento-cell.aim-bento-cell--h-fixed-xl > .sm-card > .sm-card-body {
    overflow: auto;
    min-height: 0;
}

/* ----- Width modifiers ----- */

.aim-bento-cell--quarter         { --bento-cols: 3; }   /* 4 per row */
.aim-bento-cell--third           { --bento-cols: 4; }   /* 3 per row */
.aim-bento-cell--half            { --bento-cols: 6; }   /* 2 per row */
.aim-bento-cell--two-thirds      { --bento-cols: 8; }
.aim-bento-cell--three-quarters  { --bento-cols: 9; }
.aim-bento-cell--full            { --bento-cols: 12; }  /* default */

/* ----- Height modifiers (min-height — content can grow taller) ----- */

.aim-bento-cell--h-sm  { --bento-min-h: 200px; }
.aim-bento-cell--h-md  { --bento-min-h: 280px; }
.aim-bento-cell--h-lg  { --bento-min-h: 360px; }
.aim-bento-cell--h-xl  { --bento-min-h: 480px; }

/* ----- Fixed-height modifiers (min == max — content scrolls internally) ----- */

.aim-bento-cell--h-fixed-sm { --bento-min-h: 200px; --bento-max-h: 200px; }
.aim-bento-cell--h-fixed-md { --bento-min-h: 280px; --bento-max-h: 280px; }
.aim-bento-cell--h-fixed-lg { --bento-min-h: 360px; --bento-max-h: 360px; }
.aim-bento-cell--h-fixed-xl { --bento-min-h: 480px; --bento-max-h: 480px; }

/* ----- Responsive collapse ----- */

@media (max-width: 1200px) {
    .aim-bento-cell--quarter,
    .aim-bento-cell--third {
        --bento-cols: 6;
    }
}

@media (max-width: 768px) {
    .aim-bento-cell--quarter,
    .aim-bento-cell--third,
    .aim-bento-cell--half,
    .aim-bento-cell--two-thirds,
    .aim-bento-cell--three-quarters {
        --bento-cols: 12;
    }
}