/*
 * Homepage CLiC band
 * A reel of rooms that drifts left to right on Soft Daylight, each pane
 * showing private glass that clears on hover or tap, above a centered
 * statement with two outlined actions.
 */

.cardinal-home-clic {
	--cardinal-color-ink: #212121;
	--cardinal-color-paper: #fff;
	--cardinal-color-daylight: #f7f7f7;
	--cardinal-color-red-dark: #b91218;
	--cardinal-color-clic: #06aeee;
	--cardinal-font-body: "Mulish", "muli", Arial, sans-serif;
	--cardinal-gutter: clamp(1.25rem, 4vw, 3rem);
	--cardinal-focus: 0 0 0 3px var(--cardinal-color-paper), 0 0 0 6px var(--cardinal-color-red-dark);
	--clic-pane: 18.75rem;
	--clic-gap: 1.625rem;
	--clic-fade: min(26rem, 22vw);
	--clic-pad-top: 3.625rem;
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	/* Clip, so focusing a pane cannot scroll the band sideways. */
	overflow: clip;
	padding: var(--clic-pad-top) 0 3.75rem;
	background: var(--cardinal-color-daylight);
	color: var(--cardinal-color-ink);
	font-family: var(--cardinal-font-body);
}

.cardinal-home-clic *,
.cardinal-home-clic *::before,
.cardinal-home-clic *::after { box-sizing: border-box; }

.cardinal-home-clic ::selection { background: var(--cardinal-color-ink); color: var(--cardinal-color-paper); }

.cardinal-home-clic .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Reel --------------------------------------------------------------- */

/* The panes fade into the band at both edges, as they enter and leave. */
.cardinal-home-clic__reel {
	display: flex;
	justify-content: center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--clic-fade), #000 calc(100% - var(--clic-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--clic-fade), #000 calc(100% - var(--clic-fade)), transparent 100%);
}

