/*
 * public.css -- house style for hbx's SESSION-FREE public pages (public/listings.php,
 * public/ad.php). Loaded ONLY by public_header.html; the authenticated pages never see it.
 *
 * WHY THIS FILE EXISTS (2026-09-05 ruling). The public pages used to render inside the SLIM admin
 * chrome: an anonymous visitor arriving from the marketing landing site was handed a back-office
 * skin, and paid 1,012,684 bytes of slim.css to see one property card. The public shell drops slim
 * entirely and loads Bootstrap 5.3.8 -- the SAME vendored copy, byte for byte, that the landing
 * site uses -- plus this file.
 *
 * THE PALETTE AND THE CARD IDIOM ARE THE LANDING'S, deliberately. A visitor moves
 * landing -> listings -> ad in one session, and those three pages should look like one site. The
 * tokens below are lifted from static/endpoint/pages/realm/hbx/landing/landing.css; if the landing
 * is restyled, restyle these to match. They are NOT a second design, they are the same design
 * applied to two services that cannot share a stylesheet (static/ and webfront/ deploy separately
 * and neither may reach into the other's tree).
 *
 * NO BUILD STEP, by project rule: this is hand-written CSS, no preprocessor, no minifier. Custom
 * properties are used for the tokens because every browser that can run Bootstrap 5 supports them.
 */

:root {
	--hbx-navy:        #09364e;   /* wordmark, headings, the focal price */
	--hbx-green:       #3d8b6a;   /* primary action, operation chip */
	--hbx-green-dark:  #2f6f55;   /* hover, and the chip on photography */
	--hbx-ink:         #2b3a42;   /* body copy */
	--hbx-muted:       #6b7c85;   /* secondary copy */
	--hbx-rule:        #e6ecef;
	--hbx-shadow-bar:  0 4px 10px rgba(0, 0, 0, .08);
	--hbx-shadow-lift: 0 10px 30px rgba(0, 0, 0, .10);
	--hbx-radius:      8px;
	--hbx-radius-sm:   5px;
}

body {
	color: var(--hbx-ink);
	background: #f7f9fa;
	/* No webfont. The landing uses the system stack too, and a public page seen once from a phone
	   on mobile data should not block first paint on a font download. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.hbx-container { max-width: 1400px; }

/* ---------- brand bar ---------------------------------------------------------------------- */
.hbx-topbar {
	background: #fff;
	box-shadow: var(--hbx-shadow-bar);
	padding: 14px 0;
}
.hbx-brand, .hbx-brand:hover, .hbx-brand:focus {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--hbx-navy);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: .2px;
}
.hbx-brand img { height: 34px; width: auto; border-radius: 4px; }
.hbx-brand .hbx-brand-accent { color: var(--hbx-green); }

/* ---------- language picker ---------------------------------------------------------------- */
/*
 * The topbar becomes a flex row so the picker sits hard right of the brand. Scoped to
 * `.hbx-topbar .hbx-container` rather than declared on .hbx-container itself: that class is shared
 * with the hero, the card grid and the footer, none of which want a flex row.
 */
.hbx-topbar .hbx-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.hbx-lang-toggle {
	background: #fff;
	border: 1px solid var(--hbx-rule);
	border-radius: var(--hbx-radius-sm);
	color: var(--hbx-navy);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .4px;
	line-height: 1.2;
	padding: 7px 12px;
	white-space: nowrap;
}
.hbx-lang-toggle:hover, .hbx-lang-toggle:focus {
	border-color: var(--hbx-green);
	color: var(--hbx-green-dark);
}
.hbx-lang .dropdown-menu {
	border: 1px solid var(--hbx-rule);
	border-radius: var(--hbx-radius);
	box-shadow: var(--hbx-shadow-lift);
	font-size: 14px;
}
.hbx-lang .dropdown-item.active,
.hbx-lang .dropdown-item.active:hover {
	background: var(--hbx-green);
	color: #fff;
}

/* The faint session reset in the footer. Perceptible on a deliberate look, invisible in passing --
   and it keeps a real focus ring, because a keyboard user must be able to tell they are on it. */
