/*
 * Component: Single blog article
 */

/* Hero */
.ati-article-hero {
	padding-block: 0;
}

.ati-article-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-2);
	margin-bottom: var(--ati-space-4);
}

.ati-article-hero__badges .ati-chip {
	gap: var(--ati-space-1);
}

.ati-article-hero__title {
	max-width: 34ch;
	margin-bottom: var(--ati-space-4);
}

.ati-article-hero__excerpt {
	max-width: 70ch;
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-h3);
	line-height: 1.7;
}

.ati-article-hero__byline {
	display: flex;
	align-items: center;
	gap: var(--ati-space-3);
	margin-top: var(--ati-space-5, var(--ati-space-6));
}

.ati-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
	font-weight: 700;
}

.ati-avatar .ati-icon {
	width: 22px;
	height: 22px;
}

.ati-avatar--lg .ati-icon {
	width: 28px;
	height: 28px;
}

.ati-avatar--lg {
	width: 64px;
	height: 64px;
	font-size: 22px;
}

.ati-article-hero__author {
	display: flex;
	flex-direction: column;
}

.ati-article-hero__author-name {
	font-weight: 700;
}

.ati-article-hero__author-role {
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-article-hero__actions {
	display: flex;
	gap: var(--ati-space-1);
	margin-inline-start: auto;
}

.ati-article-hero__actions .ati-icon-button[aria-pressed="true"] {
	border-color: var(--ati-color-primary);
	color: var(--ati-color-primary);
	background: var(--ati-color-primary-soft);
}

.ati-article-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-4);
	margin-top: var(--ati-space-4);
	padding-top: var(--ati-space-4);
	border-top: 1px solid var(--ati-color-divider);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-article-hero__meta li {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-2);
}

.ati-article-hero__meta .ati-icon {
	color: var(--ati-color-primary);
}

.ati-article-hero__formula {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-2);
	margin-top: var(--ati-space-4);
}

.ati-formula-chip {
	padding: var(--ati-space-1) var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-surface-container);
	font-family: var(--ati-font-mono);
	font-size: var(--ati-text-caption);
	font-weight: 600;
}

.ati-formula-chip--safe {
	border-color: var(--ati-color-success);
	background: rgba(16, 185, 129, 0.08);
	color: #0b7a56;
}

.ati-article-figure {
	margin: 0;
}

.ati-article-figure__media {
	aspect-ratio: 16 / 9;
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
	overflow: hidden;
	background: var(--ati-color-surface-container);
}

.ati-article-figure__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ati-article-figure__caption {
	margin-top: var(--ati-space-2);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
	text-align: center;
}

/* Two-column editorial layout (desktop: TOC left, article right) */
.ati-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"header"
		"figure"
		"toc"
		"content"
		"after";
	gap: var(--ati-space-6);
	padding-block: var(--ati-space-8) var(--ati-space-6);
}

.ati-article-hero {
	grid-area: header;
}

.ati-article-figure {
	grid-area: figure;
}

.ati-article__content {
	grid-area: content;
	min-width: 0;
	max-width: none;
	padding-block: 0;
}

.ati-article__after-content {
	grid-area: after;
}

/*
 * Bottom-of-article spacing.
 *
 * The related-articles (.ati-related) and related-products (.ati-related-products)
 * sections are consecutive .ati-section blocks; each one contributes its own
 * 64px block padding, so their contents sat 128px apart at the bottom of the
 * post. Tighten the rhythm to 24px per section (48px between sections) and scope
 * it to the single post only, so .ati-section and other pages are untouched.
 */
.ati-single-post .ati-related,
.ati-single-post .ati-related-products {
	padding-block: var(--ati-space-6);
}

.ati-article__sidebar {
	grid-area: toc;
}

.ati-post-toc {
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface-container);
}

.ati-post-toc__title {
	display: flex;
	align-items: center;
	gap: var(--ati-space-2);
	margin: 0 0 var(--ati-space-3);
	font-weight: 600;
}

.ati-post-toc__title .ati-icon {
	color: var(--ati-color-primary);
}

.ati-post-toc__list {
	display: grid;
	gap: var(--ati-space-2);
}

.ati-post-toc__list a {
	color: var(--ati-color-text);
	font-size: var(--ati-text-caption);
}

.ati-post-toc__list a:hover {
	color: var(--ati-color-primary);
}

@media (min-width: 1024px) {
	.ati-article__layout {
		/* RTL: the first area column renders on the right, so `toc` lands left. */
		grid-template-columns: minmax(0, 1fr) 300px;
		grid-template-areas:
			"header  toc"
			"figure  toc"
			"content toc"
			"after   toc";
		column-gap: var(--ati-space-8);
		align-items: start;
	}

	.ati-article__sidebar {
		position: sticky;
		top: calc(var(--ati-header-height, 64px) + var(--ati-space-4));
	}
}

/* Article prose blocks (content components) */
.ati-article__content h2 {
	padding-top: var(--ati-space-4);
}

