/* static/css/parada.css — Parada page styles (header, actions, grids, utilities)
	Variables scoped to `body.parada-page` (moved from styles.css) so they
	only apply on parada pages. Interactive rules are scoped under
	`body.parada-page` to avoid global overrides.
*/

/* ====================================================================
	 Parada page styles — refactored and organized
	 Sections:
		 1. Variables (scoped to body.parada-page)
		 2. Header / identity / avatar
		 3. Contact actions
		 4. Layout / grids / cards
		 5. Highlight strip & utilities
	 ==================================================================== */

/* 1) Variables (page-scoped) */
body.parada-page {
	--parada-contact-gap: 0.75rem;
	--parada-avatar-size: 4.25rem;
	--parada-border-width: 2px;
	--parada-horizontal-gutter: 12px;
	--parada-highlight-max-width: 1320px;
	--parada-highlight-padding: 12px;
	--parada-highlight-pt: 6px;
	--parada-highlight-pb: 24px;
}


/* 2) Header / identity */
.parada-header {
	padding-top: 6px;
	padding-bottom: 0.5rem;
}
.parada-header-contact { margin-top: 0.125rem; padding-bottom: 0.25rem; }

.parada-avatar {
	width: calc(var(--parada-avatar-size) - (2 * var(--parada-border-width)));
	height: calc(var(--parada-avatar-size) - (2 * var(--parada-border-width)));
	object-fit: cover;
	border-radius: 50%;
	flex-shrink: 0;
	display: block;
	border: none;
	/* vertical divider at avatar's right edge to match the box border */
	border-right: var(--parada-border-width) solid rgba(255,255,255,0.18);
	background: none;
}

.parada-title {
	font-weight: 700;
	color: #fff;
	font-size: 1.35rem;
	line-height: 1.02;
	margin: 0 0 0.25rem 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.parada-name { font-weight: 500; color: rgba(255,255,255,0.95); margin: 0; line-height: 1; }
.parada-market { font-weight: 500; color: rgba(255,255,255,0.68); font-size: 1.05rem; margin-top: 0.25rem; }
.parada-number { color: #9aa0a6; }


/* 3) Contact actions */
.parada-contact-box {
	margin: 0.5rem 0;
	width: 100%;
	box-sizing: border-box;
	background: var(--color-pine);
	display: flex;
	align-items: center;
	gap: 1rem;
	height: var(--parada-avatar-size);
	padding-left: 0; /* avatar flush */
	padding-right: 0.75rem;
	border-radius: 9999px;
	/* Use a thinner border for the paradista contact box so the avatar outline matches design */
	--parada-border-width: 0.5px;
	border: var(--parada-border-width) solid rgba(255,255,255,0.18);
	/* Remove left border so avatar can sit flush; divider lives on avatar */
	border-left: 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	overflow: hidden;
}

/* Ensure the paradista button and avatar sit flush to the left edge of the contact box */
.parada-contact-box > .paradista-open { margin-left: 0; padding-left: 0; }
.parada-contact-box > .paradista-open .parada-avatar { display: block; margin-left: 0; }
.parada-contact-actions {
	gap: var(--parada-contact-gap);
}
.parada-contact-btn:focus { outline: 2px solid rgba(255,255,255,0.12); outline-offset: 2px; }
.parada-contact-btn i { display: inline-block; line-height: 1; }

/* Use page scope to avoid !important overrides */
body.parada-page .parada-contact-btn {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	/* Slightly lighter background to distinguish from the box, keep white icon visible */
	background: rgba(255,255,255,0.10);
	border: 0.5px solid rgba(255,255,255,0.14);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
	text-decoration: none;
	font-size: 1rem;
	overflow: hidden;
}


/* 4) Layout / grids / cards */
.parada-no-side-padding { padding-left: 0; padding-right: 0; }

.parada-cards-section { --_h: var(--pill-card-img-h); }
.parada-cards-section .cards-row {
	display: flex;
	gap: var(--pill-gap, 2px);
	overflow-x: auto;
	padding: 6px 12px 0;
	scrollbar-width: none;
}
.parada-cards-section .cards-row::-webkit-scrollbar { display: none; }
@media (max-width: 480px) { .parada-cards-section { --_h: 140px; } }

.parada-pill-section {
	max-width: var(--parada-highlight-max-width);
	margin-inline: auto;
	padding-inline: var(--parada-highlight-padding);
	box-sizing: border-box;
}


/* 5) Highlight strip & utilities */
.parada-highlight-container { max-width: var(--parada-highlight-max-width); margin-inline: auto; width: 100%; }
.parada-highlight-inner { padding: var(--parada-highlight-padding); }
.parada-highlight-title { color: var(--color-fog); }
.parada-highlight-strip {
	background: var(--color-evergreen);
	width: 100%;
	padding-top: var(--parada-highlight-pt);
	padding-bottom: var(--parada-highlight-pb);
	margin-top: 12px;
}

/* Mercat highlight cards when shown on parada pages */
body.parada-page .mercat-highlights { --mh-card-w: 50vw; }
body.parada-page .mercat-highlights .mh-card {
	flex: 0 0 var(--mh-card-w);
	min-width: var(--mh-card-w);
}
body.parada-page .mercat-highlights .mh-img { aspect-ratio: 1 / 1; width: 100%; height: auto; }
body.parada-page .mercat-highlights .mh-img img:not(.mh-vendor-avatar) { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) {
	body.parada-page .mercat-highlights { --mh-card-w: min(50vw, 320px); }
}

body.parada-page .mercat-highlights .mh-name {
	line-height: 1.06;
	margin: 0;
	padding-top: 2px;
	font-size: .92rem;
}
body.parada-page .mercat-highlights .mh-meta > * { line-height: 1.08; }

.parada-page .btn-pine { border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; }
/* Page-specific small tokens */