/* Blog, post único, cases e comentários — classes do hifi com prefixo amk-.
   Depende de theme.css/sections.css (tokens e utilitários já existentes). */

/* ==========================================================================
   1. Blog: hero, filtro de categorias e lista
   ========================================================================== */
.amk-blog-hero h1 {
	max-width: 22ch;
}

.amk-blog-hero .amk-lead {
	margin-top: 1rem;
}

.amk-cats {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.5rem;
}

.amk-cats a {
	padding: .4rem .75rem;
	border: 1px solid var(--amk-line);
	border-radius: 999px;
	color: var(--amk-ink-2);
	font-family: var(--amk-font-mono);
	font-size: var(--amk-fs-xs);
	font-weight: 500;
	text-decoration: none;
}

.amk-cats a:hover,
.amk-cats a.on {
	background: var(--amk-ink);
	border-color: var(--amk-ink);
	color: var(--amk-bg);
	text-decoration: none;
}

.amk-blog-list {
	padding-block: calc(var(--amk-section) * .6) var(--amk-section);
}

.amk-postlist {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.amk-postlist__more {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

/* ==========================================================================
   2. Post único: hero, grade 4/8, sumário e prosa
   ========================================================================== */
.amk-post-hero__title {
	font-size: var(--amk-fs-h2);
}

.amk-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.5rem 0 0;
	color: var(--amk-muted);
	font-family: var(--amk-font-mono);
	font-size: var(--amk-fs-xs);
	font-weight: 400;
}

.amk-post-body {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	padding-bottom: var(--amk-section);
}

.amk-toc {
	position: sticky;
	top: 96px;
	font-size: var(--amk-fs-sm);
}

.amk-toc h5 {
	margin: 0 0 .75rem;
	color: var(--amk-muted);
	font: 500 var(--amk-fs-xs) var(--amk-font-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.amk-toc ul {
	display: grid;
	gap: .4rem;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--amk-line);
	list-style: none;
}

.amk-toc a {
	display: block;
	padding-left: .9rem;
	color: var(--amk-ink-2);
	text-decoration: none;
}

.amk-toc a:hover {
	color: var(--amk-ink);
}

.amk-share {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.5rem;
}

.amk-share button.amk-chip {
	cursor: pointer;
}

/* Prosa do artigo (`.article` do hifi) */
.amk-article {
	font-size: var(--amk-fs-base);
}

.amk-article h2 {
	margin: 2.5rem 0 .75rem;
	font-size: var(--amk-fs-h3);
}

.amk-article h3 {
	margin: 1.75rem 0 .5rem;
	font: 600 var(--amk-fs-lg)/1.3 var(--amk-font-body);
	letter-spacing: 0;
}

.amk-article p {
	margin-block: 1rem;
	color: var(--amk-ink-2);
}

.amk-article ul,
.amk-article ol {
	padding-left: 1.25rem;
	color: var(--amk-ink-2);
}

.amk-article li {
	margin: .3rem 0;
}

.amk-article pre {
	padding: 1rem 1.2rem;
	overflow-x: auto;
	background: var(--amk-surface-2);
	border: 1px solid var(--amk-line);
	border-radius: var(--amk-r-sm);
	color: var(--amk-ink);
	font: 400 var(--amk-fs-sm)/1.5 var(--amk-font-mono);
}

.amk-article .callout,
.amk-article blockquote,
.amk-article .wp-block-quote {
	margin-block: 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--amk-surface-2);
	border-left: 2px solid var(--amk-cyan);
	border-radius: 0 var(--amk-r-sm) var(--amk-r-sm) 0;
}

.amk-article .callout p,
.amk-article blockquote p {
	margin: 0;
}

.amk-article img {
	border-radius: var(--amk-r-md);
}

.amk-post-cta__posts {
	display: grid;
	gap: 1rem;
}

/* ==========================================================================
   3. Case único
   ========================================================================== */
.amk-case-hero .amk-lead {
	margin-top: 1.25rem;
}

.amk-case-hero__grid {
	align-items: end;
}

.amk-case-media {
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.amk-case-media .amk-metrics {
	margin-top: .85rem;
}

/* Conteúdo do case: cada h2 abre uma linha 4/8 (coluna 1 = título). */
.amk-case-body {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	column-gap: clamp(1.5rem, 4vw, 3rem);
	row-gap: 1rem;
	align-items: start;
	padding-bottom: var(--amk-section);
}

.amk-case-body > h2 {
	grid-column: 1;
	margin: .25rem 0 0;
	font-size: var(--amk-fs-h3);
}

.amk-case-body > :not(h2) {
	grid-column: 2;
	margin-block: 0 1rem;
	color: var(--amk-ink-2);
}

/* Números: "0 → 10" não pode quebrar; no hero do case, escala menor. */
.amk-numtile b {
	white-space: nowrap;
}

.amk-case-hero .amk-numtile b {
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

/* "Outros cases": lista de links dentro do card do CTA. */
.amk-others {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.amk-others a {
	color: var(--amk-ink);
	text-decoration: none;
}

.amk-others a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   4. Arquivo de cases
   ========================================================================== */
.amk-cases-archive {
	padding-block: clamp(2.5rem, 7vw, 5rem);
}

.amk-cases-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.amk-case-card {
	display: grid;
	gap: 1rem;
	align-content: start;
	color: inherit;
	text-decoration: none;
	transition: transform 150ms var(--amk-ease);
}

.amk-case-card:hover {
	color: inherit;
	text-decoration: none;
	transform: translateY(-2px);
}

.amk-cc-body {
	display: grid;
	gap: .5rem;
	align-content: start;
}

.amk-cc-body h3 {
	margin: 0;
	font-size: var(--amk-fs-h3);
}

/* ==========================================================================
   5. Newsletter (newsletter-card.php): copy 7 / formulário 5
   ========================================================================== */
.amk-newsletter {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.amk-newsletter__intro {
	display: grid;
	gap: .75rem;
	align-content: start;
}

.amk-newsletter h2 {
	margin: 0;
	font-size: var(--amk-fs-h2);
}

.amk-newsletter .amk-lead {
	margin: 0;
}

.amk-newsletter__form {
	display: grid;
	gap: 1rem;
	align-content: start;
}

/* ==========================================================================
   6. Comentários
   ========================================================================== */
.amk-comments {
	margin-top: clamp(2rem, 5vw, 3rem);
}

.amk-comments h2 {
	font-size: var(--amk-fs-h3);
}

.comment-list,
.comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list {
	display: grid;
	gap: 1rem;
}

.comment-list .children {
	margin-top: 1rem;
	padding-left: clamp(1rem, 3vw, 2rem);
}

.comment-body {
	padding: 1rem 1.25rem;
	background: var(--amk-surface-2);
	border-radius: var(--amk-r-sm);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-weight: 600;
}

.comment-author img {
	border-radius: 50%;
}

.comment-meta {
	margin: .25rem 0 .75rem;
	color: var(--amk-muted);
	font-size: var(--amk-fs-sm);
}

.comment-respond {
	margin-top: 1.5rem;
}

.comment-respond .comment-reply-title {
	font-size: var(--amk-fs-lg);
}

.comment-form {
	display: grid;
	gap: 1rem;
}

.comment-form label {
	display: block;
	margin-bottom: .35rem;
	color: var(--amk-ink);
	font-size: var(--amk-fs-sm);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: .7rem 1rem;
	background: var(--amk-surface);
	border: 1px solid var(--amk-line);
	border-radius: var(--amk-r-sm);
	color: var(--amk-ink);
	font: inherit;
}

.comment-form .submit {
	justify-self: start;
	padding: .8rem 1.6rem;
	background: var(--amk-cyan);
	border: 0;
	border-radius: var(--amk-r-sm);
	color: #131313;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ==========================================================================
   7. Responsivo
   ========================================================================== */
@media (max-width: 63.98em) {
	.amk-postlist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.amk-post-body,
	.amk-case-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.amk-case-body > h2,
	.amk-case-body > :not(h2) {
		grid-column: auto;
	}

	.amk-newsletter {
		grid-template-columns: minmax(0, 1fr);
	}

	.amk-toc {
		position: static;
		margin-bottom: 2rem;
	}
}

@media (max-width: 39.98em) {
	.amk-postlist,
	.amk-cases-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   8. Bloco de código (absorve o code-syntax-block)
   ========================================================================== */
pre.wp-block-code,
.wp-block-code {
	margin: 1.5rem 0;
	padding: 1rem 1.2rem;
	overflow-x: auto;
	background: var(--amk-surface-2);
	border: 1px solid var(--amk-line);
	border-radius: var(--amk-r-sm);
	color: var(--amk-ink);
	font-family: var(--amk-font-mono);
	font-size: var(--amk-fs-sm);
	line-height: 1.6;
	tab-size: 2;
	white-space: pre;
}

.wp-block-code code,
pre.wp-block-code code {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	white-space: pre;
}

/* ==========================================================================
   9. Calculadora de ROI (shortcode [ia_roi_calculator])
   ========================================================================== */
.amk-roi {
	display: grid;
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.amk-roi__fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.amk-roi__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.amk-roi__result {
	padding-top: 1rem;
	border-top: 1px solid var(--amk-line);
	color: var(--amk-ink);
	font-family: var(--amk-font-display);
	font-size: var(--amk-fs-h3);
	font-weight: 600;
	letter-spacing: -.01em;
}

@media (max-width: 39.98em) {
	.amk-roi__fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   10. Tabelas no conteúdo (scroll horizontal no mobile)
   ========================================================================== */
.amk-table {
	margin: 1.5rem 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.amk-article table,
.amk-article .amk-table table {
	width: max-content;
	min-width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: auto;
	font-size: var(--amk-fs-sm);
}

.amk-article th,
.amk-article td,
.amk-article .amk-table th,
.amk-article .amk-table td {
	min-width: 9rem;
	padding: .6rem .8rem;
	border: 1px solid var(--amk-line);
	text-align: left;
	vertical-align: top;
	word-break: normal;
	overflow-wrap: break-word;
}

.amk-article th,
.amk-article .amk-table th {
	white-space: nowrap;
	background: var(--amk-surface-2);
	color: var(--amk-ink);
	font-weight: 600;
}

/* Normaliza o destaque das colunas de cabeçalho (link/strong herdavam o ciano). */
.amk-article th a,
.amk-article th strong,
.amk-article th b {
	color: inherit;
}

.amk-article tbody tr:nth-child(even) td {
	background: color-mix(in srgb, var(--amk-surface-2) 55%, transparent);
}

.amk-article .amk-table thead,
.amk-article .amk-table tfoot {
	border-color: var(--amk-line);
}

.amk-article figcaption,
.amk-article .wp-block-table figcaption {
	margin-top: .5rem;
	color: var(--amk-muted);
	font-family: var(--amk-font-mono);
	font-size: var(--amk-fs-xs);
}