/* ================================================================
   Chancery Hero Marquee v3.1
   Vertical desktop, horizontal mobile. Light + Dark mode.
   ================================================================ */

.chm-wrap *, .chm-wrap *::before, .chm-wrap *::after { box-sizing: border-box; }

/* ── Wrapper ── */
.chm-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 85vh;
}

/* ── Vertical column grid (desktop) ── */
.chm-cols {
	display: flex;
	gap: 14px;
	height: 100%;
	width: 100%;
}
.chm-col {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}

/* ── Vertical track ── */
.chm-track {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.chm-track-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex-shrink: 0;
}

/* ── Vertical scroll animations ── */
.chm-col--up   .chm-track-inner { animation: chm-up   linear infinite 32s; }
.chm-col--down .chm-track-inner { animation: chm-down linear infinite 32s; }

@keyframes chm-up {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}
@keyframes chm-down {
	from { transform: translateY(-50%); }
	to   { transform: translateY(0); }
}

/* ── Pause on hover ── */
.chm-pause-hover:hover .chm-track-inner { animation-play-state: paused; }
.chm-pause-hover .chm-h-track:hover     { animation-play-state: paused; }

/* ── Fade masks ── */
.chm-fade-top, .chm-fade-bottom {
	position: absolute;
	left: 0; right: 0;
	height: 100px;
	z-index: 10;
	pointer-events: none;
}
.chm-fade-top    { top: 0; }
.chm-fade-bottom { bottom: 0; }

/* ── Card ── */
.chm-card {
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	cursor: default;
	transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
	will-change: transform;
	background-color: #ffffff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.04);
	border: 1px solid rgba(0,0,0,0.06);
}
.chm-card:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* ── Image ── */
.chm-img-wrap {
	width: 100%;
	height: 160px;
	overflow: hidden;
}
.chm-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.chm-card:hover .chm-img { transform: scale(1.05); }
.chm-img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* ── Card meta — hidden by default ── */
.chm-card-meta {
	padding: 12px 14px;
	display: none;
	flex-direction: column;
	gap: 6px;
}

/* Show labels only when toggled on */
.chm-show-labels .chm-card-meta {
	display: flex;
}

/* When labels hidden, image fills the card */
.chm-wrap:not(.chm-show-labels) .chm-img-wrap {
	height: 100%;
}

.chm-treatment {
	font-size: 13px;
	font-weight: 700;
	color: #0a0a0a;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.chm-location {
	display: inline-block;
	align-self: flex-start;
	font-size: 10px;
	font-weight: 600;
	color: #A62461;
	background-color: rgba(166,36,97,0.08);
	padding: 3px 8px;
	border-radius: 100px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* ── LIGHT MODE (default) ── */
.chm-mode-light .chm-fade-top    { background: linear-gradient(to bottom, #fff 0%, transparent 100%); }
.chm-mode-light .chm-fade-bottom { background: linear-gradient(to top, #fff 0%, transparent 100%); }

/* ── DARK MODE ── */
.chm-mode-dark .chm-card {
	background-color: #1a1a1f;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.3);
	border: 1px solid rgba(255,255,255,0.07);
}
.chm-mode-dark .chm-treatment { color: #f0f0f0; }
.chm-mode-dark .chm-location  { color: #e87bb8; background-color: rgba(166,36,97,0.20); }
.chm-mode-dark .chm-fade-top    { background: linear-gradient(to bottom, #0d0d10 0%, transparent 100%); }
.chm-mode-dark .chm-fade-bottom { background: linear-gradient(to top, #0d0d10 0%, transparent 100%); }
.chm-mode-dark .chm-img-placeholder { background: linear-gradient(135deg, #242428 0%, #1a1a1f 100%); }

/* ════════════════════════════════════════════
   HORIZONTAL MODE — mobile / tablet
   ════════════════════════════════════════════ */

/* Hidden by default on all screens */
.chm-h-row {
	display: none;
	flex-direction: row;
	align-items: stretch;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.chm-h-track {
	display: flex;
	flex-direction: row;
	gap: 12px;
	flex-shrink: 0;
	align-items: stretch;
	animation: chm-scroll-left linear infinite;
	animation-duration: var(--chm-h-speed, 30s);
	padding-right: 12px;
}

@keyframes chm-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Activate horizontal on tablet/mobile */
@media (max-width: 1024px) {
	.chm-mob-horizontal .chm-cols        { display: none !important; }
	.chm-mob-horizontal .chm-fade-top    { display: none !important; }
	.chm-mob-horizontal .chm-fade-bottom { display: none !important; }

	.chm-mob-horizontal .chm-h-row {
		display: flex !important;
	}

	.chm-mob-horizontal.chm-wrap {
		height: var(--chm-mob-h, 260px) !important;
		overflow: hidden;
		position: relative;
	}

	/* Left/right edge fades */
	.chm-mob-horizontal::before,
	.chm-mob-horizontal::after {
		content: '';
		position: absolute;
		top: 0; bottom: 0;
		width: 60px;
		z-index: 10;
		pointer-events: none;
	}
	.chm-mob-horizontal::before {
		left: 0;
		background: linear-gradient(to right, var(--chm-fade-lr, #ffffff), transparent);
	}
	.chm-mob-horizontal::after {
		right: 0;
		background: linear-gradient(to left, var(--chm-fade-lr, #ffffff), transparent);
	}

	/* Card sizing in horizontal */
	.chm-mob-horizontal .chm-h-row .chm-card {
		width: var(--chm-mob-w, 200px);
		min-width: var(--chm-mob-w, 200px);
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
	}

	.chm-mob-horizontal .chm-h-row .chm-img-wrap {
		height: 100%;
		flex: 1 1 auto;
	}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.chm-track-inner, .chm-h-track { animation: none !important; }
}

/* ── Responsive (non-horizontal fallback) ── */
@media (max-width: 1024px) {
	.chm-wrap:not(.chm-mob-horizontal) { height: 70vh; }
	.chm-wrap:not(.chm-mob-horizontal) .chm-img-wrap { height: 130px; }
}
@media (max-width: 768px) {
	.chm-wrap:not(.chm-mob-horizontal) { height: 380px; }
	.chm-wrap:not(.chm-mob-horizontal) .chm-img-wrap { height: 110px; }
	.chm-wrap:not(.chm-mob-horizontal) .chm-treatment { font-size: 12px; }
	.chm-wrap:not(.chm-mob-horizontal) .chm-card-meta { padding: 10px 12px; }
}
@media (max-width: 480px) {
	.chm-wrap:not(.chm-mob-horizontal) .chm-col:last-child { display: none; }
	.chm-wrap:not(.chm-mob-horizontal) { height: 340px; }
}