/**
 * Atlas Arcadia — the single Location page.
 *
 * Plan: docs/plans/2026-09-14-001-feat-location-page-redesign-plan.md (U6)
 *
 * TOKENS. The design system names things semantically (--surface-page,
 * --action-primary); the site names the palette (--aa-orange, from aa-points.php,
 * inlined on every page). This file maps the first onto the second, scoped to the
 * page root, with literal fallbacks — so the page follows the site's palette the
 * day it changes and still draws correctly if aa-points.php is absent.
 *
 * BACKGROUND AND FOREGROUND ARE SET TOGETHER, on the root and on every card. The7
 * regenerates custom.css on cache clears and has reverted the site to a dark
 * #252525 body more than once; a section that only set its text colour went
 * invisible that day.
 *
 * WHAT IS NOT IN HERE, deliberately: the design canvas's fixed sidebar sizes
 * (388×742, 351×187). Those are artboard dimensions, not layout.
 *
 * BREAKPOINT. 1024px, matching Elementor's tablet boundary (max-width: 1023px),
 * so this page stacks at the same width the header does.
 */

.aa-lp {
	--lp-orange: var( --aa-orange, #db680b );
	--lp-orange-dark: #b8560a;
	--lp-brown: var( --aa-brown, #6a3306 );
	--lp-brown-dark: #4a2404;
	--lp-yellow: var( --aa-yellow, #fae905 );
	--lp-yellow-light: #fdf28a;
	--lp-cream: var( --aa-cream, #fdf6e8 );
	--lp-white: #fff;
	--lp-muted: var( --aa-muted, #7d6f5a );
	--lp-rule: #e8ddc4;
	--lp-shadow: 0 2px 8px rgba( 74, 36, 4, .10 );
	--lp-radius: 8px;
	--lp-display: var( --aa-display, 'Cartridge', ui-sans-serif, system-ui, sans-serif );
	--lp-text: var( --aa-text, 'Poppins', ui-sans-serif, system-ui, sans-serif );

	box-sizing: border-box;
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 40px 56px;
	background: var( --lp-cream );
	color: var( --lp-brown );
	font-family: var( --lp-text );
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: normal;
}

.aa-lp *,
.aa-lp *::before,
.aa-lp *::after {
	box-sizing: border-box;
}

/* NOT the site's button. `.aa-lp a` outranks `.aa-points__cta` on specificity,
   and without the :not() every pill on the page drew orange text on orange. */
.aa-lp a:not( .aa-points__cta ) {
	color: var( --lp-orange );
	text-decoration: none;
}

.aa-lp a:not( .aa-points__cta ):hover {
	color: var( --lp-brown );
}

.aa-lp a:focus-visible,
.aa-lp summary:focus-visible,
.aa-lp button:focus-visible {
	outline: 3px solid var( --lp-brown );
	outline-offset: 2px;
}

.aa-lp h1,
.aa-lp h2,
.aa-lp h3 {
	font-family: var( --lp-display );
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
}

.aa-lp p {
	margin: 0;
}

/* --- header row ------------------------------------------------------- */

.aa-lp__top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 28px;
	padding: 26px 0 18px;
}

.aa-lp__crumbs {
	font-size: 13px;
	color: var( --lp-muted );
}

.aa-lp__sep {
	padding: 0 6px;
}

.aa-lp__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	font-size: 13px;
	font-weight: 600;
	color: var( --lp-orange );
}

/* --- the two grids ---------------------------------------------------- */

.aa-lp__grid {
	display: grid;
	grid-template-columns: minmax( 0, 2.4fr ) minmax( 0, 1fr );
	gap: 16px;
}

.aa-lp__grid--hero {
	align-items: stretch;
}

.aa-lp__grid--body {
	margin-top: 32px;
	align-items: start;
}

.aa-lp__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* --- hero ------------------------------------------------------------- */

.aa-lp__hero {
	position: relative;
	margin: 0;
	flex: 1;
	border-radius: var( --lp-radius );
	overflow: hidden;
	box-shadow: var( --lp-shadow );
	background: var( --lp-brown-dark );
	color: var( --lp-white );
}

/* Two classes deep on every <img> rule in this file: Elementor and The7 both set
   `img { height: auto }` under a container class, which beats a single class and
   left a real photo short of its frame with a dark band above it. */
.aa-lp .aa-lp__hero-link,
.aa-lp .aa-lp__hero-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.aa-lp .aa-lp__hero-img {
	object-fit: cover;
	max-width: none;
}

.aa-lp__hero-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient( to top, rgba( 74, 36, 4, .92 ) 0%, rgba( 74, 36, 4, .55 ) 40%, rgba( 74, 36, 4, .05 ) 72% );
}

.aa-lp__hero-inner {
	position: relative;
	min-height: clamp( 240px, 34vw, 500px );
	padding: 20px 32px 28px;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}

.aa-lp__hero-inner a,
.aa-lp__hero-inner p {
	pointer-events: auto;
}

.aa-lp__badge {
	align-self: flex-start;
	background: var( --lp-yellow );
	color: var( --lp-brown );
	font-family: var( --lp-display );
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 999px;
	line-height: 1.2;
}

.aa-lp__hero-foot {
	margin-top: auto;
	padding-top: 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 28px;
}

.aa-lp__hero-text {
	min-width: 0;
}

.aa-lp .aa-lp__title {
	font-size: clamp( 28px, 4vw, 44px );
	line-height: 1.05;
	color: var( --lp-white );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, .35 );
}

.aa-lp__place {
	margin-top: 8px;
	font-size: 15px;
	color: var( --lp-white );
}

.aa-lp__hero-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-width: 320px;
}

