/* =============================================================================
 * cao-home-v2.css
 *
 * Styles the static-cached card shortcodes that replace three heavy Divi
 * Machine / DP Owl modules on the homepage:
 *   .cao-grid--listing      -> static 4-col grid  (replaces et_pb_de_mach_archive_loop)
 *   .cao-scroller--buildings-> carousel           (replaces et_pb_de_mach_carousel/Slick)
 *   .cao-scroller--agents   -> carousel           (replaces et_pb_dp_oc/Owl)
 *
 * Pixel targets measured from the live homepage (fast.columbusandover.com/)
 * at 1440x900 via computed styles + authored plugin CSS. Carousels are CSS
 * scroll-snap tracks; arrows/autoplay/loop come from cao-home-v2.js.
 *
 * Full-bleed comes from the page's own Divi rows (width 97-100%, max-width
 * 2560px) which exist identically on / and /v2/ — no 100vw hacks here.
 * ========================================================================== */

:root {
	--cao-blue: #0C3D6C;      /* rgb(12,61,108) — pills, headings */
	--cao-text: #333;         /* rgb(51,51,51) — body, titles, meta */
	--cao-bg-light: #edf1f1;
	--cao-font: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
}

/* ---------- shared primitives ------------------------------------------- */

.cao-grid {
	font-family: var(--cao-font);
	color: var(--cao-text);
}

.cao-card {
	position: relative;
	background: #fff;
}

.cao-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.cao-card__link:hover {
	color: inherit;
	text-decoration: none;
}

.et_pb_code_inner > .cao-grid,
.et_pb_code_inner > .cao-scroller {
	width: 100%;
}

/* v2 hero video styles live INLINE in functions.php (wp_head, data-no-optimize)
 * next to the injection filter — NOT here. LiteSpeed UCSS strips selectors it
 * hasn't seen in crawled HTML, so newly-injected markup styled from this file
 * breaks until UCSS regenerates. Inline + data-no-optimize is immune. */

/* ---------- carousel shell + arrows (agents, buildings) ------------------ */

.cao-scroller {
	position: relative;          /* arrow positioning context */
	width: 100%;
	max-width: none !important;
}

.cao-scroller .cao-grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;                    /* both reference carousels: 8px item gap */
	width: 100%;
	max-width: none !important;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;       /* hide native scrollbar (Firefox) */
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.cao-scroller .cao-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ETmodules chevrons — the font is already loaded by Divi */
.cao-scroller__prev,
.cao-scroller__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	margin: 0;
	padding: 0 !important;
	background: none;
	border: none;
	color: rgb(255, 255, 255);
	font-family: var(--cao-font);
	font-size: 14px;
	line-height: 1.7;
	cursor: pointer;
	user-select: none;
}
.cao-scroller__prev { left: 0; text-align: left; }
.cao-scroller__next { right: 0; text-align: right; }

/* Both carousels: chevrons rest dimmed, brighten to full white on hover */
.cao-scroller__prev,
.cao-scroller__next { opacity: 0.6; }
.cao-scroller__prev:hover,
.cao-scroller__next:hover { opacity: 1; }
.cao-scroller__prev::before,
.cao-scroller__next::before {
	font-family: "ETmodules" !important;
	font-weight: 400 !important;
	font-size: 56px;
	vertical-align: text-bottom;
	-webkit-font-smoothing: antialiased;
}
.cao-scroller__prev::before { content: "\34"; }   /* left chevron */
.cao-scroller__next::before { content: "\35"; }   /* right chevron */

/* Buildings variant: slick arrows are white with a gray glow
 * (that glow is what makes them read over the white page background).
 * Slick geometry: 20x20 button, glyph absolutely offset outward. */
.cao-scroller--buildings .cao-scroller__prev,
.cao-scroller--buildings .cao-scroller__next {
	width: 20px;
	height: 20px;
	font-size: 0;
	line-height: 0;
}
.cao-scroller--buildings .cao-scroller__prev::before,
.cao-scroller--buildings .cao-scroller__next::before {
	position: absolute;
	top: -20px;
	text-shadow: 0 0 9px rgb(150, 150, 150);
}
/* Slick parity had the glyphs offset 22px OUTWARD (left/right: -22px), which
 * shoved the right chevron under the browser scrollbar once this became the
 * front page. Keep them fully inside the viewport with a little air. */
.cao-scroller--buildings .cao-scroller__prev::before {
	left: 4px;
	font-size: 57px;
	line-height: 57px;
}
.cao-scroller--buildings .cao-scroller__next::before {
	right: 4px;
	font-size: 56px;
	line-height: 56px;
}

/* =============================================================================
 * AGENTS — full-bleed autoplaying carousel
 * Pixel target = DP Owl Carousel .et_pb_dp_oc.meet_our_agents_slider:
 * 7-up desktop / 3-up tablet / 1-up phone, 8px gaps, 400x516 portrait,
 * name 19px/19px 700 white + phone 16px/25.6px 400 white overlaid
 * bottom-left, white chevrons at the strip edges, 5s autoplay, loop.
 * ========================================================================== */

