/**
 * P3 Trail Map — component styles.
 *
 * Designed to sit inside the About page's dark section (#1B1917 bg).
 * Uses the About page's type stack: Archivo, Newsreader, Space Mono.
 * Load those fonts on the page (they're already loaded by other About
 * sections). If they aren't available, system-ui / Georgia / monospace
 * fallbacks kick in.
 */


/* ─── Wrap ──────────────────────────────────────────────────────── */

.p3tm-wrap {
	--p3tm-bg: #1B1917;
	--p3tm-ink: #F7F1E4;
	--p3tm-ink-soft: rgba(237, 227, 208, 0.5);
	--p3tm-ink-faint: rgba(237, 227, 208, 0.14);
	--p3tm-orange: #D9531E;

	font-family: 'Archivo', system-ui, sans-serif;
	color: var(--p3tm-ink);
}


/* ─── Filter pills ──────────────────────────────────────────────── */

.p3tm-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}

.p3tm-filter {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: transparent;
	border: 1px solid var(--p3tm-ink-faint);
	color: var(--p3tm-ink-soft);
	font: 700 10px/1 'Space Mono', ui-monospace, monospace;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	border-radius: 0;
}

.p3tm-filter:hover {
	color: var(--p3tm-ink);
	border-color: rgba(237, 227, 208, 0.4);
}

.p3tm-filter.is-active {
	color: var(--p3tm-bg);
	background: var(--p3tm-ink);
	border-color: var(--p3tm-ink);
}

.p3tm-filter__swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	overflow: visible;
	flex-shrink: 0;
}

.p3tm-filter.is-active .p3tm-filter__swatch {
	/* Keep the traveler's color even when the pill is inverted. */
}

.p3tm-filter__count {
	opacity: 0.6;
	margin-left: 2px;
}


/* ─── Map ───────────────────────────────────────────────────────── */

.p3tm-map {
	position: relative;
	width: 100%;
	aspect-ratio: 960 / 660;
	background: transparent;
}

.p3tm-map__svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Faint state boundaries + subtle fill so small landmasses (Hawaii, Alaska
   islands) remain visible even when their outline stroke is barely there. */
.p3tm-map__states {
	fill: rgba(237, 227, 208, 0.06);
	stroke: rgba(237, 227, 208, 0.16);
	stroke-width: 0.7;
	stroke-linejoin: round;
}

/* Country border — strong outline with a "topo" echo effect radiating out. */
.p3tm-map__country-outline {
	fill: transparent;
	stroke: rgba(237, 227, 208, 0.75);
	stroke-width: 1;
	stroke-linejoin: round;
	stroke-linecap: round;
	filter:
		drop-shadow(0 0 1.5px rgba(237, 227, 208, 0.35))
		drop-shadow(0 0 4px rgba(237, 227, 208, 0.18))
		drop-shadow(0 0 9px rgba(237, 227, 208, 0.10));
}


/* ─── Pins ──────────────────────────────────────────────────────── */

.p3tm-pin,
.p3tm-pin-group {
	transition: opacity 0.25s ease, transform 0.25s ease;
	transform-origin: center;
	transform-box: fill-box;
	cursor: pointer;
}

.p3tm-pin.is-hidden,
.p3tm-pin-group.is-hidden {
	opacity: 0;
	transform: scale(0.5);
	pointer-events: none;
}

.p3tm-pin__dot {
	stroke: rgba(27, 25, 23, 0.7);
	stroke-width: 1;
	stroke-linejoin: miter;
}

