/*
 * HRG Content Section template styles.
 *
 * Every rule is scoped under .hrg-pagehead or .hrg-section, so nothing here can
 * affect any other page on the site. Deliberately avoids the CSS features
 * flagged by the AGCO browser-compatibility scan (mask, overflow:clip,
 * orphans, widows, page-break-*), so these pages add no new warnings.
 */

/* ---------- Page head ----------
   A typographic opening rather than a photographic hero. A tall photo band
   needs a strong wide image to carry it and looks worse than no photo when it
   does not have one, so the title does the work instead. */

.hrg-pagehead {
	padding: 52px 0 0;
	background-color: #ffffff;
}

.hrg-pagehead__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 20px;
}

.hrg-pagehead__title {
	margin: 0;
	color: #191919;
	font-size: 40px;
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.hrg-pagehead__rule {
	display: block;
	width: 76px;
	height: 4px;
	margin-top: 20px;
	background-color: #ba9765;
}

.hrg-pagehead__standfirst {
	max-width: 44rem;
	margin: 22px 0 0;
	color: #5c574f;
	font-size: 19px;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.hrg-pagehead {
		padding-top: 64px;
	}

	.hrg-pagehead__title {
		font-size: 52px;
	}
}

@media (max-width: 600px) {
	.hrg-pagehead {
		padding-top: 34px;
	}

	.hrg-pagehead__inner {
		padding: 0 18px;
	}

	.hrg-pagehead__title {
		font-size: 30px;
	}

	.hrg-pagehead__rule {
		margin-top: 14px;
	}

	.hrg-pagehead__standfirst {
		margin-top: 16px;
		font-size: 17px;
	}
}

.hrg-section {
	padding: 38px 0 72px;
	background-color: #ffffff;
}

.hrg-section__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 20px;
}

.hrg-section__body {
	max-width: 920px;
	color: #3d3d3d;
	font-size: 17px;
	line-height: 1.75;
}

.hrg-section__body > *:first-child {
	margin-top: 0;
}

.hrg-section__body > *:last-child {
	margin-bottom: 0;
}

/* Lead paragraph, but only when the page opens with body copy. */
.hrg-section__body > p:first-child {
	color: #191919;
	font-size: 20px;
	line-height: 1.65;
}

.hrg-section__body h2,
.hrg-section__body h3,
.hrg-section__body h4 {
	margin: 44px 0 14px;
	color: #191919;
	line-height: 1.25;
	font-weight: 700;
}

.hrg-section__body h2 {
	font-size: 30px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e6e2da;
}

.hrg-section__body h3 {
	font-size: 23px;
	padding-left: 16px;
	border-left: 4px solid #ba9765;
}

.hrg-section__body h4 {
	font-size: 19px;
}

.hrg-section__body p {
	margin: 0 0 20px;
}

.hrg-section__body a {
	color: #96723c;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hrg-section__body a:hover,
.hrg-section__body a:focus {
	color: #191919;
}

.hrg-section__body ul,
.hrg-section__body ol {
	margin: 0 0 24px;
	padding-left: 22px;
}

.hrg-section__body li {
	margin-bottom: 9px;
	padding-left: 4px;
}

.hrg-section__body ul {
	list-style: none;
	padding-left: 0;
}

.hrg-section__body ul > li {
	position: relative;
	padding-left: 24px;
}

.hrg-section__body ul > li:before {
	content: "";
	position: absolute;
	top: 11px;
	left: 2px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #ba9765;
}

.hrg-section__body img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.hrg-section__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
}

.hrg-section__body th,
.hrg-section__body td {
	padding: 11px 14px;
	border-bottom: 1px solid #e6e2da;
	text-align: left;
}

.hrg-section__body th {
	background-color: #f7f5f1;
	color: #191919;
	font-weight: 600;
}

/* ---------- Optional helpers, add the class in the editor ---------- */

