/* ==========================================================================
   Single listing design refresh

   Brings the single listing page in line with the rest of the site: button
   shape and hierarchy, brand title block, spec row and availability tag from
   the homepage cards, eyebrow labels, structured description, a scrollable
   thumbnail strip with the site scrollbar, the closing bento from Meet Our
   Team / News, and two mobile fixes (photo badge, description order).

   Rules hang off html.fclt-refresh, which assets/finney-design-refresh.js
   sets once it has built the extra markup. Both are enqueued on every single
   listing view (fclt_is_single_listing() in finney-listings-template.php).

   Values come from the live site: home.css (.btn, .section-head .eyebrow,
   listing cards .card-tag, .addr, .price small), news.css (.fc-news-bento),
   and the site scrollbar in home.css .loc-list / leasing-details.css.
   ========================================================================== */

:root {
	--fclt-rf-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Elements the script adds stay hidden until html.fclt-refresh is set. */
.fclt-rf-title-block, .fclt-rf-specs-row, .fclt-rf-bento, .fclt-rf-desc-alt { display: none; }

/* ---------- 1. Buttons: site button shape (3px, 12px / 1px tracking) ---------- */
html.fclt-refresh .finney-template .apfl-mdrn-apply-sec a.sl-btns {
	border-radius: 3px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	min-height: 46px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
/* Arrow on desktop only: on phones these same buttons become the fixed
   two-up bar at the bottom, where the arrow wraps "Schedule Showing". */
@media (min-width: 768px) {
	html.fclt-refresh .finney-template .apfl-mdrn-apply-sec a.sl-btns::after {
		content: '\2192';
		font-size: 13px;
		transition: transform 0.2s ease;
	}
	html.fclt-refresh .finney-template .apfl-mdrn-apply-sec a.sl-btns:hover::after { transform: translateX(3px); }
}

/* ---------- 2. Button hierarchy: one primary, one navy, one outline ---------- */
html.fclt-refresh .finney-template .apfl-mdrn-apply-sec { display: flex; flex-direction: column; }
html.fclt-refresh .finney-template .apfl-mdrn-apply-sec #applyBtn { order: -2; }
html.fclt-refresh .finney-template .apfl-mdrn-apply-sec #schshowingBtn { order: -1; }
html.fclt-refresh .finney-template .apfl-mdrn-apply-sec #contactBtn { order: 0; }
html.fclt-refresh .finney-template .apfl-mdrn-apply-sec > :not(.sl-btns) { order: 1; }
html.fclt-refresh .finney-template #schshowingBtn {
	background: var(--fc-slate-900) !important;
	border-color: var(--fc-slate-900) !important;
	color: #fff !important;
}
html.fclt-refresh .finney-template #schshowingBtn:hover { background: #1b2238 !important; }

/* ---------- 3. Title block: serif title with accent + address line with the map link ---------- */
html.fclt-refresh .fclt-rf-title-block { display: block; margin-bottom: 22px; }
/* The plugin heading is replaced by the title block, and its "View on map"
   link by the copy on the address line (finney-design-refresh.js). */
html.fclt-refresh .finney-template .apfl-mdrn-content-header .address-hdng,
html.fclt-refresh .finney-template .apfl-mdrn-content-header > a.fclt-address-map-link { display: none !important; }
.fclt-rf-title-block h1 {
	font-family: 'proxima-sera', Georgia, serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 1.08;
	letter-spacing: -0.4px;
	color: var(--fc-ink);
	margin: 0 0 10px;
}
.fclt-rf-title-block h1 b {
	font-family: var(--font-accent);
	font-weight: 400;
	color: var(--fc-green);
}
.fclt-rf-title-block .fclt-rf-addr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--fc-warm-gray);
}
/* City and map link share one 16px line box so their text centres match (the
   link otherwise carried the plugin pill's leftover box and sat ~7px high).
   Scoped as tightly as the map link rule below so its !important values
   don't win. */
