/* styleFoodThumb.css -- whole food pictures (Chris, 5 Oct 2026, Road Map it_cc0c58f86e).
   The picture to the LEFT of a food's name, from bsm_food_thumb() in mealplanner/food_icons.php.
   Loaded site-wide (functions.php). Size: --bsm3-food-thumb-size-use-on-food-pictures (brand.css, Brand CRUD Widths tab).
   Pictures have transparent backgrounds -- no box, border or background here.
   .bsm-food-title-row = a food title with the picture first, then the name, centred on one line. */
.bsm-food-title-row { display: flex; align-items: center; gap: var(--bsm3-space-md); }
.bsm-food-thumb { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--bsm3-food-thumb-size-use-on-food-pictures); height: var(--bsm3-food-thumb-size-use-on-food-pictures); line-height: 1; font-size: var(--bsm3-icon-size-container); }
.bsm-food-thumb-img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* 5 Oct 2026: small (32px) pictures for dense lists, and the gap when a picture sits inline before a name
   (inside a .bsm-food-title-row the row's gap does this instead). */
.bsm-food-thumb-sm { width: var(--bsm3-food-thumb-size-small-use-on-food-picture-lists); height: var(--bsm3-food-thumb-size-small-use-on-food-picture-lists); font-size: var(--bsm3-icon-size-card); }
.bsm-food-thumb { vertical-align: middle; margin-right: var(--bsm3-space-sm); }
.bsm-food-title-row > .bsm-food-thumb { margin-right: 0; }

/* Mobile test fixes, 5 Oct 2026:
   - containers that already space their children with a gap: no extra margin on the picture
     (Meal Planner food list pill, saved plan rows) -- gives long names their room back.
   - Day Plans: picture + name side by side, a long name wraps beside the picture, not under it. */
.mp-pill-icon > .bsm-food-thumb, .bsm-plan-item-tap > .bsm-food-thumb { margin-right: 0; }
.page-slug-scheduler-spa .sday-food:has(> .bsm-food-thumb) { display: flex; align-items: center; gap: var(--bsm3-space-sm); }
.page-slug-scheduler-spa .sday-food > .bsm-food-thumb { margin-right: 0; }
/* Plan rows: the name/tag block next to the picture may shrink and wrap instead of running under the score badge */
.bsm-plan-item-tap > .bsm-food-thumb + span { min-width: 0; overflow-wrap: anywhere; }
/* 5 Oct 2026 (Chris): plan rows -- the link icon is not needed when the food picture is there */
.bsm-plan-item-tap:has(> .bsm-food-thumb) > .bsm-plan-link-ico { display: none; }