/*
 * Demo mode - farm land auctions, estates and events.
 *
 * Only ever loaded by the demo-* views, so nothing in here can affect the
 * real site. Kept as one file rather than inline styles because these
 * pages share a lot of structure.
 */

.demo-wrap {
	background: #f7f8fa;
	min-height: calc(100vh - 200px);
	padding: 28px 0 56px;
}

/* --- sub navigation ------------------------------------------------ */

.demo-subnav {
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
	overflow-x: auto;
}

.demo-subnav__inner {
	display: flex;
	gap: 4px;
	align-items: center;
	min-height: 52px;
}

.demo-subnav__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border-radius: 8px;
	color: #4b5563;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, color .15s;
}

.demo-subnav__link:hover {
	background: #f3f4f6;
	color: #111827;
	text-decoration: none;
}

.demo-subnav__link.is-active {
	background: #ecfdf5;
	color: #047857;
}

.demo-subnav__count {
	background: #e5e7eb;
	color: #4b5563;
	border-radius: 20px;
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 700;
}

.demo-subnav__link.is-active .demo-subnav__count {
	background: #a7f3d0;
	color: #065f46;
}

/* --- page heading -------------------------------------------------- */

.demo-head {
	margin-bottom: 22px;
}

.demo-head__title {
	margin: 0;
	font-size: 27px;
	font-weight: 700;
	color: #111827;
	letter-spacing: -.3px;
}

.demo-head__sub {
	margin: 7px 0 0;
	color: #6b7280;
	font-size: 15px;
}

/* --- filter bar ---------------------------------------------------- */

.demo-filters {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 22px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.demo-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.demo-tab {
	padding: 7px 13px;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #4b5563;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.demo-tab:hover {
	border-color: #10b981;
	color: #047857;
	text-decoration: none;
}

.demo-tab.is-active {
	background: #10b981;
	border-color: #10b981;
	color: #fff;
}

.demo-filters__spacer {
	flex: 1;
	min-width: 12px;
}

.demo-field {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.demo-field label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
}

.demo-select,
.demo-input {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 8px 11px;
	font-size: 14px;
	color: #111827;
	background: #fff;
	height: auto;
}

.demo-input {
	min-width: 210px;
}

.demo-select:focus,
.demo-input:focus {
	outline: none;
	border-color: #10b981;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}

/* --- grid and cards ------------------------------------------------ */

.demo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 20px;
}

.demo-grid--wide {
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.demo-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .18s, transform .18s;
}

.demo-card:hover {
	box-shadow: 0 10px 26px rgba(17, 24, 39, .09);
	transform: translateY(-2px);
}

.demo-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: #eef2f5;
	overflow: hidden;
}

