/* Too Much Smart: the homepage's own layout. Everything else comes from s/smart_v200.css. */

/* whoami: the headline beside the lightbulb */
.body.hero-body { justify-content: center; }
.hero {
	display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 28px; align-items: center;
}
.hero .text { display: flex; flex-direction: column; gap: 16px; }
.bulb {
	display: grid; place-items: center;
	width: 132px; height: 132px; border-radius: 50%; background: var(--smart);
}
.bulb img { width: 94%; height: 94%; }

/* ssh -l: one panel per game, side by side; the words, then a small square promo */
.body.game {
	display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 24px;
}
.game-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.promo {
	display: grid; place-items: center; align-self: center;
	aspect-ratio: 1; padding: 18px; overflow: hidden;
	border-radius: 14px; background: #26272A;
}
.promo img { width: 100%; height: auto; }
.promo.photo { padding: 0; background: #0B0D12; }
.promo.photo img { height: 100%; object-fit: cover; }

/* systemctl status studio: the service, then its facts in a row */
.studio .indent { padding-left: 18px; }
.ok { color: var(--apps-text); }
.facts {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px;
	padding-left: 18px;
}
.facts > div {
	display: flex; flex-direction: column; gap: 2px;
	padding-left: 14px; border-left: 1px solid var(--border);
}
.facts dt { font-size: var(--fs-label); color: var(--muted); }

@media (max-width: 899px) {
	.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.bulb { order: -1; width: 72px; height: 72px; }
	.facts { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
	/* the promo sits beside the label and title; the words and button take the full width */
	.body.game { grid-template-columns: minmax(0, 1fr) 88px; gap: 12px 16px; align-items: start; }
	.game-text { display: contents; }
	.game-text > * { grid-column: 1; }
	.game-text > .read, .game-text > .actions { grid-column: 1 / -1; }
	.promo { grid-column: 2; grid-row: 1 / span 2; align-self: start; padding: 10px; border-radius: 10px; }
}