html.fclt-refresh .finney-template .fclt-rf-title-block .fclt-rf-addr > span {
	display: block;
	line-height: 16px;
}
html.fclt-refresh .finney-template .fclt-rf-title-block .fclt-rf-addr > a.fclt-address-map-link {
	margin: 0 !important;
	min-height: 0 !important;
	line-height: 16px !important;
	align-self: center;
}

/* ---------- 4. Specs row: same shape as the homepage listing cards ---------- */
html.fclt-refresh .finney-template .apfl-mdrn-content-header .bed-bath-std > :not(span:has(#avail-txt)):not(.fclt-rf-specs-row) { display: none !important; }
html.fclt-refresh .finney-template .apfl-mdrn-content-header .bed-bath-std {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding: 18px 0;
	margin: 0 !important;
	border-top: 1px solid var(--fc-line);
}
/* The header's own 20px bottom padding sat under the row, leaving it 14px
   below the top rule and 34px above the bottom one. The row's padding now
   does all the spacing, so it sits centred between the two rules. */
html.fclt-refresh .finney-template .apfl-mdrn-content-header { padding-bottom: 0 !important; }
html.fclt-refresh .fclt-rf-specs-row { display: contents; }
.fclt-rf-specs-row .fclt-rf-spec {
	display: inline-flex;
	align-items: baseline; /* figure and label on one baseline; icon centered below */
	gap: 8px;
	font-size: 14px;
	color: var(--fc-warm-gray);
}
.fclt-rf-specs-row .fclt-rf-spec strong { font-weight: 600; color: var(--fc-ink); }
.fclt-rf-specs-row .fclt-rf-spec svg { width: 18px; height: 18px; color: var(--fc-green); flex: none; align-self: center; }
html.fclt-refresh .finney-template .apfl-mdrn-content-header .bed-bath-std > span:has(#avail-txt) { margin-left: auto !important; }

/* ---------- 5. Availability as the homepage card tag (square, uppercase, check) ---------- */
html.fclt-refresh .finney-template #avail-txt {
	border-radius: 0 !important;
	border: 0 !important;
	background: var(--fc-green-pale) !important;
	color: var(--fc-green-dark) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase;
	padding: 6px 12px !important;
	min-height: 0 !important;
}
html.fclt-refresh .finney-template .avail-now + #avail-txt::before { width: 10px; height: 10px; }

/* ---------- 6. "View on map" as a site text link ---------- */
html.fclt-refresh .finney-template a.fclt-address-map-link {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	height: auto !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--fc-green) !important;
	gap: 8px;
}
html.fclt-refresh .finney-template a.fclt-address-map-link::after { content: '\2192'; transition: transform 0.2s ease; }
html.fclt-refresh .finney-template a.fclt-address-map-link:hover::after { transform: translateX(3px); }

/* ---------- 7. Price card: green eyebrow, sans "/mo" like the homepage cards ---------- */
html.fclt-refresh .finney-template .details-top > div:first-child {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 4px !important;
	color: var(--fc-green) !important;
	margin-bottom: 6px;
}
html.fclt-refresh .finney-template .rent-hdng { font-size: 34px !important; line-height: 1.1 !important; }
html.fclt-refresh .finney-template .rent-hdng .fclt-rf-mo {
	font-family: 'proxima-nova', -apple-system, sans-serif;
	font-size: 13px;
	color: var(--fc-warm-gray);
	margin-left: 2px;
}

/* ---------- 8. Sidebar extras: eyebrow label, arrow link ---------- */
html.fclt-refresh .finney-template .apfl-mdrn-apply-sec > div:not([class]):not(:has(a)) {
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--fc-warm-gray);
	padding-top: 18px;
	border-top: 1px solid var(--fc-line);
	margin-top: 6px;
}
html.fclt-refresh .finney-template .apfl-mdrn-apply-sec > div:not([class]) > a {
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--fc-green) !important;
	display: inline-flex;
	gap: 8px;
}
html.fclt-refresh .finney-template .apfl-mdrn-apply-sec > div:not([class]) > a::after { content: '\2192'; transition: transform 0.2s ease; }
html.fclt-refresh .finney-template .apfl-mdrn-apply-sec > div:not([class]) > a:hover::after { transform: translateX(3px); }
html.fclt-refresh .finney-template .apfl-share-buttons { border-color: var(--fc-line) !important; color: var(--fc-green) !important; }

