/**
 * The news front, /news-newsletter/.
 *
 * Structure lives in Elementor on the page itself, exported to
 * elementor/pages/news-newsletter.json; the sections' bodies are shortcodes
 * from includes/raskin/news.php. The section header, the compact list and
 * the publication card are the front page's, from feeds.css, so that the
 * two pages read as one design; this file adds what only this page has: its
 * header with the jump links, the featured stories, the two-column list and
 * the newsletter band. The archive is the explore page at /news/ and has no
 * rules here. See docs/news.md.
 *
 * Every selector is scoped to a class set on an Elementor element or printed
 * by news.php. Enqueued on this page only.
 */

/* --------------------------------------------------------------------------
 * Header: eyebrow, title, lead, jump links
 * -------------------------------------------------------------------------- */

.sba-news-title .elementor-heading-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 36px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 40px;
}

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

/* The jump links are the component (components/jump-links) since October
   12, 2026, in the widget that carries this class: the page's sections in
   their order, the archive, and "Add news" as the action pill. The row
   closed the header on a hairline until the navigation band followed it
   the same day; now it keeps its 24px and the band draws the line. */
.sba-news-jump-wrap .sba-c-jump-links ul {
	padding-bottom: 24px;
}

/* --------------------------------------------------------------------------
 * Featured news
 *
 * The lead story beside up to two more. A story is its picture, a title, the
 * lead text and a line with date and company; no card around it, the picture
 * carries the corners. The title's link covers the story.
 *
 * One story: picture and text side by side. Two: side by side as equals.
 * Three: the lead in seven columns, the other two stacked in five, each with
 * its picture at the left.
 * -------------------------------------------------------------------------- */

/* No featured news, no section: the heading does not stand alone. */
.sba-news-featured-section:not(:has(.sba-news-featured)) {
	display: none;
}

.sba-news-featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

.sba-news-story {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.sba-news-story-media {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--sba-radius);
	background-color: var(--sba-muted);
}

.sba-news-story-media > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.sba-news-story:hover .sba-news-story-media > img {
	transform: scale(1.03);
}

/* Without a picture the story is a panel on the cool surface that leads
   with the company's logo on a white tile (the company card's tile), or the
   news icon when the item has no company. */
.sba-news-story.no-image {
	justify-content: flex-start;
	padding: 24px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface-cool);
}

.sba-news-story-logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
}

.sba-news-story-logo > img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.sba-news-story-logo.is-empty::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: var(--sba-slate);
	-webkit-mask: url("../icons/lucide/newspaper.svg") center / contain no-repeat;
	mask: url("../icons/lucide/newspaper.svg") center / contain no-repeat;
}

.sba-news-story-body {
	min-width: 0;
}

.sba-news-story-title {
	margin: 0;
	text-wrap: balance;
	color: var(--sba-charcoal);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: normal;
	line-height: 1.3;
}

.sba-news-story.is-lead .sba-news-story-title {
	font-size: 24px;
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.25;
}

.sba-news-story-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--sba-duration-hover) ease;
}

.sba-news-story:hover .sba-news-story-title a {
	color: var(--sba-red-dark);
}

.sba-news-story-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sba-news-story-title a:focus-visible {
	outline: none;
}

.sba-news-story:has(.sba-news-story-title a:focus-visible) {
	outline: 2px solid var(--sba-ring);
	outline-offset: 4px;
	border-radius: var(--sba-radius);
}

.sba-news-story-text {
	display: -webkit-box;
	margin: 12px 0 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--sba-slate);
	font-size: 16px;
	line-height: 1.625;
}

.sba-news-story:not(.is-lead) .sba-news-story-text {
	-webkit-line-clamp: 2;
	font-size: 14px;
}

