/**
 * StarzMeet — trust-first archive / search cards (purple).
 *
 * Styles the clean card markup that starzmeet-archive.js swaps into each
 * ListingPro grid card (.lp-grid-box-contianer). Scoped to .sm-arch-card so it
 * never fights the theme's own card CSS. Light + dark aware.
 */

/* Light-only to match the (non-dark-aware) ListingPro site. */
:root {
	--sm-brand:#7c3aed; --sm-brand-d:#6d28d9; --sm-brand-soft:#f1ecfd;
	--sm-card:#ffffff; --sm-fg:#1f2430; --sm-muted:#6b7280; --sm-line:#e9e7f2;
	--sm-gold:#c99700; --sm-good:#128a53; --sm-good-soft:#e3f4ea; --sm-warn:#b45309;
	--sm-shadow:0 1px 2px rgba(31,20,60,.05), 0 8px 22px rgba(31,20,60,.07);
}

/* The card is a NEW inner element (.sm-arch-card) so its visual styles never
   collide with the reset we put on the theme's container (.sm-arch-host). */
.lp-grid-box-contianer.sm-arch-host{
	background:transparent !important; border:0 !important; box-shadow:none !important;
	padding:0 !important; margin:0 0 14px !important; overflow:visible !important;
	height:auto !important; min-height:0 !important;
	/* NB: do NOT reset float/display here — this element also carries the theme's
	   Bootstrap column class (col-md-6/col-md-4), and killing its float/width
	   collapses the desktop grid to a single "mobile-like" column. */
}
.lp-grid-box-contianer.sm-arch-host::before,
.lp-grid-box-contianer.sm-arch-host::after{ display:none !important; }
.lists-container .row, .lists-container [class*="col-"]{ min-height:0; }

/* Equal-height rows: flex the container that holds the card columns (tagged by JS)
   so 2-/3-up cards line up instead of leaving float gaps. The column keeps its
   Bootstrap width; the card stretches to the row's tallest card, content top-aligned. */
.sm-arch-grid{ display:flex; flex-wrap:wrap; align-items:stretch; }
.sm-arch-grid > .promoted-listings{ width:100%; }            /* stays a full-width row */
.sm-arch-grid > .lp-grid-box-contianer.sm-arch-host{ display:flex; }
.sm-arch-host > .sm-arch-card{ width:100%; }

.sm-arch-card{
	position:relative;
	display:grid; grid-template-columns:86px 1fr; grid-template-areas:"media body" "acts acts";
	align-content:space-between; align-items:start; gap:11px 13px;
	background:var(--sm-card); border:1px solid var(--sm-line); border-radius:17px;
	padding:13px; box-shadow:var(--sm-shadow);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
	color:var(--sm-fg); line-height:1.45;
}

