/* ============================================================
   H2V BILLBOARD — AGENT HEADER (ORIGINAL STYLES)
============================================================ */

#h2v-billboard-agent-header {
		width: 100%;
	background: var(--h2c-green);
	padding: 25px 20px;
	border-bottom: 4px solid var(--h2c-gold-bright);
	position: relative;
	font-family: Arial, sans-serif;
	/* Keep the green tall enough for the right-hand stack (logo 25–170 +
	   license + View-All button, now ending ~235px) regardless of how little
	   middle-column text an agent has — otherwise a low-content agent (no
	   title/tagline) gets a short header that crams the logo. Matches the
	   taller look a content-rich agent already produces. */
	box-sizing: border-box;
	min-height: 262px;
}

/* Broker Logo — hosts EITHER a broker-uploaded logo via background-image
   (set by JS in production) OR a logo+tagline card via flex children
   (used in the demo page). Sized so the logo + View-All-Listings button
   stack matches the agent photo's height (188px including its 4px
   border): 145 logo + 10 gap + 33 button = 188. */
#h2v-billboard-agent-header .h2v-billboard-broker-logo {
	position: absolute;
	/* #Y: MIRRORED ON THE HEADSHOT -- same outer box, same frame, same top edge.

	   25px is right BECAUSE the header's padding-top is 25 and the content row
	   -- which the headshot leads -- starts there too. I briefly set this to 53,
	   having measured the headshot 28px lower: that measurement was taken with
	   #X's "View All Listings" link still sitting in the header's FLOW above the
	   row, pushing it down. Removing the link put the row back where it belongs
	   and left my 53 measuring nothing. Asserted on screen as "the two tops are
	   equal", never as "top is 25px".

	   THE SIZE AND FRAME ARE NOT HERE ANY MORE (#AA): they are in h2v.css, which
	   all three pages carrying this header load. They were here, and the client
	   billboard -- which never loads this file -- kept the old card. */
	top: 25px;
	right: 20px;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	box-sizing: border-box;
	gap: 6px;
}

#h2v-billboard-agent-header .h2v-billboard-broker-logo .h2v-vd-logo-img {
	max-width: 100%;
	max-height: 48px;
	object-fit: contain;
	display: block;
}

#h2v-billboard-agent-header .h2v-billboard-broker-logo .h2v-vd-logo-tagline {
	font-family: Montserrat, Arial, sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h2c-green);
	line-height: 1.3;
	text-align: center;
}

#h2v-billboard-agent-header .h2v-billboard-broker-logo:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* Layout — top-align so the agent photo's top edge lines up with the
   broker-logo card's top edge (25px from header top). Center-align was
   pushing the photo down whenever the middle column's text was taller
   than the photo. */
/* #Y: 30px, from 60. The middle column sat a full 60px off the headshot; half
   that brings the name, AGENT, phone, email and buttons left without touching
   the headshot, which does not move. */
#h2v-billboard-agent-header .h2v-billboard-agent-content {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	min-height: 188px;
}

#h2v-billboard-agent-header .h2v-billboard-agent-photo {
	width: 180px;
	height: 180px;
	background: #dddddd no-repeat top center;
	background-size: cover;
	border: 4px solid var(--h2c-gold-bright);
	flex-shrink: 0;
}

#h2v-billboard-agent-header .h2v-billboard-agent-info {
	color: #ffffff;
	flex: 1;
}

/* Identity */
#h2v-billboard-agent-header .h2v-billboard-agent-name {
	font-size: 42px;
	font-weight: 400;
	margin: 0 0 6px 0;
	letter-spacing: 1px;
	font-style: italic;
	font-family: Georgia, 'Times New Roman', serif;
	line-height: 1;
}

#h2v-billboard-agent-header .h2v-billboard-agent-title {
	font-size: 12px;
	margin-bottom: 14px;
	color: var(--h2c-gold-bright);
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Divider */
#h2v-billboard-agent-header .h2v-billboard-divider {
	width: 70px;
	height: 1px;
	background: var(--h2c-gold-bright);
	margin: 16px 0;
}

/* ================= AGENT META ================= */

#h2v-billboard-agent-header .h2v-billboard-agent-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
	font-size: 13px;
	color: rgba(255,255,255,0.85);
}

#h2v-billboard-agent-header .h2v-billboard-agent-meta-item {
	white-space: normal;
}

/* ================= CONTACT ROW ================= */

