/*
 * ChapChap: homepage category grid, 2 columns -> 4 columns
 * =====================================================================
 * Requested: keep the existing category-box design exactly as-is
 * (icon, title, subcategory list, "View All" link -- nothing about the
 * card itself changes) -- just show 4 per row instead of 2, on every
 * screen size, so the section reads as a compact grid like a
 * marketplace app rather than a tall single/double column of large
 * cards. Fewer, smaller cards visible per viewport also means fewer
 * category images requested above the fold on first paint.
 *
 * The parent theme ships three homepage category layouts
 * (category-v2, category-v6, category-v7 -- selected in Theme Options,
 * only one is ever active on a given site) and this child theme
 * overrides the templates for all three. Each one wraps every card in
 * a Bootstrap 3 column div with a *slightly* different class list
 * (col-lg-4 col-sm-6 / col-lg-4 col-sm-6 col-md-4 / col-lg-4 col-md-4
 * col-sm-6 match-height), which is why this targets `.category-box`
 * itself (present in every variant) rather than trying to keep the
 * three column-class combinations in sync by hand.
 *
 * Pure CSS, no JavaScript, no template edits -- same "can't fail to
 * apply" approach as chapchap-force-grid.css. Bootstrap's own
 * `.col-lg-4` etc. rules still exist on these elements but do nothing
 * once `display: grid` on the parent `.row` takes over each card's
 * layout -- no need to strip the old classes.
 */
.category-v2 .row,
.category-v6 .row,
.category-v7 .row {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 6px !important;
	margin: 0 !important;
}
.category-v2 .row > [class*="col-"],
.category-v6 .row > [class*="col-"],
.category-v7 .row > [class*="col-"] {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	padding: 4px !important;
	box-sizing: border-box !important;
}

/* Section heading row (title/description above the grid) keeps its own
   Bootstrap width -- only the card row itself is gridded, so exclude it. */
.category-v2 .section-heading-v1 .row,
.category-v6 .section-heading-v6 .row,
.category-v7 .section-heading-v6 .row {
	display: block !important;
}

@media (min-width: 480px) {
	.category-v2 .row,
	.category-v6 .row,
	.category-v7 .row {
		gap: 14px !important;
	}
	.category-v2 .row > [class*="col-"],
	.category-v6 .row > [class*="col-"],
	.category-v7 .row > [class*="col-"] {
		padding: 6px !important;
	}
}
@media (min-width: 992px) {
	.category-v2 .row,
	.category-v6 .row,
	.category-v7 .row {
		gap: 20px !important;
	}
}

/* At 4-up, the card's own image/icon area is narrower than the design
   was originally laid out for -- shrink it proportionally so the icon,
   title and subcategory list still fit the card instead of overflowing
   or wrapping awkwardly. Nothing here changes colors, icons, fonts, or
   which content shows -- only the size it renders at. */
.category-v2 .category-box,
.category-v6 .category-box,
.category-v7 .category-box {
	height: 100%;
}
.category-v6 .category-box figure img,
.category-v7 .category-box figure img {
	height: 90px !important;
	object-fit: cover !important;
}
@media (min-width: 992px) {
	.category-v6 .category-box figure img,
	.category-v7 .category-box figure img {
		height: 130px !important;
	}
}
.category-v6 .category-box h3,
.category-v7 .category-box h3,
.category-v2 .category-box h4 {
	font-size: 14px !important;
	line-height: 1.3 !important;
}
@media (max-width: 479px) {
	/* Below 480px the subcategory bullet list is the main thing that
	   can push a 4-up card too tall on a narrow phone -- trim it to 3
	   lines instead of hiding it, so the grid rows stay even without
	   dropping any category's links entirely at wider widths. */
	.category-v6 .category-box ul.fa-ul li:nth-child(n+4),
	.category-v7 .category-box ul.fa-ul li:nth-child(n+4) {
		display: none;
	}
}