/* === Right-Rail Brick Grid (stand-alone) ===
   Usage:
   - EITHER add .rr-brick-grid to the container and .rr-brick to each pill
   - OR do nothing for Apothecary: this file also targets #apothecaryButtons + .hub-btn
   Design tokens honored: --brand-gold
*/

/* 12-column grid, tight mortar */
:where(.rr-brick-grid, #rightColumn .rc-rail-grid, #journalList.rc-rail-grid, #apothecaryButtons, #journalButtons){
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: start !important;
  grid-auto-flow: row dense !important;
}


/* Flatten common wrappers so the pills are the grid items */
:where(.rr-brick-grid, #rightColumn .rc-rail-grid, #journalList.rc-rail-grid, #apothecaryButtons, #journalButtons)
  > :is(div, section, nav, article, .btn-group, .rail__chips){
  display: contents !important;
}

/* Journal wrapper may carry .rail__chips from hub.css—neutralize it */
#journalButtons,
#journalButtons.rail__chips{
  display: contents !important;
}

/* Pill “bricks” */
:where(.rr-brick, #apothecaryButtons .hub-btn, #journalButtons .rail__chip, #rightColumn .rc-rail-grid .rail__chip, #rightColumn .rc-rail-grid .pv-item){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;   /* left-align content */
  gap: 0.5rem !important;                   /* space between date/title */
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;                     /* let grid gap control spacing */
  padding: 0.375rem 0.75rem !important;

  /* Match hub pills */
  font-size: 0.84rem !important;            /* pills are 0.84rem */
  font-weight: 500 !important;              /* pills use 500 */
  line-height: 1.2 !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-align: left !important;
  box-sizing: border-box !important;
  border: 1px solid var(--brand-gold, #b08a48) !important;
  border-radius: 0.5rem !important;
}

:where(.rr-brick, #apothecaryButtons .hub-btn, #journalButtons .rail__chip, #rightColumn .rc-rail-grid .rail__chip, #rightColumn .rc-rail-grid .pv-item){
  grid-column: span 6 !important;  /* 2-up mobile */
}
@media (min-width: 992px){
  :where(.rr-brick, #apothecaryButtons .hub-btn, #journalButtons .rail__chip, #rightColumn .rc-rail-grid .rail__chip, #rightColumn .rc-rail-grid .pv-item){
    grid-column: span 4 !important;  /* 3-up lg+ */
  }
}




/* Optional utilities: quick span overrides */
.rr-span-3{ grid-column: span 3 !important; }
.rr-span-4{ grid-column: span 4 !important; }
.rr-span-6{ grid-column: span 6 !important; }

/* Optional gap modifiers */
.rr-gap-0   { gap: 0 !important; }
.rr-gap-xs  { gap: 0.375rem !important; }
.rr-gap-sm  { gap: 0.5rem !important; }
.rr-gap-md  { gap: 0.75rem !important; }  /* default */

/* Journal heading must sit on its own row above the bricks */
/* Headings must sit on their own row above the bricks */
#journalList .rail__title,
#projectList .rail__title{
  grid-column: 1 / -1 !important;   /* span full grid */
  order: -1 !important;             /* ensure it renders first */
  margin: 0 0 0.5rem 0 !important;  /* space below the heading */
  position: relative !important;
  z-index: 1 !important;            /* sit above chip borders */
}


/* Chips should not layer over the title */
#journalList .rail__chip{
  position: relative !important;
  z-index: 0 !important;
}