/* ============================================================
   LOTTO PAGES - right-hand sidebar (ad slots + widgets)
   Loaded only on lotto results pages (see inc/setup/lotto-sidebar.php).
   Turns the r26 page layout into three columns: TOC | content | sidebar.
   No em dashes anywhere.
   ============================================================ */

/* When the sidebar exists, widen the layout and add the third column.
   Base r26-page-layout is "260px 1fr"; we make it "260px 1fr 300px". */
.r26-page-layout.has-lotto-aside {
	grid-template-columns: 260px minmax(0, 1fr) 300px;
	max-width: var(--max-w);
}

/* If a lotto page somehow has no TOC, still show content + sidebar. */
.r26-page-layout.has-lotto-aside.no-toc {
	grid-template-columns: minmax(0, 1fr) 300px;
	max-width: var(--max-w);
}

/* The sidebar column. Normal document flow (not fixed), sticky so it follows
   as the long results page scrolls, but falls back gracefully on short pages. */
.r26-lotto-aside {
	min-width: 0;
	align-self: start;
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--hdr-h) + 32px);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* Each widget block in the sidebar. */
.wgh-lotto-widget {
	background: var(--surface, #fff);
	border: 1px solid var(--line);
	border-radius: var(--r-lg, 14px);
	padding: 16px;
	overflow: hidden;
}

.wgh-lotto-widget-title {
	font-family: var(--font-d);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

/* Ad Slots and images should never overflow the column. */
.r26-lotto-aside img,
.wgh-lotto-widget img { max-width: 100%; height: auto; }

/* ---- Responsive ----
   Tablet: drop the left TOC first (it already has a mobile <details> version),
   keep content + sidebar side by side. */
@media (max-width: 1080px) {
	.r26-page-layout.has-lotto-aside {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
}

/* Phone: stack the sidebar BELOW the content so results show first. */
@media (max-width: 820px) {
	.r26-page-layout.has-lotto-aside,
	.r26-page-layout.has-lotto-aside.no-toc {
		grid-template-columns: 1fr;
	}
	.r26-lotto-aside {
		position: static;
		top: auto;
		margin-top: 28px;
	}
}