/* Ad slots shared by every hub page. Nothing here shows until ads.js turns ads on,
   so the pages look exactly as before until the AdSense IDs are filled in. */
.ad-slot { display: none; }
.ads-on .ad-layout { display: flex; justify-content: center; align-items: flex-start; gap: 24px; }
.ads-on .ad-layout > .wrap { flex: 1 1 auto; min-width: 0; margin-left: 0; margin-right: 0; }
.ads-on .ad-rail { flex: 0 0 160px; position: sticky; top: 76px; margin-top: 28px; }
.ad-label { display: block; margin-bottom: 4px; font: 600 10px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #5c5c5c); text-align: center; }
.ad-box { min-height: 90px; }
.ad-rail .ad-box { width: 160px; height: 600px; }
.ad-ph { box-sizing: border-box; height: 100%; min-height: 90px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; border: 1px dashed var(--line, #d4d4d4); border-radius: 6px; background: var(--panel, #fff); color: var(--muted, #5c5c5c); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }

/* Inside On Assignment stories: a banner between paragraphs at every width. */
.ads-on .ad-article { display: block; margin: 28px 0; padding: 10px 0; border-top: 1px solid var(--line, #d4d4d4); border-bottom: 1px solid var(--line, #d4d4d4); }

/* Inside On Assignment galleries: a banner between photos (or under a slideshow), the full width of the layout. */
.ads-on .ad-gallery { display: block; padding: 10px 0; border-top: 1px solid var(--line, #d4d4d4); border-bottom: 1px solid var(--line, #d4d4d4); }

/* A banner at the top of the page under its header, and banners between sections, at every width.
   The box keeps its height while the ad loads, so the page doesn't jump. */
.ads-on .ad-top { display: block; margin: 16px 0 24px; }
.ads-on .ad-section { display: block; margin: 32px 0; padding: 10px 0; border-top: 1px solid var(--line, #d4d4d4); border-bottom: 1px solid var(--line, #d4d4d4); }
.ads-on .ad-top .ad-box, .ads-on .ad-section .ad-box { min-height: 100px; }

/* In a list of stories: a full-width row between the cards. */
.ads-on .ad-feed { display: block; grid-column: 1 / -1; padding: 10px 0; border-top: 1px solid var(--line, #d4d4d4); border-bottom: 1px solid var(--line, #d4d4d4); }

/* Phones, tablets and small laptops: one banner just above the footer. */
.ads-on .ad-inline { display: block; margin-top: 32px; }
/* Both rails together once there is room beside the page, so the two sides stay even. */
@media (min-width: 1200px) {
  .ads-on .ad-left, .ads-on .ad-right { display: block; }
  .ads-on .ad-inline { display: none; }
}
.ads-on .ad-right { margin-right: 16px; }
.ads-on .ad-left { margin-left: 16px; }
@media print { .ad-slot { display: none !important; } }