/* Explore grid, shared by Explore and the Collections views: a box of compact cards that auto-scrolls, with
   up to 12 in view (4×3 on desktop, 3×4 / 2×6 / 1×12 on smaller screens) and ▲ / ▼ nudge buttons below it.
   Every card has the same 4:3 photo and fills its cell. */
.posts.explore-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width: 1024px) { .posts.explore-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 768px) { .posts.explore-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .posts.explore-grid { grid-template-columns:1fr; } }

.explore-stage { padding:12px; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.explore-stage .posts.explore-grid { gap:14px; align-items:stretch; grid-auto-rows:1fr; }
.explore-stage .worldbites-post-card { min-width:0; }
.explore-stage .wb-compact-card .card-image-wrapper { height:auto; aspect-ratio:4 / 3; flex:none; }
.explore-stage .wb-compact-card .card-body { padding:6px 10px; gap:3px; min-width:0; }
/* Titles stay on a single line, cut off with an ellipsis */
.explore-stage .wb-compact-card .card-title { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.explore-stage .wb-compact-card .compact-author { margin:0; }
@media (pointer: fine) { .explore-stage .wb-compact-card .compact-author-link { min-height:24px; } }
.explore-stage .compact-stats { padding-top:4px; font-size:10.5px; flex-wrap:wrap; }
.explore-stage .compact-stats span { padding:2px 7px; }

/* Auto-scrolling ticker inside the box (feed-ticker.js): at most 12 cards in view, drifting slowly upward.
   Crisp edges (no fade mask) and a slim, classic neutral-grey scrollbar on a clear track. The thumb is a fixed
   grey rather than the theme's --border, which is mint green on the default theme */
.feed-ticker { --ticker-thumb:rgba(15,23,42,.18); --ticker-thumb-hover:rgba(15,23,42,.32);
  overflow-y:auto; overscroll-behavior:contain; padding:6px 6px 10px 2px; margin:-6px -6px -10px -2px;
  touch-action:pan-y; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--ticker-thumb) transparent;
  -webkit-mask-image:none; mask-image:none; }
.feed-ticker:hover { scrollbar-color:var(--ticker-thumb-hover) transparent; }
.feed-ticker::-webkit-scrollbar { width:6px; }
.feed-ticker::-webkit-scrollbar-track { background:transparent; }
.feed-ticker::-webkit-scrollbar-thumb { background:var(--ticker-thumb); border-radius:999px; }
.feed-ticker:hover::-webkit-scrollbar-thumb { background:var(--ticker-thumb-hover); }
.feed-ticker .feed-more { margin:12px 0 4px; font-size:.78rem; }

/* Manual ▲ / ▼ nudge buttons under the box */
.ticker-controls { display:flex; justify-content:center; gap:10px; margin:12px 0 0; }
.ticker-controls[hidden] { display:none; }
.ticker-btn { display:inline-grid; place-items:center; width:38px; height:38px; padding:0; border-radius:50%; border:1px solid var(--border);
  background:var(--card); color:var(--teal); font:inherit; font-size:12px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(15,42,42,.06);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background .2s, border-color .2s, color .2s, opacity .2s; }
.ticker-btn:hover:not(:disabled) { border-color:var(--teal); background:var(--teal); color:#fff; }
.ticker-btn:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.ticker-btn:disabled { opacity:.4; cursor:default; box-shadow:none; }
@media (pointer: coarse) { .ticker-btn { width:46px; height:46px; font-size:14px; } }