/* ==========================================================================
   Bokka Plan archive (/plans/) - page styles
   --------------------------------------------------------------------------
   Loaded after css/bokka-archives.css by lfg_bokka_archive_enqueue( 'plans' )
   from archive-bokka_plan.php. Everything is scoped to .lfg-archive--plans
   (the template's container-wrap).

   Layout follows sjvhomes.com/new-home-search/: filter bar, result count,
   one full-width band per community with a 3-up card grid, pagination. The
   filter bar, bands, count, pagination and card typography are shared with
   the other archives (css/bokka-archives.css); this file only holds what
   the plans block's own markup needs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb
   The block prints its own "Home / Plans" bar as its first child, which would
   land between the hero and the filters. The hero partial already prints the
   breadcrumb above the hero, so hide the block's copy.
   -------------------------------------------------------------------------- */
.lfg-archive--plans .new-home-search .breadcrumb-nav-component {
	display: none;
}

/* --------------------------------------------------------------------------
   Hero
   The Phoenix elevation (see archive-bokka_plan.php) crops to its middle at
   the short hero's 3.5:1; pull it up so the roofline stays in frame, and
   toward the house on phones where the sides are cut.
   -------------------------------------------------------------------------- */
.lfg-archive--plans .lfg-archive-hero .bw-bottom-content {
	background-position: 65% 22%;
}

/* --------------------------------------------------------------------------
   Result area + community groups
   -------------------------------------------------------------------------- */
.lfg-archive--plans .new-home-search-grid-container {
	padding-top: 44px;
}
.lfg-archive--plans .plan-groups {
	margin-bottom: 40px;
}
.lfg-archive--plans .plan-groups > div {
	padding-bottom: 56px;
}
@media (max-width: 639px) {
	.lfg-archive--plans .plan-groups > div {
		padding-right: 20px;
		padding-left: 20px;
	}
}

/* Card grid: 1 / 2 / 3 columns. The plugin's flex row of 384px-max cards
   left a single centered card per row on tablets. */
.lfg-archive--plans .plan-groups .product-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px 24px;
	justify-content: stretch;
	max-width: 400px;
	margin: 0 auto;
}
@media (min-width: 640px) {
	.lfg-archive--plans .plan-groups .product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: none;
	}
}
@media (min-width: 1024px) {
	.lfg-archive--plans .plan-groups .product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.lfg-archive--plans .plan-groups .product-grid > .item {
	max-width: none;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Plan card
   SJV puts the plan name above the photo, centered; the box is the photo
   plus the spec grid.
   -------------------------------------------------------------------------- */
/* Doubled container class to outrank the shared title rule's margin: 0. */
.lfg-archive.lfg-archive--plans .product-grid .item a > h3 {
	margin-bottom: 12px;
}

/* Spec grid: a long bed label ("3 BEDS + LOFT + OFFICE") ran under the bath
   column. Let the label wrap inside its own column instead. */
.lfg-archive--plans .product-grid .item .grid {
	padding: 16px 20px;
	gap: 12px;
}
.lfg-archive--plans .product-grid .item .grid > .flex {
	min-width: 0;
	align-items: center;
	text-align: left;
}
.lfg-archive--plans .product-grid .item .grid > .flex > .flex {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}
.lfg-archive--plans .product-grid .item .grid > .flex > .flex > span {
	display: inline;
}
/* The beds add-on ("+ OFFICE", split out by inc/bokka-lfg-product-cards.php)
   takes its own line under the count, as on the community cards. */
.lfg-archive--plans .product-grid .item .grid > .flex > .flex > .lfg-beds-addon {
	display: block;
}
/* Inline now, so the markup's whitespace already spaces number and label. */
.lfg-archive--plans .product-grid .item .grid > .flex > .flex > span:first-child {
	margin-right: 0;
}