/* the guide and idea pages (site/app/views/guides) */
#guide .lead { font-size: 15px; color: #555; padding-top: 0.25em; }
#guide .figure { float: right; width: 300px; margin: 0.5em 0 1em 1.5em; text-align: center; font-size: 12px; color: #777; line-height: 1.4; }
#guide .figure img { display: block; margin: 0 auto 4px; }
#guide .row { text-align: center; margin: 1.5em 0 0.5em; }
#guide .row a { display: inline-block; margin: 0 8px 1em; vertical-align: top; width: 170px; font-size: 12px; color: #777; text-decoration: none; line-height: 1.4; }
#guide .row img { display: block; margin: 0 auto 4px; }
#guide h2 { margin-top: 1.5em; clear: both; }
#guide h2.float-ok { clear: none; }
#guide ol.steps li { margin: 0.6em 0; }
#guide ul.bullet li { margin: 0.4em 0; }
#guide .cta { clear: both; text-align: center; margin: 2.5em 0 1em; padding: 1.5em 0 0.5em; border-top: 1px solid #ddd; }
#guide .cta p { padding-top: 0.5em; color: #777; font-size: 12px; }
#guide .more { clear: both; margin-top: 2em; padding-top: 1em; border-top: 1px solid #ddd; }
#guide .more h3 { margin-bottom: 0.25em; }
@media (max-width: 960px) {
	#guide .figure { float: none; width: auto; margin: 1em 0; }
	#guide .row a { width: 44%; margin: 0 2% 1em; }
}

/* example grids (lib/Ideas.php), also on the home page */
.ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 1.25em 0 1em; }
.ideas a.idea { display: block; text-decoration: none !important; color: #666; font-size: 12px; line-height: 1.35; text-align: center; }
.ideas .pic { display: flex; align-items: center; justify-content: center; height: 150px; background: #f6f7f8; border: 1px solid #e6e8ea; border-radius: 6px; overflow: hidden; }
.ideas .pic img { max-width: 92%; max-height: 92%; width: auto; height: auto; object-fit: contain; }
.ideas a.idea:hover .pic { border-color: #9db5d3; }
.ideas .cap { display: block; padding-top: 5px; }
@media (max-width: 960px) {
	.ideas { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.ideas .pic { height: 130px; }
}

/* the bottom of each idea page: the other ideas as cards, then a line of other links */
#guide .more .ideas .cap { font-weight: bold; color: #2058a1; font-size: 13px; }
#guide .more p.also { padding-top: 0.5em; font-size: 12px; color: #777; }
#guide .more p.also a { margin: 0 0.25em; }
/* home: "See how it works" under the Photos + Shape diagram */
p.how-link { padding-top: 1.25em; font-size: 13px; font-weight: bold; }
/* idea cards elsewhere (gallery): bold blue captions like the home page's */
#collages .ideas a.idea[href^="http"] .cap { font-weight: bold; color: #2058a1; font-size: 13px; }