/* Inner pages (articles, lists of articles, songs) use the whole screen width on large displays.
   Loaded after style.css; below 1201px the original responsive rules apply unchanged. */
@media (min-width:1201px){
	/* container: edge to edge with a comfortable gutter */
	.content.inner{
		width:100%;max-width:none;box-sizing:border-box;
		padding:0 clamp(24px,3.2vw,80px);
		gap:clamp(24px,2.2vw,48px);
	}
	/* main column grows, side column keeps a sensible width */
	article{width:auto;flex:1 1 0;min-width:0}
	aside{width:clamp(300px,19vw,400px);flex:0 0 auto;margin:80px 0 0 0}
	aside .addon{width:100%}

	/* cards: as many columns as fit, all equal */
	article ul.sub-arts{
		display:grid;
		grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
		gap:clamp(18px,1.6vw,30px);
		justify-content:stretch;
	}
	article .sub-arts li{width:auto;margin:0}
	article .sub-arts li a .img{height:clamp(150px,11.5vw,230px)}

	/* media never taller than the screen */
	article .main-img{height:clamp(420px,36vw,680px)}
	article video{max-height:78vh;background:#000}
	article iframe{width:100%;height:auto;aspect-ratio:16/9;max-height:78vh}

	/* long text keeps a readable line length even on ultra-wide screens */
	article .body > p, article .body > ul, article .body > ol, article .body > h3{max-width:1180px}

	/* comments block (old Facebook box) */
	div.fixed{width:100%;box-sizing:border-box;padding:0 clamp(24px,3.2vw,80px)}

	/* the fixed side ads would overlap the now wider content */
	main:has(.content.inner) .side{display:none}
}

/* ---- Side links (sections + app banner) become a horizontal bar ABOVE the page content, all screen sizes,
   so the videos / cards below get the full width. */
.content.inner{flex-wrap:wrap;align-items:flex-start}
main .content.inner aside{
	order:-1;flex:0 0 100%;width:100%;max-width:100%;box-sizing:border-box;margin:16px 0 4px;
	display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
main .content.inner article{flex:1 1 100%;width:100%;max-width:100%;box-sizing:border-box}
main .content.inner aside .links{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 0 auto;padding:0;list-style:none;flex:0 1 auto}
main .content.inner aside .links li{width:auto;margin:0;padding:8px 18px;flex:0 0 auto}
main .content.inner aside .links li a{align-items:center;white-space:nowrap}
main .content.inner aside .links li a .img{width:34px;height:34px}
main .content.inner aside .addon{width:300px;height:140px;margin:0;flex:0 0 auto;background-size:cover}
main .content.inner aside ins{flex:0 0 100%}
@media(max-width:1200px){
	main .content.inner aside{padding:0 16px}
	main .content.inner aside .addon{width:260px;height:121px}
}
/* an ad slot Google left empty must not leave a blank gap under the bar */
main .content.inner aside ins.adsbygoogle:not([data-ad-status="filled"]){height:0!important;min-height:0!important;overflow:hidden;margin:0}
main .content.inner aside ins.adsbygoogle{order:99}
main .content.inner article{margin-top:16px}