/* Agora — no sidebar, top nav, pill header, Pinterest masonry.
   Ported from bandsaas public/css/layouts/agora.css. The three moves there are
   `.leftmenu{display:none}` + `.tyga-nav-head{display:flex}` (nav migrates from
   the rail into the header) + `.container{column-count:3}`. Measured live on
   crosswinds.rocks: no sidebar in the DOM flow, header border-radius 999px,
   container column-count 3. */
/* CASCADE NOTE. These selectors are body-prefixed on purpose. The freeplay
   chrome (views/partials/freeplay-chrome.ejs) emits its base rules from a
   <style> block inside <body>, which is LATER in document order than this
   stylesheet, so at equal specificity the base would win and this layer would
   be inert — the exact "layout picker does nothing" failure. `body.layout-<id>`
   is one element more specific than `.freeplay .fp-*`, so the layer wins by
   specificity and not by load order. */


/* Sidebar gone, content full width, and the genre nav moves into the header so
   the categories do not simply vanish with the rail that held them. */
body.layout-agora .fp-shell { grid-template-columns: 1fr; }
body.layout-agora .fp-rail { display: none; width: 0; }
body.layout-agora .fp-nav-head { display: flex; }

/* Pill header, detached from the page edges. */
body.layout-agora .fp-top {
  border-radius: 999px;
  border-bottom: none;
  margin: 10px 2% 0;
  width: auto;
}
body.layout-agora .fp-top-inner { padding-left: 24px; padding-right: 24px; }

/* True masonry: whole covers at full card width, staggered, nothing cropped. */
body.layout-agora .pgrid {
  display: block;
  column-count: 3;
  column-gap: 15px;
  grid-template-columns: none;
}
body.layout-agora .pgrid-item {
  width: 100%;
  margin: 0 0 15px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
}
body.layout-agora .pg-capsule { flex-direction: column; }
/* height:auto is what makes it masonry rather than a column of equal boxes:
   the card takes the cover's own aspect ratio instead of a fixed band. */
body.layout-agora .pg-capsule-art { aspect-ratio: auto; }
body.layout-agora .pg-capsule-art img { width: 100%; height: auto; object-fit: contain; }

@media (max-width: 992px) {
  body.layout-agora .pgrid { column-count: 2; }
  body.layout-agora .fp-nav-head { display: none; }
}
@media (max-width: 768px) {
  body.layout-agora .pgrid { column-count: 1; }
}