/* PINAX map page (/map/) and region archive (/region/{slug}/). Owner: home agent.
   Kafeneio system: tokens only, flat colour, no gradients, no shadows. The map component itself lives in 30-home.css. */

/* ---------- Map page ---------- */
.px-mappage__map { padding-block: var(--px-space-4) var(--px-section); }
.px-mappage__content { padding-bottom: var(--px-space-6); }

.px-mapreg { padding-bottom: var(--px-space-6); }
.px-mapreg__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	margin-bottom: var(--px-space-5);
	padding-top: var(--px-space-4);
	border-top: var(--px-rule);
}
.px-mapreg__head .px-code { align-self: center; }
.px-mapreg__name { font-size: var(--px-h3); line-height: 0.95; }
.px-mapreg__el { color: var(--px-grey); font-size: var(--px-text-lg); }
.px-mapreg__link { margin-left: auto; font-weight: 700; }
.px-mapreg__note { max-width: 44ch; color: var(--px-grey); }
.px-mapreg__soon {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 0 clamp(2rem, 5vw, 5rem);
	margin: var(--px-space-3) 0 0;
	padding: 0;
	list-style: none;
}
.px-mapreg__soon .px-code--plain { display: inline-block; min-width: 3rem; }

@media (max-width: 40em) {
	.px-mapreg__link { margin-left: 0; flex-basis: 100%; }
}

/* ---------- Region page: sign band ---------- */
.px-rsign {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	min-height: min(70vh, 40rem);
}
.px-rsign--solo { grid-template-columns: 1fr; min-height: 0; }
.px-rsign__sign {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--px-space-6);
	padding: clamp(1.5rem, 4vw, 3.5rem) var(--px-gutter) clamp(2rem, 5vw, 4.5rem);
}
.px-rsign__crumb { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--px-text-sm); font-weight: 600; }
.px-rsign__crumb a { color: inherit; }
.px-rsign__code {
	display: inline-block;
	padding: 0.3em 0.45em 0.2em;
	background: var(--px-paper);
	color: var(--px-green);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: 1.625rem;
	line-height: 1;
	letter-spacing: 0.04em;
}
.px-rsign__title {
	margin-top: var(--px-space-3);
	font-size: clamp(3.5rem, 2rem + 6vw, 8rem);
	line-height: 0.86;
	max-width: 11ch;
}
.px-rsign__el {
	margin-top: var(--px-space-3);
	color: var(--px-mustard);
	font-family: var(--px-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	line-height: 1;
}
.px-rsign__count {
	margin-top: var(--px-space-4);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.px-rsign__photo { position: relative; margin: 0; background: var(--px-ink); }
.px-rsign__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-rsign__cap {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.625rem 1rem;
	background: var(--px-paper);
	color: var(--px-ink);
	font-weight: 600;
	font-size: var(--px-text-sm);
}

@media (max-width: 60em) {
	.px-rsign { grid-template-columns: 1fr; min-height: 0; }
	.px-rsign__photo { aspect-ratio: 4 / 3; }
}

/* ---------- Region page: essay beside the mini map ---------- */
.px-rplace__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.px-rplace__prose { margin-top: var(--px-space-4); }
.px-rplace__prose > p + p { margin-top: 1em; }
.px-rplace__map { max-width: 32rem; width: 100%; justify-self: end; }

@media (max-width: 60em) {
	.px-rplace__grid { grid-template-columns: 1fr; }
	.px-rplace__map { justify-self: start; max-width: 26rem; }
}

/* ---------- Region page: boxes ---------- */
.px-robjects__empty { max-width: 44ch; font-size: var(--px-text-lg); line-height: 1.5; }
.px-robjects__more { margin-top: var(--px-space-3); max-width: 28rem; }
.px-rboxes { margin-top: var(--px-space-6); max-width: 42rem; }
.px-rboxes__title { font-family: var(--px-font-display); font-weight: 800; font-size: var(--px-h3); line-height: 0.95; text-transform: uppercase; }
.px-rboxes__list { margin: var(--px-space-2) 0 0; padding: 0; list-style: none; }
.px-rboxes__list li + li { border-top: var(--px-hairline); }
.px-rboxes .px-arrow { align-items: baseline; font-size: var(--px-text-lg); }
.px-rboxes__name { flex: 1; }
.px-rboxes__price { color: var(--px-green); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-rboxes__price :where(del) { color: var(--px-grey); font-weight: 400; }
.px-rboxes__price :where(ins) { text-decoration: none; }

/* ---------- Region page: notes and recipes about the region's objects ---------- */
.px-rnotes__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--px-space-4) var(--px-space-5);
	margin: var(--px-space-4) 0 0;
	padding: 0;
	list-style: none;
}
.px-rnotes__item { padding-top: var(--px-space-3); border-top: var(--px-rule); }
.px-rnotes__type { color: var(--px-red); font-size: var(--px-text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.px-rnotes__title { margin-top: 0.375rem; font-family: var(--px-font-display); font-weight: 800; font-size: var(--px-h3); line-height: 0.95; text-transform: uppercase; }
.px-rnotes__title a { color: inherit; text-decoration: none; }
.px-rnotes__title a:hover { color: var(--px-red); text-decoration: underline; text-decoration-thickness: 2px; }
.px-rnotes__excerpt { margin-top: 0.625rem; max-width: 52ch; line-height: 1.5; }
.px-rnotes__objects { margin-top: 0.625rem; color: var(--px-grey); font-size: var(--px-text-sm); font-weight: 600; }

/* Map page, wide screens: region sign on the left, its objects on the right.
   Cards fill the track with auto-fill columns of at least 16rem, so they stay shelf-sized
   (the old fixed 4-up squeezed each card to 198px and wrapped names, meta lines and tickets). */
.px-mapreg__cards ul.px-cards { margin-top: 0; }
@media (min-width: 60em) {
	.px-mapreg__row {
		display: grid;
		grid-template-columns: minmax(12rem, 1fr) 3fr;
		column-gap: var(--px-space-5);
		align-items: start;
		padding-top: var(--px-space-4);
		border-top: var(--px-rule);
	}
	.px-mapreg__row > .px-mapreg__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		margin-bottom: 0;
		padding-top: 0;
		border-top: 0;
	}
	.px-mapreg__row .px-mapreg__head .px-code { align-self: flex-start; }
	.px-mapreg__row .px-mapreg__link { margin-left: 0; margin-top: var(--px-space-2); }
	.px-mapreg__cards ul.px-cards { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
	.px-mapreg__cards .px-ticket__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}