/* ---------- 9. Description: real paragraphs with subheads ---------- */
html.fclt-refresh .finney-template .apfl-mdrn-content-desc > p.desc:not(.fclt-rf-desc-alt) { display: none !important; }
html.fclt-refresh .fclt-rf-desc-alt { display: block; }
.fclt-rf-desc-alt h3 {
	font-family: 'proxima-sera', Georgia, serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.25;
	color: var(--fc-ink);
	margin: 26px 0 8px;
}
.fclt-rf-desc-alt h3:first-child { margin-top: 0; }
.fclt-rf-desc-alt p { margin: 0; font-size: 16px; line-height: 1.75; color: #2b2f26; }
html.fclt-refresh .finney-template .apfl-mdrn-content-desc .desctitle {
	font-size: 11px !important;
	font-family: 'proxima-nova', sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--fc-green) !important;
	margin-bottom: 18px !important;
}

/* ---------- 10. Amenity headings as section eyebrows ---------- */
html.fclt-refresh .finney-template .apfl-mdrn-extra h4.content-title {
	font-family: 'proxima-nova', sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--fc-green) !important;
	margin-bottom: 10px !important;
}

/* ---------- 11. Thumbnail strip: one scrollable row, no orphan row ---------- */
html.fclt-refresh .finney-template .apfl-gallery .row {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 8px;
	overflow-x: auto;
	justify-content: flex-start !important; /* the plugin centers the row, which strands overflow off the left edge */
	scroll-snap-type: x proximity;
	/* Native bar hidden: iOS ignores ::-webkit-scrollbar styling and fades its
	   own bar out, so .fclt-rf-strip-bar (variants.js) draws the site's scrollbar
	   instead and stays visible everywhere. */
	scrollbar-width: none;
	padding-bottom: 0;
}
html.fclt-refresh .finney-template .apfl-gallery .row::-webkit-scrollbar { display: none; }
/* Mouse drag-to-scroll (dragScroll() in finney-design-refresh.js). */
@media (hover: hover) and (pointer: fine) {
	html.fclt-refresh .finney-template .apfl-gallery .row { cursor: grab; }
	html.fclt-refresh .finney-template .apfl-gallery .row.is-dragging,
	html.fclt-refresh .finney-template .apfl-gallery .row.is-dragging img { cursor: grabbing; }
}
html.fclt-refresh .finney-template .apfl-gallery .row img { -webkit-user-drag: none; user-select: none; }

/* Site scrollbar (home.css .loc-list, leasing-details.css, sitemap-map.css):
   8px, green thumb with 4px radius, ink on hover. The track uses the line
   colour, not mist, because the page behind this strip is already mist. */
.fclt-rf-strip-bar { display: none; }
html.fclt-refresh .fclt-rf-strip-bar:not([hidden]) {
	display: block;
	position: relative;
	height: 8px;
	margin-top: 10px;
	border-radius: 4px;
	background: var(--fc-line);
	cursor: pointer;
	touch-action: none;
}
.fclt-rf-strip-bar__thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	min-width: 32px;
	border-radius: 4px;
	background: var(--fc-green);
	cursor: grab;
	transition: background-color 0.2s ease;
}
.fclt-rf-strip-bar__thumb:hover,
.fclt-rf-strip-bar.is-dragging .fclt-rf-strip-bar__thumb { background: var(--fc-ink); }
.fclt-rf-strip-bar.is-dragging .fclt-rf-strip-bar__thumb { cursor: grabbing; }
/* Bigger touch target without making the bar itself look heavier. */
.fclt-rf-strip-bar::before { content: ''; position: absolute; inset: -10px 0; }
html.fclt-refresh .finney-template .apfl-gallery .row .imgcolumn {
	flex: 0 0 calc((100% - 6 * 8px) / 7) !important;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
html.fclt-refresh .finney-template .apfl-gallery .row .imgcolumn img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fc-radius-card); }
@media (max-width: 767px) {
	html.fclt-refresh .finney-template .apfl-gallery .row .imgcolumn { flex-basis: calc((100% - 3 * 8px) / 4) !important; }
}