.hbx-reset {
	color: inherit;
	margin-left: 4px;
	opacity: .13;
	text-decoration: none;
}
.hbx-reset:hover, .hbx-reset:focus { color: inherit; opacity: .55; }

/* ---------- hero --------------------------------------------------------------------------- */
.hbx-hero {
	position: relative;
	background-image: url(/img/realm/hbx/header.jpg);
	background-size: cover;
	background-position: center;
	min-height: 230px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
/* The white veil is what keeps dark text legible over an arbitrary photograph -- the same trick,
   and the same 0.25 alpha, the landing hero uses. */
.hbx-hero::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .28); z-index: 1; }
.hbx-hero > .container { position: relative; z-index: 2; }
.hbx-hero h1 {
	color: var(--hbx-navy);
	font-weight: 700;
	font-size: 30px;
	margin: 0;
	text-shadow: 0 1px 2px rgba(255, 255, 255, .6);
}

/* ---------- search box --------------------------------------------------------------------- */
.hbx-searchbox {
	background: #fff;
	padding: 15px;
	border-radius: var(--hbx-radius-sm);
	box-shadow: var(--hbx-shadow-lift);
	margin-top: 22px;
}
.hbx-searchbox .form-control,
.hbx-searchbox .form-select { height: 45px; border-radius: 0; padding: 0 15px; box-shadow: none; }
.hbx-searchbox .form-control:focus,
.hbx-searchbox .form-select:focus { box-shadow: none; border-color: var(--hbx-green); }

