/*
 * dbi services · Neve Child Theme
 * assets/css/cta.css — "Talk to an Expert" CTA, shared by the homepage
 * grid cell (inc/cta-interrupt.php, template-parts/cta-interrupt.php)
 * and the single-post CTAs (Neve Pro Custom Layouts created by
 * .agent/docs/cta/apply-post-cta.php: the card after the article on
 * neve_after_content, the compact strip inside the article after N
 * top-level blocks — enhancements #39, owner 2026-09-14).
 *
 * Moved out of front-page.css on 2026-09-14 so the same rules serve
 * both pages; consumes .dbi-scope tokens only (tokens.css).
 *
 * @package dbi-neve-child
 */

/* ════════════════════════════════
   CTA CARD
   ════════════════════════════════ */
.dbi-cta-cell {
	grid-column: 1 / -1;
	list-style: none;
}
.dbi-post-cta {
	margin: 40px 0 8px;
}

.dbi-cta-interrupt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	background: var( --dark );
	border-radius: 16px;
	padding: clamp( 40px, 6vw, 64px ) clamp( 28px, 5vw, 56px );
	position: relative;
	overflow: hidden;
}
.dbi-post-cta .dbi-cta-interrupt {
	padding: clamp( 32px, 5vw, 48px ) clamp( 24px, 4vw, 44px );
}
.dbi-cta-interrupt::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient( ellipse at 80% 50%, rgba( 0, 170, 160, .13 ) 0%, transparent 60% );
	pointer-events: none;
}
.dbi-cta-content {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 240px;
}
.dbi-cta-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var( --f-body );
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --teal );
	margin: 0 0 14px;
}
.dbi-cta-label::before {
	content: "";
	width: 20px;
	height: 1px;
	background: var( --teal );
	flex-shrink: 0;
}
.dbi-cta-h2 {
	font-family: var( --f-display );
	font-size: clamp( 1.55rem, 3.5vw, 2.4rem );
	font-weight: 400;
	color: var( --text-inverse );
	line-height: 1.10;
	letter-spacing: -.01em;
	margin: 0 0 12px;
}
.dbi-post-cta .dbi-cta-h2 {
	font-size: clamp( 1.45rem, 3vw, 2rem );
}
.dbi-cta-h2 em {
	font-style: italic;
	color: var( --teal );
}
.dbi-cta-body {
	font-family: var( --f-body );
	font-size: .95rem;
	color: rgba( 240, 239, 235, .72 );
	max-width: 46ch;
	line-height: 1.70;
	margin: 0;
}
.dbi-cta-action {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}
.dbi-btn-expert {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 30px;
	background: var( --teal-dark );
	color: #fff !important;
	border-radius: 999px;
	font-family: var( --f-body );
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none !important;
	white-space: nowrap;
	transition:
		background var( --t ) var( --ease ),
		box-shadow var( --t ) var( --ease ),
		transform 150ms;
}
.dbi-btn-expert:hover {
	background: var( --teal-deep );
	box-shadow: 0 0 0 5px rgba( 0, 170, 160, .18 );
}
.dbi-btn-expert:active { transform: scale( .98 ); }
.dbi-btn-expert svg {
	width: 15px;
	height: 15px;
	transition: transform var( --t ) var( --ease );
	flex-shrink: 0;
}
.dbi-btn-expert:hover svg { transform: translateX( 4px ); }

@media ( max-width: 600px ) {
	.dbi-cta-interrupt {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}

/* ════════════════════════════════
   IN-ARTICLE STRIP (single posts)
   One quiet line between two blocks of the article — surface, hairline,
   small button; never a second dark card on the same screen.
   ════════════════════════════════ */
.dbi-cta-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 36px 0;
	padding: 18px 22px;
	background: var( --surface );
	border: 1px solid var( --border );
	border-radius: 12px;
	font-family: var( --f-body );
}
.dbi-cta-strip-text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var( --text );
}
.dbi-cta-strip-text strong {
	font-weight: 600;
}
.dbi-btn-expert--sm {
	padding: 10px 18px;
	font-size: .82rem;
}