.cao-scroller--agents {
	margin: 0 0 5px;             /* replicates owl-nav's 5px slot in the row */
}

.cao-card--agent {
	position: relative;
	flex: 0 0 calc((100% - 48px) / 7);   /* 7-up: 196.7px at 1425 */
	width: calc((100% - 48px) / 7);
	scroll-snap-align: start;
	overflow: hidden;                    /* clips the hover zoom */
	background: transparent;
}

.cao-card--agent .cao-card__link--media { display: block; }

.cao-card--agent .cao-card__media--agent {
	margin: 0;
	width: 100%;
	aspect-ratio: 400 / 516;             /* 196.7 x 253.7 at desktop */
	background: var(--cao-bg-light);
	border-radius: 3px;
	overflow: hidden;
}

.cao-card--agent .cao-card__img,
.cao-card--agent .cao-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
	transition: 300ms;
	will-change: transform;
}
.cao-card--agent .cao-card__link--media:hover .cao-card__img {
	transform: scale(1.055);
	backface-visibility: hidden;
}

/* Name — white, bottom-left; width:min-content forces the per-word wrap
 * ("Jeff" / "Hamilton") that the reference shows. No text-shadow. */
.cao-card--agent .cao-card__title {
	position: absolute;
	left: 0;
	bottom: 30px;
	width: min-content;
	margin: 0;
	padding: 0 10px;
	font-family: var(--cao-font);
	font-size: 19px;
	line-height: 19px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	color: rgb(255, 255, 255);
	z-index: 2;
}
.cao-card--agent .cao-card__title a {
	color: rgb(255, 255, 255) !important;
	font-size: inherit;
	line-height: inherit;
	text-decoration: none;
}

/* Phone — white 16px, 4px off the card bottom */
.cao-card--agent .cao-card__phone {
	position: absolute;
	left: 0;
	bottom: 4px;
	margin: 0;
	padding: 0 10px;
	font-family: var(--cao-font);
	font-size: 16px;
	line-height: 25.6px;
	font-weight: 400;
	color: rgb(255, 255, 255) !important;
	z-index: 2;
}
.cao-card--agent .cao-card__phone a {
	color: rgb(255, 255, 255) !important;
	text-decoration: none;
}

@media (max-width: 1150px) {
	.cao-card--agent .cao-card__title,
	.cao-card--agent .cao-card__title a {
		font-size: 18px;
		line-height: 18px;
	}
}
/* Tablet — 3-up (the Divi row narrows to 80% by its own authored CSS) */
@media (max-width: 980px) {
	.cao-card--agent {
		flex-basis: calc((100% - 16px) / 3);
		width: calc((100% - 16px) / 3);
	}
}
/* Phone — 1-up (row goes 90% centered by Divi authored CSS) */
@media (max-width: 767px) {
	.cao-card--agent {
		flex-basis: 100%;
		width: 100%;
	}
}

/* =============================================================================
 * LISTINGS — static 4-col grid, pixel parity with home
 * Ref @1425px: row 1382.25 wide (97%), cards 335.06x~247, pitch 296.8px
 * ========================================================================== */

.cao-grid--listing {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 46px 14px;            /* ref gap 50/14, minus 13.8px image "poke" folded into flow */
	width: 100% !important;
	max-width: none !important;
	margin: -14px 0 47px !important; /* -14px: image tops sit 14.7px below heading row; 47px: 9.2px card tail + 38px grid margin before button row */
	padding: 0 !important;
	font-family: var(--cao-font);
	color: var(--cao-text);
}

/* card: flat. Reference has NO shadow, NO border, NO card radius. */
.cao-grid--listing .cao-card--listing {
	position: relative;
	background: #fff;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* media: figure is overlay context only — MUST NOT clip (agent box overhangs 3px) */
.cao-grid--listing .cao-card__media--listing {
	position: relative;
	margin: 0;
	overflow: visible;
	border-radius: 0;
	background: none;
	aspect-ratio: auto;
}

/* frame clips + rounds the photo; 335.06x207.33 at desktop */
.cao-grid--listing .cao-card__frame {
	display: block;
	overflow: hidden;
	border-radius: 3px;
	aspect-ratio: 202 / 125;   /* authored ratio from .exclusive_listing_wrapper .et_pb_gallery_image */
	background: var(--cao-bg-light);
}

.cao-grid--listing .cao-card__img,
.cao-grid--listing .cao-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
	transition: 300ms;
}

.cao-grid--listing .cao-card__link:hover .cao-card__img {
	transform: scale( 1.055 );  /* ref hover zoom, clipped by the frame */
}