.hbx-btn {
	background: var(--hbx-green);
	border: 0;
	color: #fff;
	height: 45px;
	border-radius: var(--hbx-radius-sm);
	font-weight: 500;
	padding: 0 22px;
	transition: background .3s ease;
}
.hbx-btn:hover, .hbx-btn:focus { background: var(--hbx-green-dark); color: #fff; }
.hbx-btn-ghost {
	background: transparent;
	border: 1px solid var(--hbx-rule);
	color: var(--hbx-muted);
}
.hbx-btn-ghost:hover { background: #fff; color: var(--hbx-navy); }

/* ---------- listing card ------------------------------------------------------------------- */
.hbx-card {
	position: relative;
	border-radius: var(--hbx-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--hbx-shadow-bar);
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.hbx-card:hover { transform: translateY(-2px); box-shadow: var(--hbx-shadow-lift); }
.hbx-card-media { position: relative; height: 200px; background: #eef2f4; }
.hbx-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbx-card-media .hbx-noimg {
	display: flex; align-items: center; justify-content: center;
	height: 100%; color: #b9c6cd; font-size: 40px;
}
/* Operation chip -- the one place the green is allowed to sit on top of photography. */
.hbx-chip {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	background: var(--hbx-green-dark); color: #fff;
	padding: 4px 10px; font-size: 12px; font-weight: 500;
	border-radius: var(--hbx-radius-sm);
	text-transform: uppercase; letter-spacing: .3px;
}
.hbx-card-body { padding: 12px 14px 14px; }
.hbx-card-price { color: var(--hbx-navy); font-weight: 700; font-size: 17px; line-height: 1.2; }
.hbx-card-price .hbx-per { font-weight: 400; font-size: 13px; color: var(--hbx-muted); }
.hbx-card-title {
	margin: 4px 0 2px; font-size: 14px; font-weight: 600; color: var(--hbx-ink);
	/* Two lines then ellipsis: card heights must match across a row or the grid looks broken. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hbx-card-meta { font-size: 12px; color: var(--hbx-muted); }
.hbx-card a.hbx-card-link { position: absolute; inset: 0; z-index: 3; }   /* whole-card hit area */

/* ---------- full-bleed slide (listings2, the carousel trial) -------------------------------- */
/* Same tokens as the card, different container: one large photograph per offer with the copy laid
   over a bottom scrim. The scrim is a gradient rather than a flat wash because a flat one either
   darkens the sky pointlessly or fails to carry text over a bright floor. */
.hbx-slide { position: relative; border-radius: var(--hbx-radius); overflow: hidden; background: #eef2f4; }
.hbx-slide img { width: 100%; height: 420px; object-fit: cover; display: block; }
.hbx-slide .hbx-noimg { height: 420px; }
.hbx-slide-scrim {
	position: absolute; inset: auto 0 0 0; z-index: 2;
	padding: 26px 28px;
	background: linear-gradient(to top, rgba(9, 54, 78, .88) 0%, rgba(9, 54, 78, .55) 45%, rgba(9, 54, 78, 0) 100%);
	color: #fff;
}
.hbx-slide-meta {
	text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px;
	color: rgba(255, 255, 255, .85); margin-bottom: 6px;
}
.hbx-slide-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.hbx-slide-price { font-size: 22px; font-weight: 700; color: #fff; margin: 0; }
.hbx-slide-price .hbx-per { font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .8); }
.hbx-slide-agency { font-size: 13px; color: rgba(255, 255, 255, .8); margin-top: 6px; }
.hbx-slide-code { font-size: 12px; color: rgba(255, 255, 255, .65); margin-top: 4px; }
.hbx-slide-link { position: absolute; inset: 0; z-index: 3; }
/* The default control icons are white-on-white over a bright photo; a translucent navy disc gives
   them something to sit on without adding an image asset. */
.hbx-slide-wrap .carousel-control-prev, .hbx-slide-wrap .carousel-control-next { width: 9%; }
.hbx-slide-wrap .carousel-control-prev-icon,
.hbx-slide-wrap .carousel-control-next-icon {
	background-color: rgba(9, 54, 78, .55); border-radius: 50%;
	width: 42px; height: 42px; background-size: 45% 45%;
}
.hbx-slide-wrap .carousel-indicators [data-bs-target] {
	width: 9px; height: 9px; border-radius: 50%; border: 0;
	background-color: rgba(255, 255, 255, .55);
}
.hbx-slide-wrap .carousel-indicators .active { background-color: #fff; }

/* ---------- single ad ---------------------------------------------------------------------- */
.hbx-panel {
	background: #fff; border-radius: var(--hbx-radius);
	box-shadow: var(--hbx-shadow-bar); padding: 22px;
}
.hbx-eyebrow {
	color: var(--hbx-green-dark); font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .6px;
}
.hbx-ad-title { color: var(--hbx-navy); font-weight: 700; font-size: 26px; margin: 4px 0 2px; }
.hbx-ad-sub { color: var(--hbx-muted); font-size: 15px; }
.hbx-ad-price { color: var(--hbx-navy); font-weight: 700; font-size: 28px; }
.hbx-section-title {
	color: var(--hbx-navy); font-size: 15px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .4px;
	padding-bottom: 8px; border-bottom: 2px solid var(--hbx-green); display: inline-block;
}
.hbx-spec { width: 100%; }
.hbx-spec td { padding: 8px 0; border-bottom: 1px solid var(--hbx-rule); font-size: 14px; vertical-align: top; }
.hbx-spec td:first-child { color: var(--hbx-muted); width: 45%; }
.hbx-spec td:last-child { color: var(--hbx-ink); font-weight: 500; }
.hbx-gallery img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--hbx-radius); }

/* ---------- withdrawn card ----------------------------------------------------------------- */
/* Calm and final, not an error page: the visitor did nothing wrong and the offer simply ended. */
.hbx-gone { max-width: 560px; margin: 60px auto; text-align: center; }
.hbx-gone .hbx-gone-mark { font-size: 46px; color: #c8d4da; }
.hbx-gone h1 { color: var(--hbx-navy); font-size: 22px; font-weight: 700; margin: 14px 0 10px; }
.hbx-gone p { color: var(--hbx-muted); font-size: 14px; margin-bottom: 22px; }

/* ---------- footer ------------------------------------------------------------------------- */
.hbx-footer {
	border-top: 1px solid var(--hbx-rule); background: #fff;
	color: var(--hbx-muted); font-size: 13px; padding: 20px 0; margin-top: 40px;
}

@media (max-width: 767px) {
	.hbx-hero { min-height: 190px; }
	.hbx-hero h1 { font-size: 22px; }
	.hbx-ad-title { font-size: 21px; }
	.hbx-ad-price { font-size: 23px; }
}

@media print {
	.hbx-topbar, .hbx-hero, .hbx-footer, .hbx-searchbox { display: none !important; }
	body { background: #fff; }
	.hbx-panel { box-shadow: none; padding: 0; }
}