/**
 * The Chapters page, the three chapter pages, and the Platforms overview,
 * which is built in the Chapters page's shape.
 *
 * Structure lives in Elementor — /chapters/, /industrial-biotech/,
 * /digital-healthtech/, /diagnostics-lab-automation/ and
 * /networking-platforms/ — exported to
 * elementor/pages/ and built by scripts/build-chapters-elementor.php. This
 * stylesheet carries the look the prototype's Tailwind classes describe
 * (raskin-prototypes/sba3, src/pages/Chapters.tsx and the three Chapter*.tsx
 * pages), translated to the design tokens. What the pages share with the rest
 * of the redesign — eyebrow, section title, buttons, the AI label — is in
 * sections.css, which loads first.
 *
 * Every selector is scoped to a class set on an Elementor element, so nothing
 * here can reach a page we have not redesigned yet. See docs/chapters.md.
 *
 * Specificity, because it shaped several selectors below: Elementor pads
 * columns with three classes, writes each column's width per element at
 * three, and gives every widget the full width of its column with
 * `.elementor-widget-wrap > .elementor-element` — two classes, which a rule
 * written on the widget's own class alone quietly loses to. A rule that must
 * beat them carries one more.
 */

/* --------------------------------------------------------------------------
 * Type roles used across the pages
 * -------------------------------------------------------------------------- */

/* text-xl font-bold: the titles of the blocks inside a section. */
.sba-ch-block-title .elementor-heading-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

/* pt-8 border-t, with the space-y-10 above it: the aside's later blocks. */
.sba-ch-block-divided {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--sba-border);
}

/* text-lg font-bold: card and list titles. */
.sba-ch-card-title .elementor-heading-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

/* text-sm font-bold: "Panelists", "More pitches". */
.sba-ch-small-title .elementor-heading-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: normal;
	line-height: 20px;
}

/* The dark red line under a block title. */
.sba-ch-subtitle {
	color: var(--sba-red-dark);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* Body copy: the mission paragraphs and the event teaser. */
.sba-ch-prose {
	color: var(--sba-slate);
	font-size: 16px;
	line-height: 26px;
}

/* text-sm leading-relaxed: the smaller paragraphs. */
.sba-ch-small-prose {
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 1.625;
}

.sba-ch-subtitle p,
.sba-ch-prose p,
.sba-ch-small-prose p {
	margin: 0;
}

.sba-ch-prose p + p,
.sba-ch-small-prose p + p {
	margin-top: 16px;
}

/* A small grey label above a line of names. */
.sba-ch-kicker {
	margin: 0 0 12px;
	color: var(--sba-slate);
	font-size: 12px;
	line-height: 16px;
}

.sba-ch-centered .elementor-heading-title {
	margin-right: auto;
	margin-left: auto;
}

/* --------------------------------------------------------------------------
 * Dot lists
 *
 * The prototype's bullet: a 6px red disc, 6px below the line's top, 12px
 * from the text. A text-editor widget holding a list, so an editor adds an
 * item like any other line.
 * -------------------------------------------------------------------------- */

.sba-ch-dot-list ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sba-ch-dot-list li {
	position: relative;
	margin: 0;
	padding-left: 18px;
	color: var(--sba-charcoal-light);
	font-size: 14px;
	line-height: 20px;
}

.sba-ch-dot-list li::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--sba-red);
}

.sba-ch-dot-list-light li {
	color: hsl(0 0% 100% / 0.85);
}

/* The core areas: two columns from 640px up, 12px by 24px apart. */
@media (min-width: 640px) {
	.sba-ch-dot-list-2col ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}
}

/* The panelists: name in charcoal at weight 500, role muted. */
.sba-ch-dot-list-rich li {
	color: var(--sba-slate);
}

