/* ============================================================
   Shop Local Delmarva — the member page (/members/{slug}).

   Every rule is prefixed .sld-member on purpose: the page renders inside
   <main class="sld"> (and the resident shell), whose stylesheets set
   .sld p, .sld h1 and .sld a at (0,1,1). Two classes outrank that, so the
   page looks the same whichever chrome wraps it.

   Phone first; desktop from 768px. Palette: the resident side's.
   Gold belongs to the Local Fav mark and nothing else.
   ============================================================ */

.sld-member{
	--mp-paper:#f6f5f1;
	--mp-ink:#1a1a1a;
	--mp-muted:#6b6b66;
	--mp-green:#0f5132;
	--mp-ochre:#a24a07;
	--mp-gold:#a47a14;
	--mp-card:#ffffff;
	--mp-line:#e6e4de;
	--mp-radius:12px;
	--mp-gutter:16px;
	--mp-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]) .sld-member{
		--mp-paper:#141614;--mp-ink:#ece9e1;--mp-muted:#a19d94;--mp-green:#8bbf9b;
		--mp-ochre:#e39a6b;--mp-gold:#dcb75c;--mp-card:#1c1f1c;--mp-line:#2c302c;
	}
}
:root[data-theme="dark"] .sld-member{
	--mp-paper:#141614;--mp-ink:#ece9e1;--mp-muted:#a19d94;--mp-green:#8bbf9b;
	--mp-ochre:#e39a6b;--mp-gold:#dcb75c;--mp-card:#1c1f1c;--mp-line:#2c302c;
}

.sld-member,.sld-member *,.sld-member *::before,.sld-member *::after{box-sizing:border-box}
.sld-member{
	max-width:1200px;margin:0 auto;padding:0 var(--mp-gutter) 56px;
	color:var(--mp-ink);font-family:var(--mp-font);font-size:16px;line-height:1.5;font-weight:400;
	-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;
}
.sld-member :where(a){color:inherit;text-decoration:none}
.sld-member :where(img){max-width:100%;height:auto}
.sld-member :where(h1,h2,h3,p,figure){margin:0}
.sld-member :where(a,button):focus-visible{outline:2.5px solid var(--mp-green);outline-offset:3px;border-radius:3px}

/* ---- breadcrumb (desktop) ---- */
.sld-member .mp-crumb{display:none}
.sld-member .mp-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:14px;color:var(--mp-muted)}
.sld-member .mp-crumb li+li::before{content:"\203A";margin-right:6px}
.sld-member .mp-crumb a{color:var(--mp-muted);text-decoration:none}
.sld-member .mp-crumb a:hover{text-decoration:underline;text-underline-offset:2px}
.sld-member .mp-crumb [aria-current]{color:var(--mp-ink)}

/* ---- photos: a swipeable strip on a phone ---- */
.sld-member .mp-photos{position:relative;margin:0 calc(-1 * var(--mp-gutter))}
.sld-member .mp-photo-track{
	display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--mp-line);
}
.sld-member .mp-photo-track::-webkit-scrollbar{display:none}
.sld-member .mp-photo{flex:0 0 100%;margin:0;aspect-ratio:4/3;scroll-snap-align:start;background:var(--mp-line)}
.sld-member .mp-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Back and Save, over the photos on a phone. */
.sld-member .mp-over{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none;z-index:2}
.sld-member .mp-over-btn{
	pointer-events:auto;display:inline-flex;align-items:center;gap:6px;
	background:rgba(26,26,26,.72);color:#fff;border:0;border-radius:999px;
	padding:9px 14px;font:inherit;font-size:14px;font-weight:600;line-height:1;
	text-decoration:none;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* Without a photo the row sits in the flow, on paper, as quiet pills. */
.sld-member .mp-over-bare,
.sld-member > .mp-over{position:static;margin:12px 0 0;justify-content:space-between}
.sld-member .mp-over-bare{justify-content:flex-start}
.sld-member .mp-over-bare .mp-over-btn,
.sld-member > .mp-over .mp-over-btn{background:var(--mp-card);color:var(--mp-ink);border:1px solid var(--mp-line)}

/* ---- identity ---- */
.sld-member .mp-identity{padding:18px 0 0}
.sld-member .mp-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 8px;font-size:14px;font-weight:600;line-height:1.3}
.sld-member .mp-tag{color:var(--mp-green)}
.sld-member .mp-fav{color:var(--mp-gold);display:inline-flex;align-items:center;gap:5px}
.sld-member .mp-star{flex:none;color:var(--mp-gold)}
.sld-member .mp-name{font-size:clamp(28px,4.6vw,40px);line-height:1.1;font-weight:700;letter-spacing:-.02em;text-wrap:balance;color:var(--mp-ink)}
.sld-member .mp-meta{color:var(--mp-muted);font-size:16px;margin-top:6px}
.sld-member .mp-since{color:var(--mp-muted);font-size:14px;margin-top:4px}

