/* =====================================================================
   Mytheria — responsive rules (Modern Gaming theme).
   Tablet: narrower sidebar. Mobile: sidebar + panes stack, full width.
   ===================================================================== */

/* tablet / small laptop */
@media (max-width: 1080px) {
	.layout { gap: 16px; padding: 18px 14px 32px; }
	.sidebar { flex-basis: 210px; }
	/* keep the content↔widgets gutter equal to the menu↔content gap (16px) at this breakpoint */
	.leftPane  { width: calc(68% - 8px); }
	.rightPane { width: calc(32% - 8px); }
	.banner { height: 210px; }
	.banner::after { font-size: 2.4rem; }
}

/* stack the two content panes */
@media (max-width: 900px) {
	.leftPane, .rightPane { float: none; width: 100%; }
}

/* mobile: sidebar on top, single column */
@media (max-width: 760px) {
	.layout { flex-direction: column; padding: 14px 12px 28px; }
	.sidebar { position: static; flex-basis: auto; width: 100%; }
	.brand { padding: 4px 0 10px; }
	.brand img { max-width: 150px; }

	/* turn the vertical side menu into a compact top block */
	.sidemenu { padding: 12px; }
	.sidemenu ul { display: flex; flex-wrap: wrap; gap: 4px; }
	.sidemenu li a { padding: 6px 10px; border-left: 0; }
	.sidemenu li a:hover { padding-left: 10px; }

	.banner { height: 160px; margin-bottom: 16px; }
	.banner::after { font-size: 1.8rem; left: 18px; bottom: 30px; }
	.banner .tagline { left: 20px; bottom: 12px; font-size: .78rem; }
	.header { font-size: .98rem; padding: 11px 14px; }
	.body { padding: 14px; }
	.well { margin-bottom: 16px; }
	footer { text-align: center; }
	footer .pull-left, footer .pull-right { float: none; display: block; }
}

/* very small phones: let wide tables scroll instead of squishing */
@media (max-width: 520px) {
	.body { overflow-x: auto; }
	.banner::after { font-size: 1.35rem; }
}