.aa-lp__hero-cta p {
	font-size: 14px;
	line-height: 1.4;
	color: var( --lp-white );
	text-wrap: pretty;
}

/* The site's button (.aa-points__cta) carries the look; these only size it. */
.aa-lp .aa-lp__cta {
	text-transform: uppercase;
}

.aa-lp .aa-lp__cta--hero {
	font-size: 17px;
	padding: 14px 26px;
}

.aa-lp .aa-lp__cta--block {
	display: block;
	width: 100%;
	font-size: 16px;
	padding: 12px 20px;
}

/* --- caption under a real photo --------------------------------------- */

.aa-lp__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding: 10px 2px 0;
}

.aa-lp__caption-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.aa-lp__caption-title {
	font-size: 13px;
	font-weight: 700;
	color: var( --lp-brown );
}

.aa-lp__caption-credit {
	font-size: 12px;
	color: var( --lp-muted );
}

/* --- chips ------------------------------------------------------------ */

.aa-lp__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aa-lp__chips--lead {
	margin-bottom: 18px;
}

.aa-lp__chip {
	font-size: 12px;
	line-height: 1.4;
	padding: 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.aa-lp__chip--type {
	font-weight: 600;
	background: var( --lp-yellow );
	color: var( --lp-brown );
}

.aa-lp__chip--status {
	background: transparent;
	color: var( --lp-brown );
	box-shadow: inset 0 0 0 1px var( --lp-rule );
}

.aa-lp__chip--coins {
	font-weight: 600;
	background: var( --lp-brown );
	color: var( --lp-white );
}

/* --- map card --------------------------------------------------------- */

.aa-lp__mapcard {
	display: flex;
	flex-direction: column;
	min-height: 240px;
	border-radius: var( --lp-radius );
	overflow: hidden;
	box-shadow: var( --lp-shadow );
	background: var( --lp-white );
	color: var( --lp-brown );
}

.aa-lp__map {
	flex: 1;
	min-height: 200px;
	background: #fdf3e3;
	z-index: 0;
}

.aa-lp__map--none {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --lp-muted );
	font-size: 14px;
}

.aa-lp__map-address {
	padding: 8px 12px;
	font-size: 11px;
	color: var( --lp-muted );
	border-top: 1px solid var( --lp-rule );
}

.aa-lp__pin {
	width: 26px;
	height: 26px;
	margin: -26px 0 0 -13px;
	border-radius: 50% 50% 50% 0;
	background: var( --lp-orange );
	border: 3px solid var( --lp-white );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .35 );
	transform: rotate( -45deg );
}

/* --- reading column --------------------------------------------------- */

