/* LFG QA round 2026-09-27: product-cards overrides for bokka-data-structures blocks. Loaded site-wide after the child style.css. */


/* ------------------------------------------------------------------------
   Community Floorplans tab - space under the price heading

   community-tabbed-content.php prints "Single Family Homes from $280k" as an
   <h2> straight above the product grid with no bottom margin, so it sat on
   top of the first row of card titles ("Phoenix", "Nova"). The empty-tab
   message is also a direct <h2> of the tab and keeps its own padding.
   --------------------------------------------------------------------- */
.community-tab-content > h2:not(.no-results-text) {
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	.community-tab-content > h2:not(.no-results-text) {
		margin-bottom: 40px;
	}
}


/* ------------------------------------------------------------------------
   Price snipe on plan / model / home cards

   Added by inc/bokka-lfg-product-cards.php. Charcoal tab on the photo's
   top-right edge, the same look as the /homes/ and /models/ archive snipes
   (css/bokka-archives.css). On singles it lines up with the plugin's
   top-left status snipe (top-6); on the archives, where the status snipe
   moves to the bottom-left, it matches the other archive snipes at 16px.
   z-index clears the plugin's .image-placeholder (10).

   The class is repeated because bokka-archives.css repositions every
   `.lfg-archive .product-grid .item figure > span` except its own snipe
   (0,4,2); this needs to beat that on /plans/.
   --------------------------------------------------------------------- */
.product-grid .item figure > .lfg-card-price.lfg-card-price.lfg-card-price {
	position: absolute;
	z-index: 11;
	top: 24px;
	right: 0;
	bottom: auto;
	left: auto;
	max-width: calc(100% - 24px);
	padding: 6px 14px;
	background-color: #313233;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	color: #FFFFFF;
}

.lfg-archive .product-grid .item figure > .lfg-card-price.lfg-card-price.lfg-card-price {
	top: 16px;
}

/* ------------------------------------------------------------------------
   "You may also be interested in these communities" - archive cards

   Client revisions 2026-10-09 (round 2): the cards are the /communities/
   archive cards (inc/bokka-lfg-product-cards.php), inside an
   `lfg-archive lfg-archive--communities` wrapper, so the card itself (box,
   photo, status snipe, type, address) comes from css/bokka-archives.css and
   css/archive-communities.css, loaded on community singles. Only the grid is
   set here: the archive's list layout (16:9 photo, full-width items, 24px
   gap) is scoped to its map sidebar, and the cards sit side by side at the
   archive card's width (its 1440px sidebar column), one height per row.
   --------------------------------------------------------------------- */
/* The block pads 8px a side; 8px more gives the site's 16px phone gutter. */
.bokka-plugin .lfg-popular-communities {
	padding: 0 8px;
}
.bokka-plugin .lfg-popular-communities .product-grid {
	display: grid;
	grid-template-columns: minmax(0, 444px);
	justify-content: center;
	gap: 24px;
}
@media (min-width: 768px) {
	.bokka-plugin .lfg-popular-communities .product-grid {
		grid-template-columns: repeat(2, minmax(0, 444px));
		gap: 32px;
	}
}
.bokka-plugin .lfg-popular-communities .product-grid .item {
	width: auto;
	max-width: none;
	margin: 0;
}
.bokka-plugin .lfg-popular-communities .product-grid .item > a,
.bokka-plugin .lfg-popular-communities .product-grid .item > a > div {
	height: 100%;
}
.bokka-plugin .lfg-popular-communities .product-grid figure {
	height: auto;
	aspect-ratio: 16 / 9;
}


/* ------------------------------------------------------------------------
   Card stats - the /plans/ archive look everywhere (client revisions
   2026-10-14)

   product-grid.php sets beds / baths / sq. ft. / garage at md:text-base
   (16px / 24px) with sm:text-4xl icons, and keeps each count + label on one
   line that cannot shrink (`sm:flex-none`), so "3 BEDS + OFFICE" ran under
   the bath icon in the next column. Plan and home cards on community, plan
   and home pages now match the /plans/ archive (css/bokka-archives.css,
   css/archive-plans.css): 13px Montserrat, bold count, 24px icons, and
   count + label flowing inline so a long value wraps as one left-aligned
   block. On the archives their own rules win with the same values.

   inc/bokka-lfg-product-cards.php moves the beds add-on into
   .lfg-beds-addon, which takes its own line under the count ("3 BEDS" /
   "+ OFFICE"); each "+ ROOM" inside it stays in one piece.
   --------------------------------------------------------------------- */
.product-grid .item .grid {
	padding: 16px 20px;
	gap: 12px;
}

.product-grid .item .grid > .flex {
	min-width: 0;
	align-items: center;
	text-align: left;
}

.product-grid .item .grid > .flex > .flex {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.product-grid .item .grid span {
	display: inline;
	padding-top: 0;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: #313233;
}

.product-grid .item .grid > .flex > span:first-of-type,
.product-grid .item .grid > .flex > .flex > span:first-of-type {
	font-weight: 700;
}

/* Inline in the beds row, so the markup's whitespace already spaces count
   and label; the other rows are flex items and keep the plugin's mr-1. */
.product-grid .item .grid > .flex > .flex > span:first-child {
	margin-right: 0;
}

.product-grid .item .grid .bokka-icon {
	flex: 0 0 auto;
	margin-right: 8px;
	font-size: 24px;
	color: #4B4F52;
}

.product-grid .item .grid .lfg-beds-addon {
	display: block;
}

.product-grid .item .grid .lfg-beds-addon__item {
	white-space: nowrap;
}