.cardinal-home-clic .cardinal-home-clic__track {
	display: flex;
	gap: var(--clic-gap);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

/* Until the script measures the reel, the set sits centered, as in the
 * design. Once it runs, the script positions the track. */
.cardinal-home-clic:is(.is-running, .is-static) .cardinal-home-clic__reel { justify-content: flex-start; }

.cardinal-home-clic .cardinal-home-clic__item {
	flex: none;
	margin: 0;
	padding: 0;
}

.cardinal-home-clic .cardinal-home-clic__pane {
	position: relative;
	display: block;
	width: var(--clic-pane);
	height: var(--clic-pane);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 6px;
	background: var(--cardinal-color-paper);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.cardinal-home-clic__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A hard cut, never a fade: CLiC switches instantly. */
.cardinal-home-clic__image--clear { visibility: hidden; }

.cardinal-home-clic__pane:is([aria-pressed="true"], .is-demo) .cardinal-home-clic__image--clear { visibility: visible; }

@media (hover: hover) {
	.cardinal-home-clic__pane:hover .cardinal-home-clic__image--clear { visibility: visible; }
}

.cardinal-home-clic__badge {
	position: absolute;
	top: .75rem;
	right: .75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.625rem;
	height: 1.625rem;
	border-radius: 50%;
	background: var(--cardinal-color-clic);
	-webkit-backdrop-filter: blur(17px);
	backdrop-filter: blur(17px);
}

.cardinal-home-clic__badge img { display: block; }

.cardinal-home-clic .cardinal-home-clic__pane:focus-visible { outline: none; }

/* The ring is drawn above the photos; on the button itself they cover it. */
.cardinal-home-clic__pane:focus-visible::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 3px var(--cardinal-color-paper), inset 0 0 0 6px var(--cardinal-color-red-dark);
	pointer-events: none;
}

/* Copy --------------------------------------------------------------- */

/* Says how to use the reel; the wording follows the input the visitor has. */
/* The hint and the motion control share the line under the reel, so the
 * pause button sits beside what it stops. */
.cardinal-home-clic__controls {
	position: relative;
	margin-top: 1.25rem;
}

/* Side padding keeps the centered hint clear of the button on narrow screens. */
.cardinal-home-clic .cardinal-home-clic__hint {
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(var(--cardinal-gutter) + 44px + .75rem);
	color: #5f6161;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.cardinal-home-clic__hint-hover { display: none; }

@media (hover: hover) and (pointer: fine) {
	.cardinal-home-clic__hint-hover { display: inline; }
	.cardinal-home-clic__hint-touch { display: none; }
}

.cardinal-home-clic__shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 47rem;
	margin: 0 auto;
	padding: 2.75rem var(--cardinal-gutter) 0;
	text-align: center;
}

.cardinal-home-clic :is(h2, p) { margin: 0; }

.cardinal-home-clic__site,
.cardinal-home-clic__site:visited {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	min-height: 44px;
	margin-top: 1.75rem;
	padding: 0 1rem;
	color: var(--cardinal-color-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.cardinal-home-clic__site img {
	flex: none;
	display: block;
	width: 32px;
	height: 32px;
}

.cardinal-home-clic__site:hover {
	color: var(--cardinal-color-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .3em;
}

/* Outranks the Elementor kit's `.elementor-kit-13 h2` rule. */
.cardinal-home-clic .cardinal-home-clic__title {
	margin-top: 1.25rem;
	color: var(--cardinal-color-ink);
	font-family: var(--cardinal-font-body);
	/* Two set lines at every width; the size keeps each on one line down
	 * to 320px. */
	font-size: clamp(2.125rem, 1.5rem + 2.5vw, 3rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.005em;
}

.cardinal-home-clic__title > span {
	display: block;
	white-space: nowrap;
}

.cardinal-home-clic .cardinal-home-clic__lead {
	max-width: 43.75rem;
	margin-top: 1.25rem;
	color: var(--cardinal-color-ink);
	font-size: clamp(1.0625rem, .9rem + .7vw, 1.5rem);
	line-height: 1.4;
	text-wrap: balance;
}

.cardinal-home-clic__keep { white-space: nowrap; }

.cardinal-home-clic .cardinal-home-clic__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 2.5rem;
}

.cardinal-home-clic__action,
.cardinal-home-clic__action:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 3rem;
	padding: .5rem 1.25rem;
	white-space: nowrap;
	border: 2px solid var(--cardinal-color-ink);
	border-radius: 0;
	background: transparent;
	color: var(--cardinal-color-ink);
	font-family: var(--cardinal-font-body);
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}

.cardinal-home-clic__action svg { flex: none; }

.cardinal-home-clic__action--primary,
.cardinal-home-clic__action--primary:visited {
	background: var(--cardinal-color-ink);
	color: var(--cardinal-color-paper);
}

.cardinal-home-clic__action:hover {
	border-color: var(--cardinal-color-red-dark);
	background: var(--cardinal-color-red-dark);
	color: var(--cardinal-color-paper);
}

.cardinal-home-clic__site:focus-visible,
.cardinal-home-clic__action:focus-visible,
.cardinal-home-clic__toggle:focus-visible {
	outline: none;
	box-shadow: var(--cardinal-focus);
}

/* Motion control: right-aligned under the reel, level with the hint. */
.cardinal-home-clic__toggle {
	position: absolute;
	z-index: 2;
	top: 0;
	right: var(--cardinal-gutter);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #5f6161;
	border-radius: 0;
	background: transparent;
	color: var(--cardinal-color-ink);
	cursor: pointer;
	transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}

.cardinal-home-clic__toggle[hidden] { display: none; }

.cardinal-home-clic__toggle:hover {
	border-color: var(--cardinal-color-ink);
	background: var(--cardinal-color-ink);
	color: var(--cardinal-color-paper);
}

.cardinal-home-clic__icon-play,
.cardinal-home-clic__toggle[aria-pressed="true"] .cardinal-home-clic__icon-pause { display: none; }

.cardinal-home-clic__toggle[aria-pressed="true"] .cardinal-home-clic__icon-play { display: block; }

/* Reduced motion, or no script: the reel holds still and scrolls by hand. */
.cardinal-home-clic.is-static .cardinal-home-clic__reel {
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-mask-image: none;
	mask-image: none;
}

.cardinal-home-clic.is-static .cardinal-home-clic__reel::-webkit-scrollbar { display: none; }

.cardinal-home-clic.is-static .cardinal-home-clic__track { padding: 0 var(--cardinal-gutter); }

.cardinal-home-clic.is-static .cardinal-home-clic__item { scroll-snap-align: center; }

/* Tablets and phones --------------------------------------------------- */
@media (max-width: 1024px) {
	.cardinal-home-clic {
		--clic-pane: 15rem;
		--clic-gap: 1.25rem;
		--clic-pad-top: 3rem;
		padding-bottom: 3.5rem;
	}
}

@media (max-width: 767px) {
	.cardinal-home-clic {
		--clic-pane: 14rem;
		--clic-gap: 1rem;
		--clic-fade: 3rem;
		--clic-pad-top: 2.5rem;
		padding-bottom: 3.5rem;
	}

	.cardinal-home-clic__shell { padding-top: 2.25rem; }

	/* Left-aligned beside the button, the hint keeps to one line. */
	.cardinal-home-clic .cardinal-home-clic__hint {
		justify-content: flex-start;
		padding-left: var(--cardinal-gutter);
		text-align: left;
	}

	.cardinal-home-clic .cardinal-home-clic__actions {
		gap: .75rem;
		margin-top: 2rem;
	}

	.cardinal-home-clic__action { flex: 1 1 9rem; }
}