/*
 * IB Cross Sell — "Complete the set" block.
 *
 * Reproduces the approved mockup (v6). Everything is scoped under `.ibxs` so nothing
 * leaks into the theme; no `!important` (the theme has not been proven to force anything
 * here). `[hidden]` must stay hidden regardless of what the theme puts on `section`/`li`
 * elsewhere — both the section itself (a theme `section { display: block }` would
 * otherwise override the UA default and show the whole empty block before JS un-hides it)
 * and every card inside it.
 */

.ibxs {
	--ibxs-line: #e3e1de;
	--ibxs-soft: #5d5a57;
	--ibxs-ink: #1f1f1f;
	--ibxs-green: #35592f;
	--ibxs-own-ground: #f1f5ee;
	--ibxs-own-line: #cfdcc8;

	/* The block fills its parent exactly like the reviews section right below it
	   (`#wpcr-product-reviews`): the Oxygen template already gives that parent the page's
	   width and gutters. A max-width or side padding of our own made the block narrower
	   than the product panel above and the reviews below — seen on the test shop. */
	box-sizing: border-box;
	margin: 0 0 56px;
	padding: 40px 0 0;
	color: var(--ibxs-ink);
}

.ibxs[hidden] {
	display: none;
}

.ibxs [hidden] {
	display: none;
}

.ibxs__title {
	/* Same figure as the shop's own h2 («What our customers say about …»): the theme sets
	   `h2 { font-size: var(--text-3xl); line-height: 1.2; font-weight: 200 }` in ABeeZee.
	   The fallbacks only matter if the theme ever drops that variable. */
	font-family: 'ABeeZee', 'IBM Plex Sans', sans-serif;
	font-weight: 200;
	font-size: var(--text-3xl, clamp(28px, 4.2vw, 50px));
	line-height: 1.2;
	margin: 0 0 0.35em;
}

.ibxs__where {
	color: var(--ibxs-soft);
	font-size: 15px;
	margin: 0 0 22px;
}

.ibxs__where .ibxs__place {
	font-weight: 500;
	color: var(--ibxs-ink);
}

.ibxs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.ibxs__list[data-ibxs-cols="3"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ibxs__list[data-ibxs-cols="5"] {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ibxs__card {
	box-sizing: border-box;
}

.ibxs .ibxs__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--ibxs-line);
	border-radius: 6px;
	padding: 14px;
	color: inherit;
	text-decoration: none;
}

.ibxs .ibxs__link:hover,
.ibxs .ibxs__link:focus-visible {
	border-color: var(--ibxs-green);
	outline: none;
	box-shadow: 0 0 0 2px rgba(53, 89, 47, .18);
}

.ibxs__img {
	display: block;
	aspect-ratio: 1 / 1;
	background: #fff;
	margin-bottom: 6px;
}

.ibxs__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ibxs__name {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
}

.ibxs__pitch {
	color: var(--ibxs-soft);
	font-size: 16px;
	line-height: 1.45;
}

.ibxs__pitch b {
	color: var(--ibxs-ink);
	font-weight: 500;
}

/* The custom card always spans two columns: photo + name on the left, the pitch on the
   right, vertically centred; the left column is exactly as wide as another card's photo.
   The two ".ibxs__link" boxes are both border-box with 14px padding and a 1px border
   (2*(14+1) = 30px), so a normal card's photo width is (track − 30). The custom card's
   own ".ibxs__link" content box ("100%" below) is 2 tracks plus the ONE 16px gap between
   them, minus that same 30px: (2×track + 16 − 30) = (2×track − 14). Splitting that in two
   around an inner gap G gives each column (track − 7 − G/2); solving that equal to
   (track − 30) gives G = 2×(14+1) + 16 = 46 — not 44, which was 2px too narrow (one card
   border's worth) and made the custom card's photo a hair wider than the others'. */
.ibxs__card--own {
	grid-column: span 2;
}

.ibxs .ibxs__card--own .ibxs__link {
	background: var(--ibxs-own-ground);
	border-color: var(--ibxs-own-line);
	display: grid;
	grid-template-columns: calc((100% - 46px) / 2) minmax(0, 1fr);
	gap: 6px 46px;
	align-items: start;
}

.ibxs__card--own .ibxs__img {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 6px;
}

.ibxs__card--own .ibxs__name {
	grid-column: 1;
	grid-row: 2;
}

.ibxs__card--own .ibxs__pitch {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
}

.ibxs__list[data-ibxs-cols="5"] .ibxs__card--own .ibxs__pitch {
	font-size: 15px;
}

@media (max-width: 760px) {
	.ibxs__list,
	.ibxs__list[data-ibxs-cols="3"],
	.ibxs__list[data-ibxs-cols="4"],
	.ibxs__list[data-ibxs-cols="5"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	/* Same arithmetic as the desktop rule above, with the 12px mobile list gap in place of
	   16px: G = 2×(14+1) + 12 = 42 (not 40, for the same 2px/one-border reason). */
	.ibxs .ibxs__card--own .ibxs__link {
		grid-template-columns: calc((100% - 42px) / 2) minmax(0, 1fr);
		gap: 6px 42px;
	}
}