/* Addon card — image-style card with a gradient cover at top, then the body
   (name + tagline + pitch) and a "Learn more →" CTA pinned to the bottom. */

.dt-addon-card {
	display: flex;
	flex-direction: column;
	background: var(--dt-surface);
	border: 1px solid var(--dt-border);
	border-radius: var(--radius-lg);
	color: var(--dt-ink);
	text-decoration: none;
	height: 100%;
	overflow: hidden;
	transition: border-color var(--duration-2) var(--ease-out),
	            box-shadow var(--duration-2) var(--ease-out),
	            transform var(--duration-2) var(--ease-out);
}

.dt-addon-card:hover {
	border-color: color-mix(in srgb, var(--dt-primary) 30%, var(--dt-border));
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 16px 36px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
	color: var(--dt-ink);
	text-decoration: none;
}

/* ---------- Cover (image-style) ---------- */

.dt-addon-card__cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.dt-addon-card__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 80% at 20% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 60%),
		radial-gradient(50% 60% at 100% 100%, rgba(0, 0, 0, 0.20) 0%, transparent 70%);
	pointer-events: none;
}

.dt-addon-card__cover-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.18);
	color: var(--dt-on-primary);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 1;
	transition: transform var(--duration-2) var(--ease-out);
}

.dt-addon-card:hover .dt-addon-card__cover-icon { transform: scale(1.06); }

/* Cover gradient variants — distinct per tone so the row reads as 3 unique products. */

.dt-addon-card__cover--primary {
	background: linear-gradient(135deg,
		var(--dt-primary) 0%,
		var(--dt-primary-700) 100%);
}

.dt-addon-card__cover--warn {
	background: linear-gradient(135deg,
		var(--dt-warn) 0%,
		color-mix(in srgb, var(--dt-warn) 78%, var(--dt-ink)) 100%);
}

.dt-addon-card__cover--success {
	background: linear-gradient(135deg,
		var(--dt-success) 0%,
		color-mix(in srgb, var(--dt-success) 78%, var(--dt-ink)) 100%);
}

.dt-addon-card__cover--instagram {
	background: var(--brand-instagram);
}

.dt-addon-card__cover--google {
	background: linear-gradient(135deg,
		var(--brand-google) 0%,
		color-mix(in srgb, var(--brand-google) 60%, var(--dt-surface-dark)) 100%);
}

/* ---------- Body ---------- */

.dt-addon-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-7);
	flex: 1;
}

.dt-addon-card__name {
	margin: 0;
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--dt-ink);
}

.dt-addon-card__tagline {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
	color: var(--dt-ink);
	font-weight: var(--fw-medium);
}

.dt-addon-card__pitch {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--dt-ink-soft);
}

/* ---------- CTA — pinned to bottom of body ---------- */

.dt-addon-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-4);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--dt-primary);
	align-self: flex-start;
	transition: gap var(--duration-2) var(--ease-out);
}

.dt-addon-card:hover .dt-addon-card__cta { gap: var(--space-3); }

.dt-addon-card__cta-label { line-height: 1; }

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
	.dt-addon-card__body { padding: var(--space-6); }
	.dt-addon-card__cover-icon { width: 60px; height: 60px; }
	.dt-addon-card__name { font-size: var(--fs-xl); }
}