/* ==========================================================================
   Post Product CTA — 投稿本文末尾の商品プラグイン購入導線
   ==========================================================================
   通常の投稿（single post）で「紹介した商品プラグイン」が選択されている
   ときに the_content 末尾へ差し込むCTA。販売LPのヒーロー（.swch-lp-hero）と
   同じ見た目に揃える: navy→indigo グラデ + 方眼オーバーレイ + cyan の
   eyebrow + 白の見出し/リード + グラデーションボタン。本文（.l-mainContent）
   内では site-chrome が --swch-tech-violet を navy に上書きするため、
   ヒーローと同じ発色にするよう配色は直値で指定して自己完結させる。
   ========================================================================== */

.swch-post-cta {
	position: relative;
	margin: 48px 0 8px;
	padding: 48px 32px 52px;
	border-radius: 16px;
	background: linear-gradient(135deg, #0b1020 0%, #1e1b4b 55%, #4338ca 120%);
	color: #fff;
	overflow: hidden;
	text-align: center;
}

/* 方眼オーバーレイ（ヒーローと同じ。中央上から放射状にフェード） */
.swch-post-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 35%, transparent 75%);
	mask-image: radial-gradient(ellipse at 50% 0%, #000 35%, transparent 75%);
	pointer-events: none;
}

.swch-post-cta-inner {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
}

.swch-post-cta-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--swch-tech-cyan, #22d3ee);
	margin: 0 0 14px;
}

/* タイトルは <p>（見出しにしない）。SWELL は .post_content の見出し
   （h1〜h6）に色・余白・-webkit-text-fill-color・疑似要素の装飾を高詳細度で
   当てるため、見出し要素にするとヒーロー調へ上書きしづらい。段落なら
   タグライン（.swch-post-cta-tagline）同様に素直に効く。 */
.swch-post-cta .swch-post-cta-title {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 14px;
	color: #fff;
}

.swch-post-cta-tagline {
	font-size: 1rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.82);
	max-width: 560px;
	margin: 0 auto 26px;
}

.swch-post-cta-ctas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
}

.swch-post-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 28px;
	border-radius: 10px;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	color: #fff !important;
	/* 販売LPの主ボタン（.swch-btn-primary）と同じ violet→fuchsia。 */
	background: linear-gradient(135deg, #4338ca 0%, #db2777 100%);
	box-shadow: 0 12px 28px -10px rgba(219, 39, 119, 0.5);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.swch-post-cta-btn:hover {
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 16px 32px -10px rgba(219, 39, 119, 0.6);
}

.swch-post-cta-btn svg {
	display: block;
	transition: transform 0.2s ease;
}

.swch-post-cta-btn:hover svg {
	transform: translateX(3px);
}

@media (max-width: 600px) {
	.swch-post-cta {
		padding: 36px 20px 40px;
	}

	.swch-post-cta-btn {
		width: 100%;
		justify-content: center;
	}
}