/*
 * Halfpix Dayoo v1.2.30 — the Studio grid fills rows, with the feed's spacing.
 *
 * It used CSS multi-column masonry (`columns: 270px 3` + `column-fill: balance`).
 * Multi-column distributes cards by balancing column HEIGHT, not by filling rows,
 * so a short list packs into the leftmost column and leaves the rest of the row
 * empty: 1 card → 1 column, 2 cards → 1 column stacked, 3 → 2, 4 → 2, 5 → 3.
 * Filtering by a stage (Making, Glazing, …) normally leaves one to three pieces,
 * which is exactly the case that collapsed to one card per row.
 *
 * Studio is a list of records, not the Discover feed, so it uses a real grid: each
 * row fills left to right with as many cards as fit, at the same card width no
 * matter how many records are shown. The feed keeps its masonry.
 *
 * Spacing follows the feed (`.hp-grid` / `.hp-card` in pages.css): 14px between
 * cards, 10px from the 850px breakpoint down. Both gaps are declared explicitly
 * and with !important, because `column-gap` means the multi-column gutter in the
 * older rules and the grid column gap here — the two would otherwise fight, and
 * an !important `column-gap` elsewhere would silently flatten the row spacing to
 * zero while `gap` looked correct in this file.
 */

.hp-main .hp-journal-grid {
  /* Cancel the multi-column rules from pages.css and unified-ui.css (both !important). */
  columns: auto !important;
  display: grid;
  /* One track per ~264px of real container width, so the sidebar and page zoom are
     accounted for; `min(100%, …)` keeps a single card from overflowing a narrow phone. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
  column-gap: 14px !important;
  row-gap: 14px !important;
  /* Cards keep their own height; a row does not stretch to its tallest card. */
  align-items: start;
}

.hp-main .hp-journal-grid > .hp-journal-card {
  width: auto;
  /* The grid's gaps now provide the spacing that the masonry margin used to. */
  margin: 0 !important;
  break-inside: auto;
}

/* Full-row children: the loading line, the empty state, and error notices. */
.hp-main .hp-journal-grid > .hp-loading,
.hp-main .hp-journal-grid > .hp-empty,
.hp-main .hp-journal-grid > .hp-alert,
.hp-main .hp-journal-grid > .hp-notice {
  grid-column: 1 / -1;
  column-span: initial;
}

@media (max-width: 850px) {
  /* Same 10px the feed uses once the rail is gone. */
  .hp-main .hp-journal-grid {
    column-gap: 10px !important;
    row-gap: 10px !important;
  }
}

@media (max-width: 680px) {
  /* Two cards side by side stay readable down to the phone breakpoint. */
  .hp-main .hp-journal-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)); }
}

@media (max-width: 460px) {
  .hp-main .hp-journal-grid { grid-template-columns: 1fr; }
}