/* BiO-G Collection Cards - scoped to .biog-cc. Values come from the Elementor controls as CSS variables.
   Layout mode (grid / swipe) per device arrives as a prefix class on the widget root:
   biog-cc-mode-grid|swipe (desktop), biog-cc-mode-tablet-*, biog-cc-mode-mobile-*.
   Breakpoints below are Elementor's defaults (tablet <= 1024px, mobile <= 767px). */

.biog-cc {
	--cc-focus: #0b6e4f;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
.biog-cc *,
.biog-cc *::before,
.biog-cc *::after {
	box-sizing: border-box;
}

/* ---- section header (optional): eyebrow, heading, description ------------- */
.biog-cc .biog-cc__header {
	max-width: 100%;
	margin: 0 auto 24px;
	text-align: center;
}
.biog-cc .biog-cc__header-eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: #0b6e4f;
}
.biog-cc .biog-cc__header-title {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: var(--cc-h-fw, 700) !important; /* the theme forces heading weights with !important */
	line-height: 1.2;
	color: #111;
}
.biog-cc .biog-cc__header-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #555;
}
.biog-cc .biog-cc__header-text > * { margin: 0; }
.biog-cc .biog-cc__header-text > * + * { margin-top: 0.75em; }
.biog-cc .biog-cc__header-text a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }

/* ---- list: grid (default) ------------------------------------------------ */
.biog-cc .biog-cc__list {
	display: grid;
	grid-template-columns: repeat(var(--cc-cols, 3), minmax(0, 1fr));
	gap: var(--cc-gap, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.biog-cc .biog-cc__item {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Columns when the widget has no explicit value (matches the control defaults). */
@media (max-width: 1024px) {
	.biog-cc { --cc-cols: 2; }
}
@media (max-width: 767px) {
	.biog-cc { --cc-cols: 1; }
}

/* ---- list: swipe (scroll-snap) -------------------------------------------
   Same block repeated per device so each breakpoint can choose independently. */
.biog-cc-mode-swipe .biog-cc__list {
	display: grid;
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: var(--cc-item-w, 46%);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: var(--cc-room, 18px) var(--cc-inset, 0px);
	margin: calc(var(--cc-room, 18px) * -1) 0;
	scroll-padding-inline: var(--cc-inset, 0px);
}
.biog-cc-mode-swipe .biog-cc__list::-webkit-scrollbar { display: none; }
.biog-cc-mode-swipe .biog-cc__item { scroll-snap-align: start; }

@media (max-width: 1024px) {
	.biog-cc-mode-tablet-grid .biog-cc__list {
		grid-template-columns: repeat(var(--cc-cols, 2), minmax(0, 1fr));
		grid-auto-flow: row;
		grid-auto-columns: auto;
		overflow: visible;
		scroll-snap-type: none;
		padding: 0;
		margin: 0;
	}
	.biog-cc-mode-tablet-grid .biog-cc__item { scroll-snap-align: none; }

	.biog-cc-mode-tablet-swipe .biog-cc__list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: var(--cc-item-w, 46%);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: var(--cc-room, 18px) var(--cc-inset, 16px);
		margin: calc(var(--cc-room, 18px) * -1) 0;
		scroll-padding-inline: var(--cc-inset, 16px);
	}
	.biog-cc-mode-tablet-swipe .biog-cc__list::-webkit-scrollbar { display: none; }
	.biog-cc-mode-tablet-swipe .biog-cc__item { scroll-snap-align: start; }
}
@media (max-width: 767px) {
	.biog-cc-mode-mobile-grid .biog-cc__list {
		grid-template-columns: repeat(var(--cc-cols, 1), minmax(0, 1fr));
		grid-auto-flow: row;
		grid-auto-columns: auto;
		overflow: visible;
		scroll-snap-type: none;
		padding: 0;
		margin: 0;
	}
	.biog-cc-mode-mobile-grid .biog-cc__item { scroll-snap-align: none; }

	.biog-cc-mode-mobile-swipe .biog-cc__list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: var(--cc-item-w, 82%);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: var(--cc-room, 18px) var(--cc-inset, 16px);
		margin: calc(var(--cc-room, 18px) * -1) 0;
		scroll-padding-inline: var(--cc-inset, 16px);
	}
	.biog-cc-mode-mobile-swipe .biog-cc__list::-webkit-scrollbar { display: none; }
	.biog-cc-mode-mobile-swipe .biog-cc__item { scroll-snap-align: start; }
}

/* ---- card ---------------------------------------------------------------- */
.biog-cc .biog-cc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background-color: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
	transition: transform var(--cc-dur, 0.45s) var(--cc-ease, ease), box-shadow var(--cc-dur, 0.45s) var(--cc-ease, ease), background-color 0.2s ease, border-color 0.2s ease;
}
.biog-cc .biog-cc__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.biog-cc a.biog-cc__link:hover,
.biog-cc a.biog-cc__link:focus {
	color: inherit;
	text-decoration: none;
}
/* The ring sits inside the card so the card's overflow clipping never hides it. */
.biog-cc a.biog-cc__link:focus-visible,
.biog-cc a.biog-cc__cta:focus-visible {
	outline: 3px solid var(--cc-focus, #0b6e4f);
	outline-offset: -3px;
}

/* ---- media --------------------------------------------------------------- */
.biog-cc .biog-cc__media {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	aspect-ratio: var(--cc-aspect, var(--cc-natural, auto));
}
.biog-cc .biog-cc__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: var(--cc-fit, contain);
	object-position: var(--cc-pos, center center);
	transform-origin: center center;
	transition: transform var(--cc-dur, 0.45s) var(--cc-ease, ease);
	will-change: auto;
}

