.loc-card {
	position:relative;
	width:100%;
	min-width:0;
	min-height:86px;
	display:flex;
	align-items:center;
	gap:14px;
	padding:13px 15px;
	overflow:hidden;
	isolation:isolate;
	border:1px solid color-mix(in srgb,var(--loc-clr) 24%,var(--surface-color));
	border-radius:20px;
	background:
		linear-gradient(
			135deg,
			color-mix(in srgb,var(--loc-clr) 8%,var(--surface-color)),
			color-mix(in srgb,var(--loc-clr) 3%,var(--surface-color))
		);
	color:var(--primary-text);
	text-decoration:none;
	touch-action:manipulation;
	transition:
		transform var(--transition),
		border-color var(--transition),
		background var(--transition),
		box-shadow var(--transition);
	flex-direction: column;
	justify-content: center;
}

.loc-card::after {
	content:"";
	position:absolute;
	z-index:2;
	inset-block:18px;
	inset-inline-start:0;
	width:3px;
	border-start-end-radius:5px;
	border-end-end-radius:5px;
	background:var(--loc-clr);
	opacity:.72;
	pointer-events:none;
	transition:
		inset-block var(--transition),
		opacity var(--transition);
}

.loc-flg {
	position:relative;
	z-index:3;
	--elww: 100px;
	width: var(--elww);
	height: var(--elww);
	border:4px solid var(--surface-color);
	border-radius:50%;
	background:var(--surface-color);
	box-shadow:
		0 6px 16px rgb(var(--primary-text-code) / 10%),
		0 0 0 1px color-mix(in srgb,var(--loc-clr) 10%,transparent);
	transition:
		transform var(--transition),
		box-shadow var(--transition);
}

.loc-flg .yct-img {
	width:100%;
	height:100%;
	display:block;
}

.loc-flg img {
	display:block;
	width:100%;
	height:100%;
	max-width:100%;
	object-fit:cover;
	border-radius:50%;
}

.loc-flg i {
	color:var(--loc-clr);
	font-size:26px;
}

.loc-inf {
	position:relative;
	z-index:3;
	min-width:0;
	display:flex;
	flex:1;
	flex-direction:column;
	gap:6px;
	text-align:start;
	align-items: center;
}

