/* 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; }

/* Display ad slots side by side within the content column - Multiplex ads
   always stay full-width single column, never placed in here. Column count
   adapts to however many Display slots are inside (auto-fit). */
.ad-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 26px 0; }
.ad-row .ad-slot { margin: 0; }

/* Groups multiple ad elements that fall in the same gap between two content
   sections (e.g. a Display ad-row plus a separate single-column Multiplex
   ad) into one visual block, so the page still reads as a strict
   ad-block / content-section alternation. */
.ad-block { margin: 26px 0; display: flex; flex-direction: column; gap: 16px; }
.ad-block > .ad-slot, .ad-block > .ad-row { margin: 0; }

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

@media (max-width: 700px) {
    .ad-row { grid-template-columns: 1fr; }
}

/* 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; }