.sba-ch-dot-list-rich strong {
	color: var(--sba-charcoal);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
 * Two-column sections
 *
 * grid lg:grid-cols-2 gap-10 lg:gap-16: two columns from 1025px, stacked
 * below with the same gap between them. Elementor's columns are flex items
 * that shrink, so the gap on the container does not wrap them.
 * -------------------------------------------------------------------------- */

.sba-ch-split > .elementor-container {
	gap: 40px;
}

@media (min-width: 1025px) {
	.sba-ch-split > .elementor-container {
		gap: 64px;
	}
}

@media (max-width: 1024px) {
	.sba-ch-split > .elementor-container > .elementor-column {
		width: 100%;
		flex: 0 0 100%;
	}
}

/* --------------------------------------------------------------------------
 * Overview hero
 *
 * A charcoal field with the greyscale helix screened over it and a blurred
 * red glow in the top right corner. The helix is the section's overlay in
 * Elementor at 40 % opacity; the blend mode and the glow are here.
 * -------------------------------------------------------------------------- */

.sba-ch-hero {
	position: relative;
	overflow: hidden;
}

.sba-ch-hero > .elementor-background-overlay {
	mix-blend-mode: screen;
}

.sba-ch-hero::before {
	content: "";
	position: absolute;
	top: -8rem;
	right: -8rem;
	z-index: 0;
	width: 36rem;
	height: 36rem;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sba-red) 0%, transparent 70%);
	opacity: 0.3;
	filter: blur(64px);
	pointer-events: none;
}

.sba-ch-hero > .elementor-container {
	max-width: var(--sba-container-max);
	padding-right: 16px;
	padding-left: 16px;
}

.sba-ch-hero-accent {
	color: var(--sba-red);
}

/* --------------------------------------------------------------------------
 * Chapter hero
 *
 * A photograph under a left-to-right gradient, the content sitting on the
 * bottom edge. Height and padding are the section's own settings in
 * Elementor. The "AI generated" pill needs the section as its reference, so
 * the three positioned boxes between them are made static and the overlay
 * drops below the content inside the section's own stacking context, as on
 * the Industry page.
 * -------------------------------------------------------------------------- */

.sba-ch-photo-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.sba-ch-photo-hero > .elementor-container,
.sba-ch-photo-hero > .elementor-container > .elementor-column,
.sba-ch-photo-hero > .elementor-container > .elementor-column > .elementor-widget-wrap {
	position: static;
}

.sba-ch-photo-hero > .elementor-background-overlay {
	z-index: -1;
	background-image: linear-gradient(
		90deg,
		hsl(220 20% 8% / 0.85) 0%,
		hsl(220 20% 8% / 0.55) 55%,
		hsl(220 20% 8% / 0.15) 100%
	);
}

.sba-ch-photo-hero > .elementor-container {
	max-width: var(--sba-container-max);
	padding-right: 16px;
	padding-left: 16px;
}

/* Shared by both heroes: text-4xl md:text-5xl lg:text-6xl in a max-w-3xl block. */
.sba-ch-hero-title .elementor-heading-title {
	max-width: 48rem;
	margin: 0;
	text-wrap: balance;
	color: #fff;
	font-size: 36px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.15;
}

.sba-ch-hero-lead {
	color: hsl(0 0% 100% / 0.85);
	font-size: 18px;
	line-height: 28px;
}

.sba-ch-hero-lead p {
	max-width: 42rem;
	margin: 0;
}

@media (min-width: 768px) {
	.sba-ch-hero-title .elementor-heading-title {
		font-size: 48px;
		line-height: 1;
	}

	.sba-ch-hero-lead {
		font-size: 20px;
	}
}

@media (min-width: 1025px) {
	.sba-ch-hero-title .elementor-heading-title {
		font-size: 60px;
	}
}

/* --------------------------------------------------------------------------
 * Focus tags
 *
 * Four icon-and-label pairs centred in a strip: 32px apart, 12px between
 * rows when they wrap.
 * -------------------------------------------------------------------------- */

.sba-ch-tags {
	border-bottom: 1px solid var(--sba-border);
}

.sba-ch-tag-list .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
}