#h2v-billboard-agent-header .h2v-billboard-agent-contact-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
}
/* Contact Group */
#h2v-billboard-agent-header .h2v-billboard-contact-group {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Icon */
#h2v-billboard-agent-header .h2v-billboard-contact-icon {
	width: 28px;
	height: 28px;
	background: rgba(212,175,55,0.3);
	border-radius: 50%;
	border: 1px solid var(--h2c-gold-bright);
	flex-shrink: 0;
}

/* Phone */
#h2v-billboard-agent-header .h2v-billboard-contact-phone {
	color: #ffffff;
	font-weight: 600;
	white-space: nowrap;
}

/* Buttons */
#h2v-billboard-agent-header .h2v-billboard-contact-btn {
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px solid rgba(212,175,55,0.7);
	background: rgba(212,175,55,0.15);
}

#h2v-billboard-agent-header .h2v-billboard-contact-btn:hover {
	background: rgba(212,175,55,0.35);
}

#h2v-billboard-agent-header .h2v-secondary {
	opacity: 0.85;
}

/* Email */
#h2v-billboard-agent-header .h2v-billboard-contact-email {
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

#h2v-billboard-agent-header .h2v-billboard-contact-email:hover {
	text-decoration: underline;
}

/* ============================================================
   NEW: BROKER LISTINGS LINK STYLES
============================================================ */

/* OPTION 1: Link near broker logo (top-right). Positioned so its bottom
   edge aligns with the agent photo's bottom edge (25 header padding +
   180 photo + 8 photo border = 213; this button bottom = 180 top + 33
   height = 213). */
.h2v-billboard-broker-link.h2v-broker-link-top {
	/* #X: A TEXT LINK, NOT A BUTTON. It was an outlined chip immediately under
	   the logo card -- two bordered boxes stacked in one corner. Underlined gold
	   text now, in the licence line's own colour, centred under it by the block
	   rather than by coordinates of its own. position:static with top/right
	   explicitly cleared, because the block places it. */
	position: static;
	top: auto;
	right: auto;
	color: var(--h2c-gold-bright);
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	/* #P: sentence case, with every other control. The markup already
	   says "View All Listings" -- only the CSS was shouting. */
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
	background: none;
	padding: 0;
	border-radius: 0;
	border: 0;
	/* #AA: backdrop-filter removed. A blur on a TEXT LINK frosts whatever
	   sits behind it, and once #X made this element position:static it sat
	   in the header's flow blurring a strip across the top of the card.
	   The element is removed in JS now; the declaration goes too, so
	   re-adding the link does not bring the strip back with it. */
	white-space: nowrap;
}

.h2v-billboard-broker-link.h2v-broker-link-top:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border-color: var(--h2c-gold-bright);
}

