/**
 * Product Categories — homepage module
 * Desktop: headline + CTA row, description, 4-column grid.
 * Mobile: centered headline, stacked cards, full-width CTA at bottom.
 */

.kb-product-categories {
	--pc-blue: var(--kb-brand-blue, #001489);
	--pc-gap: 18px;
	box-sizing: border-box;
}

/*
 * Same width system as breadcrumbs / post content: 90% mobile, 80% desktop.
 * Overrides global `.kb-home .kb-section { max-width: 1200px; padding: … }`.
 * When the block sits inside `.wp-block-post-content`, that column is already
 * 90%/80% — use full width of the column so we don’t double-constrain.
 */
.kb-product-categories.kb-section {
	width: 90%;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
}

.kb-home .kb-product-categories.constrained {
	width: var(--kb-constrained-width-mobile) !important;
	max-width: var(--kb-constrained-width-mobile) !important;
}

@media (min-width: 901px) {
	.kb-home .kb-product-categories.constrained {
		width: var(--kb-constrained-width-desktop) !important;
		max-width: var(--kb-constrained-width-desktop) !important;
	}
}

.wp-block-post-content .kb-product-categories.constrained,
.kb-editor-content .kb-product-categories.constrained {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.kb-product-categories *,
.kb-product-categories *::before,
.kb-product-categories *::after {
	box-sizing: border-box;
}

.kb-product-categories__inner {
	width: 100%;
	max-width: 100%;
}

/* Header: mobile = centered; desktop = title left + CTA right */
.kb-product-categories__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.kb-product-categories__title {
	margin: 0;
	font-family: var(--font-primary, "adobe-garamond-pro", Georgia, serif);
	font-weight: 700;
	line-height: 1.15;
	color: var(--pc-blue);
}

.kb-product-categories__desc {
	margin: 0;
	font-family: var(--font-secondary);
	font-size: 1rem;
	line-height: 1.5;
	color: #19284a;
}

.kb-product-categories__head-left {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	align-items: center;
}

/* CTA — brand blue, uppercase (tighter vertical padding vs category bars) */
.kb-product-categories__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0.35rem 1.5rem;
	line-height: 1.25;
	background: var(--pc-blue);
	color: #fff !important;
	font-family: var(--font-secondary, "classico-urw", Helvetica, Arial, sans-serif);
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none !important;
	text-transform: uppercase;
	border: 2px solid transparent;
	box-sizing: border-box;
	border-radius: 2px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hover matches theme body buttons: white fill, blue border & text (see style.css) */
.kb-product-categories__cta:hover,
.kb-product-categories__cta:focus-visible {
	background: #fff !important;
	color: var(--pc-blue) !important;
	border: 2px solid var(--pc-blue) !important;
	opacity: 1;
	outline: none;
}

/* Desktop: CTA in header; mobile: hide that one */
.kb-product-categories__cta--desktop {
	display: none;
}

.kb-product-categories__cta--mobile {
	display: flex;
	width: 100%;
	max-width: 100%;
	margin-top: 1.25rem;
}

/* Grid */
.kb-product-categories__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pc-gap);
	width: 100%;
}

.kb-product-categories__card {
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	color: inherit;
	overflow: hidden;
	border-radius: 0;
	outline: none;
}

.kb-product-categories__image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 0;
	background: #fff;
	padding: 12px 8px 0;
}

.kb-product-categories__image-wrap img {
	display: block;
	width: 100%;
	height: 90%;
	object-fit: contain;
	margin: 0 auto;
}

/* Blue bar under image (category title) — generous vertical padding vs CTA button */
.kb-product-categories__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	width: 100%;
	margin: 0;
	padding: 1.125rem 1.25rem;
	background: var(--pc-blue);
	color: #fff;
	font-family: var(--font-primary, "adobe-garamond-pro", Georgia, serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	border: 2px solid transparent;
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kb-product-categories__card:hover .kb-product-categories__bar,
.kb-product-categories__card:focus-visible .kb-product-categories__bar {
	background: #fff;
	color: var(--pc-blue);
	border-color: var(--pc-blue);
}

.kb-product-categories__bar-chevron {
	font-weight: 400;
	font-size: 1em;
	opacity: 0.95;
}

.kb-product-categories__card:hover .kb-product-categories__bar-chevron,
.kb-product-categories__card:focus-visible .kb-product-categories__bar-chevron {
	color: inherit;
	opacity: 1;
}

.kb-product-categories__empty {
	margin: 0;
	padding: 1rem;
	font-style: italic;
	color: #666;
	text-align: center;
}

/* Tablet: 2 columns */
@media (min-width: 600px) and (max-width: 900px) {
	.kb-product-categories__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Desktop */
@media (min-width: 901px) {
	.kb-product-categories__top {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		text-align: left;
		gap: 1.5rem;
		margin-bottom: 1.75rem;
	}

	.kb-product-categories__head-left {
		align-items: flex-start;
		text-align: left;
		flex: 1;
		min-width: 0;
	}



	.kb-product-categories__cta--desktop {
		display: inline-flex;
		flex: 0 0 auto;
		margin-top: 0.25rem;
	}

	.kb-product-categories__cta--mobile {
		display: none !important;
	}

	.kb-product-categories__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}

	.kb-product-categories__image-wrap {
		height: auto;
		padding: 16px 10px 0;
	}

	.kb-product-categories__bar {
		padding: 1.35rem 1.5rem;
	}
}