.sba-ch-tag-list .elementor-icon-list-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.sba-ch-tag-list .elementor-icon-list-icon {
	display: flex;
	padding: 0;
	color: var(--sba-red);
}

.sba-ch-tag-list .elementor-icon-list-item .elementor-icon-list-icon i {
	font-size: 16px;
	line-height: 1;
}

.sba-ch-tag-list .elementor-icon-list-text {
	padding: 0;
	color: var(--sba-charcoal-light);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

/* --------------------------------------------------------------------------
 * Chapter tiles
 *
 * Three cards on the overview. In the prototype the whole card is one link
 * and a gradient washes over it on hover, turning the text white. Here the
 * card's own "Visit chapter" link is stretched over the card, so the target
 * is the whole card while the link stays a real anchor the keyboard reaches.
 * -------------------------------------------------------------------------- */

.sba-ch-tiles {
	border-bottom: 1px solid var(--sba-border);
}

.sba-ch-tiles-grid > .elementor-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

@media (min-width: 768px) {
	.sba-ch-tiles-grid > .elementor-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Seven tiles on the Platforms overview: two across from 640px, four from
 * 1025px, with the pillar grid's 20px gap, so that no row holds one tile
 * alone at a desktop width. */
.sba-ch-tiles-grid-4 > .elementor-container {
	gap: 20px;
}

@media (min-width: 640px) {
	.sba-ch-tiles-grid-4 > .elementor-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.sba-ch-tiles-grid-4 > .elementor-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sba-ch-tiles-grid > .elementor-container > .elementor-column.sba-ch-tile {
	width: auto;
}

.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 320px;
	padding: 32px;
	border: 1px solid var(--sba-border);
	border-radius: 16px;
	background-color: var(--sba-surface);
	overflow: hidden;
	transition:
		transform 0.5s ease,
		box-shadow 0.5s ease;
}

/* The wash: a gradient per tile, faded in over the card. */
.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.sba-ch-tiles .elementor-column.sba-ch-tile-red > .elementor-element-populated::before {
	background-image: linear-gradient(to bottom right, hsl(var(--sba-red-hsl) / 0.9), var(--sba-red-dark));
}

.sba-ch-tiles .elementor-column.sba-ch-tile-charcoal > .elementor-element-populated::before {
	background-image: linear-gradient(to bottom right, var(--sba-charcoal), var(--sba-charcoal-light));
}

.sba-ch-tiles .elementor-column.sba-ch-tile-mixed > .elementor-element-populated::before {
	background-image: linear-gradient(to bottom right, var(--sba-red-dark), var(--sba-charcoal));
}

.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated:hover {
	transform: translateY(-4px);
	box-shadow: 0 25px 50px -12px hsl(var(--sba-charcoal-hsl) / 0.25);
}

.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated:hover::before {
	opacity: 1;
}

@media (min-width: 1025px) {
	.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated {
		padding: 40px;
	}

	/* Four across leaves 310px per tile; the narrower padding of the tablet
	 * width keeps the titles on two lines. */
	.sba-ch-tiles-grid-4 .elementor-column.sba-ch-tile > .elementor-element-populated {
		padding: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated:hover {
		transform: none;
	}
}

/*
 * The content paints above the wash, and lets clicks through to the
 * stretched link below it — the whole card is the target, as in the
 * prototype, where the card is one anchor and its text is not selectable
 * either.
 */
.sba-ch-tile > .elementor-element-populated > .elementor-element:not(.sba-ch-tile-link) {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.sba-ch-tile-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background-color: var(--sba-icon-tile-bg);
	color: var(--sba-icon-tile-color);
	font-size: 28px;
	transition:
		background-color var(--sba-duration-hover) ease,
		color var(--sba-duration-hover) ease;
}

.sba-ch-tile-title .elementor-heading-title {
	margin: 0;
	text-wrap: balance;
	color: var(--sba-charcoal);
	font-size: 24px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 32px;
	transition: color var(--sba-duration-hover) ease;
}

/* The description takes the slack, so every card's link sits on one line. */
.sba-ch-tile-text {
	flex: 1 1 auto;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 1.625;
	transition: color var(--sba-duration-hover) ease;
}

.sba-ch-tile-text p {
	margin: 0;
}

.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated:hover .sba-ch-tile-icon .elementor-icon {
	background-color: hsl(0 0% 100% / 0.15);
	color: #fff;
}

.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated:hover .sba-ch-tile-title .elementor-heading-title,
.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated:hover .sba-ch-tile-link.elementor-widget-button .elementor-button {
	color: #fff;
}

.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated:hover .sba-ch-tile-text {
	color: hsl(0 0% 100% / 0.85);
}

/* The Platforms overview's tiles carry an eyebrow above the title, the old
 * page's heading for the platform; it goes white with the rest. */
.sba-ch-tile-kicker .elementor-heading-title {
	transition: color var(--sba-duration-hover) ease;
}

.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated:hover .sba-ch-tile-kicker .elementor-heading-title {
	color: hsl(0 0% 100% / 0.85);
}

.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated:hover .sba-ch-tile-link .elementor-button-icon {
	transform: translateX(4px);
}

/* The arrow the label draws for itself (sections.css) moves with `left`. */
.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated:hover .sba-ch-tile-link .elementor-button-text::after {
	left: 4px;
}

/*
 * Stretch the link over the card. The anchor keeps its semantics and its
 * focus ring is drawn on the card instead, so keyboard users see the same
 * target mouse users click. Elementor positions the widget, which would
 * confine the stretched box to the link's own line, so the widget and its
 * container are made static and the card is the reference.
 */
.sba-ch-tile-link.elementor-widget,
.sba-ch-tile-link .elementor-widget-container {
	position: static;
}

/* Static, the link's label is painted before the positioned wash and vanished
 * under it on hover, while the icon, transformed on hover, stayed on top.
 * The label's wrapper is lifted; the anchor stays static, so the stretched
 * box below still takes the card as its reference. */
.sba-ch-tile-link .elementor-button-content-wrapper {
	position: relative;
	z-index: 1;
}

.sba-ch-tile-link .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.sba-ch-tiles .elementor-column.sba-ch-tile > .elementor-element-populated:has(.sba-ch-tile-link .elementor-button:focus-visible) {
	outline: 2px solid var(--sba-red);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Pillar cards
 *
 * An icon on the first line, then a title and a line of text, in a
 * bordered card. Four across on the overview from 1025px (two from 640px);
 * two by two beside the mission text of the Industrial biotech chapter;
 * three across for the research platforms of the Platforms overview, whose
 * cards add the platform leaders under the title and a link after the body.
 * -------------------------------------------------------------------------- */

.sba-ch-pillar-grid > .elementor-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media (min-width: 640px) {
	.sba-ch-pillar-grid > .elementor-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.sba-ch-pillar-grid-4 > .elementor-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sba-ch-pillar-grid-3 > .elementor-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sba-ch-pillar-grid > .elementor-container > .elementor-column.sba-ch-pillar {
	width: auto;
}

.sba-ch-pillar-grid .elementor-column.sba-ch-pillar > .elementor-element-populated {
	height: 100%;
	padding: 28px;
	border: 1px solid hsl(220 13% 90% / 0.6);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	transition:
		border-color var(--sba-duration-hover) ease,
		box-shadow var(--sba-duration-hover) ease;
}

.sba-ch-pillar-grid .elementor-column.sba-ch-pillar > .elementor-element-populated:hover {
	border-color: hsl(var(--sba-red-hsl) / 0.4);
	box-shadow: 0 10px 15px -3px hsl(var(--sba-charcoal-hsl) / 0.1);
}

/* The index, "01 ——" before the icon, is not shown since October 26, 2026:
 * a set that is not a sequence gains nothing from numbers (Sabine Bamert).
 * Promotion still stores its heading widgets (01, 03, 01, 02); they go with
 * its next editorial round. */
.elementor-widget.sba-ch-pillar-index {
	display: none;
}

.sba-ch-pillar-icon .elementor-icon-wrapper {
	display: flex;
	line-height: 1;
}

.sba-ch-pillar-icon .elementor-icon {
	display: flex;
	align-items: center;
	height: 20px;
	color: var(--sba-red);
	font-size: 20px;
}

.sba-ch-pillar-title .elementor-heading-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

.sba-ch-pillar-text {
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 1.625;
}

.sba-ch-pillar-text p {
	margin: 0;
}

/* The platform leaders, between title and body, with the note's link style. */
.sba-ch-pillar-meta {
	color: var(--sba-slate);
	font-size: 13px;
	line-height: 20px;
}

.sba-ch-pillar-meta p {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Market stats (Industrial biotech)
 *
 * Three cells separated by hairlines: a 1px grid gap over the border colour,
 * inside a rounded, bordered frame.
 * -------------------------------------------------------------------------- */

.sba-ch-stats-grid > .elementor-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	border: 1px solid var(--sba-border);
	border-radius: 12px;
	background-color: var(--sba-border);
	overflow: hidden;
}

@media (min-width: 768px) {
	.sba-ch-stats-grid > .elementor-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sba-ch-stats-grid > .elementor-container > .elementor-column.sba-ch-stat {
	width: auto;
}

.sba-ch-stats-grid .elementor-column.sba-ch-stat > .elementor-element-populated {
	padding: 32px;
	background-color: var(--sba-surface);
}

@media (min-width: 1025px) {
	.sba-ch-stats-grid .elementor-column.sba-ch-stat > .elementor-element-populated {
		padding: 40px;
	}
}

.sba-ch-stat-value .elementor-heading-title {
	margin: 0;
	color: var(--sba-red);
	font-size: 48px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1;
}

@media (min-width: 1025px) {
	.sba-ch-stat-value .elementor-heading-title {
		font-size: 60px;
	}
}

.sba-ch-stat-label {
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.sba-ch-stat-source {
	color: var(--sba-slate);
	font-size: 12px;
	line-height: 16px;
}

.sba-ch-stat-label p,
.sba-ch-stat-source p {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Mission and goals (Industrial biotech)
 *
 * lg:grid-cols-12 with a 4/8 split; the column widths are Elementor's, the
 * gap is the split rule's above.
 * -------------------------------------------------------------------------- */

.sba-ch-goals {
	border-top: 1px solid var(--sba-border);
	border-bottom: 1px solid var(--sba-border);
}

/* "A joint activity of", under a rule. */
.sba-ch-joint {
	padding-top: 24px;
	border-top: 1px solid var(--sba-border);
}

.sba-ch-joint-names {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

/* --------------------------------------------------------------------------
 * Figures
 *
 * An image cropped to 4:3 in a 12px radius, with the AI label in its corner.
 * The label positions against the column that holds the two widgets; the
 * column carries no padding, so the corner is the image's.
 * -------------------------------------------------------------------------- */

.sba-ch-figure-col > .elementor-element-populated {
	position: relative;
	padding: 0;
}

.sba-ch-figure-img .elementor-widget-container {
	border-radius: 12px;
	overflow: hidden;
}

.sba-ch-figure-img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.sba-ch-figure-shadow .sba-ch-figure-img .elementor-widget-container {
	box-shadow: 0 10px 15px -3px hsl(var(--sba-charcoal-hsl) / 0.1), 0 4px 6px -4px hsl(var(--sba-charcoal-hsl) / 0.1);
}

/* The figure above the mission text: mb-8. */
.sba-ch-figure-lead {
	margin-bottom: 32px;
}

/* --------------------------------------------------------------------------
 * Enabling systems (Digital)
 *
 * Two cards: a 40px icon tile beside a title and a line.
 * -------------------------------------------------------------------------- */

.sba-ch-enabling > .elementor-container {
	gap: 16px;
	align-items: flex-start;
	padding: 20px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	transition:
		border-color var(--sba-duration-hover) ease,
		box-shadow var(--sba-duration-hover) ease;
}

.sba-ch-enabling > .elementor-container:hover {
	border-color: hsl(var(--sba-red-hsl) / 0.4);
	box-shadow: 0 4px 6px -1px hsl(var(--sba-charcoal-hsl) / 0.1), 0 2px 4px -2px hsl(var(--sba-charcoal-hsl) / 0.1);
}

.sba-ch-enabling + .sba-ch-enabling {
	margin-top: 16px;
}

/* Four classes: Elementor writes each column's width per element at three. */
.sba-ch-enabling > .elementor-container > .elementor-column.sba-ch-enabling-icon-col {
	width: auto;
	flex: 0 0 auto;
}

.sba-ch-enabling > .elementor-container > .elementor-column.sba-ch-enabling-text-col {
	width: auto;
	flex: 1 1 0%;
	min-width: 0;
}

.sba-ch-enabling .elementor-column > .elementor-element-populated {
	padding: 0;
}

.sba-ch-enabling-icon .elementor-icon-wrapper {
	display: flex;
	line-height: 1;
}

.sba-ch-enabling-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sba-radius);
	background-color: var(--sba-icon-tile-bg);
	color: var(--sba-icon-tile-color);
	font-size: 20px;
}

.sba-ch-enabling-title .elementor-heading-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: normal;
	line-height: 20px;
}

.sba-ch-enabling-body {
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-ch-enabling-body p {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Swiss Biotech Day teaser
 *
 * A centred heading, then text beside a photograph with a white badge in its
 * corner and a charcoal gradient rising from its bottom edge.
 * -------------------------------------------------------------------------- */

.sba-ch-sbd {
	border-top: 1px solid var(--sba-border);
	border-bottom: 1px solid var(--sba-border);
}

.sba-ch-sbd-figure > .elementor-element-populated {
	position: relative;
	padding: 0;
}

.sba-ch-sbd-img .elementor-widget-container {
	position: relative;
	border-radius: 12px;
	box-shadow: 0 20px 25px -5px hsl(var(--sba-charcoal-hsl) / 0.1), 0 8px 10px -6px hsl(var(--sba-charcoal-hsl) / 0.1);
	overflow: hidden;
}

.sba-ch-sbd-img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.sba-ch-sbd-img .elementor-widget-container::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top, hsl(var(--sba-charcoal-hsl) / 0.7), transparent 50%);
}

.elementor-widget-wrap > .elementor-element.sba-ch-sbd-badge {
	position: absolute;
	bottom: 24px;
	left: 24px;
	z-index: 2;
	width: auto;
	margin: 0;
}

/* Elementor zeroes the list's padding at `.elementor .elementor-element
 * ul.elementor-icon-list-items` — 0,2,1 — so this carries the element too. */
.elementor-widget.sba-ch-sbd-badge ul.elementor-icon-list-items {
	display: block;
	margin: 0;
	padding: 12px 20px;
	border-radius: var(--sba-radius-md);
	background-color: hsl(0 0% 100% / 0.95);
	backdrop-filter: blur(4px);
}

.sba-ch-sbd-badge .elementor-icon-list-item {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.sba-ch-sbd-badge .elementor-icon-list-item:first-child .elementor-icon-list-text {
	color: var(--sba-red-dark);
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: 0.025em;
	line-height: 28px;
}

.sba-ch-sbd-badge .elementor-icon-list-item + .elementor-icon-list-item {
	margin-top: 4px;
}

.sba-ch-sbd-badge .elementor-icon-list-icon {
	display: flex;
	padding: 0;
	color: var(--sba-charcoal-light);
}

.sba-ch-sbd-badge .elementor-icon-list-item .elementor-icon-list-icon i {
	font-size: 14px;
	line-height: 1;
}

.sba-ch-sbd-badge .elementor-icon-list-text {
	padding: 0;
	color: var(--sba-charcoal-light);
	font-size: 12px;
	line-height: 16px;
}

/* --------------------------------------------------------------------------
 * Review of Swiss Biotech Day 2025
 *
 * The panel half and the pitching half are two sections, so the winner cards
 * and the "more pitches" grid can be inner sections of their own; the second
 * carries the mt-20 as its top padding.
 * -------------------------------------------------------------------------- */

/* A winner: trophy and place on the left, company, pitch and presenter on
 * the right, in a bordered card. */
.sba-ch-winner > .elementor-container {
	gap: 16px;
	align-items: flex-start;
	padding: 20px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	transition:
		border-color var(--sba-duration-hover) ease,
		box-shadow var(--sba-duration-hover) ease;
}

.sba-ch-winner > .elementor-container:hover {
	border-color: hsl(var(--sba-red-hsl) / 0.4);
	box-shadow: 0 4px 6px -1px hsl(var(--sba-charcoal-hsl) / 0.1), 0 2px 4px -2px hsl(var(--sba-charcoal-hsl) / 0.1);
}

.sba-ch-winner + .sba-ch-winner {
	margin-top: 16px;
}

.sba-ch-winner > .elementor-container > .elementor-column.sba-ch-winner-place-col {
	width: auto;
	flex: 0 0 auto;
}

.sba-ch-winner > .elementor-container > .elementor-column.sba-ch-winner-text-col {
	width: auto;
	flex: 1 1 0%;
	min-width: 0;
}

.sba-ch-winner .elementor-column > .elementor-element-populated {
	padding: 0;
}

/* Same specificity trap as the badge above. */
.elementor-widget.sba-ch-winner-place ul.elementor-icon-list-items {
	margin: 0;
	padding: 2px 0 0;
}

.sba-ch-winner-place .elementor-icon-list-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.sba-ch-winner-place .elementor-icon-list-icon {
	display: flex;
	padding: 0;
	color: var(--sba-red-dark);
}

.sba-ch-winner-place .elementor-icon-list-item .elementor-icon-list-icon i {
	font-size: 16px;
	line-height: 1;
}

.sba-ch-winner-place .elementor-icon-list-text {
	padding: 0;
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: var(--sba-heading-weight);
	line-height: 20px;
}

.sba-ch-winner-company .elementor-heading-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: normal;
	line-height: 24px;
}

.sba-ch-winner-title {
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-ch-winner-by {
	color: var(--sba-slate);
	font-size: 12px;
	line-height: 16px;
}

.sba-ch-winner-title p,
.sba-ch-winner-by p {
	margin: 0;
}

/* The other pitches: two by two, on the cool surface. */
.sba-ch-more-grid > .elementor-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 640px) {
	.sba-ch-more-grid > .elementor-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sba-ch-more-grid > .elementor-container > .elementor-column.sba-ch-more {
	width: auto;
}

.sba-ch-more-grid .elementor-column.sba-ch-more > .elementor-element-populated {
	height: 100%;
	padding: 20px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface-cool);
}

.sba-ch-more-company .elementor-heading-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: normal;
	line-height: 20px;
}

.sba-ch-more-title {
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-ch-more-title p {
	margin: 0;
}

/* "Powered by" and the partners, in a card 40px below the grid. */
.sba-ch-powered {
	margin-top: 40px;
}

.sba-ch-powered > .elementor-container {
	padding: 24px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
}

.sba-ch-powered .elementor-column > .elementor-element-populated {
	padding: 0;
}

/* The logo and its line sit side by side; both widgets are `width: auto`. */
.sba-ch-powered .elementor-column > .elementor-element-populated > .elementor-widget-wrap {
	align-items: center;
}

.sba-ch-powered-logo img {
	display: block;
	width: auto;
	height: 32px;
}

.sba-ch-powered-text {
	color: var(--sba-slate);
	font-size: 12px;
	line-height: 16px;
}

.sba-ch-powered-text p {
	margin: 0;
}

.sba-ch-supported {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--sba-border);
}

.sba-ch-partners {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	color: var(--sba-charcoal-light);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

/* --------------------------------------------------------------------------
 * Join and contact
 *
 * The charcoal card with a red glow in its corner on the left; the chapter
 * head's card on the right. `#contact` is the right column, which the hero's
 * second button jumps to; it keeps 32px clear of the header.
 * -------------------------------------------------------------------------- */

.sba-ch-contact {
	scroll-margin-top: 32px;
}

.sba-ch-join-warm {
	border-top: 1px solid var(--sba-border);
}

.sba-ch-join > .elementor-container {
	gap: 40px;
	align-items: flex-start;
}

@media (min-width: 1025px) {
	.sba-ch-join > .elementor-container {
		gap: 64px;
	}
}

@media (max-width: 1024px) {
	.sba-ch-join > .elementor-container > .elementor-column {
		width: 100%;
		flex: 0 0 100%;
	}
}

.sba-ch-join .elementor-column.sba-ch-join-card > .elementor-element-populated {
	position: relative;
	padding: 40px;
	border-radius: 16px;
	background-color: var(--sba-charcoal);
	overflow: hidden;
}

@media (min-width: 1025px) {
	.sba-ch-join .elementor-column.sba-ch-join-card > .elementor-element-populated {
		padding: 48px;
	}
}

.sba-ch-join .elementor-column.sba-ch-join-card > .elementor-element-populated::before {
	content: "";
	position: absolute;
	top: -96px;
	right: -96px;
	width: 256px;
	height: 256px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sba-red) 0%, transparent 70%);
	opacity: 0.2;
	pointer-events: none;
}

.sba-ch-join-card > .elementor-element-populated > .elementor-widget-wrap {
	position: relative;
}

.sba-ch-join-lead {
	max-width: none;
}

/* The person card: a 56px round portrait beside name, role and two links. */
.sba-ch-person > .elementor-container {
	gap: 20px;
	align-items: flex-start;
	padding: 24px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	transition: box-shadow var(--sba-duration-hover) ease;
}

.sba-ch-person > .elementor-container:hover {
	box-shadow: 0 4px 6px -1px hsl(var(--sba-charcoal-hsl) / 0.1), 0 2px 4px -2px hsl(var(--sba-charcoal-hsl) / 0.1);
}

.sba-ch-person + .sba-ch-person {
	margin-top: 16px;
}

.sba-ch-person > .elementor-container > .elementor-column.sba-ch-person-avatar-col {
	width: auto;
	flex: 0 0 auto;
}

.sba-ch-person > .elementor-container > .elementor-column.sba-ch-person-text-col {
	width: auto;
	flex: 1 1 0%;
	min-width: 0;
}

.sba-ch-person .elementor-column > .elementor-element-populated {
	padding: 0;
}

.sba-ch-person-avatar img {
	display: block;
	width: 56px;
	height: 56px;
	border: 1px solid var(--sba-border);
	border-radius: 50%;
	object-fit: cover;
}

.sba-ch-person-name .elementor-heading-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: normal;
	line-height: 24px;
}

.sba-ch-person-role {
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-ch-person-role p {
	margin: 0;
}

.sba-ch-person-links .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.sba-ch-person-links .elementor-icon-list-item {
	margin: 0;
	padding: 0;
}

.sba-ch-person-links .elementor-icon-list-item a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sba-red-dark);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	transition: color var(--sba-duration-hover) ease;
}

.sba-ch-person-links .elementor-icon-list-item a:hover {
	color: var(--sba-red-darker);
}

.sba-ch-person-links .elementor-icon-list-icon {
	display: flex;
	padding: 0;
	color: inherit;
}

.sba-ch-person-links .elementor-icon-list-item .elementor-icon-list-icon i {
	font-size: 14px;
	line-height: 1;
}

.sba-ch-person-links .elementor-icon-list-text {
	padding: 0;
	color: inherit;
}

/* The enquiries note under the cards. */
.sba-ch-note {
	padding: 20px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface-cool);
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-ch-note p {
	margin: 0;
}