.p3tm-pin__halo {
	fill: none;
	stroke-width: 1;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.p3tm-pin:hover .p3tm-pin__halo,
.p3tm-pin:focus .p3tm-pin__halo,
.p3tm-pin-group:hover .p3tm-pin__halo,
.p3tm-pin-group:focus .p3tm-pin__halo {
	opacity: 0.5;
}


/* Cluster indicator — orange circle with count, scales up 12% on hover
   as a visual cue that the tooltip is about to appear. Scale is applied
   to the child shapes (not the wrapping <g>) because SVG groups have
   flaky transform-origin support across browsers. */

.p3tm-cluster-indicator {
	opacity: 1;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.p3tm-cluster-indicator__bg,
.p3tm-cluster-indicator__count {
	transform-box: fill-box;
	transform-origin: center center;
	transition: transform 0.18s cubic-bezier(0.3, 0.9, 0.4, 1.2);
}

.p3tm-pin-group:hover .p3tm-cluster-indicator__bg,
.p3tm-pin-group:hover .p3tm-cluster-indicator__count,
.p3tm-pin-group:focus-within .p3tm-cluster-indicator__bg,
.p3tm-pin-group:focus-within .p3tm-cluster-indicator__count {
	transform: scale(1.20);
}

.p3tm-cluster-indicator__bg {
	fill: var(--p3tm-orange, #D9531E);
	stroke: none;
	pointer-events: none;
}

.p3tm-cluster-indicator__count {
	font: 700 10px/1 'Space Mono', ui-monospace, monospace;
	letter-spacing: 0;
	fill: #ffffff;
	text-transform: none;
	pointer-events: none;
}


/* Invisible hit-catcher — sits behind everything in the cluster and
   catches hover for the whole group. */
.p3tm-pin-group__hit {
	fill: transparent;
	pointer-events: all;
	cursor: pointer;
}


/* Cluster member shapes — hidden by default. Only shown when a specific
   traveler is filtered (the matching member shows at the cluster center
   in place of the indicator). */

.p3tm-pin-member {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* Single-traveler filter active: hide indicator, show only the matching
   member at the cluster center. */
.p3tm-pin-group.is-single-filter .p3tm-cluster-indicator {
	opacity: 0;
	pointer-events: none;
}

.p3tm-pin-group.is-single-filter .p3tm-pin-member {
	opacity: 1;
	pointer-events: auto;
}

.p3tm-pin-group.is-single-filter .p3tm-pin-member.is-hidden-member {
	opacity: 0;
	pointer-events: none;
}


/* Tooltip label — two lines: title and traveler names */

.p3tm-pin__label {
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.p3tm-pin:hover .p3tm-pin__label,
.p3tm-pin:focus .p3tm-pin__label,
.p3tm-pin-group:hover .p3tm-pin__label,
.p3tm-pin-group:focus .p3tm-pin__label {
	opacity: 1;
}

.p3tm-pin__label-bg {
	fill: var(--p3tm-ink);
}

.p3tm-pin__label-title {
	font: 700 9px/1 'Space Mono', ui-monospace, monospace;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	fill: var(--p3tm-bg);
}

.p3tm-pin__label-people {
	font: 500 9px/1 'Space Mono', ui-monospace, monospace;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	fill: var(--p3tm-bg);
}


/* ─── Stats ─────────────────────────────────────────────────────── */

.p3tm-stats {
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid var(--p3tm-ink-faint);
	display: flex;
	flex-wrap: wrap;
	gap: 46px;
}

.p3tm-stat__value {
	font: 800 40px/1 'Archivo', system-ui, sans-serif;
	letter-spacing: -0.03em;
	color: var(--p3tm-ink);
}

.p3tm-stat__value em {
	color: var(--p3tm-orange);
	font-style: normal;
}

.p3tm-stat__label {
	margin-top: 8px;
	font: 700 9px/1 'Space Mono', ui-monospace, monospace;
	letter-spacing: 0.22em;
	color: rgba(237, 227, 208, 0.45);
	text-transform: uppercase;
}


/* ─── Reduced motion ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.p3tm-pin,
	.p3tm-pin__halo,
	.p3tm-pin__label,
	.p3tm-filter {
		transition: none !important;
	}
}


/* ─── Mobile ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.p3tm-filters {
		gap: 6px;
	}
	.p3tm-filter {
		padding: 8px 12px;
		font-size: 9px;
	}
	.p3tm-stats {
		gap: 24px;
	}
	.p3tm-stat__value {
		font-size: 28px;
	}
}


/* ═══════════════════════════════════════════════════════════════════
   [p3_travelers] — profile card grid ("The Party" section)
   Uses the About page's LIGHT-mode design tokens (Archivo / Newsreader /
   Space Mono, cream background). Sits on a light cream section, in
   contrast to the map's dark section.
   ═══════════════════════════════════════════════════════════════════ */

.p3tm-party {
	--p3tm-party-ink:        #1B1917;
	--p3tm-party-ink-soft:   rgba(27, 25, 23, 0.62);
	--p3tm-party-ink-mute:   rgba(27, 25, 23, 0.42);
	--p3tm-party-ink-faint:  rgba(27, 25, 23, 0.14);
	--p3tm-party-card-bg:    #EDE3D0;
	--p3tm-party-photo-bg:   rgba(27, 25, 23, 0.08);
	--p3tm-party-orange:     #D9531E;

	font-family: 'Archivo', system-ui, sans-serif;
	color: var(--p3tm-party-ink);
	max-width: 100%;
}


/* ─── Grid ──────────────────────────────────────────────────────── */

.p3tm-party__grid {
	display: grid;
	grid-template-columns: repeat(var(--p3tm-party-cols, 4), minmax(0, 1fr));
	gap: 24px;
}

.p3tm-party[data-cols="1"] .p3tm-party__grid { --p3tm-party-cols: 1; }
.p3tm-party[data-cols="2"] .p3tm-party__grid { --p3tm-party-cols: 2; }
.p3tm-party[data-cols="3"] .p3tm-party__grid { --p3tm-party-cols: 3; }
.p3tm-party[data-cols="4"] .p3tm-party__grid { --p3tm-party-cols: 4; }
.p3tm-party[data-cols="5"] .p3tm-party__grid { --p3tm-party-cols: 5; }
.p3tm-party[data-cols="6"] .p3tm-party__grid { --p3tm-party-cols: 6; }


/* ─── Card ──────────────────────────────────────────────────────── */

.p3tm-party__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--p3tm-party-card-bg);
}

.p3tm-party__photo {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--p3tm-party-photo-bg);
	overflow: hidden;
	isolation: isolate;
}

.p3tm-party__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Newsprint-style: high-contrast grayscale with a slight warm cast so
	   it reads like aged newspaper stock rather than a modern flat B&W.
	   Hover the card to fade the full-color photo back in. */
	filter: grayscale(1) contrast(1.18) sepia(0.15) brightness(1.02);
	transition: filter 0.45s ease;
}

.p3tm-party__card:hover .p3tm-party__photo img,
.p3tm-party__card:focus-within .p3tm-party__photo img {
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.p3tm-party__photo img {
		transition: none;
	}
}

.p3tm-party__photo-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--p3tm-party-ink-mute);
	font: 500 13px/1 'Archivo', system-ui, sans-serif;
	letter-spacing: 0.02em;
}


