/* === Aroma Recipes: RIGHT RAIL — brick grid === */
/* Scope: #rightColumn only (Apothecary) */

/* Rail grid: 12-col brick layout, tight mortar */
#apothecaryButtons{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  row-gap: 0.75rem !important;
  column-gap: 0.75rem !important;
  align-items: start !important;
  grid-auto-flow: row dense !important;
}

/* Flatten wrappers so the pills are the actual grid items */
#apothecaryButtons > :is(div, section, nav, article, .btn-group){
  display: contents !important;
}

/* Pills: don’t stretch, don’t overflow, spacing comes from grid gap */
#apothecaryButtons .hub-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0.375rem 0.50rem !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
  border: 1px solid var(--brand-gold, #b08a48) !important;
  border-radius: 0.5rem !important;
}

/* Brick spans: 2-up on mobile, 3-up on lg+ (exactly like Brain Dump rail) */
#apothecaryButtons .hub-btn{ grid-column: span 6 !important; }
@media (min-width: 992px){
  #apothecaryButtons .hub-btn{ grid-column: span 4 !important; }
}

/* Neutralize Bootstrap btn-group compaction (keeps spacing consistent) */
#rightColumn .btn-group:has(.hub-btn){
  display: contents !important;
}
#rightColumn .btn-group > .btn:not(:first-child),
#rightColumn .btn-group > .btn-group:not(:first-child){
  margin-left: 0 !important;
}