.sba-news-story-meta {
	margin: 12px 0 0;
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

@media (min-width: 768px) {
	.sba-news-featured.has-2,
	.sba-news-featured.has-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Three on a tablet: the lead across, the other two below it. */
	.sba-news-featured.has-3 .sba-news-story.is-lead {
		grid-column: 1 / -1;
	}

	.sba-news-featured.has-1 .sba-news-story:not(.no-image),
	.sba-news-featured.has-3 .sba-news-story.is-lead:not(.no-image) {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
		gap: 40px;
	}
}

@media (min-width: 1024px) {
	.sba-news-featured {
		column-gap: 48px;
	}

	.sba-news-featured.has-3 {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		/* The second row takes what the lead leaves, so the two stories at
		   the right stay together at the top. */
		grid-template-rows: auto 1fr;
		row-gap: 32px;
	}

	.sba-news-featured.has-3 .sba-news-story.is-lead,
	.sba-news-featured.has-3 .sba-news-story.is-lead:not(.no-image) {
		display: flex;
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.sba-news-featured.has-3 .sba-news-story:not(.is-lead, .no-image) {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: start;
		gap: 24px;
	}

	.sba-news-featured.has-3 .sba-news-story:not(.is-lead) .sba-news-story-media {
		aspect-ratio: 4 / 3;
	}

	/* A hairline between the two stacked stories, unless one is a panel. */
	.sba-news-featured.has-3 .sba-news-story:not(.is-lead, .no-image) + .sba-news-story:not(.no-image) {
		padding-top: 32px;
		border-top: 1px solid var(--sba-border);
	}

	.sba-news-story.no-image {
		padding: 32px;
	}

	.sba-news-story.is-lead .sba-news-story-title {
		font-size: 30px;
		line-height: 1.2;
	}

	.sba-news-featured.has-1 .sba-news-story-title {
		font-size: 36px;
		line-height: 1.15;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sba-news-story:hover .sba-news-story-media > img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
 * Latest news: the front page's compact list, two columns from 1024px up
 * -------------------------------------------------------------------------- */

.sba-news-latest {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* Stacked, the second column continues the first. */
.sba-news-latest > .sba-home-feed-list + .sba-home-feed-list {
	border-top: 1px solid var(--sba-border);
}

@media (min-width: 1024px) {
	.sba-news-latest {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 48px;
	}

	.sba-news-latest > .sba-home-feed-list + .sba-home-feed-list {
		border-top: 0;
	}
}

/* --------------------------------------------------------------------------
 * Swiss Biotech Report: numbered headlines beside the publication card
 *
 * The list item's date column holds the article's number in the report's
 * order; the meta line names the author.
 * -------------------------------------------------------------------------- */

.sba-list-item.is-numbered {
	grid-template-columns: 2.5rem minmax(0, 1fr);
}

.sba-list-item.is-numbered .sba-list-item-date {
	color: var(--sba-slate-light);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	line-height: 22px;
}

/* --------------------------------------------------------------------------
 * Newsletter band
 *
 * Charcoal, as the footer's band but inside the page: the text at the left,
 * the footer's entry form (header-footer.css paints field and button) and
 * two links at the right. Stacked below 1024px. The red glow is the overview
 * heroes', in the bottom left corner here.
 * -------------------------------------------------------------------------- */

.sba-news-newsletter-band {
	position: relative;
	overflow: hidden;
}

.sba-news-newsletter-band::before {
	content: "";
	position: absolute;
	bottom: -14rem;
	left: -10rem;
	width: 32rem;
	height: 32rem;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sba-red) 0%, transparent 70%);
	opacity: 0.25;
	filter: blur(64px);
	pointer-events: none;
}

.sba-news-newsletter-band > .elementor-container {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.sba-news-newsletter-band > .elementor-container > .elementor-column {
	width: 100%;
}

@media (min-width: 1024px) {
	.sba-news-newsletter-band > .elementor-container {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 64px;
	}

	.sba-news-newsletter-band > .elementor-container > .elementor-column:first-child {
		flex: 1 1 auto;
		width: auto;
	}

	.sba-news-newsletter-band > .elementor-container > .elementor-column:last-child {
		flex: 0 0 448px;
		width: 448px;
	}
}

/* Taller than in the footer: this is the page's own call to action. */
.sba-news-newsletter .sba-footer-newsletter-form .sba-footer-newsletter-input,
.sba-news-newsletter .sba-footer-newsletter-form .sba-footer-newsletter-submit {
	height: 44px;
}

/* On charcoal the footer surface is too close to the band; the field takes a
   translucent white instead. */
.sba-news-newsletter .sba-footer-newsletter-form .sba-footer-newsletter-input,
.sba-news-newsletter .sba-footer-newsletter-form .sba-footer-newsletter-input:focus {
	border-color: hsl(0 0% 100% / 0.2);
	background-color: hsl(0 0% 100% / 0.08);
}

.sba-news-newsletter-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 20px 0 0;
}

.sba-news-newsletter-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sba-footer-text-bright);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	transition: color var(--sba-duration-hover) ease;
}

.sba-news-newsletter-link:hover,
.sba-news-newsletter-link:focus {
	color: #fff;
}

.sba-news-newsletter-link:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-news-newsletter-edition {
	color: var(--sba-footer-text);
	font-weight: 400;
}

/* arrow-right within the site, arrow-up-right for HubSpot's hosted edition. */
.sba-news-newsletter-link::after {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--sba-duration-hover) ease;
}

.sba-news-newsletter-link.is-external::after {
	-webkit-mask-image: url("../icons/lucide/arrow-up-right.svg");
	mask-image: url("../icons/lucide/arrow-up-right.svg");
}

