/* =========================================================
   ALSTON — STICKY CALL CTA

   Collapsed to an icon on every screen size. On hover it opens
   leftward to reveal the number, then closes again.

   White surface, black glyph, one gold ring. Touch devices have
   no hover, so it stays an icon there and a tap dials straight
   away — which is the behaviour you want on a phone anyway.
========================================================= */

.alston-call {
	/* position:fixed and z-index arrive inline so the button is never
	   mispositioned if this file fails to load. */
	right: 0;
	bottom: clamp(28px, 6vh, 64px);

	display: inline-flex;
	align-items: center;

	padding: 9px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-right: 0;
	border-radius: 999px 0 0 999px;
	box-shadow: 0 14px 38px rgba(14, 14, 14, .16);

	text-decoration: none;
	-webkit-tap-highlight-color: transparent;

	transition:
		padding-right var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		opacity var(--dur) var(--ease),
		visibility var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

/* ---------------------------------------------------------
   ICON — always visible
--------------------------------------------------------- */

.alston-call__icon {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ink);
	transition: background var(--dur-fast) var(--ease);
}

.alston-call__icon svg {
	width: 17px;
	height: 17px;
	fill: var(--paper);
	transition: fill var(--dur-fast) var(--ease);
}

/* The one piece of gold. */
.alston-call__icon::before {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1px solid var(--gold);
	opacity: .5;
	transition: opacity var(--dur-fast) var(--ease);
	pointer-events: none;
}

/* ---------------------------------------------------------
   NUMBER — collapsed by default, opens on hover
--------------------------------------------------------- */

.alston-call__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	line-height: 1;

	max-width: 0;
	margin-left: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;

	transition:
		max-width var(--dur) var(--ease),
		margin-left var(--dur) var(--ease),
		opacity .3s var(--ease);
}

.alston-call__number {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: var(--fw-regular);
	letter-spacing: .015em;
	line-height: 1;
	color: var(--ink);
	white-space: nowrap;
}

.alston-call__label {
	font-family: var(--font-display);
	font-size: 9.5px;
	font-weight: var(--fw-regular);
	letter-spacing: .26em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--text-mute);
	white-space: nowrap;
}

/* ---------------------------------------------------------
   HOVER — pointer devices only
--------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

	.alston-call:hover,
	.alston-call:focus-visible {
		padding-right: 28px;
		border-color: rgba(201, 169, 97, .5);
		box-shadow: 0 18px 48px rgba(14, 14, 14, .2);
	}

	.alston-call:hover .alston-call__text,
	.alston-call:focus-visible .alston-call__text {
		max-width: 240px;
		margin-left: 16px;
		opacity: 1;
	}

	.alston-call:hover .alston-call__icon,
	.alston-call:focus-visible .alston-call__icon {
		background: var(--gold);
	}

	.alston-call:hover .alston-call__icon svg,
	.alston-call:focus-visible .alston-call__icon svg {
		fill: var(--ink);
	}

	.alston-call:hover .alston-call__icon::before,
	.alston-call:focus-visible .alston-call__icon::before {
		opacity: 1;
	}
}

/* ---------------------------------------------------------
   HIDDEN STATE — applied by JS while over the hero
--------------------------------------------------------- */

.alston-call.is-hidden {
	opacity: 0;
	visibility: hidden;
	transform: translateX(20px);
	pointer-events: none;
}

/* ---------------------------------------------------------
   TOUCH / SMALL SCREENS — icon only, detached, tap to dial
--------------------------------------------------------- */

@media (max-width: 768px) {

	.alston-call {
		right: 18px;
		bottom: 18px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		box-shadow: none;
	}

	.alston-call__icon {
		width: 54px;
		height: 54px;
		background: var(--paper);
		box-shadow: 0 12px 30px rgba(14, 14, 14, .26);
	}

	.alston-call__icon svg {
		width: 19px;
		height: 19px;
		fill: var(--ink);
	}

	.alston-call__icon::before {
		inset: -4px;
	}

	.alston-call.is-hidden {
		transform: translateY(16px);
	}
}