/* ETM Amazon Sync - AI blog article layout */

.etm-blog-article {
	--etm-blog-accent: var(--e-global-color-accent, #ff9900);
	--etm-blog-text: currentColor;
	--etm-blog-muted: color-mix(in srgb, currentColor 62%, transparent);
	--etm-blog-border: color-mix(in srgb, currentColor 16%, transparent);
	--etm-blog-surface: color-mix(in srgb, Canvas 96%, currentColor 4%);
	--etm-blog-soft: color-mix(in srgb, var(--etm-blog-accent) 10%, Canvas);
	display: grid;
	gap: clamp(22px, 4vw, 38px);
	max-width: min(980px, 100%);
	margin: 0 auto 48px;
	color: var(--etm-blog-text);
	font-family: inherit;
}

.etm-blog-article *,
.etm-blog-article *::before,
.etm-blog-article *::after {
	box-sizing: border-box;
}

.etm-blog-article__intro,
.etm-blog-toc,
.etm-blog-section,
.etm-blog-related,
.etm-blog-faq,
.etm-blog-product-widget {
	border: 1px solid var(--etm-blog-border);
	border-radius: 8px;
	background: var(--etm-blog-surface);
}

.etm-blog-article__intro {
	padding: clamp(22px, 4vw, 38px);
	background: var(--etm-blog-soft);
}

.etm-blog-article__eyebrow {
	display: inline-flex;
	margin-bottom: 8px;
	color: color-mix(in srgb, var(--etm-blog-accent) 78%, currentColor);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

.etm-blog-article__lead {
	max-width: 78ch;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.75;
}

.etm-blog-article__lead p,
.etm-blog-section__body p,
.etm-blog-subsection p,
.etm-blog-faq__item p {
	margin: 0 0 1em;
	line-height: 1.75;
}

.etm-blog-article__lead p:last-child,
.etm-blog-section__body p:last-child,
.etm-blog-subsection p:last-child,
.etm-blog-faq__item p:last-child {
	margin-bottom: 0;
}

.etm-blog-toc {
	display: grid;
	grid-template-columns: minmax(180px, .6fr) minmax(0, 1.4fr);
	gap: 18px;
	padding: clamp(18px, 3vw, 26px);
}

.etm-blog-toc h2,
.etm-blog-section h2,
.etm-blog-related h2,
.etm-blog-faq h2,
.etm-blog-product-widget h3 {
	margin: 0;
	letter-spacing: 0;
	line-height: 1.15;
}

.etm-blog-toc ol {
	display: grid;
	gap: 8px;
	margin: 0;
	padding-left: 22px;
}

.etm-blog-toc a {
	color: inherit;
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.etm-blog-section {
	display: grid;
	gap: 18px;
	padding: clamp(20px, 4vw, 34px);
}

.etm-blog-section__head {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.etm-blog-section__head > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--etm-blog-soft);
	color: color-mix(in srgb, var(--etm-blog-accent) 70%, currentColor);
	font-weight: 900;
}

.etm-blog-section__body {
	max-width: 76ch;
	color: color-mix(in srgb, currentColor 88%, transparent);
}

.etm-blog-subsections {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.etm-blog-subsection {
	padding: 16px;
	border: 1px solid var(--etm-blog-border);
	border-radius: 8px;
	background: color-mix(in srgb, Canvas 98%, currentColor 2%);
}

.etm-blog-subsection h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	line-height: 1.25;
}

.etm-blog-product-widget {
	display: grid;
	gap: 14px;
	padding: clamp(16px, 3vw, 24px);
	background: color-mix(in srgb, var(--etm-blog-accent) 7%, Canvas);
}

.etm-blog-product-widget__head {
	display: grid;
	gap: 2px;
}

.etm-blog-product-widget .woocommerce,
.etm-blog-product-widget ul.products {
	margin-bottom: 0;
}

.etm-blog-related,
.etm-blog-faq {
	padding: clamp(18px, 3vw, 28px);
}

.etm-blog-related__grid,
.etm-blog-faq__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 16px;
}

.etm-blog-related__card,
.etm-blog-faq__item {
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--etm-blog-border);
	border-radius: 8px;
	background: color-mix(in srgb, Canvas 98%, currentColor 2%);
	color: inherit;
	text-decoration: none;
}

.etm-blog-related__card:hover {
	border-color: var(--etm-blog-accent);
	color: inherit;
}

.etm-blog-faq__item h3 {
	margin: 0 0 8px;
	font-size: 1rem;
	line-height: 1.28;
}

@media (max-width: 760px) {
	.etm-blog-toc,
	.etm-blog-subsections,
	.etm-blog-related__grid,
	.etm-blog-faq__grid {
		grid-template-columns: 1fr;
	}

	.etm-blog-section__head {
		grid-template-columns: 1fr;
	}
}