.aa-lp__description {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.6;
	color: var( --aa-ink, #8a4a12 );
	text-wrap: pretty;
	/* Descriptions end in a References list of bare URLs, which a phone cannot
	   break anywhere else. Measured: 470px of link on a 375px screen. */
	overflow-wrap: anywhere;
}

.aa-lp__description p + p {
	margin-top: 1em;
}

/* Reference citations (docs/plans/2026-09-15-001-feat-submit-location-single-address-pin-plan.md, U9).
   Numbered white rows under the description, as the Submit Location design draws them. */
.aa-lp__citations {
	margin: 0 0 28px;
}

.aa-lp__citations ol {
	list-style: none;
	counter-reset: aa-cite;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.aa-lp__cite {
	counter-increment: aa-cite;
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 10px 14px;
	background: var( --lp-white );
	color: var( --lp-brown );
	border-radius: var( --lp-radius );
	box-shadow: var( --lp-shadow );
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.aa-lp__cite::before {
	content: counter( aa-cite, decimal-leading-zero );
	flex: none;
	font-family: var( --lp-display );
	font-size: 13px;
	color: var( --lp-muted );
}

.aa-lp__cite-ref {
	margin-left: auto;
	padding-left: 8px;
	font-size: 12px;
	color: var( --lp-muted );
	text-align: right;
}

@media ( max-width: 600px ) {
	.aa-lp__cite {
		flex-wrap: wrap;
	}

	.aa-lp__cite-ref {
		margin-left: 0;
		padding-left: 0;
		flex-basis: 100%;
		text-align: left;
	}
}

.aa-lp .aa-lp__h2 {
	font-size: 24px;
	line-height: 1.2;
	margin-bottom: 12px;
	color: var( --lp-brown );
}

.aa-lp .aa-lp__h3 {
	font-size: 20px;
	line-height: 1.2;
	margin: 4px 0;
	color: var( --lp-brown );
}

.aa-lp__photo-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 12px;
}

.aa-lp__photo,
.aa-lp__tile {
	height: 140px;
	border-radius: var( --lp-radius );
	overflow: hidden;
}

.aa-lp__photo {
	display: block;
	background: var( --lp-brown-dark );
	box-shadow: var( --lp-shadow );
}

.aa-lp .aa-lp__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .2s ease;
}

.aa-lp__photo:hover .aa-lp__photo-img {
	transform: scale( 1.03 );
}

/* A gallery photo and its credit. The figure is the grid item; the photo keeps
   the fixed tile height, so the Add photos tile still lines up with the images
   and the credit hangs below them. */
.aa-lp .aa-lp__photo-cell {
	min-width: 0;
	margin: 0;
}

.aa-lp .aa-lp__photo-credit {
	padding: 6px 2px 0;
	font-size: 12px;
	line-height: 1.35;
	color: var( --lp-muted );
	overflow-wrap: anywhere;
}

.aa-lp .aa-lp__photo-credit a {
	color: inherit;
	text-decoration: underline;
}

.aa-lp .aa-lp__photo-credit a:hover {
	color: var( --lp-orange );
}

.aa-lp .aa-lp__photo-credit--none {
	font-style: italic;
}

.aa-lp__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	border: 2px dashed var( --lp-orange );
	background: var( --lp-white );
	color: var( --lp-orange );
	font-family: var( --lp-display );
	text-align: center;
	text-transform: uppercase;
}

.aa-lp .aa-lp__tile--add {
	font-size: 15px;
	color: var( --lp-orange );
}

.aa-lp .aa-lp__tile--add:hover {
	background: var( --lp-yellow-light );
	color: var( --lp-orange );
}

.aa-lp__tile-plus {
	font-size: 26px;
	line-height: 1;
}

.aa-lp__tile--count {
	font-size: 14px;
	font-weight: 300;
	text-transform: none;
}

/* The Photo Proposals entry point sits in the column under the photos. Its own
   stylesheet draws it; this only spaces it for this column. */
.aa-lp .aa-pp-entry {
	margin-top: 28px;
	scroll-margin-top: 120px;
}

.aa-lp__adjacent {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 16px;
	margin-top: 32px;
	padding: 18px 0;
	border-top: 1px solid var( --lp-rule );
	border-bottom: 1px solid var( --lp-rule );
}

