/* BiO-G Usage Cards - scoped to .biog-uc. Colours, columns, gap, radius and padding come from Elementor controls as
   CSS variables. No JavaScript. */
.biog-uc {
	--uc-bg: #faf6ee;
	--uc-accent: #1b8559;
	--uc-card-bg: #fffdf9;
	--uc-cols: 4;
	--uc-gap: 20px;
	--uc-radius: 22px;
	--uc-ink: #252525;
	--uc-muted: #5f635d;
	--uc-badge: 72px;
	--uc-mint: #dff2e7;
	box-sizing: border-box;
	width: 100%;
	padding: 72px 32px 80px;
	background-color: var(--uc-bg);
	/* very soft warm light wash over the section colour (no shapes, no images) */
	background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(140, 115, 70, 0.04) 100%);
	color: var(--uc-ink);
}
.biog-uc *, .biog-uc *::before, .biog-uc *::after { box-sizing: border-box; }
.biog-uc .biog-uc__inner { max-width: 1320px; margin: 0 auto; }

/* ---- header --------------------------------------------------------------- */
.biog-uc .biog-uc__header { margin: 0 auto 48px; text-align: center; }
.biog-uc .biog-uc__eyebrow { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 14px; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--uc-accent); }
.biog-uc .biog-uc__eyebrow::before,
.biog-uc .biog-uc__eyebrow::after { content: ""; flex: 0 0 36px; height: 1px; background-color: currentColor; opacity: 0.45; }
.biog-uc .biog-uc__heading { margin: 0 0 16px; padding: 0; font-size: 46px; font-weight: 700 !important; /* theme forces heading weights */ line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; text-transform: none; color: var(--uc-ink); }
.biog-uc .biog-uc__accent { color: var(--uc-accent); }
.biog-uc .biog-uc__desc { max-width: 46em; margin: 0 auto; font-size: 17px; line-height: 1.65; color: var(--uc-muted); }

/* ---- grid + cards ------------------------------------------------------------ */
.biog-uc .biog-uc__grid { display: grid; grid-template-columns: repeat(var(--uc-cols), minmax(0, 1fr)); gap: var(--uc-gap); margin: 0; padding: 0; list-style: none; }
.biog-uc .biog-uc__item { display: flex; min-width: 0; margin: 0; padding: 0; list-style: none; }
.biog-uc .biog-uc__card { position: relative; display: flex; flex-direction: column; width: 100%; margin: 0; background-color: var(--uc-card-bg); border: 0; border-radius: var(--uc-radius); box-shadow: 0 1px 2px rgba(60, 50, 30, 0.04), 0 14px 34px rgba(60, 50, 30, 0.08); }
.biog-uc .biog-uc__media { margin: 0; overflow: hidden; border-radius: var(--uc-radius) var(--uc-radius) 0 0; aspect-ratio: 1.1 / 1; background-color: #eceae4; }
.biog-uc .biog-uc__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; } /* portrait photos in a wider frame: keep heads and faces in view */
.biog-uc .biog-uc__item:nth-child(1) .biog-uc__img { object-position: 50% 38%; }
.biog-uc .biog-uc__item:nth-child(2) .biog-uc__img { object-position: 50% 18%; }
.biog-uc .biog-uc__item:nth-child(3) .biog-uc__img { object-position: 50% 28%; }
.biog-uc .biog-uc__item:nth-child(4) .biog-uc__img { object-position: 50% 40%; }
.biog-uc .biog-uc__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 0 20px 28px; }

/* The badge overlaps the bottom edge of the photo; the title sits beside it, fully on the card body. */
.biog-uc .biog-uc__head { display: flex; align-items: flex-start; gap: 13px; margin: calc(var(--uc-badge) / -3) 0 12px; }
.biog-uc .biog-uc__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--uc-badge); width: var(--uc-badge); height: var(--uc-badge); font-size: 30px; line-height: 1; color: var(--uc-ink); background-color: var(--uc-mint); background-image: linear-gradient(145deg, #eefaf3 0%, #cdeedc 100%); border: 4px solid var(--uc-card-bg); box-shadow: 0 6px 16px rgba(27, 133, 89, 0.12); border-radius: 50%; }
.biog-uc .biog-uc__icon i, .biog-uc .biog-uc__icon svg { display: block; width: 1em; height: 1em; font-size: inherit; line-height: 1; color: inherit; fill: currentColor; }
.biog-uc .biog-uc__title { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; min-height: calc(var(--uc-badge) * 0.62); margin: calc(var(--uc-badge) / 3 + 6px) 0 0; padding: 0; font-size: 19.5px; font-weight: 700 !important; letter-spacing: -0.01em; text-wrap: balance; line-height: 1.22; text-transform: none; color: var(--uc-ink); }
.biog-uc .biog-uc__link, .biog-uc .biog-uc__link:hover, .biog-uc .biog-uc__link:focus { color: inherit; text-decoration: none; }
.biog-uc .biog-uc__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--uc-radius); } /* whole card is clickable when a link is set */
.biog-uc .biog-uc__link:focus-visible::after { outline: 2px solid var(--uc-accent); outline-offset: 2px; }
.biog-uc .biog-uc__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--uc-muted); }

/* ---- responsive ------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.biog-uc { padding: 56px 24px 64px; }
	.biog-uc .biog-uc__heading { font-size: 38px; }
	.biog-uc .biog-uc__eyebrow { font-size: 13px; }
	.biog-uc .biog-uc__desc { font-size: 16px; }
}
@media (max-width: 767px) {
	.biog-uc { padding: 40px 20px 48px; }
	.biog-uc .biog-uc__heading { font-size: 30px; }
	.biog-uc .biog-uc__eyebrow { font-size: 12px; }
	.biog-uc .biog-uc__desc { font-size: 15px; }
	.biog-uc .biog-uc__header { margin-bottom: 28px; }
	.biog-uc .biog-uc__media { aspect-ratio: 4 / 3.5; }
}