/* Shared vertical ad rail + ad slot styling - used on index.html and guide.html */

/* CSS Grid items default to a content-based min-width, which stops the middle
   (content) column from ever shrinking below its intrinsic size - this is what
   causes the content column to overflow its grid track on narrower viewports. */
.page-layout > *, .guide-layout > * { min-width: 0; }

/* Bounded sticky box - ad-rail-autoscroll.js slowly scrolls this container's
   own content on a loop, so a stack of many ads can cycle through without
   the box itself growing taller than the viewport. */
.page-ad-rail { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: hidden; display: flex; flex-direction: column; gap: 20px; scroll-behavior: auto; }
.page-ad-rail .ad-slot { margin: 0; flex-shrink: 0; }

.ad-slot { margin: 26px 0; text-align: center; }

@media (max-width: 1200px) {
    .page-ad-rail { display: none; }
}

/* Shared bottom-of-page legal links bar - used on every page site-wide */
.legal-links { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; padding: 18px 10px 6px; font-size: .82em; color: #9ca3af; }
.legal-links a { color: #6b7280; text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }
.legal-links .legal-sep { color: #d1d5db; }