/*
 * Guides landing page. Cards are built from menu 85 by the shortcode, so this
 * only has to lay them out. Boxed icons match the house style set in
 * anan-icon-boxes.
 */

.ana-gx__section {
	margin: 54px 0 20px;
	font-family: Fraunces, Georgia, serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #9a9285;
}
.ana-gx__section:first-child { margin-top: 8px; }

.ana-gx__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 22px;
	/* cards hold anywhere from 0 to 20 topics, so let each size to its own
	   content instead of stretching to the tallest in the row */
	align-items: start;
}

.ana-gx__card {
	padding: 26px 26px 22px;
	border: 1px solid rgba(110, 102, 89, 0.16);
	border-radius: 14px;
	background: #ffffff;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.ana-gx__card:hover { border-color: #ae8c63; transform: translateY(-2px); }

.ana-gx__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 15px;
	border-radius: 11px;
	background: var(--anan-iconbox-bg, #f2efe9);
}
.ana-gx__ic svg { width: 20px; height: 20px; fill: var(--anan-iconbox-fg, #6e6659); }

.ana-gx__t {
	margin: 0 0 8px;
	font-family: Fraunces, Georgia, serif;
	font-size: 21px;
	font-weight: 500;
	color: #252a2c;
}
.ana-gx__t a { color: inherit; text-decoration: none; }
.ana-gx__t a:hover { color: #ae8c63; }

.ana-gx__b {
	margin: 0 0 16px;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	line-height: 1.65;
	color: #7a7a7a;
}

.ana-gx__list { list-style: none; margin: 0; padding: 0; }
.ana-gx__list li { margin: 0 0 7px; line-height: 1.4; }
.ana-gx__list a {
	display: block;
	padding-left: 12px;
	border-left: 2px solid rgba(110, 102, 89, 0.18);
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	color: #646464;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.ana-gx__list a:hover { color: #ae8c63; border-left-color: #ae8c63; }

.ana-gx__count,
.ana-gx__more {
	margin: 15px 0 0;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9a9285;
}
.ana-gx__more a { color: #ae8c63; text-decoration: none; }
.ana-gx__more a::after { content: " \2192"; }

@media (max-width: 767px) {
	.ana-gx__grid { grid-template-columns: 1fr; gap: 16px; }
	.ana-gx__card { padding: 22px 20px 18px; }
	.ana-gx__section { margin: 38px 0 16px; }
}