.ati-article__content :where(h2, h3) {
	scroll-margin-top: 96px;
}

.ati-compare {
	display: grid;
	gap: var(--ati-space-3);
	margin: var(--ati-space-6) 0;
}

.ati-compare__card {
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
}

.ati-compare__card--accent {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-primary-soft);
}

.ati-compare__label {
	display: inline-block;
	margin-bottom: var(--ati-space-2);
	padding: var(--ati-space-1) var(--ati-space-2);
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-surface-container);
	font-family: var(--ati-font-mono);
	font-size: var(--ati-text-caption);
	font-weight: 600;
}

.ati-compare__card--accent .ati-compare__label {
	background: var(--ati-color-primary);
	color: var(--ati-color-on-primary);
}

.ati-compare__title {
	margin: 0 0 var(--ati-space-2);
	font-weight: 700;
}

.ati-compare__list {
	display: grid;
	gap: var(--ati-space-1);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-compare__list li {
	display: flex;
	gap: var(--ati-space-2);
}

.ati-compare__list li::before {
	content: "—";
	color: var(--ati-color-primary);
}

.ati-formula-grid {
	display: grid;
	gap: var(--ati-space-3);
	margin: var(--ati-space-6) 0;
}

.ati-formula-card {
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
}

.ati-formula-card__title {
	margin: 0 0 var(--ati-space-1);
	font-weight: 700;
}

.ati-formula-card__note {
	margin: 0 0 var(--ati-space-3);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-formula-card__values {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ati-space-2);
	margin-bottom: var(--ati-space-2);
}

.ati-formula-card__value {
	text-align: center;
	padding: var(--ati-space-2);
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-surface-container);
	font-family: var(--ati-font-mono);
	font-weight: 600;
}

.ati-formula-card__tac {
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

.ati-dos {
	display: grid;
	gap: var(--ati-space-3);
	margin: var(--ati-space-6) 0;
}

.ati-dos__item {
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
	border-inline-start-width: 4px;
}

.ati-dos__item--do {
	border-inline-start-color: var(--ati-color-success);
}

.ati-dos__item--dont {
	border-inline-start-color: var(--ati-color-error);
}

.ati-dos__title {
	margin: 0 0 var(--ati-space-1);
	font-weight: 700;
}

.ati-steps {
	display: grid;
	gap: var(--ati-space-3);
	margin: var(--ati-space-6) 0;
	counter-reset: ati-step;
}

.ati-step {
	display: flex;
	gap: var(--ati-space-3);
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
}

.ati-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: var(--ati-radius-full);
	background: var(--ati-color-primary);
	color: var(--ati-color-on-primary);
	font-weight: 700;
}

.ati-step__title {
	margin: 0 0 var(--ati-space-1);
	font-weight: 600;
}

.ati-download-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ati-space-3);
	margin: var(--ati-space-6) 0;
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface-container);
}

.ati-download-card__title {
	margin: 0 0 var(--ati-space-1);
	font-weight: 700;
}

.ati-download-card__text {
	margin: 0;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

/* Author box */
.ati-article-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ati-space-4);
	margin-block: var(--ati-space-6);
	padding: var(--ati-space-6);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
	background: var(--ati-color-surface-container);
}

.ati-article-author__body {
	flex: 1;
	min-width: 220px;
}

.ati-article-author__name {
	margin: 0;
	font-weight: 700;
}

.ati-article-author__role {
	margin: 0 0 var(--ati-space-2);
	font-size: var(--ati-text-caption);
	color: var(--ati-color-primary);
}

.ati-article-author__bio {
	margin: 0;
	font-size: var(--ati-text-caption);
	color: var(--ati-color-text-muted);
}

/* Feedback */
.ati-feedback {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ati-space-3);
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
}

.ati-feedback__question {
	margin: 0;
	font-weight: 600;
}

.ati-feedback__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-2);
}

.ati-feedback__button {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-2);
	min-height: 44px;
	padding: 0 var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	color: var(--ati-color-text);
	cursor: pointer;
}

.ati-feedback__button:hover {
	border-color: var(--ati-color-primary);
	color: var(--ati-color-primary);
}

.ati-feedback__button[aria-pressed="true"],
.ati-feedback__button.is-selected {
	border-color: var(--ati-color-primary);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary-hover);
	box-shadow: inset 0 0 0 1px var(--ati-color-primary);
}

.ati-feedback__button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.ati-feedback__status {
	flex: 0 0 100%;
	margin: 0;
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-caption);
}

.ati-feedback__status:empty {
	display: none;
}

.ati-feedback__count {
	color: var(--ati-color-text-muted);
}

/* Keywords */
.ati-article-keywords {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ati-space-2);
	margin-top: var(--ati-space-4);
}

.ati-article-keywords__label {
	font-size: var(--ati-text-caption);
	font-weight: 600;
	color: var(--ati-color-text-muted);
}

@media (min-width: 768px) {
	.ati-compare,
	.ati-formula-grid,
	.ati-dos {
		grid-template-columns: repeat(2, 1fr);
	}
}