/* ─── Card body ─────────────────────────────────────────────────── */

.p3tm-party__body {
	padding: 22px 20px 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.p3tm-party__role {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font: 700 10px/1 'Space Mono', ui-monospace, monospace;
	letter-spacing: 0.18em;
	color: var(--p3tm-party-ink);
}

.p3tm-party__role-shape {
	flex-shrink: 0;
	overflow: visible;
}

.p3tm-party__name {
	font: 700 clamp(22px, 1.7vw, 26px)/1.05 'National Park', 'Archivo', system-ui, sans-serif;
	letter-spacing: 0;
	color: var(--p3tm-party-ink);
	margin: 0 0 14px;
}

.p3tm-party__bio {
	font: 400 15px/1.55 'Newsreader', Georgia, serif;
	color: var(--p3tm-party-ink);
	margin-bottom: 24px;
	flex-grow: 1;
}

.p3tm-party__bio p {
	margin: 0 0 0.7em;
}

.p3tm-party__bio p:last-child {
	margin-bottom: 0;
}

.p3tm-party__social {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 16px !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.p3tm-party__social li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.p3tm-party__social li::before,
.p3tm-party__social li::marker {
	content: none !important;
	display: none !important;
}

.p3tm-party__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(27, 25, 23, 0.45);
	line-height: 0;
	transition: color 0.18s ease, transform 0.18s ease;
	text-decoration: none;
}

.p3tm-party__social-link:hover,
.p3tm-party__social-link:focus-visible {
	color: var(--p3tm-party-accent, var(--p3tm-party-orange));
	transform: translateY(-1px);
	outline: none;
}

.p3tm-party__social-link:focus-visible {
	outline: 2px solid var(--p3tm-party-accent, var(--p3tm-party-orange));
	outline-offset: 3px;
	border-radius: 2px;
}

.p3tm-party__social-link svg {
	display: block;
	width: 20px;
	height: 20px;
}

@media (prefers-reduced-motion: reduce) {
	.p3tm-party__social-link {
		transition: color 0.18s ease;
	}
	.p3tm-party__social-link:hover,
	.p3tm-party__social-link:focus-visible {
		transform: none;
	}
}

.p3tm-party__divider {
	border: 0;
	border-top: 1px solid var(--p3tm-party-ink-faint);
	margin: 0 0 14px;
}

.p3tm-party__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.p3tm-party__footer-label {
	font: 700 10px/1 'Space Mono', ui-monospace, monospace;
	letter-spacing: 0.22em;
	color: var(--p3tm-party-ink-mute);
	text-transform: uppercase;
	white-space: nowrap;
}

.p3tm-party__footer-count {
	font: 800 20px/1 'Archivo', system-ui, sans-serif;
	color: var(--p3tm-party-ink);
	letter-spacing: -0.01em;
}


/* ─── Responsive ────────────────────────────────────────────────── */

@media (max-width: 960px) {
	.p3tm-party__grid { --p3tm-party-cols: 2 !important; }
}

@media (max-width: 520px) {
	.p3tm-party__grid { --p3tm-party-cols: 1 !important; }
}