/**
 * Activities design system — Viator-style category rail + trust line on
 * the Activities archive. Loaded only on the `activity` archive/single (see
 * aaatrails_act_front_assets() in inc/activity-dashboard.php).
 *
 * Single-activity itself already carries the Viator-grade product-detail
 * layer (assets/css/product-detail-layer.css) — this file is additive,
 * scoped to what's new in 1.42.0.
 *
 * @package AAAtrails
 * @since   1.42.0
 */

/* ---------------------------------------------------------------------
 * Trust line under the archive header.
 * ------------------------------------------------------------------ */
.act-trustline {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}
.act-trustline li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--ink-soft);
}
.act-trustline svg {
	width: 17px;
	height: 17px;
	stroke: var(--gold, #eeae05);
	fill: none;
	stroke-width: 1.8;
	flex: none;
}

/* ---------------------------------------------------------------------
 * "Browse by category" icon rail — Viator's Things to Do pattern.
 * ------------------------------------------------------------------ */
.act-catrail-wrap {
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
}
.act-catrail {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}
.act-catrail::-webkit-scrollbar { display: none; }

.act-catrail__item {
	--exp-accent: #8a5a2b;
	flex: none;
	width: 92px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	gap: 6px;
}
.act-catrail__icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--exp-accent) 14%, var(--paper, #fff8e6));
	color: var(--exp-accent);
	border: 1.5px solid color-mix(in srgb, var(--exp-accent) 35%, transparent);
	transition: transform .15s ease, background .15s ease;
}
.act-catrail__icon svg { width: 26px; height: 26px; }
.act-catrail__item:hover .act-catrail__icon,
.act-catrail__item:focus-visible .act-catrail__icon,
.act-catrail__item.is-active .act-catrail__icon {
	transform: translateY(-2px);
	background: var(--exp-accent);
	color: #fff;
}
.act-catrail__label {
	font-size: .82rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.2;
}
.act-catrail__item.is-active .act-catrail__label { color: var(--exp-accent); }
.act-catrail__count {
	font-size: .72rem;
	color: var(--ink-soft);
}

@media (max-width: 560px) {
	.act-catrail { gap: 16px; }
	.act-catrail__item { width: 76px; }
	.act-catrail__icon { width: 50px; height: 50px; }
	.act-catrail__icon svg { width: 22px; height: 22px; }
}