/* Outside Adventures - Spot enrichment styles (Batch B, May 17 2026).
   Renders "Getting there" + "Pair with" blocks on activity-spot pages.
   Enqueued only when oa_is_activity_spot_page() is true.
   Versioned via filename; bump v1 -> v2 on each meaningful change. */

/* ---------- Container layout ------------------------------------------- */

.spot-enrich {
	margin: 32px 0;
	padding: 28px 0;
	border-top: 1px solid rgba(19,19,19,.08);
	border-bottom: 1px solid rgba(19,19,19,.08);
}

.spot-enrich + .spot-enrich {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.spot-enrich .se-eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--muted);
	text-transform: uppercase;
	margin-bottom: 14px;
}

.spot-enrich h2,
.spot-enrich h3.se-title {
	font-family: 'Bricolage Grotesque', 'Manrope', serif;
	font-size: 22px;
	line-height: 1.18;
	font-weight: 600;
	margin: 0 0 18px;
	color: var(--ink);
}

@media (max-width: 540px) {
	.spot-enrich h2,
	.spot-enrich h3.se-title { font-size: 19px; }
}

/* ---------- Getting there block --------------------------------------- */

.spot-transport .se-rows {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 10px 22px;
	font-family: 'Manrope', sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink);
}

.spot-transport .se-rows dt {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	padding-top: 3px;
	white-space: nowrap;
}

.spot-transport .se-rows dd {
	margin: 0;
}

.spot-transport .se-carfree {
	display: inline-block;
	margin-top: 4px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(19,19,19,.06);
	color: var(--ink);
}

.spot-transport .se-carfree[data-level="Easy"]        { background: rgba(46,166,81,.14); color: #1B7A3B; }
.spot-transport .se-carfree[data-level="Possible"]    { background: rgba(255,198,41,.18); color: #8A6800; }
.spot-transport .se-carfree[data-level="Drive-only"],
.spot-transport .se-carfree[data-level="Drive-only practically"] { background: rgba(194,74,42,.14); color: #A23A1F; }

@media (max-width: 540px) {
	.spot-transport .se-rows {
		grid-template-columns: 1fr;
		gap: 4px 0;
	}
	.spot-transport .se-rows dt { padding-top: 12px; }
	.spot-transport .se-rows dt:first-of-type { padding-top: 0; }
}

/* ---------- Pair with block ------------------------------------------- */

.spot-pair-with .se-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.spot-pair-with .se-list li {
	padding: 12px 0;
	border-bottom: 1px solid rgba(19,19,19,.06);
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.spot-pair-with .se-list li:last-child { border-bottom: 0; }

.spot-pair-with .se-list .se-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--blue);
	flex: 0 0 6px;
	transform: translateY(-2px);
}

.spot-pair-with .se-list a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid rgba(46,123,214,.4);
	transition: color 0.15s, border-color 0.15s;
}

.spot-pair-with .se-list a:hover {
	color: var(--blue);
	border-bottom-color: var(--blue);
}

/* ---------- Hairline for visual rhythm ------------------------------- */

.spot-enrich .se-note {
	margin-top: 14px;
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	line-height: 1.55;
	color: var(--muted);
	font-style: italic;
}