/**
 * ibr-category-content — front-end styles (product category pages only).
 *
 * BANNER
 *   Fills its container (content width — same as the product grid), natural
 *   height (scales with width). No full-bleed / alignfull trickery.
 *
 * SPACING (banner, top content, bottom content)
 *   Each element carries its own spacing in a style attribute, set per
 *   category (or from the defaults in ibr-category-content.php):
 *     --ibr-cc-above / --ibr-cc-below                (desktop)
 *     --ibr-cc-above-mobile / --ibr-cc-below-mobile  (mobile)
 *   No spacing numbers live in this file — change them in the category's
 *   admin panel, or the defaults block in ibr-category-content.php.
 *   The 0px fallbacks below only apply if that style attribute is missing.
 *
 * Blocksy quirk: .is-layout-constrained containers silently override physical
 * margins with logical ones. All spacing is therefore declared as logical
 * properties (margin-block-start / -end) at raised specificity (scoped under
 * .tax-product_cat), and restated inside the mobile media query.
 *
 * MOBILE SWITCH POINT — 999.98px
 *   Must match IBR_CC_MOBILE_MAX in ibr-category-content.php, which controls
 *   the banner's mobile image. Both match Blocksy's header switch.
 */

/* ---------------------------------------------------------------------------
 * Spacing — shared by banner, top content and bottom content
 * ------------------------------------------------------------------------ */

.tax-product_cat .ibr-cc-spaced {
	margin-block-start: var(--ibr-cc-above, 0px);
	margin-block-end: var(--ibr-cc-below, 0px);
	margin-inline: 0;
}

/* ---------------------------------------------------------------------------
 * Banner
 * ------------------------------------------------------------------------ */

.tax-product_cat .ibr-cc-banner {
	width: 100%;
}

.tax-product_cat .ibr-cc-banner-link,
.tax-product_cat .ibr-cc-banner-picture {
	display: block;
	text-decoration: none;
}

.tax-product_cat .ibr-cc-banner-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	transition: opacity 0.15s ease;
}

.tax-product_cat .ibr-cc-banner-link:hover .ibr-cc-banner-img {
	opacity: 0.92;
}

/* ---------------------------------------------------------------------------
 * Top / bottom content
 * ------------------------------------------------------------------------ */

.tax-product_cat .ibr-cc-content {
	width: 100%;
}

/* Keep the first / last paragraph from adding stray gaps, so the spacing
   fields are the only thing controlling the space around the content. */
.tax-product_cat .ibr-cc-content > :first-child {
	margin-block-start: 0;
}

.tax-product_cat .ibr-cc-content > :last-child {
	margin-block-end: 0;
}

.tax-product_cat .ibr-cc-content img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Mobile (below Blocksy's header switch) — keep in step with IBR_CC_MOBILE_MAX
 * ------------------------------------------------------------------------ */

@media (max-width: 999.98px) {
	.tax-product_cat .ibr-cc-spaced {
		margin-block-start: var(--ibr-cc-above-mobile, 0px);
		margin-block-end: var(--ibr-cc-below-mobile, 0px);
	}
}