/* DG-3184 - Gated ATB articles (Blog, Customer Story, Guide).
   blog.css, guide.css and customer-story.css style every "header div",
   "header p" and "header h1" of the article; inside the gated hero those
   rules fight with atb_gated.css and the Marketo form. Same specificity as
   those rules (this file loads later), lower than the Marketo and
   #atb-gated-content rules, so the hero renders like the Gated Asset one. */

.atb-gated-article header div {
	display: block;
	flex-direction: row;
	gap: normal;
	width: auto;
}

.atb-gated-article header h1,
.atb-gated-article header p {
	max-width: none;
}

@media (min-width: 1280px) {
	.atb-gated-article header div,
	.atb-gated-article header img {
		width: auto;
	}
}

.atb-gated-article #atb-gated-content .dynamic-grid-header .atb-gated-article-meta {
	display: flex;
	flex-direction: column;
	font-size: 16px !important;
	font-weight: 400;
	gap: 12px;
	grid-area: cta;
}

.atb-gated-article #atb-gated-content .dynamic-grid-header .customer-logo {
	backdrop-filter: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	grid-area: tag;
	justify-self: start;
	padding: 0;
}

.atb-gated-article #atb-gated-content .dynamic-grid-header .customer-logo img {
	border-radius: 0;
	height: 48px;
	width: auto;
}

.atb-gated-article #atb-gated-content {
	max-width: 1180px;
	padding-left: 0;
	padding-right: 0;
}

@media (min-width: 1280px) {
	.web-content.atb-gated-article .atb-breadcrumb,
	#atb-container .web-content.atb-gated-article .atb-breadcrumb,
	.web-content.atb-gated-article #atb-gated-content,
	.web-content.atb-gated-article .atb-gated-article-body > section {
		max-width: none;
		padding-left: 16px;
		padding-right: 0;
	}
}

.atb-gated-article #atb-gated-content header {
	margin: 42px auto 0;
	padding-bottom: 80px;
}

.atb-gated-article #atb-gated-content .dynamic-grid-header {
	margin-top: 0;
	row-gap: 24px;
}

.atb-gated-article #atb-gated-content .dynamic-grid-header h1.main-title {
	color: #f0f1f5;
	font-weight: 700;
	margin: 0;
}

@media (min-width: 1024px) {
	.web-content.atb-gated-article.atb-asset #atb-gated-content .dynamic-grid-header h1.main-title {
		font-size: 43px !important;
		line-height: 48px !important;
	}
}

.atb-gated-article #atb-gated-content .dynamic-grid-header .subtitle {
	margin-top: -12px;
}

.atb-gated-article #atb-gated-content .dynamic-grid-header .subtitle p {
	color: #b6bdcc;
	font-size: 21px !important;
	line-height: 32px;
	margin: 0;
}

.atb-gated-article #atb-gated-content .dynamic-grid-header .atb-reading-time {
	background: rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 16px;
	font-weight: 600;
	justify-self: start;
	line-height: 30px;
	margin: 0;
	padding: 0 8px;
}

.atb-gated-article #atb-gated-content .atb-asset-media,
.atb-gated-article #atb-gated-content .atb-asset-img {
	border-radius: 8px;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-breadcrumb {
	font-size: 14px;
	line-height: 17.5px;
	padding-top: 20px;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-breadcrumb ol,
:is(#atb-container, body) .web-content.atb-gated-article .atb-breadcrumb li {
	gap: 4px;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-breadcrumb a,
:is(#atb-container, body) .web-content.atb-gated-article .atb-breadcrumb li + li::before {
	color: #b6bdcc;
	opacity: 1;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-breadcrumb [aria-current] {
	color: #f0f1f5;
	font-weight: 600;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-table-of-contents > span {
	color: #b6bdcc;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.84px;
	line-height: 20px;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-table-of-contents li a {
	color: #b6bdcc !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	padding: 16px 0 16px 15px;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-table-of-contents li.active a {
	color: #f0f1f5 !important;
	font-weight: 400;
	text-shadow: 0 0 0.6px currentColor, 0 0 0.6px currentColor;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-body .content h2 {
	font-weight: 600;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-body .content p,
:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-body .content li {
	font-size: 18px;
	line-height: 22.5px;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside .atb-key-metrics {
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.28);
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 20px;
	text-align: left;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside .atb-key-metrics > span {
	color: #f0f1f5;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.7px;
	line-height: 20px;
	text-align: left;
	text-transform: uppercase;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside .key-metrics {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: flex-start;
	margin: 0;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside .key-metric {
	align-items: flex-start;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 8px;
	width: auto;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside .key-metric:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside .key-metric .header {
	align-items: center;
	display: flex;
	gap: 2px;
	justify-content: flex-start;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside .key-metric .value,
:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside .key-metric .symbol {
	color: #70a2ff;
	font-size: 32px;
	font-weight: 600;
	line-height: 32px;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside .key-metric .symbol {
	font-size: 20px;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside .key-metric .description {
	color: #b6bdcc;
	font-size: 11px;
	font-weight: 600;
	line-height: 16px;
	text-align: left;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-blog-featured a {
	border: 0;
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.28);
	gap: 16px;
	padding: 20px;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-blog-featured-label {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
}

:is(#atb-container, body) .web-content.atb-gated-article .atb-blog-featured-title {
	font-size: 21px;
	line-height: 26px;
}

@media (min-width: 1280px) {
	:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-body > section {
		align-items: start;
		column-gap: 64px;
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr) 200px;
		margin-top: 40px;
	}

	:is(#atb-container, body) .web-content.atb-gated-article-blog .atb-gated-article-body > section {
		column-gap: 40px;
		grid-template-columns: 200px minmax(0, 1fr) 300px;
	}

	:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-body .atb-table-of-contents {
		grid-column: 1;
		grid-row: 1;
		max-width: 200px;
		min-width: 0;
		top: 89px;
		width: 200px;
	}

	:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-body .content {
		grid-column: 2;
		grid-row: 1;
	}

	:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside,
	:is(#atb-container, body) .web-content.atb-gated-article .atb-blog-featured {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		position: sticky;
		top: 89px;
	}

	:is(#atb-container, body) .web-content.atb-gated-article .atb-gated-article-aside {
		width: 200px;
	}

	:is(#atb-container, body) .web-content.atb-gated-article .atb-blog-featured {
		width: 300px;
	}
}

@media (max-width: 1023px) {
	.web-content.atb-gated-article.atb-asset #atb-gated-content .dynamic-grid-header h1.main-title {
		font-size: 41px !important;
		line-height: 1.2 !important;
	}

	.web-content.atb-gated-article #atb-gated-content header > .atb-asset-media-col {
		flex: none;
		width: 100%;
	}

	.web-content.atb-gated-article #atb-gated-content .atb-asset-media-col .atb-asset-media {
		width: 100%;
	}
}