/**
 * The AI Sameness Problem - Post-Specific Styles
 *
 * Custom styles unique to this thought leadership blog post.
 * Shared styles (hero, sections, CTA, comparison blocks, callout blocks,
 * insight blocks, key takeaways) are in shared-post-components.css.
 *
 * Components included:
 * - Code example blocks (for prompt/instruction display)
 * - Comparison example text (prose in before/after blocks)
 * - Callout block list (list variant inside callout blocks)
 *
 * @package AgenticWP
 */

/* ==========================================================================
   Code Example Blocks
   ========================================================================== */

.code-example {
	margin: 32px 0;
	border-radius: 12px;
	overflow: hidden;
}

.code-example pre {
	margin: 0;
	padding: 24px;
	background: #1e293b;
	overflow-x: auto;
}

.code-example code {
	display: block;
	color: #e2e8f0;
	font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
	background: transparent;
	padding: 0;
	border-radius: 0;
}

/* ==========================================================================
   Comparison Example Text (prose inside comparison blocks)
   ========================================================================== */

.comparison-example-text {
	font-size: 15px;
	font-style: italic;
	line-height: 1.65;
	color: var(--ink);
	margin: 0;
}

/* ==========================================================================
   Callout Block List
   ========================================================================== */

.callout-block-list {
	margin: 12px 0 0;
	padding-left: 20px;
}

.callout-block-list li {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink);
	margin-bottom: 8px;
}

.callout-block-list li:last-child {
	margin-bottom: 0;
}

.callout-block-list li::marker {
	color: #f59e0b;
}

/* ==========================================================================
   Responsive: Mobile (max-width: 640px)
   ========================================================================== */

@media (max-width: 640px) {
	.code-example pre {
		padding: 16px;
		border-radius: 8px;
	}

	.code-example code {
		font-size: 13px;
	}
}