/* =========================================================================
   KeepSeal Neo — Image CTA banner. Styles: overlay | split | cover | clean.
   Light & dark, responsive, optional float animation.
   ========================================================================= */
.ksn-imgcta {
	--imgcta-h: 420px;
	--imgcta-radius: 24px;
	font-family: var(--ksn-font);
	position: relative;
	max-width: 1280px; margin: 0 auto;
	border-radius: var(--imgcta-radius);
	color: var(--ksn-ink);
}
.ksn-imgcta__media { position: relative; overflow: hidden; border-radius: var(--imgcta-radius); }
.ksn-imgcta__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ksn-imgcta__scrim { position: absolute; inset: 0; --imgcta-scrim: .45; background: linear-gradient(90deg, rgba(7,11,18,var(--imgcta-scrim)), rgba(7,11,18,calc(var(--imgcta-scrim) * .3))); }

.ksn-imgcta__content { display: flex; flex-direction: column; gap: 14px; }
.ksn-imgcta__eyebrow { font-weight: 800; font-size: 0.92rem; color: var(--ksn-accent); }
.ksn-imgcta__title { margin: 0; font-weight: 900; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.25; color: var(--ksn-ink); }
.ksn-imgcta__sub { margin: 0; color: var(--ksn-muted); line-height: 1.95; font-size: 1rem; max-width: 52ch; }

/* alignment */
.ksn-imgcta--ha-start  .ksn-imgcta__content { text-align: start; align-items: flex-start; }
.ksn-imgcta--ha-center .ksn-imgcta__content { text-align: center; align-items: center; }
.ksn-imgcta--ha-end    .ksn-imgcta__content { text-align: end; align-items: flex-end; }

/* button */
.ksn-imgcta__btn {
	display: inline-flex; align-items: center; gap: 9px; width: max-content;
	padding: 14px 26px; border-radius: 14px; text-decoration: none; cursor: pointer;
	font-weight: 800; font-size: 1rem; color: #fff;
	background: linear-gradient(120deg, var(--ksn-primary), var(--ksn-accent));
	box-shadow: 0 16px 30px -14px rgba(var(--ksn-primary-rgb), .6);
	transition: transform .2s ease, gap .2s ease, box-shadow .2s ease, background .2s ease;
}
.ksn-imgcta__btn:hover { transform: translateY(-2px); gap: 13px; box-shadow: 0 22px 42px -16px rgba(var(--ksn-accent-rgb), .7); }
[dir="ltr"] .ksn-imgcta__btn svg { transform: scaleX(-1); }
.ksn-imgcta--btn-solid .ksn-imgcta__btn { background: var(--ksn-primary); }
.ksn-imgcta--btn-outline .ksn-imgcta__btn { background: transparent; color: var(--ksn-primary); border: 2px solid currentColor; box-shadow: none; }
.ksn-imgcta--btn-glass .ksn-imgcta__btn { background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.3); box-shadow: none; }
.ksn-imgcta--btn-neon .ksn-imgcta__btn {
	background: rgba(var(--ksn-accent-rgb), .12); color: #fff; border: 1.5px solid rgba(var(--ksn-accent-rgb), .8);
	box-shadow: 0 0 18px -2px rgba(var(--ksn-accent-rgb), .7), inset 0 0 14px -6px rgba(var(--ksn-accent-rgb), .6);
	text-shadow: 0 0 10px rgba(var(--ksn-accent-rgb), .8);
}
.ksn-imgcta--btn-neon .ksn-imgcta__btn:hover { box-shadow: 0 0 26px 0 rgba(var(--ksn-accent-rgb), .8), inset 0 0 16px -4px rgba(var(--ksn-accent-rgb), .7); }

/* ===== overlay: image fills, content on top ===== */
.ksn-imgcta--overlay { min-height: var(--imgcta-h); }
.ksn-imgcta--overlay .ksn-imgcta__media { position: absolute; inset: 0; }
.ksn-imgcta--overlay .ksn-imgcta__content { position: relative; z-index: 1; height: 100%; min-height: var(--imgcta-h); justify-content: center; padding: 40px clamp(24px, 5vw, 64px); }
.ksn-imgcta--overlay.ksn-imgcta--va-top .ksn-imgcta__content { justify-content: flex-start; }
.ksn-imgcta--overlay.ksn-imgcta--va-bottom .ksn-imgcta__content { justify-content: flex-end; }
.ksn-imgcta--overlay .ksn-imgcta__title { color: #fff; }
.ksn-imgcta--overlay .ksn-imgcta__sub { color: rgba(255,255,255,.9); }

/* ===== cover: same as overlay but content sits in a frosted box ===== */
.ksn-imgcta--cover { min-height: var(--imgcta-h); }
.ksn-imgcta--cover .ksn-imgcta__media { position: absolute; inset: 0; }
.ksn-imgcta--cover .ksn-imgcta__content {
	position: relative; z-index: 1; min-height: var(--imgcta-h); justify-content: center;
	padding: 40px clamp(24px, 5vw, 64px);
}
.ksn-imgcta--cover.ksn-imgcta--va-top .ksn-imgcta__content { justify-content: flex-start; }
.ksn-imgcta--cover.ksn-imgcta--va-bottom .ksn-imgcta__content { justify-content: flex-end; }
.ksn-imgcta--cover .ksn-imgcta__content > * { background: var(--ksn-surface); border-radius: 14px; }
.ksn-imgcta--cover .ksn-imgcta__eyebrow,
.ksn-imgcta--cover .ksn-imgcta__title,
.ksn-imgcta--cover .ksn-imgcta__sub { padding: 4px 14px; }

/* ===== split: image beside content ===== */
.ksn-imgcta--split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; }
.ksn-imgcta--split .ksn-imgcta__media { height: var(--imgcta-h); }
.ksn-imgcta--split.ksn-imgcta--img-end .ksn-imgcta__media { order: 2; }
.ksn-imgcta--split .ksn-imgcta__content { padding: 10px; }

/* ===== clean: image on top, content below ===== */
.ksn-imgcta--clean { display: flex; flex-direction: column; gap: 22px; }
.ksn-imgcta--clean .ksn-imgcta__media { width: 100%; }
.ksn-imgcta--clean .ksn-imgcta__content { padding: 0 6px; }

/* float animation */
@keyframes ksn-imgcta-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ksn-imgcta--anim .ksn-imgcta__media img { animation: ksn-imgcta-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ksn-imgcta--anim .ksn-imgcta__media img { animation: none; } }

/* responsive */
@media (max-width: 768px) {
	.ksn-imgcta--split { grid-template-columns: 1fr; gap: 20px; }
	.ksn-imgcta--split .ksn-imgcta__media { height: auto; aspect-ratio: 16 / 10; }
	.ksn-imgcta--split.ksn-imgcta--img-end .ksn-imgcta__media { order: 0; }
	.ksn-imgcta--overlay, .ksn-imgcta--cover { --imgcta-h: 360px; }
	.ksn-imgcta__content { gap: 12px; }
	.ksn-imgcta__btn { width: 100%; justify-content: center; }
}