/* ═══════════════════════════════════════════════
   ARTICLE CTA
   Inline call-to-action for inside post / case-study
   bodies. Brand-color background selector + optional
   fractal-noise grain overlay (same system as the
   call-to-action block). Block-scoped.
   ═══════════════════════════════════════════════ */

.article-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 44px auto;
	border-radius: 16px;
	corner-shape: squircle;
}
.article-cta__inner {
	position: relative;
	z-index: 1;
	padding: 32px 32px 34px;
}

.article-cta__eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.article-cta__heading {
	margin: 0 0 10px;
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.article-cta__body {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
}
.article-cta__body:last-child { margin-bottom: 0; }

.article-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 10px;
	corner-shape: squircle;
	text-decoration: none;
	transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.2s ease;
}
.article-cta__btn:active { transform: scale(0.97); }

/* ── Background variants ─────────────────────────────
   Each variant overrides text/eyebrow/button for
   contrast. Mirrors the call-to-action block. */

/* Surface — adaptive light/dark, the default. */
.article-cta--bg-surface {
	background: var(--surface);
	border: 1px solid var(--border);
}
.article-cta--bg-surface .article-cta__eyebrow { color: var(--primary); }
.article-cta--bg-surface .article-cta__heading { color: var(--fg); }
.article-cta--bg-surface .article-cta__body { color: var(--fg-secondary); }
.article-cta--bg-surface .article-cta__btn { background: var(--primary); color: var(--dark-brown); }
.article-cta--bg-surface .article-cta__btn:hover {
	background: var(--secondary);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 32%, transparent);
}

/* Primary orange. */
.article-cta--bg-primary { background: var(--primary); }
.article-cta--bg-primary .article-cta__eyebrow { color: rgba(21, 17, 13, 0.7); }
.article-cta--bg-primary .article-cta__heading { color: var(--dark-brown); }
.article-cta--bg-primary .article-cta__body { color: rgba(21, 17, 13, 0.8); }
.article-cta--bg-primary .article-cta__btn { background: var(--dark-brown); color: var(--warm-light); }
.article-cta--bg-primary .article-cta__btn:hover { background: var(--med-brown); }

/* Deep orange. */
.article-cta--bg-secondary { background: var(--secondary); }
.article-cta--bg-secondary .article-cta__eyebrow { color: rgba(255, 255, 255, 0.8); }
.article-cta--bg-secondary .article-cta__heading,
.article-cta--bg-secondary .article-cta__body { color: #fff; }
.article-cta--bg-secondary .article-cta__btn { background: var(--dark-brown); color: var(--warm-light); }
.article-cta--bg-secondary .article-cta__btn:hover { background: var(--med-brown); }

/* Light orange. */
.article-cta--bg-accent { background: var(--accent); }
.article-cta--bg-accent .article-cta__eyebrow { color: rgba(21, 17, 13, 0.62); }
.article-cta--bg-accent .article-cta__heading { color: var(--dark-brown); }
.article-cta--bg-accent .article-cta__body { color: rgba(21, 17, 13, 0.72); }
.article-cta--bg-accent .article-cta__btn { background: var(--dark-brown); color: var(--warm-light); }
.article-cta--bg-accent .article-cta__btn:hover { background: var(--med-brown); }

/* Dark brown. */
.article-cta--bg-dark-brown { background: var(--dark-brown); }
.article-cta--bg-dark-brown .article-cta__eyebrow { color: var(--primary); }
.article-cta--bg-dark-brown .article-cta__heading { color: var(--warm-light); }
.article-cta--bg-dark-brown .article-cta__body { color: rgba(242, 237, 232, 0.72); }
.article-cta--bg-dark-brown .article-cta__btn { background: var(--primary); color: var(--dark-brown); }
.article-cta--bg-dark-brown .article-cta__btn:hover { background: var(--secondary); }

/* Medium brown. */
.article-cta--bg-med-brown { background: var(--med-brown); }
.article-cta--bg-med-brown .article-cta__eyebrow { color: var(--primary); }
.article-cta--bg-med-brown .article-cta__heading { color: var(--warm-light); }
.article-cta--bg-med-brown .article-cta__body { color: rgba(242, 237, 232, 0.72); }
.article-cta--bg-med-brown .article-cta__btn { background: var(--primary); color: var(--dark-brown); }
.article-cta--bg-med-brown .article-cta__btn:hover { background: var(--secondary); }

/* Warm cream. */
.article-cta--bg-warm-light {
	background: var(--warm-light);
	border: 1px solid var(--border);
}
.article-cta--bg-warm-light .article-cta__eyebrow { color: var(--primary); }
.article-cta--bg-warm-light .article-cta__heading { color: var(--dark-brown); }
.article-cta--bg-warm-light .article-cta__body { color: rgba(21, 17, 13, 0.72); }
.article-cta--bg-warm-light .article-cta__btn { background: var(--primary); color: var(--dark-brown); }
.article-cta--bg-warm-light .article-cta__btn:hover { background: var(--secondary); }

/* Saturated gradients — white text, white button so it pops. */
.article-cta--bg-blue   { background: var(--gradient-blue); }
.article-cta--bg-green  { background: var(--gradient-green); }
.article-cta--bg-purple { background: var(--gradient-purple); }
.article-cta--bg-red    { background: var(--gradient-red); }
.article-cta--bg-blue,
.article-cta--bg-green,
.article-cta--bg-purple,
.article-cta--bg-red {
	color: #fff;
}
.article-cta--bg-blue .article-cta__eyebrow,
.article-cta--bg-green .article-cta__eyebrow,
.article-cta--bg-purple .article-cta__eyebrow,
.article-cta--bg-red .article-cta__eyebrow {
	color: rgba(255, 255, 255, 0.78);
}
.article-cta--bg-blue .article-cta__heading,
.article-cta--bg-green .article-cta__heading,
.article-cta--bg-purple .article-cta__heading,
.article-cta--bg-red .article-cta__heading { color: #fff; }
.article-cta--bg-blue .article-cta__body,
.article-cta--bg-green .article-cta__body,
.article-cta--bg-purple .article-cta__body,
.article-cta--bg-red .article-cta__body { color: rgba(255, 255, 255, 0.86); }
.article-cta--bg-blue .article-cta__btn,
.article-cta--bg-green .article-cta__btn,
.article-cta--bg-purple .article-cta__btn,
.article-cta--bg-red .article-cta__btn {
	background: #fff;
	color: var(--dark-brown);
}
.article-cta--bg-blue .article-cta__btn:hover,
.article-cta--bg-green .article-cta__btn:hover,
.article-cta--bg-purple .article-cta__btn:hover,
.article-cta--bg-red .article-cta__btn:hover {
	background: var(--warm-light);
}

/* ── Grain noise overlay ─────────────────────────────
   Same fractalNoise SVG as the global body::after and
   the call-to-action block. Sits behind .article-cta__inner
   (z-index:1) and is clipped by overflow:hidden + the
   rounded corners. Opacity defaults to 0.06; PHP overrides
   via the --article-cta-noise-opacity inline custom prop. */
.article-cta--noise::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: var(--article-cta-noise-opacity, 0.06);
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	z-index: 0;
}

@media (max-width: 600px) {
	.article-cta__inner { padding: 24px 22px 26px; }
}