/* neighborhood pill — ONE white box, top 14px / left 10px over the image.
 * Terms sit 16px apart; "PARENT > CHILD" via ::after on the first term. */
.cao-grid--listing .cao-card__hood-tag {
	position: absolute;
	top: 14px;
	left: 10px;
	z-index: 2;
	max-width: calc( 100% - 20px );
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 16px;
	row-gap: 6px;
	background: #fff !important;
	border-radius: 3px;
	padding: 4px 10px !important;
	box-shadow: none !important;
	letter-spacing: normal !important;
}

.cao-grid--listing .cao-card__hood-term {
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--cao-blue) !important;
	white-space: nowrap;
}

.cao-grid--listing .cao-card__hood-term:first-child:not( :only-child )::after {
	content: " >";             /* literal text, exactly as reference — NOT an icon font */
	margin-left: 5px;
}

/* agent — white box flush bottom-left, bottom edge 3px BELOW the image edge */
.cao-grid--listing .cao-card__agent {
	position: absolute;
	left: 0;
	bottom: -3px;
	z-index: 2;
	box-sizing: border-box;
	display: inline-block;
	min-width: 200px;
	max-width: 100%;
	background: #fff !important;
	border-radius: 0 3px 0 0;
	padding: 8px 10px 14px;    /* box height = 8 + 16.92 + 14 = 38.9px */
	font-size: 14.1px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	text-transform: none !important;
	color: var(--cao-text) !important;
}

/* body — title sits 3px below the image bottom, 10px left indent */
.cao-grid--listing .cao-card__body {
	padding: 3px 0 0 !important;
}

.cao-grid--listing .cao-card__title {
	margin: 0 !important;
	padding: 0 0 0 10px !important;
	font-size: 14.1px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: uppercase;
	color: var(--cao-text) !important;  /* DARK GRAY, not brand navy */
}

.cao-grid--listing .cao-card__meta {
	display: block !important;
	margin: 0 !important;
	padding: 0 0 0 10px !important;
	gap: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 22.4px !important;
	letter-spacing: normal !important;
	color: var(--cao-text) !important;
}

.cao-grid--listing .cao-card__meta strong {
	font-weight: 600 !important;   /* ref label weight is 600, not 700 */
	color: var(--cao-text);
}

.cao-grid--listing .cao-card__sep {
	font-weight: 500;
	color: var(--cao-text);
	padding: 0 10px;
	margin: 0 !important;
}