.sba-news-newsletter-link:hover::after {
	transform: translateX(4px);
}

.sba-news-newsletter-link.is-external:hover::after {
	transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
	.sba-news-newsletter-link:hover::after,
	.sba-news-newsletter-link.is-external:hover::after {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
 * The newsletter page, /newsletter/
 *
 * Where the news front's band and the footer's band lead: the band's
 * charcoal, grown into the page's hero, with the title at the left and
 * HubSpot's sign-up form at the right, on the same ground. Below it, on
 * white, the past editions, and on the cool surface the advertising offer.
 * The form is HubSpot's iframe; what is inside it is styled by
 * newsletter-form.css, loaded into the iframe by newsletter.js. See
 * docs/newsletter.md.
 * -------------------------------------------------------------------------- */

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

/* The band's glow, in the same corner. */
.sba-nl-hero::before {
	content: "";
	position: absolute;
	bottom: -14rem;
	left: -10rem;
	width: 32rem;
	height: 32rem;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sba-red) 0%, transparent 70%);
	opacity: 0.25;
	filter: blur(64px);
	pointer-events: none;
}

.sba-nl-hero > .elementor-container {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
}

.sba-nl-hero > .elementor-container > .elementor-column {
	width: auto;
}

@media (min-width: 1024px) {
	.sba-nl-hero > .elementor-container {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
		gap: 80px;
	}
}

.sba-nl-title .elementor-heading-title {
	margin: 0;
	text-wrap: balance;
	color: #fff;
	font-size: 36px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 40px;
}

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

.sba-nl-form-title .elementor-heading-title {
	margin: 0;
	color: #fff;
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: normal;
	line-height: 28px;
}

/* The consent note that stands in for the form until HubSpot is allowed. */
.sba-nl-hero #raskin-hs-newsletter-note,
.sba-nl-hero #raskin-hs-newsletter-note a {
	color: var(--sba-footer-text-bright);
}

/* The form keeps 4px around itself inside the iframe for the focus ring;
   the iframe's box gives them back, so the fields align with "Subscribe". */
.sba-nl-hero #raskin-hs-newsletter {
	margin-right: -4px;
	margin-left: -4px;
}

/* The page is where the footer's entry form leads: its band is left out
   here. */
body:has(.sba-nl-hero) .sba-footer-newsletter {
	display: none;
}

/* The form stays out of sight until newsletter.js has dressed it, so the
   undressed form, dark type on charcoal, does not flash. Shown after three
   seconds regardless, in case the script never runs. */
.sba-nl-hero #raskin-hs-newsletter > iframe {
	opacity: 0;
	animation: sba-nl-reveal 0.01s 3s forwards;
}

.sba-nl-hero #raskin-hs-newsletter.is-dressed > iframe {
	opacity: 1;
	animation: none;
	transition: opacity 0.2s ease;
}

@keyframes sba-nl-reveal {
	to {
		opacity: 1;
	}
}

/* Past editions: the list from the editor as a grid of quiet rows, each one
   link to HubSpot's hosted edition, with the off-site arrow. */
.sba-nl-editions ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.sba-nl-editions ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (min-width: 1024px) {
	.sba-nl-editions ul {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Rows of one height where a label wraps on a phone. */
.sba-nl-editions li {
	display: flex;
	margin: 0;
	padding: 0;
}

.elementor-widget-text-editor.sba-nl-editions li a {
	flex: 1 1 auto;
}

.elementor-widget-text-editor.sba-nl-editions li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid hsl(var(--sba-charcoal-hsl) / 0.12);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	transition:
		border-color var(--sba-duration-hover) ease,
		box-shadow var(--sba-duration-hover) ease,
		color var(--sba-duration-hover) ease;
}

.elementor-widget-text-editor.sba-nl-editions li a::after {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: var(--sba-slate);
	-webkit-mask: url("../icons/lucide/arrow-up-right.svg") center / contain no-repeat;
	mask: url("../icons/lucide/arrow-up-right.svg") center / contain no-repeat;
	transition: background-color var(--sba-duration-hover) ease;
}

.elementor-widget-text-editor.sba-nl-editions li a:hover,
.elementor-widget-text-editor.sba-nl-editions li a:focus {
	border-color: hsl(var(--sba-red-hsl) / 0.4);
	box-shadow: 0 1px 2px 0 hsl(var(--sba-charcoal-hsl) / 0.05);
	color: var(--sba-red-dark);
	text-decoration: none;
}

.elementor-widget-text-editor.sba-nl-editions li a:hover::after,
.elementor-widget-text-editor.sba-nl-editions li a:focus::after {
	background-color: var(--sba-red-dark);
}

.elementor-widget-text-editor.sba-nl-editions li a:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}