.aa-lp__adj {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.aa-lp__adj--next {
	justify-self: end;
	text-align: right;
}

.aa-lp__adj-arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var( --lp-orange );
	color: var( --lp-white );
	font-size: 16px;
}

.aa-lp__adj-text {
	min-width: 0;
}

.aa-lp__adj-label {
	display: block;
	font-family: var( --lp-display );
	font-size: 15px;
	text-transform: uppercase;
	color: var( --lp-brown );
}

.aa-lp__adj-title {
	display: block;
	font-size: 14px;
	line-height: 1.35;
	color: var( --lp-orange );
}

.aa-lp__comments {
	margin-top: 28px;
}

/* ONE card. The7's markup nests .comment-respond inside .comments-area, and
   carding both drew a box inside a box — with the textarea a third inside that.
   The outer area is the card; the respond block and the field sit flat in it. */
.aa-lp__comments .comments-area {
	background: var( --lp-white );
	color: var( --lp-brown );
	border-radius: var( --lp-radius );
	box-shadow: var( --lp-shadow );
	padding: 16px 18px;
}

.aa-lp__comments .comment-respond {
	background: transparent;
	box-shadow: none;
	border: 0;
	padding: 0;
	margin: 0;
}

.aa-lp .aa-lp__comments .comment-reply-title {
	font-family: var( --lp-display );
	font-size: 18px;
	color: var( --lp-brown );
	margin: 0 0 4px;
}

.aa-lp__comments .logged-in-as,
.aa-lp__comments .must-log-in {
	font-size: 14px;
	color: var( --lp-muted );
	margin-bottom: 10px;
}

.aa-lp .aa-lp__comments textarea {
	display: block;
	width: 100%;
	min-height: 110px;
	padding: 10px 12px;
	background: var( --lp-cream );
	color: var( --lp-brown );
	font-family: var( --lp-text );
	font-size: 15px;
	border: 1px solid var( --lp-rule );
	border-radius: var( --lp-radius );
	box-shadow: none;
	resize: vertical;
}

.aa-lp .aa-lp__comments textarea:focus {
	outline: 2px solid var( --lp-orange );
	outline-offset: 1px;
	border-color: transparent;
}

/* The submit button's look is site-wide, not here: Elementor custom code #94971,
   set by wp/update-comment-button-snippet.php. */
.aa-lp__comments .form-submit {
	margin: 12px 0 0;
}

/* --- sidebar ---------------------------------------------------------- */

.aa-lp__side {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.aa-lp__card {
	background: var( --lp-white );
	color: var( --lp-brown );
	border-radius: var( --lp-radius );
	box-shadow: var( --lp-shadow );
	padding: 18px;
}

.aa-lp .aa-lp__eyebrow {
	font-family: var( --lp-text );
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var( --lp-muted );
	margin-bottom: 10px;
}

.aa-lp__details dl {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 8px 12px;
	align-items: baseline;
	margin: 0;
	font-size: 14px;
}

.aa-lp__details dt {
	font-family: var( --lp-display );
	font-size: 12px;
	letter-spacing: .03em;
	color: var( --lp-orange );
}

.aa-lp__details dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.aa-lp__help {
	background: var( --lp-brown );
	color: var( --lp-white );
	border-radius: var( --lp-radius );
	padding: 20px;
}

.aa-lp .aa-lp__help-title {
	font-size: 20px;
	text-transform: uppercase;
	color: var( --lp-yellow );
	margin-bottom: 8px;
}

.aa-lp__help p {
	font-size: 14px;
	line-height: 1.55;
	color: var( --lp-white );
	margin-bottom: 14px;
}

.aa-lp__edit {
	font-size: 13px;
	text-align: center;
}

.aa-lp__token-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	gap: 12px;
}

.aa-lp__token {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	background: var( --lp-white );
	border-radius: var( --lp-radius );
	box-shadow: var( --lp-shadow );
}

.aa-lp__token:hover {
	box-shadow: 0 6px 20px rgba( 74, 36, 4, .18 );
}

.aa-lp__token-face {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: var( --lp-yellow );
	color: var( --lp-brown );
}