.demo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.demo-card__body {
	padding: 15px 16px 17px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.demo-card__title {
	margin: 0 0 9px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: #111827;
}

.demo-card__title a {
	color: inherit;
	text-decoration: none;
}

.demo-card__title a:hover {
	color: #047857;
}

.demo-card__meta {
	font-size: 12.5px;
	color: #6b7280;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.demo-card__foot {
	margin-top: auto;
	padding-top: 13px;
	border-top: 1px solid #f1f3f5;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 10px;
}

.demo-card__price-label {
	font-size: 11px;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: .4px;
	font-weight: 600;
}

.demo-card__price {
	font-size: 19px;
	font-weight: 700;
	color: #059669;
	line-height: 1.2;
}

/* --- badges and pills ---------------------------------------------- */

.demo-badge {
	position: absolute;
	top: 11px;
	left: 11px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}

.demo-badge--live     { background: rgba(220, 38, 38, .93);  color: #fff; }
.demo-badge--upcoming { background: rgba(37, 99, 235, .93);  color: #fff; }
.demo-badge--ended    { background: rgba(75, 85, 99, .93);   color: #fff; }
.demo-badge--past     { background: rgba(75, 85, 99, .93);   color: #fff; }
.demo-badge--featured {
	left: auto;
	right: 11px;
	background: rgba(245, 158, 11, .95);
	color: #fff;
}

.demo-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: demo-pulse 1.6s ease-in-out infinite;
}

@keyframes demo-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

.demo-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 6px;
	background: #f3f4f6;
	color: #4b5563;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.demo-pill--acres { background: #ecfdf5; color: #047857; }
.demo-pill--type  { background: #eff6ff; color: #1d4ed8; }

/* --- countdown ------------------------------------------------------ */

.demo-countdown {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: #b91c1c;
	font-size: 14px;
}

.demo-countdown--calm  { color: #4b5563; }
.demo-countdown--ended { color: #9ca3af; font-weight: 600; }

.demo-countdown--big {
	font-size: 28px;
	letter-spacing: -.5px;
}

/* --- detail layout --------------------------------------------------- */

.demo-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr);
	gap: 26px;
	align-items: start;
}

@media (max-width: 900px) {
	.demo-detail { grid-template-columns: 1fr; }
}

.demo-panel {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	overflow: hidden;
}

.demo-panel + .demo-panel { margin-top: 20px; }

.demo-panel__head {
	padding: 15px 20px;
	border-bottom: 1px solid #f1f3f5;
	font-size: 14px;
	font-weight: 700;
	color: #111827;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.demo-panel__body { padding: 20px; }

.demo-hero-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	background: #eef2f5;
}

.demo-prose {
	color: #374151;
	font-size: 14.5px;
	line-height: 1.72;
	white-space: pre-line;
	margin: 0;
}

/* --- spec table ------------------------------------------------------ */

.demo-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	background: #eef0f2;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #eef0f2;
}

.demo-spec {
	background: #fff;
	padding: 13px 15px;
}

.demo-spec__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #9ca3af;
	font-weight: 700;
	margin-bottom: 4px;
}

.demo-spec__value {
	font-size: 14px;
	color: #111827;
	font-weight: 600;
	line-height: 1.4;
}

/* --- bid box --------------------------------------------------------- */

.demo-bidbox__price {
	font-size: 32px;
	font-weight: 800;
	color: #059669;
	line-height: 1.1;
	letter-spacing: -.7px;
}

.demo-bidbox__sub {
	font-size: 13px;
	color: #6b7280;
	margin-top: 5px;
}

.demo-bid-row {
	display: flex;
	gap: 9px;
	margin-top: 16px;
}

.demo-bid-input {
	flex: 1;
	min-width: 0;
	border: 1px solid #d1d5db;
	border-radius: 9px;
	padding: 12px 13px;
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	font-variant-numeric: tabular-nums;
}

.demo-bid-input:focus {
	outline: none;
	border-color: #10b981;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, .14);
}

.demo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 9px;
	border: 1px solid transparent;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: filter .15s, background .15s;
}

.demo-btn:hover { text-decoration: none; filter: brightness(.96); }

.demo-btn--primary { background: #10b981; color: #fff; }
.demo-btn--primary:hover { color: #fff; }

.demo-btn--ghost {
	background: #fff;
	color: #374151;
	border-color: #e5e7eb;
}

.demo-btn--ghost:hover { color: #111827; }

.demo-btn--block { width: 100%; }

.demo-btn[disabled],
.demo-btn.is-disabled {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}

.demo-quickbids {
	display: flex;
	gap: 7px;
	margin-top: 11px;
	flex-wrap: wrap;
}

.demo-quickbid {
	flex: 1;
	min-width: 84px;
	padding: 8px 6px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	color: #374151;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.demo-quickbid:hover { border-color: #10b981; color: #047857; }

/* --- notices --------------------------------------------------------- */

.demo-note {
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.55;
	display: flex;
	gap: 9px;
	align-items: flex-start;
}

.demo-note--win  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.demo-note--out  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.demo-note--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.demo-note--warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* --- history / lists -------------------------------------------------- */

.demo-list { margin: 0; padding: 0; list-style: none; }

.demo-list__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid #f1f3f5;
	font-size: 14px;
}

.demo-list__row:last-child { border-bottom: 0; }

.demo-list__who {
	color: #374151;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.demo-list__when { font-size: 12px; color: #9ca3af; font-weight: 400; }

.demo-list__amount {
	font-weight: 700;
	color: #111827;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.demo-list__amount--top { color: #059669; }

.demo-you {
	background: #d1fae5;
	color: #065f46;
	border-radius: 5px;
	padding: 1px 6px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: uppercase;
}

.demo-bullets {
	margin: 0;
	padding-left: 19px;
	color: #374151;
	font-size: 14px;
	line-height: 1.85;
}

/* --- stat tiles -------------------------------------------------------- */

.demo-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}

.demo-stat {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px 18px;
}

.demo-stat__label {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #9ca3af;
	font-weight: 700;
	margin-bottom: 6px;
}

.demo-stat__value {
	font-size: 25px;
	font-weight: 800;
	color: #111827;
	line-height: 1.15;
	letter-spacing: -.5px;
}

.demo-stat__value--green { color: #059669; }
.demo-stat__value--red   { color: #dc2626; }

/* --- tickets ----------------------------------------------------------- */

.demo-tier {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px 18px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	flex-wrap: wrap;
	transition: border-color .15s, box-shadow .15s;
}

.demo-tier + .demo-tier { margin-top: 12px; }

.demo-tier:hover { border-color: #10b981; }

.demo-tier.is-soldout { opacity: .55; }
.demo-tier.is-soldout:hover { border-color: #e5e7eb; }

.demo-tier__main { flex: 1; min-width: 200px; }

.demo-tier__name {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 8px;
}

.demo-tier__price {
	font-size: 22px;
	font-weight: 800;
	color: #059669;
	white-space: nowrap;
	letter-spacing: -.4px;
}

.demo-tier__left {
	font-size: 12px;
	color: #9ca3af;
	margin-top: 3px;
	text-align: right;
}

.demo-tier__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.demo-perks {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	color: #4b5563;
	line-height: 1.7;
}

.demo-perks li { display: flex; gap: 7px; align-items: flex-start; }

.demo-perks li::before {
	content: "";
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin-top: 3px;
	background: no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.demo-qty {
	width: 68px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 9px 10px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	color: #111827;
}

/* --- ticket stub ------------------------------------------------------- */

.demo-stub {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	display: flex;
	overflow: hidden;
	margin-bottom: 12px;
}

.demo-stub__strip {
	width: 8px;
	background: linear-gradient(#10b981, #059669);
	flex-shrink: 0;
}

.demo-stub__body {
	padding: 15px 18px;
	flex: 1;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

.demo-stub__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
	color: #6b7280;
	letter-spacing: .6px;
}

/* --- empty state -------------------------------------------------------- */

.demo-empty {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 54px 26px;
	text-align: center;
}

.demo-empty__title {
	margin: 0 0 7px;
	font-size: 17px;
	font-weight: 700;
	color: #111827;
}

.demo-empty__text { margin: 0 0 18px; color: #6b7280; font-size: 14.5px; }

/* --- misc --------------------------------------------------------------- */

.demo-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #6b7280;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	margin-bottom: 14px;
}

.demo-back:hover { color: #047857; text-decoration: none; }

.demo-section-title {
	font-size: 17px;
	font-weight: 700;
	color: #111827;
	margin: 34px 0 16px;
}

.demo-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%) translateY(140%);
	background: #111827;
	color: #fff;
	padding: 12px 20px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	z-index: 4000;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	transition: transform .28s cubic-bezier(.2, .8, .3, 1);
	max-width: 90vw;
}

.demo-toast.is-visible { transform: translateX(-50%) translateY(0); }

/* =====================================================================
 * Demo home - one page, one section per category, each scrolling
 * left to right. Built mobile first: on a phone the rails bleed to the
 * screen edge and the next card peeks in so it reads as scrollable.
 * ================================================================== */

.demo-hero {
	background: linear-gradient(135deg, #065f46, #047857 55%, #059669);
	color: #fff;
	padding: 26px 0 24px;
}

.demo-hero__title {
	margin: 0 0 8px;
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -.5px;
	line-height: 1.2;
}

.demo-hero__sub {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
	max-width: 620px;
}

.demo-hero__stats {
	display: flex;
	gap: 8px;
	margin-top: 18px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.demo-hero__stats::-webkit-scrollbar { display: none; }

.demo-chip {
	flex: 0 0 auto;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 10px;
	padding: 9px 13px;
	min-width: 96px;
}

.demo-chip__value {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.4px;
}

.demo-chip__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: rgba(255, 255, 255, .78);
	font-weight: 700;
	margin-top: 3px;
}

/* --- closing-next callout ------------------------------------------- */

.demo-closing {
	display: flex;
	gap: 13px;
	align-items: center;
	background: rgba(0, 0, 0, .18);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 12px;
	padding: 11px 13px;
	margin-top: 16px;
	text-decoration: none;
	color: #fff;
}

.demo-closing:hover { color: #fff; text-decoration: none; }

.demo-closing img {
	width: 54px;
	height: 54px;
	border-radius: 9px;
	object-fit: cover;
	flex-shrink: 0;
}

.demo-closing__label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .6px;
	font-weight: 800;
	color: #fca5a5;
}

.demo-closing__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	margin: 3px 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.demo-closing__meta {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .82);
	font-variant-numeric: tabular-nums;
}

/* --- quick actions ---------------------------------------------------- */

.demo-quick {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin: 20px 0 4px;
}

@media (min-width: 700px) {
	.demo-quick { grid-template-columns: repeat(4, 1fr); }
}

.demo-quick__item {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 14px 13px;
	text-decoration: none;
	display: block;
	transition: border-color .15s, transform .15s;
}

.demo-quick__item:hover {
	border-color: #10b981;
	transform: translateY(-2px);
	text-decoration: none;
}

.demo-quick__icon { font-size: 20px; line-height: 1; }

.demo-quick__name {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 700;
	color: #111827;
}

.demo-quick__hint {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #9ca3af;
	font-weight: 600;
}

/* --- section header --------------------------------------------------- */

.demo-sec {
	margin-top: 30px;
}

.demo-sec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 13px;
}

.demo-sec__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	color: #111827;
	letter-spacing: -.3px;
}

.demo-sec__sub {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 500;
	color: #6b7280;
	letter-spacing: 0;
}

.demo-sec__more {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	color: #047857;
	text-decoration: none;
	white-space: nowrap;
}

.demo-sec__more:hover { text-decoration: underline; color: #065f46; }

/* --- the scrolling rail ------------------------------------------------ */

.demo-rail {
	display: flex;
	gap: 13px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding: 2px 0 12px;

	/* bleed to the screen edge on a phone so cards run off the side */
	margin-left: -15px;
	margin-right: -15px;
	padding-left: 15px;
	padding-right: 15px;
}

@media (min-width: 768px) {
	.demo-rail {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

.demo-rail::-webkit-scrollbar { height: 6px; }
.demo-rail::-webkit-scrollbar-thumb { background: #d7dbe0; border-radius: 20px; }
.demo-rail::-webkit-scrollbar-track { background: transparent; }

/* Each card takes most of the phone screen, leaving the next one peeking */
.demo-rail > * {
	flex: 0 0 78%;
	max-width: 320px;
	scroll-snap-align: start;
}

@media (min-width: 560px) { .demo-rail > * { flex-basis: 46%; } }
@media (min-width: 900px) { .demo-rail > * { flex-basis: 31%; } }
@media (min-width: 1200px) { .demo-rail > * { flex-basis: 24%; } }

/* narrower cards for the product and estate strips */
.demo-rail--tight > * { flex: 0 0 56%; max-width: 230px; }

@media (min-width: 560px) { .demo-rail--tight > * { flex-basis: 32%; } }
@media (min-width: 900px) { .demo-rail--tight > * { flex-basis: 22%; } }
@media (min-width: 1200px) { .demo-rail--tight > * { flex-basis: 17%; } }

/* --- compact cards used inside the rails -------------------------------- */

.demo-mini {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.demo-mini:hover { border-color: #10b981; text-decoration: none; }

.demo-mini__media {
	position: relative;
	aspect-ratio: 16 / 11;
	background: #eef2f5;
}

.demo-mini__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.demo-mini__body {
	padding: 11px 12px 13px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.demo-mini__title {
	font-size: 13.5px;
	font-weight: 700;
	color: #111827;
	line-height: 1.35;
	margin-bottom: 5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.demo-mini__meta {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.45;
	margin-bottom: 9px;
}

.demo-mini__foot {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 8px;
}

.demo-mini__price {
	font-size: 15.5px;
	font-weight: 800;
	color: #059669;
	letter-spacing: -.3px;
}

.demo-mini__note {
	font-size: 11px;
	color: #9ca3af;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* --- estate mini card ----------------------------------------------------- */

.demo-estate-mini {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	display: block;
	height: 100%;
}

.demo-estate-mini:hover { border-color: #10b981; text-decoration: none; }

.demo-estate-mini__media {
	aspect-ratio: 3 / 2;
	background: #eef2f5;
}

.demo-estate-mini__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.demo-estate-mini__body { padding: 11px 12px 13px; }

.demo-estate-mini__name {
	font-size: 13.5px;
	font-weight: 700;
	color: #111827;
	line-height: 1.3;
	margin-bottom: 4px;
}

.demo-estate-mini__meta {
	font-size: 11.5px;
	color: #6b7280;
	line-height: 1.5;
}

/* --- event rail card -------------------------------------------------------- */

.demo-event-mini__date {
	position: absolute;
	top: 9px;
	left: 9px;
	background: rgba(255, 255, 255, .95);
	border-radius: 9px;
	padding: 5px 9px;
	text-align: center;
	line-height: 1.05;
	min-width: 44px;
}

.demo-event-mini__day {
	display: block;
	font-size: 17px;
	font-weight: 800;
	color: #111827;
}

.demo-event-mini__mon {
	display: block;
	font-size: 10px;
	font-weight: 800;
	color: #dc2626;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* --- activity strip ---------------------------------------------------------- */

.demo-activity {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 14px;
}

.demo-activity__cell { text-align: center; }

.demo-activity__value {
	font-size: 22px;
	font-weight: 800;
	color: #111827;
	line-height: 1.1;
}

.demo-activity__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #9ca3af;
	font-weight: 700;
	margin-top: 4px;
}

.demo-activity__cell a { color: inherit; text-decoration: none; display: block; }
.demo-activity__cell a:hover .demo-activity__value { color: #047857; }