/* ---------- 12. Closing bento, same as Meet Our Team / News ---------- */
html.fclt-refresh .fclt-rf-bento { display: block; }
.fclt-rf-bento { position: relative; max-width: 1160px; margin: 40px auto 90px; }
.fclt-rf-bento::before {
	content: '';
	position: absolute;
	inset: 0 -20px -28px;
	background-image: radial-gradient(rgba(31, 36, 25, 0.11) 1px, transparent 1px);
	background-size: 15px 15px;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
	pointer-events: none;
}
.fclt-rf-bento__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fclt-rf-bento__card {
	display: flex; flex-direction: column; gap: 14px; padding: 44px 40px; border-radius: var(--fc-radius-card);
	text-decoration: none !important; box-shadow: var(--fc-shadow-raised);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fclt-rf-bento__card:hover { transform: translateY(-4px); box-shadow: var(--fc-shadow-hover); }
.fclt-rf-bento__card--green { background: var(--fc-green); }
.fclt-rf-bento__card--navy { background: var(--fc-slate-900); }
.fclt-rf-bento__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.fclt-rf-bento__card h2 { margin: 0; font-family: 'proxima-sera', Georgia, serif; font-weight: 400; font-size: 30px; color: #fff; }
.fclt-rf-bento__card h2 b { font-family: var(--font-accent); font-weight: 400; }
.fclt-rf-bento__card--green h2 b { color: var(--fc-mist); }
.fclt-rf-bento__card--navy h2 b { color: var(--fc-green-light); }
.fclt-rf-bento__card p { margin: 0; max-width: 34ch; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.fclt-rf-bento__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
@media (max-width: 767px) {
	.fclt-rf-bento { margin: 32px 16px 56px; }
	.fclt-rf-bento__grid { grid-template-columns: 1fr; }
	.fclt-rf-bento__card { padding: 32px 28px; }
	.fclt-rf-bento__card h2 { font-size: 26px; }
}

/* ---------- 13. Mobile photo badge: brand tag with check, like the homepage cards ---------- */
@media (max-width: 767px) {
	html.fclt-refresh .finney-template .fclt-hero-avail {
		background: #fff !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		color: var(--fc-green-dark) !important;
		border-radius: 0 !important;
		font-size: 10px !important;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		padding: 6px 12px !important;
		display: inline-flex !important;
		align-items: center;
		gap: 6px;
	}
	html.fclt-refresh .finney-template .fclt-hero-avail.fclt-rf-is-now::before {
		content: '';
		width: 10px;
		height: 10px;
		background: currentColor;
		-webkit-mask: var(--fclt-rf-check) center / contain no-repeat;
		mask: var(--fclt-rf-check) center / contain no-repeat;
	}
}

/* ---------- 14. Mobile: keep the description under its title ---------- */
@media (max-width: 767px) {
	html.fclt-refresh .finney-template .apfl-mdrn-content-desc > .desctitle { order: 1 !important; }
	html.fclt-refresh .finney-template .apfl-mdrn-content-desc > p.desc,
	html.fclt-refresh .finney-template .apfl-mdrn-content-desc > .fclt-rf-desc-alt { order: 2 !important; margin-bottom: 28px; }
	html.fclt-refresh .finney-template .apfl-mdrn-content-desc > .apfl-mdrn-extra { order: 3 !important; }
	html.fclt-refresh .fclt-rf-title-block h1 { font-size: 30px; }
	/* Slightly smaller and tighter so the city and map link still share one
	   line on a 360px phone. They wrap only below that. */
	html.fclt-refresh .fclt-rf-title-block .fclt-rf-addr { gap: 6px 10px; font-size: 11px; letter-spacing: 0.6px; }
	html.fclt-refresh .finney-template .fclt-rf-title-block .fclt-rf-addr > a.fclt-address-map-link {
		font-size: 11px !important;
		letter-spacing: 0.6px;
		gap: 6px;
	}
}