/* tablet: 2-up (Divi Machine col-tab-2) */
@media ( max-width: 980px ) {
	.cao-grid--listing {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* phone: 1-up (col-mob-1) + 12px small text per authored rules */
@media ( max-width: 767px ) {
	.cao-grid--listing {
		grid-template-columns: 1fr;
	}
	.cao-grid--listing .cao-card__hood-term { font-size: 12px !important; }
	.cao-grid--listing .cao-card__meta,
	.cao-grid--listing .cao-card__meta strong,
	.cao-grid--listing .cao-card__sep { font-size: 12px !important; }
}

/* =============================================================================
 * BUILDINGS — full-bleed autoplaying carousel of tall cards
 * Pixel target = Divi Machine Slick carousel .explore_by_building:
 * 7-up desktop / 5-up <1200 / 4-up <980 / 1-up <767, 8px gaps, image 450px
 * tall, white title ribbon (min-width 200px, grows with the name, can poke
 * past the card edge) hugging the card bottom-left, 5s autoplay, loop.
 * Authored source: .explore_by_building .et_pb_de_mach_title {inline-block;
 * #fff; padding 8px 10px 0; min-width 200px; radius 0 3px 0 0; absolute
 * bottom 0 left 0} + .dmach-post-title a {#333 !important; 14.1px !important}
 * ========================================================================== */

/* No slick-style -15px bleed: it hid the right overhang under the scrollbar
 * and clipped the left card at the page edge. Same exact-fill geometry as
 * the agents carousel instead — 7 cards + 6 gaps = 100%, flush both ends. */
.cao-scroller--buildings .cao-grid--building {
	padding: 30px 0;             /* slick-track margin 30px 0 */
}

.cao-card--building {
	position: relative;
	flex: 0 0 calc((100% - 48px) / 7);   /* 7-up exact fill, like agents */
	width: calc((100% - 48px) / 7);
	height: 455.5px;                     /* image 450 + 5.5 ribbon overhang */
	scroll-snap-align: start;
	background: #fff;
	border-radius: 3px;
	overflow: hidden;                    /* reference clips long ribbon names at the card edge */
}

.cao-card--building .cao-card__link--media { display: block; }

.cao-card--building .cao-card__media--building {
	margin: 0 0 5.5px;                   /* ref thumbnail margin-bottom 5.5px */
	width: 100%;
	height: 450px;
	border-radius: 3px;
	background: var(--cao-bg-light);
	overflow: hidden;
}

.cao-card--building .cao-card__img,
.cao-card--building .cao-card__placeholder {
	display: block;
	width: 100%;
	height: 450px;
	object-fit: cover;
	border-radius: 3px;
}

/* white title ribbon — bottom-left, overhangs the image bottom by ~5px,
 * grows to fit a one-line name (can exceed the card width, as reference).
 * In-flow with a negative top margin, NOT absolute: an abspos max-content
 * box caps at the 200px containing block and clips long names. */
.cao-card--building .cao-card__ribbon {
	position: relative;
	z-index: 2;
	display: block;            /* block honors the negative top margin; inline-block does not */
	width: max-content;
	min-width: 200px;
	margin: -38px 0 0;
	background: #fff;
	padding: 8px 10px 0;
	border-radius: 0 3px 0 0;
}

.cao-card--building .cao-card__title {
	margin: 0;
	padding: 0 0 10px;
	white-space: nowrap;
	font-family: var(--cao-font);
	font-size: 14.1px;
	font-weight: 600;
	line-height: 19.2px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--cao-text);
}
.cao-card--building .cao-card__title a {
	color: var(--cao-text) !important;
	font-size: 14.1px !important;
	text-decoration: none;
}

@media (max-width: 1200px) {
	.cao-card--building {
		flex-basis: calc((100% - 32px) / 5);
		width: calc((100% - 32px) / 5);
	}
}
@media (max-width: 980px) {
	.cao-card--building {
		flex-basis: calc((100% - 24px) / 4);
		width: calc((100% - 24px) / 4);
	}
}
@media (max-width: 767px) {
	.cao-card--building {
		flex-basis: 100%;
		width: 100%;
	}
}

/* ---- BWG-525: neighborhood building-card width parity ------------------- *
 * Cards had shrunk to ~147px on neighborhood pages because the buildings row
 * rendered contained (~0.8x) there. Now that the row is forced full-width
 * below (same as the homepage), the base .cao-card--building container calc
 * yields the identical widths on neighborhood pages as on the homepage
 * (185/211/215px, 1-up on mobile) with no per-page card sizing and no 100vw. */

/* ---- BWG-525: buildings row full-width parity --------------------------- *
 * The buildings row is set to full-width in the template (width:100%
 * max_width:100%), but per-page CSS optimization (Divi Dynamic Assets /
 * LiteSpeed UCSS) drops that rule on some pages (e.g. Back Bay, which then
 * renders the row contained at ~80% / max 1300), while childless pages (North
 * End) render it full-width. Force it full-width consistently, independent of
 * the optimizer, so the slider is the same width on every neighborhood page.
 * Targets the buildings row by its stable template class + a :has() fallback
 * in case the row index ever shifts. Heading and other rows are untouched. */
body.tax-neighborhood .et_pb_row_4_tb_body,
body.tax-neighborhood .et_pb_row:has(.cao-scroller--buildings) {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---- BWG-526: team-page agents-slider full-width parity ---------------- *
 * The agents row in the "Individual Team Members" TB body layout (post 1764)
 * is set full-width (width:100% max_width:100%), but per-page CSS optimization
 * (Divi Dynamic Assets / LiteSpeed UCSS) can drop that rule per page — the
 * same failure family as BWG-525's neighborhood row. Pin it full-width with
 * the stable template row class + a :has() fallback. Scoped to single
 * team_member pages, so nothing else is touched. */
body.single-team_member .et_pb_row_10_tb_body,
body.single-team_member .et_pb_row:has(.cao-scroller--agents) {
	width: 100% !important;
	max-width: 100% !important;
}

/* ---- BWG-526: agents slider on the Neighborhoods page (15250) ---------- *
 * The "Meet Our Agents" row on page 15250 is set full-width in the page
 * (width:100% max_width:100%), same as the homepage/team rows. Pin it against
 * the DA/UCSS per-page drop, scoped to the page. */
body.page-id-15250 .et_pb_row:has(.cao-scroller--agents) {
	width: 100% !important;
	max-width: 100% !important;
}

/* =============================================================================
 * BWG-532 — cao ACF detail renderer (foundation for the Divi-Machine-ectomy)
 * Styles for [cao_acf], [cao_gallery], [cao_repeater]. Deliberately light:
 * the CPT detail-template rebuilds (BWG-535/536/537) add their own layout.
 * ========================================================================== */

.cao-acf {
	font-family: var(--cao-font);
	color: var(--cao-text);
}
.cao-acf__label {
	font-weight: 600;
	margin-right: 4px;
}
.cao-acf__image {
	display: block;
	max-width: 100%;
	height: auto;
}
.cao-acf-repeater__row {
	margin: 0 0 6px;
}

/* ---- ACF gallery scroller (replaces de_mach_acf_slider) ----------------- *
 * Reuses .cao-scroller + .cao-scroller__prev/__next (arrows) and the generic
 * .cao-scroller .cao-grid flex/scroll-snap track; only the slide sizing is
 * gallery-specific. Driven by cao-home-v2.js (autoplay off -> data-cao-autoplay="0"). */
.cao-scroller--gallery {
	margin: 0 0 8px;
}
.cao-scroller--gallery .cao-grid {
	gap: 10px;
}
.cao-gallery__slide {
	flex: 0 0 auto;
	width: min(88%, 900px);
	scroll-snap-align: start;
	margin: 0;
	background: var(--cao-bg-light);
}
.cao-gallery__img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
@media (max-width: 767px) {
	.cao-gallery__slide {
		width: 92%;
	}
}

/* =============================================================================
 * BWG-531 rebuild grids / lists (buildings archive, team grids, agent listings,
 * neighborhood buttons). Reuse the cao card renderers; grid layout here.
 * ========================================================================== */
.cao-grid--building-archive,
.cao-grid--team-grid,
.cao-grid--agent-listings {
	display: grid;
	grid-template-columns: repeat(var(--cao-cols, 3), minmax(0, 1fr));
	gap: 28px 16px;
	width: 100%;
}
.cao-grid--single {
	display: block;
	max-width: 400px;
}
@media (max-width: 980px) {
	.cao-grid--building-archive,
	.cao-grid--team-grid,
	.cao-grid--agent-listings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.cao-grid--building-archive,
	.cao-grid--team-grid,
	.cao-grid--agent-listings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* taxonomy list (dth:taxonomy_list replacement — neighborhood buttons, blog cats) */
.cao-taxlist { display: flex; flex-wrap: wrap; gap: 10px; }
.cao-taxlist--buttons .cao-taxlist__item {
	display: inline-block;
	padding: 10px 22px;
	background: #fff;
	color: var(--cao-text);
	border: 1px solid #d8dcdc;
	border-radius: 3px;
	font: 600 14px/1.2 var(--cao-font);
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}
.cao-taxlist--buttons .cao-taxlist__item:hover {
	background: var(--cao-blue);
	color: #fff;
	border-color: var(--cao-blue);
}

.cao-nbhd-listings__more { margin-top: 26px; text-align: center; }
.cao-dyn-heading { margin: 0; }

/* size cards to the grid cell (the scroller/homepage variants pin an explicit
 * card width via calc(); the static BWG-531 grids let the cell size them) */
.cao-grid--building-archive .cao-card--building,
.cao-grid--team-grid .cao-card--agent,
.cao-grid--agent-listings .cao-card--listing,
.cao-grid--single .cao-card--agent {
	flex: none !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* ---- [cao_filter] faceted filter (BWG-533) ------------------------------ */
.cao-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 22px; }
.cao-filter__field { display: inline-flex; }
.cao-filter__select {
	padding: 10px 34px 10px 14px;
	border: 1px solid #d8dcdc;
	border-radius: 3px;
	font: 400 14px/1.2 var(--cao-font);
	color: var(--cao-text);
	background: #fff;
	min-width: 180px;
	cursor: pointer;
}
.cao-filter__reset { font: 600 13px/1 var(--cao-font); color: var(--cao-blue); text-decoration: none; padding: 8px 4px; }
.cao-filter__reset:hover { text-decoration: underline; }
.cao-filter__count { font: 600 14px/1 var(--cao-font); color: var(--cao-text); margin: 0 0 16px; }
.cao-filter__empty { font-family: var(--cao-font); color: var(--cao-text); }

/* =============================================================================
 * BWG-531 showcase gallery — large main image + thumbnail rail + lightbox.
 * The photos-first detail-page gallery. JS in cao-home-v2.js.
 * ========================================================================== */
.cao-gallery2 { width: 100%; margin: 0 0 8px; font-family: var(--cao-font); }
.cao-gallery2__stage {
	position: relative;
	width: 100%;
	background: var(--cao-bg-light);
	border-radius: 4px;
	overflow: hidden;
}
.cao-gallery2__open {
	display: block; width: 100%; margin: 0; padding: 0; border: 0;
	background: none; cursor: zoom-in;
}
.cao-gallery2__main {
	display: block; width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.cao-gallery2__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(255,255,255,.9); color: var(--cao-text);
	font: 400 26px/1 var(--cao-font); cursor: pointer; z-index: 2;
	box-shadow: 0 1px 6px rgba(0,0,0,.2);
	transition: background .15s;
}
.cao-gallery2__nav:hover { background: #fff; }
.cao-gallery2__nav--prev { left: 12px; }
.cao-gallery2__nav--next { right: 12px; }
.cao-gallery2__counter {
	position: absolute; bottom: 12px; right: 12px; z-index: 2;
	background: rgba(0,0,0,.6); color: #fff;
	padding: 4px 10px; border-radius: 3px; font: 600 13px/1 var(--cao-font);
}
/* Thumbnail strip = filmstrip look: bigger thumbs, touching (no gaps), no
 * whitespace framing. Large main image sits above (per Tim). */
.cao-gallery2__thumbs {
	display: flex; gap: 0; margin-top: 8px;
	overflow-x: auto; scroll-snap-type: x proximity;
	scrollbar-width: none; -ms-overflow-style: none;
}
.cao-gallery2__thumbs::-webkit-scrollbar { display: none; }
.cao-gallery2__thumb {
	flex: 0 0 25%; max-width: 25%; width: auto; height: 140px; padding: 0; margin: 0;
	border: 0; border-radius: 0;
	overflow: hidden; cursor: pointer; background: var(--cao-bg-light);
	scroll-snap-align: start; opacity: 1;
}
.cao-gallery2__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cao-gallery2__thumb.is-active { box-shadow: inset 0 -3px 0 var(--cao-blue); }   /* subtle active cue, no framing */

/* lightbox (single shared overlay, appended to <body>) */
.cao-lightbox {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(0,0,0,.93);
	display: flex; align-items: center; justify-content: center;
}
.cao-lightbox[hidden] { display: none; }
.cao-lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 4px 40px rgba(0,0,0,.5); }
.cao-lightbox__close {
	position: absolute; top: 14px; right: 22px;
	background: none; border: 0; color: #fff; font: 300 40px/1 var(--cao-font);
	cursor: pointer; z-index: 2;
}
.cao-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: none; border: 0; color: #fff; font: 300 56px/1 var(--cao-font);
	cursor: pointer; padding: 0 22px; z-index: 2; opacity: .8;
}
.cao-lightbox__nav:hover { opacity: 1; }
.cao-lightbox__nav--prev { left: 6px; }
.cao-lightbox__nav--next { right: 6px; }
.cao-lightbox__counter {
	position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
	color: #fff; font: 600 14px/1 var(--cao-font);
}
@media (max-width: 600px) {
	.cao-gallery2__main { aspect-ratio: 4 / 3; }
	.cao-gallery2__thumb { flex-basis: 40%; max-width: 40%; height: 110px; }
	.cao-lightbox__nav { font-size: 40px; padding: 0 10px; }
}

/* buildings index (BWG-536) — matches the live DM /buildings/ directory 1:1.
 * The name + chevron styling comes from the theme's .building-list
 * .dmach-post-title rules (kept in style.css, survives DM removal); this only
 * supplies the grid columns + cell separators + hover that DM's plugin CSS used
 * to provide (and which go away when DM is uninstalled). */
.cao-buildings-index {
	display: grid;
	grid-template-columns: repeat(var(--cao-cols, 6), minmax(0, 1fr));  /* minmax(0,..) so long words don't widen a column */
	column-gap: 16px;                     /* live: 16px gutters -> cells land at 134px */
	row-gap: 16px;                        /* live: 16px row gutter */
	grid-auto-rows: minmax(83px, auto);   /* live: uniform 83px same-height cells */
	width: 100%;
}
/* No borders — live has none. The look is WHITE cells on the section's #edf1f1
 * background, revealed by the 16px gutters (each cell "pops" as a white box). */
.cao-buildings-index .cao-bidx-item { background: #fff; }
.cao-buildings-index .cao-bidx-item:hover { background-color: rgba(51, 51, 51, 0.13); }
@media (max-width: 980px) { .cao-buildings-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cao-buildings-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Self-host the ETmodules icon font so cao chevrons (scroller arrows, the
 * buildings-index arrow that reuses .dmach-post-title a::after) render even on
 * pages where Divi's Dynamic Assets doesn't load it (e.g. the cao /buildings/
 * archive — DM used to trigger it; the cao shortcode doesn't). Theme path is
 * NOT offloaded, so the root-relative src resolves on apex + fast. alike.
 * font-display:block avoids the raw-"5" fallback flash. */
@font-face {
	font-family: "ETmodules";
	src: url("/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.woff") format("woff"),
	     url("/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

/* Building/listing detail specs chips (BWG-535/536) — match live DM chips:
 * 14px/500/#333, "Label: value" inline, inside the template's preserved flex row
 * (.listing_specs column: flex-wrap, gap 20px 45px, centered). No DM markup needed. */
.listing_specs .cao-acf { font-size: 16px; font-weight: 400; color: var(--cao-text); margin: 0; }
.listing_specs .cao-acf__label { font-weight: 600; margin-right: 0; }   /* live: label 16px/600 bold */
.listing_specs .cao-acf__value { display: inline; font-weight: 400; }   /* live: value 400 */
.listing_specs .cao-acf__terms { display: inline; }

/* Filmstrip gallery (BWG-536 building detail) — bigger images touching, no
 * whitespace framing, 4-up desktop, click -> lightbox. Closer to the DM look. */
.cao-filmstrip { position: relative; width: 100%; }
.cao-filmstrip__track {
	display: flex; gap: 0; overflow-x: auto;
	scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
}
.cao-filmstrip__track::-webkit-scrollbar { display: none; }
.cao-filmstrip__item {
	flex: 0 0 25%; max-width: 25%;
	padding: 0; margin: 0; border: 0; background: var(--cao-bg-light);
	cursor: pointer; scroll-snap-align: start;
}
.cao-filmstrip__item img { display: block; width: 100%; height: 240px; object-fit: cover; }
.cao-filmstrip__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.85); color: var(--cao-text);
	font: 400 26px/1 var(--cao-font); cursor: pointer; z-index: 2;
	box-shadow: 0 1px 6px rgba(0,0,0,.2);
}
.cao-filmstrip__prev { left: 10px; }
.cao-filmstrip__next { right: 10px; }
@media (max-width: 980px) { .cao-filmstrip__item { flex-basis: 33.33%; max-width: 33.33%; } .cao-filmstrip__item img { height: 200px; } }
@media (max-width: 600px) { .cao-filmstrip__item { flex-basis: 60%; max-width: 60%; } .cao-filmstrip__item img { height: 170px; } }

/* Listing 2-1/1-2 gallery (BWG-535) — layout comes from the theme's own
 * .grid_2-1 / .grid_1-2 .grid-posts rules; this just resets the <button> wrapper. */
.cao-g21 .cao-g21__item { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: var(--cao-bg-light); cursor: pointer; }

/* Team grid card (BWG-530 /cog-team/ /marketing/) — loop_layout 4642 parity:
 * centered photo(->profile) + navy uppercase name + italic gray title + phone +
 * email + social icons. */
.cao-grid--team-grid { gap: 44px 26px; }
.cao-tgc { text-align: center; font-family: var(--cao-font); }
.cao-tgc__media { margin: 0 0 14px; aspect-ratio: 321 / 500; overflow: hidden; background: var(--cao-bg-light); }
.cao-tgc__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cao-tgc__name { margin: 0 0 4px; font: 700 16px/1.3 var(--cao-font); color: var(--cao-blue); text-transform: uppercase; letter-spacing: .3px; }
.cao-tgc__name a { color: inherit; text-decoration: none; }
.cao-tgc__title { margin: 0 0 4px; font-style: italic; font-size: 16px; color: #939393; }
.cao-tgc__phone, .cao-tgc__email { margin: 0; font-size: 16px; line-height: 1.5; }
.cao-tgc__phone a, .cao-tgc__email a { color: #aeaeae; text-decoration: none; }
.cao-tgc__socials { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.cao-tgc__social { color: #aeaeae; font-size: 15px; text-decoration: none; }
.cao-tgc__social:hover { color: var(--cao-blue); }

/* [cao_taxonomy_list] (BWG-534) — replaces [pac_dth_taxonomy_list].
 * grid = white-box term links (neighborhood niche-buttons + Our Markets grid);
 * inline = the post's own terms as a "Label: value" pill (listing specs);
 * list = 1-col link list (blog categories). */
.cao-taxlist--grid { display: grid; grid-template-columns: repeat(var(--cao-cols,3), minmax(0,1fr)); gap: 15px; }
.cao-taxlist--grid .cao-taxlist__item { display: block; background: #fff; padding: 6px 12px; }
.cao-taxlist--grid .cao-taxlist__link { color: var(--cao-blue); font-size: 16px; text-decoration: none; }
.cao-taxlist--grid .cao-taxlist__link:hover { text-decoration: underline; }
.cao-taxlist--inline { font-size: 16px; color: var(--cao-text); }
.cao-taxlist--inline .cao-taxlist__label { font-weight: 600; margin-right: 4px; }
.cao-taxlist--inline .cao-taxlist__item:not(:last-child)::after { content: ", "; }
.cao-taxlist--inline .cao-taxlist__link { color: var(--cao-text); text-decoration: none; }
.cao-taxlist--list .cao-taxlist__item { display: block; margin-bottom: 4px; }
.cao-taxlist--list .cao-taxlist__link { color: #939393; font-size: 16px; text-decoration: none; }
.cao-taxlist--list .cao-taxlist__link:hover { color: var(--cao-blue); }
@media (max-width: 900px) { .cao-taxlist--grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .cao-taxlist--grid { grid-template-columns: 1fr; } }

/* [cao_taxonomy_list style="tag"] — the listing "( Off-Street Parking )" pill:
 * navy, bold, centered, CSS-generated parentheses (BWG-534). */
.cao-taxlist--tag { text-align: center; }
.cao-taxlist--tag .cao-taxlist__item { color: var(--cao-blue); font-weight: 600; font-size: 16px; }
.cao-taxlist--tag .cao-taxlist__item::before { content: "( "; }
.cao-taxlist--tag .cao-taxlist__item::after { content: " )"; }
.cao-taxlist--tag .cao-taxlist__link { color: var(--cao-blue); text-decoration: none; }

/* ============================================================
 * BWG-534 dth-compat (2026-07-04 walk fix): [cao_taxonomy_list] emits
 * pac_dth_* markup so the theme's surviving style.css rules render every
 * surface exactly like the live DTH modules (chevron buttons, blog pills,
 * listing-specs "Parent > Child"). This block re-provides ONLY what the
 * Divi Taxonomy Helper plugin CSS + its generated per-module CSS supplied,
 * which disappears at uninstall. Gap 6px/16px measured on live 2026-07-04.
 * Legacy .cao-taxlist--* rules above are inert (markup no longer emits them).
 * ============================================================ */
.cao-taxlist2 .pac_dth_taxonomies { display: flex; flex-wrap: wrap; box-sizing: border-box; gap: 6px 16px; }
.cao-taxlist2 .pac_dth_taxonomy_inner, .cao-taxlist2 .pac_dth_content { display: flex; flex-direction: column; }
.cao-taxlist2 .pac_dth_content { flex-wrap: wrap; height: 100%; justify-content: space-between; }
.cao-taxlist2 .pac_dth_title { overflow-wrap: break-word; }
.cao-taxlist2 .pac_dth_title a { text-decoration: none; }
/* blog list: live used taxonomies_column="1" (dth generated per-module CSS) */
.cao-taxlist2.blog_cat .pac_dth_taxonomies { flex-direction: column; }

/* [cao_video] responsive embed (BWG-529 agent spotlight): the raw oembed
 * iframe arrives with fixed width/height attrs — pin to fluid 16:9. */
.cao-video { position: relative; width: 100%; }
.cao-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

/* ---- listing meta strip: inline taxonomy pills match the 14px meta text (2026-07-06) ---- */
.cao-taxlist2--inline { display: inline; }
.cao-taxlist2--inline .pac_dth_title,
.cao-taxlist2--inline .pac_dth_title a {
	font-size: 14px !important;
	font-weight: 500;
	margin: 0;
	display: inline;
	line-height: inherit;
}
.cao-taxlist2--inline .pac_dth_taxonomies,
.cao-taxlist2--inline .pac_dth_taxonomy,
.cao-taxlist2--inline .pac_dth_taxonomy_inner,
.cao-taxlist2--inline .pac_dth_content {
	display: inline;
	width: auto;
}

/* strip pills: breathing room after label + no mid-pill wrap (2026-07-06) */
.cao-taxlist2--inline { margin-left: 5px; }
.cao-taxlist2--inline .pac_dth_taxonomy { white-space: nowrap; }

/* ---- strip pills v3 (2026-07-06): keep dth label + parens design, restyled for the 14px strip.
   Original style.css sizes these 16px with -10px tucks -> overlapped at strip size. ---- */
.cao-taxlist2--inline { margin-left: 8px; }
.cao-taxlist2--inline .pac_dth_title,
.cao-taxlist2--inline .pac_dth_title a { font-weight: 600; padding: 0 1px; }
.cao-taxlist2--inline .pac_dth_title a:hover { text-decoration: underline; }
.listing_specs .neighborhood .pac_dth_taxonomies::before {
	content: "Neighborhood:" !important;
	font-size: 14px !important; font-weight: 600;
	margin-right: 7px !important;
}
.listing_specs .parkingtype .pac_dth_taxonomies::before {
	content: "(" !important;
	font-size: 14px !important; font-weight: 600;
	margin-right: 1px !important;
}
.listing_specs .parkingtype .pac_dth_taxonomies::after {
	content: ")" !important;
	font-size: 14px !important; font-weight: 600;
	margin-left: 1px !important;
}

/* buildings index: make the whole tile clickable (stretched link) 2026-07-06 */
.cao-bidx-item { position: relative; }
.cao-bidx-item .dmach-post-title a::after { content: ""; position: absolute; inset: 0; }
.cao-bidx-item .dmach-post-title a { position: static; } /* anchor ::after to the tile, not the link */

/* ---- listing/building spec strip: own the flex container (BWG, 2026-07-08) ----
 * Was: one Divi Code MODULE per field in the .listing_specs column flex row.
 * [cao_acf hide_empty] returns '' for a data-less field, but Divi still emits the
 * empty <div class="et_pb_module et_pb_code"></div> — a zero-width flex item that
 * still consumes the 45px column-gap, injecting ~495px of phantom space and forcing
 * a lopsided wrap. Fix: all specs now live in ONE Code module, wrapped in
 * <div class="cao-specs">; empty [cao_acf] renders literally nothing, so no phantom
 * gaps. This div is the flex row now (replicates the old column: gap 20px 45px,
 * wrap, centered). All chip styling still keys off the .listing_specs ancestor. */
.listing_specs .cao-specs {
	display: flex;
	flex-wrap: wrap;
	column-gap: 45px;
	row-gap: 20px;
	align-items: center;
	justify-content: center;
}