/* OPTION 2: Link below contact info */
.h2v-billboard-broker-link-bottom-wrap {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.h2v-billboard-broker-link.h2v-broker-link-bottom {
	color: var(--h2c-gold-bright);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.3s ease;
	padding: 8px 14px;
	border-radius: 6px;
	background: rgba(212, 175, 55, 0.15);
	border: 1px solid rgba(212, 175, 55, 0.5);
}

.h2v-billboard-broker-link.h2v-broker-link-bottom:hover {
	background: rgba(212, 175, 55, 0.25);
	color: #ffffff;
	transform: translateX(4px);
}

.h2v-broker-link-icon {
	font-size: 16px;
}

.h2v-broker-link-arrow {
	transition: transform 0.3s ease;
}

.h2v-billboard-broker-link.h2v-broker-link-bottom:hover .h2v-broker-link-arrow {
	transform: translateX(4px);
}

/* OPTION 3: Full-width banner below header */
.h2v-billboard-broker-banner {
	background: #f8f8f8;
	border-bottom: 1px solid #e0e0e0;
	padding: 12px 20px;
}

.h2v-billboard-broker-banner-content {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 15px;
	justify-content: space-between;
	flex-wrap: wrap;
}

.h2v-broker-banner-icon {
	font-size: 18px;
}

.h2v-broker-banner-text {
	font-size: 14px;
	color: #111827;
	font-family: Arial, sans-serif;
}

.h2v-broker-banner-text strong {
	color: var(--h2c-green);
	font-weight: 600;
}

.h2v-billboard-broker-banner-link {
	color: var(--h2c-green);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	padding: 6px 14px;
	border-radius: 4px;
	border: 1px solid var(--h2c-green);
	background: white;
	white-space: nowrap;
}

.h2v-billboard-broker-banner-link:hover {
	background: var(--h2c-green);
	color: white;
}

/* Responsive */
@media (max-width: 700px) {
	/* Center every element on narrow viewports — broker logo and the
	   View All Listings button were already centered (since they break
	   out of their absolute corner here), and leaving the agent name /
	   tagline / contact rows left-aligned looked off-balance. */
	#h2v-billboard-agent-header .h2v-billboard-agent-content {
		flex-direction: column;
		align-items: center;
		gap: 25px;
		min-height: auto;
	}

	#h2v-billboard-agent-header .h2v-billboard-agent-info {
		text-align: center;
		width: 100%;
	}

	#h2v-billboard-agent-header .h2v-billboard-divider {
		margin: 16px auto;
	}

	#h2v-billboard-agent-header .h2v-billboard-agent-contact-row {
		align-items: center;
	}

	/* Broker logo: get out of the absolute-positioned top-right corner
	   (where it overlaps everything) and flow normally above the agent
	   photo. Centered + slightly smaller so it doesn't dominate the
	   narrow viewport. */
	/* -----------------------------------------------------------------
	   BRAND BLOCK on a phone: centre it.
	   align-items:flex-start is deliberate on desktop — the licence's left
	   edge aligns to the photo. On mobile every other element in this header
	   is centred, and flex-start left the LOGO hugging the block's left edge
	   while the wider licence under it set the block's width, so the logo
	   read as ~20px off-centre. Same block, opposite alignment, by viewport.
	   ----------------------------------------------------------------- */
	#h2v-billboard-agent-header .h2v-billboard-broker-logo {
		position: static;
		display: block;
		margin: 0 auto 14px auto;
		width: 160px;
		height: 110px;
	}

	.h2v-billboard-broker-link.h2v-broker-link-top {
		position: static;
		display: block;
		margin: 0 auto 14px auto;
		text-align: center;
		font-size: 11px;
		padding: 5px 10px;
		width: fit-content;
	}

	.h2v-billboard-broker-banner-content {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		text-align: center;
	}
}

/* Listings Section Styles */
.billboard-listings-section {
		width: 100%;
    padding: 20px 20px 20px;
    background: #fafaf8;
}

.billboard-section-header {
    text-align: center;
    margin-bottom: 30px;
}

.billboard-section-title {
    font-size: 36px;
    color: var(--h2c-green);
    margin-bottom: 8px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 1px;
    font-family: Georgia, 'Times New Roman', serif;
}

.billboard-section-subtitle {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #111827;
    font-family: Arial, sans-serif;
    font-weight: 600;
}

.billboard-section-line {
    width: 100px;
    height: 1.5px;
    background: var(--h2c-gold-bright);
    margin: 12px auto 0;
}

.billboard-listings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* Single-listing case: most agents will only have one. Span the full
   width so a lone card doesn't look stranded in a half-empty 2-col grid. */
.billboard-listings-grid:has(> .billboard-listing-card:only-child) {
    grid-template-columns: 1fr;
}

/* Phone-sized viewports: always one column. 2-col only on tablet+. */
@media (max-width: 700px) {
    .billboard-listings-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.billboard-listing-card {
    background: white;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.billboard-listing-card:hover {
    border-color: var(--h2c-green);
    box-shadow: 0 5px 20px rgba(74, 124, 126, 0.2);
}

.billboard-listing-image {
    width: 100%;
    height: 330px;
    background: linear-gradient(135deg, var(--h2c-green) 0%, var(--h2c-green-dark) 100%) no-repeat center center;
    background-size: cover;
    border-bottom: 1.5px solid var(--h2c-gold-bright);
}

.billboard-listing-details {
    padding: 20px 25px 25px;
}

.billboard-price-address-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.billboard-listing-price {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    color: var(--h2c-green);
    margin-bottom: 0;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    text-align: left;
}

.billboard-listing-address {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--h2c-green);
    margin-bottom: 0;
    line-height: 1.3;
    font-family: Arial, sans-serif;
    text-align: right;
}



.billboard-listing-specs {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
    margin-bottom: 15px;
}

.billboard-spec-item {
    text-align: center;
    flex: 1;
}

.billboard-spec-label {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--h2c-green);
    margin-bottom: 4px;
    font-family: Arial, sans-serif;
}

.billboard-spec-text {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    font-family: Arial, sans-serif;
    font-weight: 600;
}