.loc-inf strong,
.loc-inf small {
	min-width:0;
	max-width:100%;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

.loc-inf strong {
	color:var(--primary-text);
	font-size: 20px;
	font-weight:700;
	line-height:1.35;
	transition:color var(--transition);
}

.loc-inf small {
	color:var(--secondarytext);
	font-size:12px;
	font-weight:600;
	line-height:1.5;
	opacity:.88;
}

.loc-art {
	position:relative;
	z-index:3;
	width:46px;
	height:58px;
	flex:0 0 46px;
	display:flex;
	align-items:center;
	justify-content:center;
	color: var(--uicolor2);
	transition:
		transform var(--transition),
		color var(--transition);
}

.loc-art i {
	color:currentColor;
	font-size:31px;
	line-height:1;
}

.loc-art svg {
	width:34px;
	height:34px;
	display:block;
	max-width:100%;
	max-height:100%;
	color:currentColor;
}

.loc-art svg path,
.loc-art svg circle,
.loc-art svg rect,
.loc-art svg line,
.loc-art svg polyline,
.loc-art svg polygon {
	stroke:currentColor;
}

.loc-card.is-main {
	border-color:color-mix(in srgb,var(--loc-clr) 82%,var(--surface-color));
	background:
		linear-gradient(
			135deg,
			color-mix(in srgb,var(--loc-clr) 95%,var(--surface-color)),
			color-mix(in srgb,var(--loc-clr) 76%,var(--primary-text))
		);
	box-shadow:
		0 20px 42px color-mix(in srgb,var(--loc-clr) 22%,transparent),
		0 4px 10px rgb(var(--primary-text-code) / 8%);
}

.loc-card.is-main::after {
	background:var(--surface-color);
	opacity:.72;
}

.loc-card.is-main .loc-art,
.loc-card.is-main .loc-inf strong,
.loc-card.is-main .loc-inf small {
	color:var(--on-color);
}

.loc-card.is-main .loc-inf small {
	opacity:.82;
}

.loc-card.is-main .loc-flg {
	box-shadow:
		0 8px 20px rgb(0 0 0 / 14%),
		0 0 0 1px rgb(var(--on-color-code) / 40%);
}

.loc-card:focus-visible {
	border-color:color-mix(in srgb,var(--loc-clr) 55%,var(--diver));
	outline:3px solid color-mix(in srgb,var(--loc-clr) 25%,transparent);
	outline-offset:3px;
}

.loc-card.is-main:focus-visible {
	border-color:color-mix(in srgb,var(--on-color) 70%,var(--loc-clr));
	outline-color:rgb(var(--on-color-code) / 34%);
}

@media (hover:hover) and (pointer:fine) {
	.loc-card:hover {
		transform:translateY(-5px);
		border-color:color-mix(in srgb,var(--loc-clr) 48%,var(--surface-color));
		background:
			linear-gradient(
				135deg,
				color-mix(in srgb,var(--loc-clr) 13%,var(--surface-color)),
				color-mix(in srgb,var(--loc-clr) 6%,var(--surface-color))
			);
		box-shadow:
			0 19px 40px color-mix(in srgb,var(--loc-clr) 13%,transparent),
			0 4px 10px rgb(var(--primary-text-code) / 7%);
	}

	.loc-card:hover::after {
		inset-block:12px;
		opacity:1;
	}

	.loc-card:hover .loc-flg {
		transform:scale(1.06) rotate(-2deg);
		box-shadow:
			0 10px 23px color-mix(in srgb,var(--loc-clr) 16%,transparent),
			0 0 0 1px color-mix(in srgb,var(--loc-clr) 18%,transparent);
	}

	.loc-card:hover .loc-art {
		transform:translateY(-2px) scale(1.06);
	}

	.loc-card:hover .loc-inf strong {
		color:var(--loc-clr);
	}

	.loc-card.is-main:hover {
		background:
			linear-gradient(
				135deg,
				color-mix(in srgb,var(--loc-clr) 100%,var(--surface-color)),
				color-mix(in srgb,var(--loc-clr) 70%,var(--primary-text))
			);
		box-shadow:
			0 23px 46px color-mix(in srgb,var(--loc-clr) 28%,transparent),
			0 5px 12px rgb(var(--primary-text-code) / 9%);
	}

	.loc-card.is-main:hover .loc-inf strong {
		color:var(--on-color);
	}
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
	.loc-card {
		min-height:94px;
		gap:12px;
		padding:11px 13px;
		border-radius:18px;
	}

	.loc-card::after {
		inset-block:16px;
	}

	.loc-flg {
		width:50px;
		height:50px;
		flex-basis:50px;
		border-width:3px;
	}

	.loc-flg i {
		font-size:23px;
	}

	.loc-inf {
		gap:4px;
	}

	.loc-inf strong,
	.loc-inf small {
		overflow:visible;
		white-space:normal;
		text-overflow:clip;
		overflow-wrap:anywhere;
	}

	.loc-inf strong {
		font-size:15px;
		line-height:1.4;
	}

	.loc-inf small {
		font-size:11.5px;
		line-height:1.4;
	}

	.loc-art {
		width:40px;
		height:50px;
		flex-basis:40px;
	}

	.loc-art i {
		font-size:27px;
	}

	.loc-art svg {
		width:29px;
		height:29px;
	}
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:575px) {
	.loc-card {
		min-height:90px;
		gap:10px;
		padding:10px 11px;
		border-radius:16px;
	}

	.loc-card::after {
		inset-block:15px;
	}

	.loc-flg {
		width:46px;
		height:46px;
		flex-basis:46px;
	}

	.loc-flg i {
		font-size:21px;
	}

	.loc-inf strong {
		font-size:14.5px;
		line-height:1.38;
	}

	.loc-inf small {
		font-size:11px;
		line-height:1.38;
	}

	.loc-art {
		width:36px;
		height:46px;
		flex-basis:36px;
	}

	.loc-art i {
		font-size:24px;
	}

	.loc-art svg {
		width:26px;
		height:26px;
	}
}

@media only screen and (max-width:390px) {
	.loc-card {
		min-height:86px;
		gap:9px;
		padding:9px 10px;
		border-radius:15px;
	}

	.loc-card::after {
		inset-block:14px;
		width:2px;
	}

	.loc-flg {
		width:42px;
		height:42px;
		flex-basis:42px;
		border-width:3px;
	}

	.loc-flg i {
		font-size:19px;
	}

	.loc-inf {
		gap:3px;
	}

	.loc-inf strong {
		font-size:14px;
		line-height:1.35;
	}

	.loc-inf small {
		font-size:10.5px;
		line-height:1.35;
	}

	.loc-art {
		width:32px;
		height:42px;
		flex-basis:32px;
	}

	.loc-art i {
		font-size:22px;
	}

	.loc-art svg {
		width:24px;
		height:24px;
	}
}

@media (hover:none) and (pointer:coarse) {
	.loc-card:active {
		border-color:color-mix(in srgb,var(--loc-clr) 44%,var(--diver));
		background:
			linear-gradient(
				135deg,
				color-mix(in srgb,var(--loc-clr) 12%,var(--surface-color)),
				color-mix(in srgb,var(--loc-clr) 6%,var(--surface-color))
			);
		transform:scale(.985);
	}

	.loc-card.is-main:active {
		background:
			linear-gradient(
				135deg,
				color-mix(in srgb,var(--loc-clr) 96%,var(--surface-color)),
				color-mix(in srgb,var(--loc-clr) 72%,var(--primary-text))
			);
	}
}

@media (prefers-reduced-motion:reduce) {
	.loc-card,
	.loc-card::after,
	.loc-flg,
	.loc-art,
	.loc-inf strong {
		transition:none;
	}
}