.aa-lp .aa-lp__token-img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.aa-lp__token-blank {
	font-family: var( --lp-display );
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.aa-lp__token-title {
	font-size: 13px;
	line-height: 1.35;
	color: var( --lp-orange );
	text-wrap: pretty;
}

/* --- Related Tokens, paged: four at a time ----------------------------- */

/* One page fills the track's width; the track snaps page by page. Native
   scrolling, so a swipe works and the tokens stay reachable without page.js. */
.aa-lp__token-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	/* NO GAP between pages. A page must be exactly one track-width wide, or
	   every step of one width lands 16px short and neighbours peek in at both
	   edges — measured on the first cut, drifting further each page. */
	gap: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	margin: 0 -6px;
}

.aa-lp__token-track::-webkit-scrollbar {
	display: none;
}

.aa-lp__token-track:focus-visible {
	outline: 3px solid var( --lp-brown );
	outline-offset: 2px;
}

/* The shadow room lives inside each page, where the track's overflow cannot
   clip it; the track's negative margin puts the cards back on the column edge. */
.aa-lp .aa-lp__token-page {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-content: start;
	padding: 4px 6px 8px;
	scroll-snap-align: start;
}

.aa-lp__token-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}

.aa-lp__token-prev,
.aa-lp__token-next {
	flex: none;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --lp-orange );
	color: var( --lp-white );
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.aa-lp__token-prev:hover:not( :disabled ),
.aa-lp__token-next:hover:not( :disabled ) {
	background: var( --lp-brown );
}

.aa-lp__token-prev:disabled,
.aa-lp__token-next:disabled {
	background: var( --lp-rule );
	color: var( --lp-muted );
	cursor: default;
}

.aa-lp__token-count {
	font-size: 13px;
	color: var( --lp-muted );
}

.aa-lp__token-total {
	font-family: var( --lp-text );
	font-size: 14px;
	color: var( --lp-muted );
}

@media ( prefers-reduced-motion: reduce ) {
	.aa-lp__token-track {
		scroll-behavior: auto;
	}
}

.aa-lp__empty {
	font-size: 14px;
	color: var( --lp-muted );
}

/* --- stacked: below Elementor's desktop boundary ----------------------- */

@media ( max-width: 1023px ) {
	.aa-lp {
		padding: 0 24px 40px;
	}

	.aa-lp__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.aa-lp__mapcard {
		min-height: 260px;
	}

	.aa-lp__grid--body {
		margin-top: 24px;
	}

	/* Reading order when stacked. Details and the photo prompt come before the
	   long column, so a visitor learns what the place is first — but Related
	   Tokens belong at the end, not between the prompt and the description.
	   Moving the whole sidebar could not do both, so both columns dissolve into
	   one list here and each piece takes its place. */
	.aa-lp__grid--body {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.aa-lp__grid--body > .aa-lp__main,
	.aa-lp__grid--body > .aa-lp__side {
		display: contents;
	}

	.aa-lp__grid--body .aa-lp__details { order: 1; }
	.aa-lp__grid--body .aa-lp__help    { order: 2; }
	.aa-lp__grid--body .aa-lp__edit    { order: 3; }
	.aa-lp__grid--body .aa-lp__main > * { order: 5; }
	.aa-lp__grid--body .aa-lp__tokens  { order: 8; }
	.aa-lp__grid--body .aa-lp__comments { order: 9; }

	.aa-lp__description,
	.aa-lp__chips--lead {
		margin-bottom: 0;
	}

	.aa-lp__adjacent,
	.aa-lp__comments,
	.aa-lp .aa-pp-entry {
		margin-top: 0;
	}
}

@media ( max-width: 600px ) {
	.aa-lp {
		padding: 0 16px 32px;
	}

	.aa-lp__top {
		padding: 16px 0 12px;
	}

	.aa-lp__hero-inner {
		min-height: 320px;
		padding: 16px 18px 20px;
	}

	.aa-lp__hero-cta {
		max-width: none;
	}

	.aa-lp__photo-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.aa-lp__photo,
	.aa-lp__tile {
		height: 120px;
	}

	.aa-lp__adj--next {
		justify-self: stretch;
		justify-content: flex-end;
	}
}

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