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

.page-ad-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }
.page-ad-rail .ad-slot { margin: 0; }

/* Use on tall pages with several stacked ad-slots so ads distribute down the
   full content height, instead of a single sticky ad hiding the rest of the stack. */
.page-ad-rail.flow { position: static; top: auto; gap: 32px; }

.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: 1400px) {
    .page-ad-rail { display: none; }
}

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