/**
 * Real cost of AI content tools post styles.
 *
 * @package AgenticWP
 */

.ai-cost-post .custom-post-hero {
	padding: 112px 0 72px;
	background:
		linear-gradient(135deg, rgba(214, 166, 64, 0.16), rgba(34, 197, 94, 0.08)),
		linear-gradient(135deg, #0f172a 0%, #111827 58%, #142018 100%);
}

.ai-cost-post .custom-post-hero .container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
	gap: 56px;
	align-items: center;
}

.ai-cost-post .custom-post-hero-content {
	max-width: 720px;
	margin: 0;
	text-align: left;
}

.ai-cost-post .custom-post-hero-title {
	max-width: 12ch;
}

.ai-cost-post .custom-post-hero-excerpt {
	max-width: 660px;
}

.ai-cost-post .custom-post-hero-meta {
	justify-content: flex-start;
}

.ai-cost-post .custom-post-hero-image {
	max-width: none;
	margin: 0;
}

.ai-cost-post .custom-post-hero-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid rgba(148, 163, 184, 0.25);
	border-radius: 18px;
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.ai-cost-post .toc--sticky {
	margin-top: 32px;
}

.ai-cost-post .cost-verdict,
.ai-cost-post .post-callout,
.ai-cost-post .decision-checklist {
	margin: 32px 0;
	padding: 30px;
	border: 1px solid rgba(214, 166, 64, 0.35);
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(214, 166, 64, 0.12), rgba(17, 24, 39, 0.82));
}

.ai-cost-post .cost-verdict p {
	margin-top: 0;
	color: var(--ink);
	font-size: 19px;
	line-height: 1.7;
}

.ai-cost-post .cost-verdict ul,
.ai-cost-post .decision-checklist ul {
	margin: 18px 0 0;
	padding-left: 22px;
	color: var(--muted);
}

.ai-cost-post .pricing-note {
	padding: 16px 18px;
	border-left: 3px solid var(--accent);
	background: rgba(34, 197, 94, 0.08);
	color: var(--ink);
	font-size: 15px;
}

.ai-cost-post .comparison-table-wrapper {
	overflow: hidden;
	margin: 34px 0;
	border: 1px solid rgba(148, 163, 184, 0.22);
	border-radius: 16px;
	background: rgba(15, 23, 42, 0.72);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}

.ai-cost-post .comparison-table {
	width: 100%;
	min-width: 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 15px;
	line-height: 1.5;
}

.ai-cost-post .comparison-table th,
.ai-cost-post .comparison-table td {
	box-sizing: border-box;
	padding: 16px 18px;
	text-align: left;
	border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.ai-cost-post .comparison-table th {
	background: linear-gradient(135deg, #172033, #15251c);
	color: var(--ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: normal;
}

.ai-cost-post .comparison-table th:nth-child(1),
.ai-cost-post .comparison-table td:nth-child(1) {
	width: 18%;
}

.ai-cost-post .comparison-table th:nth-child(2),
.ai-cost-post .comparison-table td:nth-child(2) {
	width: 28%;
}

.ai-cost-post .comparison-table th:nth-child(3),
.ai-cost-post .comparison-table td:nth-child(3) {
	width: 36%;
}

.ai-cost-post .comparison-table th:nth-child(4),
.ai-cost-post .comparison-table td:nth-child(4) {
	width: 18%;
}

.ai-cost-post .comparison-table tbody tr:nth-child(even) {
	background: rgba(148, 163, 184, 0.04);
}

.ai-cost-post .comparison-table tbody tr:last-child td {
	border-bottom: 0;
}

.ai-cost-post .cost-table td {
	vertical-align: top;
}

.ai-cost-post .cost-table td:first-child {
	color: var(--ink);
	font-weight: 700;
}

.ai-cost-post .cost-table a {
	color: var(--accent);
	font-weight: 700;
	text-decoration: none;
}

.ai-cost-post .cost-table a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.scenario-grid,
.native-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 34px 0;
}

.scenario-card,
.native-card,
.stack-win-item,
.faq-item {
	padding: 26px;
	border: 1px solid rgba(148, 163, 184, 0.18);
	border-radius: 16px;
	background: #111827;
}

.scenario-kicker {
	display: block;
	margin-bottom: 14px;
	color: #d6a640;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
}

.scenario-card h3,
.native-card h3,
.stack-win-item h3,
.faq-item h3,
.decision-checklist h3 {
	margin: 0 0 12px;
	color: var(--ink);
	font-size: 20px;
	line-height: 1.25;
}

.scenario-card p,
.native-card p,
.stack-win-item p,
.faq-item p {
	margin: 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.65;
}

.stack-win-list,
.faq-list {
	display: grid;
	gap: 18px;
	margin: 32px 0;
}

.post-section--cta .post-cta-card {
	margin-top: 34px;
}

@media (max-width: 940px) {
	.ai-cost-post .custom-post-hero .container,
	.scenario-grid,
	.native-grid {
		grid-template-columns: 1fr;
	}

	.ai-cost-post .custom-post-hero-title {
		max-width: 720px;
	}
}

@media (max-width: 680px) {
	.ai-cost-post .custom-post-hero {
		padding: 82px 0 52px;
	}

	.ai-cost-post .cost-verdict,
	.ai-cost-post .post-callout,
	.ai-cost-post .decision-checklist,
	.scenario-card,
	.native-card,
	.stack-win-item,
	.faq-item {
		padding: 22px;
	}

	.ai-cost-post .comparison-table-wrapper {
		overflow: visible;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.ai-cost-post .comparison-table,
	.ai-cost-post .comparison-table thead,
	.ai-cost-post .comparison-table tbody,
	.ai-cost-post .comparison-table tr,
	.ai-cost-post .comparison-table th,
	.ai-cost-post .comparison-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.ai-cost-post .comparison-table thead {
		display: none;
	}

	.ai-cost-post .comparison-table tr {
		margin-bottom: 16px;
		border: 1px solid rgba(148, 163, 184, 0.2);
		border-radius: 14px;
		background: #111827;
		overflow: hidden;
	}

	.ai-cost-post .comparison-table td {
		display: grid;
		grid-template-columns: minmax(112px, 38%) minmax(0, 1fr);
		gap: 14px;
		padding: 14px 16px;
		border-bottom: 1px solid rgba(148, 163, 184, 0.14);
	}

	.ai-cost-post .comparison-table td::before {
		content: attr(data-label);
		color: #d6a640;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.4;
		text-transform: uppercase;
	}

	.ai-cost-post .comparison-table td:last-child {
		border-bottom: 0;
	}
}