/**
 * grid.css
 * A small, dependency-free grid system (no Bootstrap). Covers the
 * repeating grid needs across sections/business/blog: auto-fit card
 * grids plus an escape hatch fixed-column grid for pricing tables etc.
 */

.grid {
	display: grid;
	gap: var(--space-5);
}

/* Auto-fit card grid — used by archive__grid, business-archive__grid,
   related-posts__grid, gallery__grid, pricing__grid. Cards wrap
   naturally at any viewport width without extra media queries. */
.archive__grid,
.business-archive__grid,
.related-posts__grid,
.gallery__grid,
.pricing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-5);
}

.gallery__grid {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-3);
}

/* Fixed 2-column layout: main content + sidebar. */
.single-post__layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-7);
	align-items: start;
}

@media (max-width: 960px) {
	.single-post__layout {
		grid-template-columns: 1fr;
	}
}

/* .business-page__layout used to share the rule above, but its grid
   (main reviews column + widget sidebar) is now fully defined in
   business.css instead — scoped tablet/desktop breakpoints there give
   it its own Trustpilot-style column ratio without touching this
   shared rule (which .single-post__layout, an unrelated blog template,
   still depends on). Below its own breakpoint it's simply not a grid
   (single column), same end result as before. */

/* When there's no active sidebar widget area (see single.php /
   page-templates/with-sidebar.php), don't reserve the empty 1fr
   column — that's what left a blank strip on the left side (RTL) on
   desktop/tablet even though nothing was rendered there. Collapse to
   a single centered column instead. */
.single-post__layout--full {
	grid-template-columns: minmax(0, 860px);
	justify-content: center;
}