/* media / monogram */
.sm-arch-media{
	grid-area:media; align-self:start; width:86px; height:86px; min-height:0; border-radius:13px;
	overflow:hidden; display:block; background:var(--sm-brand-soft); position:relative; flex:none;
}
.sm-arch-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.sm-arch-mono{
	position:absolute; inset:0; display:grid; place-items:center;
	background:color-mix(in srgb, var(--cat,#7c3aed) 15%, var(--sm-card));
	border:1px solid color-mix(in srgb, var(--cat,#7c3aed) 26%, transparent); border-radius:13px;
}
.sm-arch-mono span{ font-weight:800; font-size:25px; letter-spacing:.01em; color:var(--cat,#7c3aed); }
.sm-arch-mono::after{ content:"✦"; position:absolute; right:7px; bottom:3px; font-size:11px;
	color:color-mix(in srgb, var(--cat,#7c3aed) 55%, transparent); }

/* save (bookmark/heart) — top-right */
.sm-arch-save{
	position:absolute; top:11px; right:11px; z-index:2;
	width:33px; height:33px; display:grid; place-items:center; padding:0;
	border-radius:10px; border:1px solid var(--sm-line); background:var(--sm-card);
	color:var(--sm-muted); cursor:pointer; transition:transform .12s, color .12s, border-color .12s;
}
.sm-arch-save svg{ width:17px; height:17px; }
.sm-arch-save.is-saved,
.sm-arch-save[aria-pressed="true"]{ color:#e0567b; border-color:color-mix(in srgb,#e0567b 45%,var(--sm-line)); }
.sm-arch-save.is-saved svg,
.sm-arch-save[aria-pressed="true"] svg{ fill:currentColor; }
.sm-arch-save:active{ transform:scale(.9); }

/* body */
.sm-arch-body{ grid-area:body; min-width:0; display:flex; flex-direction:column; gap:5px; padding-right:40px; }
.sm-arch-row1{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sm-arch-cat{
	font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--cat,#7c3aed);
	background:color-mix(in srgb, var(--cat,#7c3aed) 13%, var(--sm-card));
	border:1px solid color-mix(in srgb, var(--cat,#7c3aed) 24%, transparent);
	padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.sm-arch-verified{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--sm-good); }
.sm-arch-verified svg{ width:13px; height:13px; }

.sm-arch-card a.sm-arch-title{
	margin:1px 0 0; font-size:15.5px; font-weight:700; line-height:1.25; letter-spacing:-.01em;
	color:var(--sm-fg) !important; text-decoration:none;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sm-arch-card a.sm-arch-title:hover{ color:var(--sm-brand-d) !important; }

.sm-arch-rating{ display:flex; align-items:center; gap:6px; font-size:12.5px; min-height:16px; }
.sm-arch-stars{ color:var(--sm-gold); font-weight:750; display:inline-flex; align-items:center; gap:3px; }
.sm-arch-stars svg{ width:13px; height:13px; fill:var(--sm-gold); }
.sm-arch-rc{ color:var(--sm-muted); }
.sm-arch-new{ font-size:11px; font-weight:700; color:var(--sm-brand-d);
	background:var(--sm-brand-soft); border-radius:999px; padding:2px 9px; letter-spacing:.02em; }

.sm-arch-metaline{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--sm-muted); }
.sm-arch-city::before{ content:"\f041"; font-family:"FontAwesome","Font Awesome 5 Free"; font-weight:900;
	margin-right:5px; color:var(--sm-brand); font-size:11px; }

.sm-arch-hours{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
.sm-arch-hdot{ width:7px; height:7px; border-radius:50%; flex:none; }
.sm-arch-hours.open{ color:var(--sm-good); } .sm-arch-hours.open .sm-arch-hdot{ background:var(--sm-good); }
.sm-arch-hours.soon{ color:var(--sm-warn); } .sm-arch-hours.soon .sm-arch-hdot{ background:var(--sm-warn); }
.sm-arch-hours.closed{ color:var(--sm-muted); } .sm-arch-hours.closed .sm-arch-hdot{ background:var(--sm-muted); }

.sm-arch-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:1px; }
.sm-arch-chip{ font-size:11px; font-weight:600; color:var(--sm-fg);
	background:color-mix(in srgb, var(--sm-brand) 8%, var(--sm-card));
	border:1px solid var(--sm-line); border-radius:999px; padding:3px 9px; }

/* actions */
.sm-arch-acts{ grid-area:acts; align-self:start; display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:1px; }
.sm-arch-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	font-size:13.5px; font-weight:700; text-decoration:none; padding:10px; border-radius:11px;
	cursor:pointer; border:0; transition:filter .12s;
}
.sm-arch-btn svg{ width:15px; height:15px; }
.sm-arch-btn.call{ background:var(--sm-brand); color:#fff; }
.sm-arch-btn.call:hover{ filter:brightness(1.05); }
.sm-arch-btn.dir{ background:var(--sm-card); color:var(--sm-fg); box-shadow:inset 0 0 0 1.5px var(--sm-line); }
.sm-arch-btn.dir:hover{ box-shadow:inset 0 0 0 1.5px var(--sm-brand); color:var(--sm-brand-d); }

/* Single action → full width */
.sm-arch-acts:has(.sm-arch-btn:only-child){ grid-template-columns:1fr; }

@media (prefers-reduced-motion:reduce){ .sm-arch-card *{ transition:none !important; } }