/**
 * Proximity section: phone center; side chips fade + slide (scroll down = open).
 */

.kadamba-proximity {
	--kadamba-proximity-slide: min(42vw, 220px);
	--kadamba-proximity-ease: cubic-bezier(0.4, 0, 0.2, 1);

	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	min-height: 100dvh;
	box-sizing: border-box;
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 3vw, 2rem) clamp(3rem, 8vw, 5rem);
	background: var(--kdm-ivory);
	overflow: hidden;
}

.kadamba-proximity__header {
	text-align: center;
	max-width: min(720px, 100%);
	margin: 0 auto clamp(2rem, 5vw, 3.5rem);
}

.kadamba-proximity__badge {
	display: inline-block;
	padding: 0.35rem 1rem;
	border-radius: 9999px;
	background: var(--kdm-gradient-gold);
	color: var(--kdm-brown);
	font-family: var(--kdm-font-sans);
	font-size: clamp(0.65rem, 1.4vw, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kadamba-proximity__heading {
	margin: 0.8rem 0 0.35rem;
	font-family: var(--kdm-font-serif);
	color: var(--kdm-brown);
	font-size: clamp(1.25rem, 3.2vw + 0.6rem, 3.1rem);
	line-height: 1.12;
	text-wrap: balance;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.kadamba-proximity__sub {
	margin: 0;
	font-family: var(--kdm-font-sans);
	font-size: clamp(0.95rem, 2vw, 1.1rem);
	color: var(--kdm-text-muted);
	line-height: 1.45;
}

.kadamba-proximity__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	max-width: min(1200px, 100%);
	margin: 0 auto;
	position: relative;
}

.kadamba-proximity__col {
	display: flex;
	flex-direction: column;
	gap: clamp(0.9rem, 2.6vw, 1.35rem);
	flex: 1 1 0;
	min-width: 0;
	z-index: 1;
	transition:
		transform 0.75s var(--kadamba-proximity-ease),
		opacity 0.65s ease;
	will-change: transform, opacity;
}

/* Hidden (scroll up): tucked behind phone + faded out */
.kadamba-proximity__col--left {
	align-items: flex-end;
	transform: translateX(var(--kadamba-proximity-slide));
	opacity: 0;
}

.kadamba-proximity__col--right {
	align-items: flex-start;
	transform: translateX(calc(-1 * var(--kadamba-proximity-slide)));
	opacity: 0;
}

/* Visible (scroll down): full opacity + images read clearly */
.kadamba-proximity.kadamba-proximity--open .kadamba-proximity__col--left,
.kadamba-proximity.kadamba-proximity--open .kadamba-proximity__col--right {
	transform: translateX(0);
	opacity: 1;
}

.kadamba-proximity__phone-wrap {
	flex: 0 0 auto;
	width: clamp(200px, 32vw, 400px);
	z-index: 3;
	position: relative;
}

.kadamba-proximity__phone {
	width: 100%;
	height: auto;
	display: block;
	border-radius: clamp(28px, 5vw, 40px);
	box-shadow: var(--kdm-shadow-soft);
	position: relative;
	z-index: 2;
}

.kadamba-proximity__phone-card {
	position: absolute;
	left: 50%;
	bottom: 8%;
	transform: translateX(-50%);
	width: 88%;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 12px;
	padding: 0.5rem 0.65rem;
	font-family: var(--kdm-font-sans);
	font-size: clamp(0.55rem, 1.4vw, 0.7rem);
	color: var(--kdm-brown);
	text-align: left;
	line-height: 1.35;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	z-index: 3;
}

.kadamba-proximity__phone-card-time {
	display: block;
	font-weight: 700;
	margin-top: 0.25rem;
	color: var(--kdm-gold-deep);
}

.kadamba-proximity__chip {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.55rem;
	max-width: 100%;
	padding: 0.45rem 0.65rem;
	border-radius: 10px;
	background: rgba(253, 251, 247, 0.85);
	backdrop-filter: blur(6px);
	border: 1px solid var(--kdm-border-warm);
	font-family: var(--kdm-font-sans);
	font-size: clamp(0.78rem, 1.9vw, 0.95rem);
	color: var(--kdm-brown);
	line-height: 1.3;
	transition: opacity 0.55s ease;
}

.kadamba-proximity__col--right .kadamba-proximity__chip {
	flex-direction: row-reverse;
	text-align: right;
}

.kadamba-proximity__chip-img {
	width: clamp(58px, 16vw, 96px);
	height: clamp(46px, 12.5vw, 76px);
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
	box-shadow: var(--kdm-shadow-soft);
	z-index: 1;
	position: relative;
}

.kadamba-proximity.kadamba-proximity--open .kadamba-proximity__chip-img {
	box-shadow: var(--kdm-shadow-gold);
}

.kadamba-proximity__chip-body {
	flex: 1;
	min-width: 0;
}

.kadamba-proximity__chip-text {
	display: block;
}

.kadamba-proximity__chip-time {
	flex-shrink: 0;
	padding: 0.2rem 0.45rem;
	border-radius: 6px;
	background: var(--kdm-forest);
	color: var(--kdm-gold-bright);
	font-size: 0.72em;
	font-weight: 600;
	white-space: nowrap;
}

.kadamba-proximity__col--right .kadamba-proximity__chip-time {
	order: -1;
}

.kadamba-proximity__chip-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--kdm-gold-deep);
	opacity: 0.85;
}

@media (max-width: 782px) {
	.kadamba-proximity__row {
		flex-direction: column;
	}

	.kadamba-proximity__col--left,
	.kadamba-proximity__col--right {
		width: 100%;
		align-items: stretch;
		transform: translateY(28px);
		opacity: 0;
	}

	.kadamba-proximity.kadamba-proximity--open .kadamba-proximity__col--left,
	.kadamba-proximity.kadamba-proximity--open .kadamba-proximity__col--right {
		transform: translateY(0);
		opacity: 1;
	}

	.kadamba-proximity__col--right .kadamba-proximity__chip {
		flex-direction: row;
		text-align: left;
	}

	.kadamba-proximity__col--right .kadamba-proximity__chip-time {
		order: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kadamba-proximity__col {
		transition: none;
	}

	.kadamba-proximity__col--left,
	.kadamba-proximity__col--right {
		transform: none;
		opacity: 1;
	}
}

.wp-block-kdm-proximity-showcase.alignfull .kadamba-proximity,
.wp-block-core-plugin-proximity-showcase.alignfull .kadamba-proximity {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}