/* ---- body: one column on a phone, in the spec's phone order ---- */
.sld-member .mp-body{display:flex;flex-direction:column;gap:24px;margin-top:20px}
.sld-member .mp-main,.sld-member .mp-side,.sld-member .mp-card{display:contents}
.sld-member .mp-actions{order:1}
.sld-member .mp-hours{order:2}
.sld-member .mp-address{order:3}
.sld-member .mp-said{order:4}
.sld-member .mp-offers{order:5}
.sld-member .mp-save{order:6}

/* Call / Directions / Website */
.sld-member .mp-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sld-member .mp-act{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;
	text-align:center;background:var(--mp-card);color:var(--mp-ink);border:1px solid var(--mp-line);border-radius:var(--mp-radius);
	padding:12px 8px;text-decoration:none;
}
.sld-member .mp-act-k{font-weight:700;font-size:15px;line-height:1.2}
.sld-member .mp-act-v{font-size:12px;color:var(--mp-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sld-member .mp-act-pri{background:var(--mp-green);border-color:var(--mp-green);color:#fff}
.sld-member .mp-act-pri .mp-act-v{color:rgba(255,255,255,.82)}
.sld-member .mp-actions:has(.mp-act:only-child){grid-template-columns:1fr}
.sld-member .mp-actions:has(.mp-act:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}

/* Hours, today marked */
.sld-member .mp-h{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:0 0 14px;color:var(--mp-ink)}
.sld-member .mp-h-sm{font-size:16px;margin-bottom:0}
.sld-member .mp-hours-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.sld-member .mp-hours-list{font-variant-numeric:tabular-nums}
.sld-member .hrow{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--mp-line);font-size:15px;font-weight:400}
.sld-member .hrow:last-child{border-bottom:0}
.sld-member .hrow .dy{color:var(--mp-muted)}
.sld-member .hrow .tm{color:var(--mp-ink)}
.sld-member .hrow.today{font-weight:700}
.sld-member .hrow.today .dy,.sld-member .hrow.today .tm{color:var(--mp-green)}
.sld-member .status{display:none;align-items:center;gap:6px;font-size:13px;font-weight:700}
.sld-member .status.is-open,.sld-member .status.is-shut{display:inline-flex}
.sld-member .status .led{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.sld-member .status.is-open{color:var(--mp-green)}
.sld-member .status.is-shut{color:var(--mp-ochre)}

.sld-member .mp-address{font-style:normal;font-size:15px;line-height:1.5;color:var(--mp-ink)}

/* Buttons that open the interrupt (or, without it, link to /app/) */
.sld-member .mp-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	padding:12px 18px;border-radius:999px;border:1px solid transparent;
	font:inherit;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
}
.sld-member .mp-btn-primary{background:var(--mp-green);color:#fff;border-color:var(--mp-green)}
.sld-member .mp-btn-ghost{background:var(--mp-card);color:var(--mp-ink);border-color:var(--mp-line)}
.sld-member .mp-btn:hover{filter:brightness(1.06)}
.sld-member .mp-save{display:flex;gap:8px}
.sld-member .mp-save .mp-btn{flex:1}
.sld-member .mp-save .mp-save-side{display:none} /* on a phone, Save sits over the photos */

/* What neighbors say */
.sld-member .mp-rec{background:var(--mp-card);border:1px solid var(--mp-line);border-radius:var(--mp-radius);padding:18px 20px}
.sld-member .mp-rec+.mp-rec{margin-top:12px}
.sld-member .mp-rec-text{font-size:17px;line-height:1.55;white-space:pre-line;color:var(--mp-ink)}
.sld-member .mp-rec-who{color:var(--mp-muted);font-size:14px;margin-top:10px}
.sld-member .mp-reply{margin-top:14px;padding:12px 14px;background:var(--mp-paper);border-left:3px solid var(--mp-green);border-radius:0 8px 8px 0}
.sld-member .mp-reply-from{display:block;font-size:13px;font-weight:700;color:var(--mp-green);margin-bottom:4px}
.sld-member .mp-reply p{font-size:15px;line-height:1.5}
.sld-member .mp-empty{color:var(--mp-muted)}

/* The offer */
.sld-member .mp-offer{background:var(--mp-card);border:1px solid var(--mp-line);border-radius:var(--mp-radius);overflow:hidden;display:flex;flex-direction:column}
.sld-member .mp-offer+.mp-offer{margin-top:12px}
.sld-member .mp-offer-media{aspect-ratio:16/9;background:var(--mp-line)}
.sld-member .mp-offer-media img{width:100%;height:100%;object-fit:cover;display:block}
.sld-member .mp-offer-body{padding:18px 20px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sld-member .mp-offer-title{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--mp-ink)}
.sld-member .mp-offer-detail{font-size:16px;line-height:1.5}
.sld-member .mp-offer-meta{color:var(--mp-ochre);font-weight:700;font-size:14px}
.sld-member .mp-offer-body .mp-btn{margin-top:6px}

/* ---- bare listing ---- */
.sld-member .mp-bare-line{color:var(--mp-muted);font-size:16px;line-height:1.55;margin:18px 0 28px;max-width:60ch}
.sld-member.is-bare .mp-said{max-width:760px;margin-top:0}
.sld-member .mp-rule{border:0;border-top:1px solid var(--mp-line);margin:40px 0 14px}
.sld-member .mp-owner{font-size:13px;color:var(--mp-muted);line-height:1.6}
.sld-member .mp-owner a{color:var(--mp-muted);text-decoration:underline;text-underline-offset:2px}
.sld-member .mp-owner a:hover{color:var(--mp-ink)}
.sld-member .mp-owner-k{margin-right:6px}
.sld-member .mp-owner-sep{margin:0 6px}

/* ============================================================
   Desktop: breadcrumb, mosaic, two columns, sticky side card
   ============================================================ */
@media (min-width:768px){
	.sld-member{padding-left:24px;padding-right:24px}
	.sld-member .mp-crumb{display:block;padding:20px 0 16px}
	.sld-member .mp-over{display:none}
	.sld-member .mp-save .mp-save-side{display:inline-flex}

	.sld-member .mp-photos{margin:0;border-radius:var(--mp-radius);overflow:hidden}
	.sld-member .mp-photo-track{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:440px;overflow:visible}
	.sld-member .mp-photo{aspect-ratio:auto;min-height:0}
	.sld-member .mp-photo:first-child{grid-row:1 / span 2}
	.sld-member .mp-photos[data-count="1"] .mp-photo-track{grid-template-columns:1fr;grid-template-rows:1fr}
	.sld-member .mp-photos[data-count="1"] .mp-photo:first-child{grid-row:auto}
	.sld-member .mp-photos[data-count="2"] .mp-photo-track{grid-template-rows:1fr}
	.sld-member .mp-photos[data-count="2"] .mp-photo:first-child{grid-row:auto}

	.sld-member .mp-identity{padding-top:24px}
	.sld-member .mp-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;margin-top:32px}
	.sld-member .mp-main,.sld-member .mp-side,.sld-member .mp-card{display:block}
	.sld-member .mp-main>*+*{margin-top:36px}
	.sld-member .mp-side{position:sticky;top:24px}
	.sld-member .mp-card{background:var(--mp-card);border:1px solid var(--mp-line);border-radius:var(--mp-radius);padding:20px;display:flex;flex-direction:column;gap:20px}

	.sld-member .mp-actions{display:flex;flex-direction:column;gap:8px}
	.sld-member .mp-act{flex-direction:row;justify-content:space-between;text-align:left;padding:12px 14px;gap:12px;border-radius:10px}
	.sld-member .mp-act-v{font-size:13px;text-align:right}
	.sld-member .mp-act:hover{filter:brightness(1.03)}

	.sld-member .mp-hours .mp-h-sm{font-size:15px}
	.sld-member .mp-offer{flex-direction:row}
	.sld-member .mp-offer-media{flex:0 0 240px;aspect-ratio:auto}
	.sld-member .mp-offer-body{flex:1;min-width:0}
	.sld-member .mp-save{flex-direction:column}
}

@media (min-width:1024px){
	.sld-member .mp-body{grid-template-columns:minmax(0,1fr) 360px;gap:56px}
	.sld-member .mp-photo-track{height:480px}
}

@media (prefers-reduced-motion:reduce){
	.sld-member .mp-photo-track{scroll-behavior:auto}
}