/* ---- caption / button ---------------------------------------------------- */
/* Card order: .biog-cc__top (headline + description), image, .biog-cc__bottom (badge, tag, button). */
.biog-cc .biog-cc__top {
	display: block;
	flex: 1 1 auto; /* when another card's text is taller, the extra height goes here so images and buttons line up */
	padding: 22px 18px 0;
	text-align: center;
}
.biog-cc .biog-cc__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: var(--cc-title-fw, 700) !important; /* the theme forces heading weights with !important */
	line-height: 1.25;
	color: #111;
}
.biog-cc .biog-cc__desc {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #555;
}
/* Space between the image and the text above / the badge below (one control). */
.biog-cc .biog-cc__top + .biog-cc__media { margin-top: var(--cc-img-gap, 6px); }
.biog-cc .biog-cc__media + .biog-cc__bottom .biog-cc__chips { margin-top: var(--cc-img-gap, 6px); }
.biog-cc .biog-cc__bottom {
	display: block;
	margin-top: auto; /* buttons line up across cards of different text height */
}
.biog-cc .biog-cc__chips {
	padding: 0 18px 18px;
	text-align: center;
}
.biog-cc .biog-cc__chip-row {
	display: block;
	margin: 0;
	padding: 0;
}
.biog-cc .biog-cc__chip-row + .biog-cc__chip-row { margin-top: 8px; }
.biog-cc .biog-cc__badge {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	padding: 8px 18px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: #0b0b0b;
	background-color: #5ec291;
	border-radius: 8px;
}
.biog-cc .biog-cc__tag {
	display: inline-block;
	margin: 0;
	padding: 4px 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: #111;
	background-color: #ffe27a;
	border-radius: 999px;
}
.biog-cc .biog-cc__cta {
	display: block;
	margin: 0;
	padding: 14px 16px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: #111;
	border: 0 solid #e6e6e6;
	border-top-width: 1px;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.biog-cc--arrow .biog-cc__cta::after {
	content: "\2192";
	content: "\2192" / "";
	display: inline-block;
	margin-left: 0.45em;
	transition: transform var(--cc-dur, 0.45s) var(--cc-ease, ease);
}

/* Visually hidden but available to screen readers and search engines. */
.biog-cc .biog-cc__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- hover (mouse devices only) ------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
	.biog-cc .biog-cc__card:hover {
		transform: translateY(calc(var(--cc-lift, 0px) * -1));
	}
	.biog-cc .biog-cc__card:hover .biog-cc__img {
		transform: scale(var(--cc-zoom, 1));
	}
	.biog-cc--arrow .biog-cc__card:hover .biog-cc__cta::after,
	.biog-cc--arrow .biog-cc__cta:focus-visible::after {
		transform: translateX(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.biog-cc .biog-cc__card,
	.biog-cc .biog-cc__img,
	.biog-cc .biog-cc__cta,
	.biog-cc--arrow .biog-cc__cta::after {
		transition: none;
	}
	.biog-cc .biog-cc__card:hover,
	.biog-cc .biog-cc__card:hover .biog-cc__img,
	.biog-cc--arrow .biog-cc__card:hover .biog-cc__cta::after {
		transform: none;
	}
	.biog-cc-mode-swipe .biog-cc__list,
	.biog-cc-mode-tablet-swipe .biog-cc__list,
	.biog-cc-mode-mobile-swipe .biog-cc__list {
		scroll-behavior: auto;
	}
}