/* Gold pill link, for an outbound call to action. */
.hrg-section__body a.hrg-btn {
	display: inline-block;
	margin: 6px 10px 6px 0;
	padding: 13px 30px;
	border-radius: 30px;
	background-color: #ba9765;
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.hrg-section__body a.hrg-btn:hover,
.hrg-section__body a.hrg-btn:focus {
	background-color: #a58252;
	color: #ffffff;
}

/* Tinted panel, for a note or a highlighted block. */
.hrg-section__body .hrg-callout {
	margin: 0 0 26px;
	padding: 24px 28px;
	border-left: 4px solid #ba9765;
	background-color: #f7f5f1;
	border-radius: 0 4px 4px 0;
}

/* Two-up grid. Wrap sibling blocks in <div class="hrg-cols"> to use the
   full page width for short, card-like content. */
.hrg-section__body .hrg-cols {
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 40px;
	grid-row-gap: 8px;
	margin-bottom: 26px;
}

/* Widen the measure when the page opts into columns. */
.hrg-section__body.hrg-section__body--wide,
.hrg-section__body .hrg-cols {
	max-width: none;
}

@media (min-width: 900px) {
	.hrg-section__body .hrg-cols {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {

	.hrg-section {
		padding: 26px 0 48px;
	}

	.hrg-section__inner {
		padding: 0 18px;
	}

	.hrg-section__body {
		font-size: 16px;
	}

	.hrg-section__body > p:first-child {
		font-size: 18px;
	}

	.hrg-section__body h2 {
		font-size: 25px;
	}

	.hrg-section__body h3 {
		font-size: 20px;
	}

	.hrg-section__body h2,
	.hrg-section__body h3,
	.hrg-section__body h4 {
		margin-top: 34px;
	}
}

/* ---------- Hero on larger screens ----------
   A short, very wide hero crops a normal landscape photo hard, because
   background-size: cover has to fill a much wider aspect ratio than the
   photo has. Giving the hero more height brings the two ratios closer
   together and shows much more of the picture. */

/* ---------- Icons ---------- */

.hrg-section__body .hrg-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 0 14px;
	border-radius: 50%;
	background-color: #f3efe7;
	color: #ba9765;
	font-size: 20px;
	line-height: 1;
}

.hrg-section__body h2 > i,
.hrg-section__body h3 > i,
.hrg-section__body h2 > svg,
.hrg-section__body h3 > svg,
.hrg-section__body h2 > .svg-inline--fa,
.hrg-section__body h3 > .svg-inline--fa {
	margin-right: 6px;
	color: #ba9765;
	font-size: 0.82em;
	vertical-align: baseline;
}

/* Icon beside a block of text, rather than above it. */
.hrg-section__body .hrg-feature {
	display: flex;
	align-items: flex-start;
	margin: 0 0 22px;
}

.hrg-section__body .hrg-feature .hrg-icon {
	flex: 0 0 auto;
	margin: 2px 18px 0 0;
}

.hrg-section__body .hrg-feature__text {
	flex: 1 1 auto;
	min-width: 0;
}

.hrg-section__body .hrg-feature h3 {
	margin: 0 0 6px;
	padding-left: 0;
	border-left: 0;
	font-size: 20px;
}

.hrg-section__body .hrg-feature p:last-child {
	margin-bottom: 0;
}

/* ---------- Card variant of the two-up grid ---------- */

.hrg-section__body .hrg-cols--cards > div {
	padding: 28px 28px 24px;
	border: 1px solid #e6e2da;
	border-radius: 6px;
	background-color: #fdfcfa;
}

.hrg-section__body .hrg-cols--cards h3 {
	margin-top: 0;
	padding-left: 0;
	border-left: 0;
	font-size: 20px;
}

.hrg-section__body .hrg-cols--cards p:last-child {
	margin-bottom: 0;
}

/* Three across on wide screens when a block has three or more cards. */
@media (min-width: 1100px) {
	.hrg-section__body .hrg-cols--three {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Pull quote / stat strip ---------- */

.hrg-section__body .hrg-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 24px;
	grid-row-gap: 24px;
	margin: 0 0 30px;
	padding: 28px 30px;
	border-radius: 6px;
	background-color: #191919;
	max-width: none;
}

.hrg-section__body .hrg-stats > div {
	color: #ffffff;
}

.hrg-section__body .hrg-stats strong {
	display: block;
	color: #ba9765;
	font-size: 30px;
	line-height: 1.1;
	font-weight: 700;
}

.hrg-section__body .hrg-stats span {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: #d8d4cc;
}

@media (min-width: 900px) {
	.hrg-section__body .hrg-stats {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Font Awesome can be configured to swap each <i> for an <svg>. These rules make the
   icon styling hold in either mode, so spacing and colour do not depend on which
   Font Awesome build the site is running. */

.hrg-section__body .hrg-icon i,
.hrg-section__body .hrg-icon svg,
.hrg-section__body .hrg-icon .svg-inline--fa {
	color: #ba9765;
	width: 1em;
	height: 1em;
}