/* =====================================================================
   BENTO: count-aware card grids (17 Aug 2026)
   ---------------------------------------------------------------------
   The old auto-fit grids picked the column count from the width alone, so
   a four-card row became 3 + 1 orphan at some widths and a five-card row
   3 + 2 with a hole. These rules read the CARD COUNT instead
   (:has(> :nth-child(n):last-child) = exactly n cards) and choose columns
   that fill every row at every width:
     phone  <640     : one column
     tablet 640-899  : two columns; an odd count makes the last card full width
     desk   >=900    : 3 -> 3 across, 6 -> 3x2, 9 -> 3x3,
                       4 -> 2x2 (4 across from 1100), 8 -> 2x4 (4x2 from 1100)
     bento  >=1024   : 5 -> 3 + 2 (the last two 1.5 wide),
                       11 -> 3 + 3 + 3 + 2 (same last row)
   .bento-tight (compact step / list cards): 5 -> 5 across from 1024.
   Browsers without :has() keep the page's own base rule (harmless).
   Opt-in: add class="bento" to the grid container; leave the page's own
   class in place for gap, margins and the fallback columns.
   ===================================================================== */
.bento.bento{display:grid;grid-template-columns:1fr}   /* doubled: beats the page's single-class base rule whatever the include order */
.bento>*{min-width:0}
@media(min-width:640px){
  .bento:has(> :nth-child(2):last-child),
  .bento:has(> :nth-child(3):last-child),
  .bento:has(> :nth-child(4):last-child),
  .bento:has(> :nth-child(5):last-child),
  .bento:has(> :nth-child(6):last-child),
  .bento:has(> :nth-child(7):last-child),
  .bento:has(> :nth-child(8):last-child),
  .bento:has(> :nth-child(9):last-child),
  .bento:has(> :nth-child(10):last-child),
  .bento:has(> :nth-child(11):last-child),
  .bento:has(> :nth-child(12):last-child){grid-template-columns:repeat(2,1fr)}
  /* odd counts at two columns: the last card takes the full row, no hole */
  .bento:has(> :nth-child(3):last-child)>:last-child,
  .bento:has(> :nth-child(5):last-child)>:last-child,
  .bento:has(> :nth-child(7):last-child)>:last-child,
  .bento:has(> :nth-child(9):last-child)>:last-child,
  .bento:has(> :nth-child(11):last-child)>:last-child{grid-column:1/-1}
}
@media(min-width:900px){
  .bento:has(> :nth-child(3):last-child),
  .bento:has(> :nth-child(6):last-child),
  .bento:has(> :nth-child(9):last-child),
  .bento:has(> :nth-child(12):last-child){grid-template-columns:repeat(3,1fr)}
  .bento:has(> :nth-child(3):last-child)>:last-child,
  .bento:has(> :nth-child(9):last-child)>:last-child{grid-column:auto}
}
@media(min-width:1024px){
  /* five: three across, then two at one-and-a-half width; eleven: three
     rows of three, then the same two-wide row */
  .bento:has(> :nth-child(5):last-child),
  .bento:has(> :nth-child(11):last-child){grid-template-columns:repeat(6,1fr)}
  .bento:has(> :nth-child(5):last-child)>*,
  .bento:has(> :nth-child(11):last-child)>*{grid-column:span 2}
  .bento:has(> :nth-child(5):last-child)>:nth-child(n+4),
  .bento:has(> :nth-child(11):last-child)>:nth-child(n+10){grid-column:span 3}
  /* seven and ten: four then three(s) on a twelve-track grid */
  .bento:has(> :nth-child(7):last-child),
  .bento:has(> :nth-child(10):last-child){grid-template-columns:repeat(12,1fr)}
  .bento:has(> :nth-child(7):last-child)>*,
  .bento:has(> :nth-child(10):last-child)>*{grid-column:span 4}
  .bento:has(> :nth-child(7):last-child)>:nth-child(-n+4),
  .bento:has(> :nth-child(10):last-child)>:nth-child(-n+4){grid-column:span 3}
  .bento:has(> :nth-child(7):last-child)>:last-child{grid-column:span 4}     /* undo the tablet full-row */
  /* compact step / list cards: five across in one row */
  .bento.bento-tight:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}
  .bento.bento-tight:has(> :nth-child(5):last-child)>*,
  .bento.bento-tight:has(> :nth-child(5):last-child)>:last-child{grid-column:auto}
}
@media(min-width:1100px){
  .bento:has(> :nth-child(4):last-child),
  .bento:has(> :nth-child(8):last-child),
  .bento:has(> :nth-child(12):last-child){grid-template-columns:repeat(4,1fr)}
}