.billboard-listing-actions {
	/* #O: with nowrap on the buttons, min-content is the whole label -- two of
	   them no longer fit a narrow card side by side. Wrapping makes them stack
	   full-width instead of overflowing the card, which is the same thing the
	   card does with everything else at that width. */
	flex-wrap: wrap;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.billboard-listing-btn {
	/* THE LABEL IS ONE WORD'S WORTH OF FURNITURE, NOT PROSE (#O, 2026-09-25).
	   Reported as "VIEW DETAIL S" / "REQU EST SHOWING" -- a control whose name
	   had come apart. I could not reproduce a split INSIDE a word on the served
	   pages (overflow-wrap computes normal, there is no letter-spacing and no
	   stray soft hyphen), but I can reproduce the two-line wrap at <=320px, and
	   an uppercase centred label on two lines reads as a broken word at a
	   glance. nowrap removes the whole class either way: a button label that
	   cannot wrap cannot break, whatever font or size the reader's browser
	   decides to use. */
	white-space: nowrap;
    flex: 1;
    padding: 10px 15px;
    border: 2px solid var(--h2c-green);
    background: white;
    color: var(--h2c-green);
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    /* #P: sentence case and 11px, the one button shape. Uppercase is what
       turned "View Details" into a two-line label that read as a broken word. */
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 11px;
    text-align: center;
}

.billboard-listing-btn:hover {
    background: var(--h2c-green);
    color: white;
}

.billboard-listing-btn.primary {
    background: var(--h2c-green);
    color: white;
}

.billboard-listing-btn.primary:hover {
    background: var(--h2c-green-dark);
}


/* Brand gold, matching the listing billboard. These were inline-styled by the
   old renderers, which is part of why the treatment drifted between shells;
   the styling lives in the stylesheet now. */


/* =============================================================================
   UNDER REVIEW — submitted, not yet approved by the agent.
   ==========================================================================
   Shown rather than hidden (Chris, 2026-09-03). Hiding it meant an agent who
   had just submitted saw an empty page with no sign their listing existed.

   The diagonal amber hatching and the wording are lifted from
   billboard-listing.css, which already marks this state on the listing page
   itself — the page this card links to. A visitor who clicks through must not
   meet different language.

   THIS BLOCK IS DUPLICATED IN billboard-agent.css AND billboard-account.css.
   The two pages load different stylesheets and there is no shared billboard
   sheet to hold it. Change one, change the other.
============================================================================= */
/* The under-review card treatment moved to application/css/h2v.css (#F6,
   2026-09-24). It was defined identically in BOTH this file and its sibling,
   which is the fork .h2v-bb-brand-block already went through -- see the note in
   h2v.css. Every billboard page loads h2v.css, and loads it FIRST.
   DO NOT re-add .billboard-listing-card.is-under-review here. */


/* =============================================================================
   THE BRAND BLOCK ON A PHONE — AND WHY THIS SITS AT THE END OF THE FILE.

   These overrides used to live in the @media block near the top. They never
   took effect. A media query adds NO specificity, so `.h2v-bb-brand-block`
   inside a query and `.h2v-bb-brand-block` outside one are exactly equal, and
   the base rule above (align-items: flex-start / text-align: left) sits LATER
   in this file — so it won at every width, phones included.

   The logo went on looking centred throughout, because its mobile rule is
   id-scoped (#h2v-billboard-agent-header .h2v-billboard-broker-logo) and beats
   the base rule on specificity rather than on order. Centred logo, left-aligned
   licence underneath it: one stylesheet, two elements, two different answers.

   Placed after the base rules so ordinary source order decides it. Do not move
   this block back up the file, and do not reach for !important — the position
   in the file IS the fix.
   ============================================================================= */


/* =============================================================================
   NO QR ON THE BILLBOARD CARD.

   Removed 2026-09-07 after seeing it on the real screen. It lived inline in
   the price/address row (split the row), then pinned over the hero photo
   (covered the photo). Neither is right, because the CARD is the wrong home
   for a QR at all: a QR bridges physical to digital, and a visitor already
   looking at the billboard can simply tap. On a page whose whole job is
   presentation, the code was buying nothing and costing the photo.

   THE QR ITSELF IS UNTOUCHED. It is still generated at go-live
   (Action_SaveListing -> DAO_Listing.generateQRCode), still stored in
   h2v_qrcodes, still uploaded to Spaces, still downloadable, and /q/{token}
   still records qr_click against the listing. This was a rendering change and
   nothing else. Do not "restore" a .billboard-listing-qr rule here -- the
   markup that used it is gone from billboard-agent.js and
   billboard-account.js too.
============================================================================= */