/**
 * The single listing page in the prototype's visual language: the hero, the
 * tabs and the content blocks.
 *
 * The prototype has no listing page, so this applies the style guide
 * (/style-guide/, docs/style-guide.md) to MyListing's markup, and borrows
 * two built pages: the hero is the Industry page's photo hero (the
 * photograph under the three-stop gradient, the content on the bottom edge)
 * and the logo tile, the member flag and the two figure tiles are the
 * front page's member spotlight. The quick actions are the guide's glass
 * pill, the one control the guide allows on photography beside the primary
 * button. The markup is the parent theme's (templates/listing.php in the
 * child is a copy with four deltas, see docs/listing.md), which is why the
 * selectors below name the parent's classes rather than our own.
 *
 * Structure of the hero, as the child template renders it: the cover
 * section holds the photograph (an image the parent positions inline, hence
 * the `!important`s), the parent's overlay (hidden; the gradient is the
 * section's ::after), then .main-info-desktop with the title block
 * (.listing-main-info: the logo and name in one column, the cover details
 * and the claim button in the other), our member flag and the quick actions.
 * There is no .main-info-mobile container, so the parent's script never
 * moves the title block out of the hero.
 *
 * Specificity: the parent's single-listing.css writes one or two classes per
 * rule, some rules with the #c27-single-listing id. Rules here carry
 * .single-listing (a body class) plus the element, and the id where the
 * parent used it. The file loads after style.css and the legacy Customizer
 * CSS, so equal specificity resolves in its favor.
 *
 * Enqueued on single listings only (is_singular('job_listing')), together
 * with icons-lucide.css: the quick actions and the member flag carry
 * `sba-i sba-i-NAME` classes, the former from the listing type
 * configuration (scripts/patch-listing-icons.php).
 */

/* --------------------------------------------------------------------------
 * The box
 *
 * MyListing's pages use bootstrap's .container, 1170px at most; the
 * redesign's box is 1400px with a 16px gutter. Every container on the page
 * takes it: the hero, the tab bar, the tab content, the similar listings.
 * -------------------------------------------------------------------------- */

.single-listing .container {
	width: 100%;
	max-width: var(--sba-container-max);
	padding-right: var(--sba-container-padding);
	padding-left: var(--sba-container-padding);
}

/* --------------------------------------------------------------------------
 * Hero: the section
 *
 * The guide's photo hero: 70vh and at least 520px, the content on the bottom
 * edge, the photograph under charcoal at half opacity and the three-stop
 * gradient (the Industry page's Elementor hero had the same two layers). Without a cover image the
 * section is the charcoal field.
 * -------------------------------------------------------------------------- */

.single-listing .profile-cover {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: auto;
	/* The guide's 70vh, at least 520px; capped, since a listing has less to
	 * say in its hero than a topic page and a 27-inch screen would give it
	 * a thousand pixels. */
	min-height: min(max(520px, 70vh), 720px);
	padding: 96px 0 40px;
	overflow: hidden;
	isolation: isolate;
	z-index: auto;
	background: var(--sba-charcoal);
	color: #fff;
}

@media (min-width: 1025px) {
	.single-listing .profile-cover {
		padding-bottom: 56px;
	}
}

.single-listing .profile-cover.profile-cover-image {
	padding-bottom: 40px !important;
}

@media (min-width: 1025px) {
	.single-listing .profile-cover.profile-cover-image {
		padding-bottom: 56px !important;
	}
}

/* The direct child only: the logo and the verified tick are images inside
 * this section as well. */
.single-listing .profile-cover.profile-cover-image > img {
	position: absolute !important;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
}

.single-listing .profile-cover .overlay {
	display: none;
}

/* The Industry hero's three-stop gradient alone, without the flat charcoal
 * wash at 50% that the Industry page's hero laid under it: that photograph has a
 * bright band of sky behind its lead, company covers are muted stock
 * photography, and with both layers the frame was too dark (client review,
 * September 25, 2026). */
.single-listing .profile-cover.profile-cover-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(
			to bottom,
			hsl(var(--sba-charcoal-hsl) / 0.65) 0%,
			hsl(var(--sba-charcoal-hsl) / 0.15) 50%,
			hsl(var(--sba-charcoal-hsl) / 0.75) 100%
		);
}

.single-listing .profile-cover.profile-cover-no-img {
	min-height: 0;
	background: var(--sba-charcoal);
}

/* --------------------------------------------------------------------------
 * Hero: the content
 *
 * One left-aligned stack, as on the Industry page: the head (the logo tile
 * with the flag, the name, the tagline and the call to action beside it),
 * then the bar with the figures on one line and the quick actions on the
 * next. The markup is the child's main-info.php; the parent's rules for
 * .listing-main-info and .profile-name are neutralized here.
 * -------------------------------------------------------------------------- */

.single-listing .main-info-desktop {
	position: static;
}

.single-listing .listing-main-info {
	position: static;
	display: block;
	transform: none;
	background: transparent;
}

.single-listing .sba-hero-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	text-align: left;
}

@media (min-width: 768px) {
	.single-listing .sba-hero-head {
		flex-direction: row;
		align-items: flex-end;
		gap: 24px;
	}
}

@media (min-width: 1025px) {
	.single-listing .sba-hero-head {
		gap: 32px;
	}
}

.single-listing .sba-hero-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

/* The spotlight's logo tile: white, 1rem corners, the logo bounded on both
 * axes and centered. */
.single-listing .sba-hero-head .profile-avatar {
	position: static;
	z-index: auto;
	display: block;
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	margin: 0;
	padding: 16px;
	border: 0;
	border-radius: 1rem;
	background-color: #fff;
	background-origin: content-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: 0 10px 15px -3px hsl(var(--sba-charcoal-hsl) / 0.1), 0 4px 6px -4px hsl(var(--sba-charcoal-hsl) / 0.1);
}

@media (min-width: 1025px) {
	.single-listing .sba-hero-head .profile-avatar {
		width: 128px;
		height: 128px;
		padding: 24px;
	}
}

/* A news item shows no logo, as style.css decided for the old design. */
.single-listing.type-news .sba-hero-head .profile-avatar {
	display: none;
}

/* The member flag: the preview cards' flag, above the name. White at 90%
 * with the blur, the award icon in brand red, 14px at weight 500. The long
 * label from 768px, "Member" below. */
.single-listing .sba-listing-flag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: var(--sba-radius-sm);
	background-color: hsl(0 0% 100% / 0.9);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.single-listing .sba-listing-flag i {
	color: var(--sba-red);
	font-size: 16px;
	line-height: 1;
}

.single-listing .sba-listing-flag-long {
	display: none;
}

@media (min-width: 768px) {
	.single-listing .sba-listing-flag-long {
		display: inline;
	}

	.single-listing .sba-listing-flag-short {
		display: none;
	}
}

/* The display heading of the guide, white on the photograph. A block, not a
 * flex row, so the verified tick and the edit link stay inline after the
 * last word when the name wraps. Capped at 1160px, not the lead's measure:
 * a listing's name is a label, and at 48rem one like "SWISS Pavilion @
 * CPhI Worldwide" broke into two lines (October 7, 2026). */
.single-listing .listing-main-info h1 {
	display: block;
	width: auto;
	max-width: 1160px;
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 36px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.15;
	text-wrap: balance;
	white-space: normal;
}

@media (min-width: 768px) {
	.single-listing .listing-main-info h1 {
		font-size: 48px;
		line-height: 1;
	}
}

@media (min-width: 1025px) {
	.single-listing .listing-main-info h1 {
		font-size: 60px;
	}
}

.single-listing .listing-main-info h1 .tooltip-element {
	display: inline-block;
	margin-left: 8px;
	vertical-align: middle;
	/* Not the heading's: at 60px and line height 1 the box was a 60px line
	 * and the edit icon sat on its baseline, below the name. */
	font-size: 16px;
	line-height: 1;
}

.single-listing .listing-main-info h1 .verified-badge img {
	display: block;
}

/* The tooltips inherit the heading's size and tracking otherwise. */
.single-listing .listing-main-info h1 .tooltip-container {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 16px;
}

.single-listing .profile-name .edit-listing i {
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-color: hsl(0 0% 100% / 0.5);
	color: #fff;
	font-size: 16px;
	line-height: 1;
}

.single-listing .profile-name .pa-below-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	margin: 0;
	overflow: visible;
	white-space: normal;
}

.single-listing .profile-name .pa-below-title:empty {
	display: none;
}

/* The tagline as the hero lead. */
.single-listing .listing-main-info h2 {
	position: static;
	width: auto;
	max-width: 42rem;
	margin: 0;
	overflow: visible;
	color: hsl(0 0% 100% / 0.8);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	white-space: normal;
}

@media (min-width: 768px) {
	.single-listing .listing-main-info h2 {
		font-size: 20px;
	}
}

/* The call to action: the listing type's cover action (Register on an
 * event, Claim / update listing on a company), under the tagline, the
 * guide's primary button in its large size (44px, 32px of side padding),
 * dark red on the photograph. Its own row, 24px under the tagline with the
 * stack's gap (October 6, 2026: it stood at the start of the quick actions'
 * row, one more pill-sized control among seven). The parent partial wraps
 * it as it wraps the figures; display: contents lifts the item out. */
.single-listing .sba-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.single-listing .sba-hero-cta > .col-md-6,
.single-listing .sba-hero-cta .listing-main-buttons,
.single-listing .sba-hero-cta .listing-main-buttons > ul {
	display: contents;
}

.single-listing .sba-hero-cta li {
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
 * Hero: the bar
 *
 * The parent's cover-details.php and quick-actions.php print their lists in
 * wrappers of their own (a column, .listing-main-buttons, .qla-container,
 * .quick-listing-actions, and a ul each). display: contents lifts every
 * list item into one flex row, which order then sorts: the figures first,
 * a line break, the quick actions. The cover action is in the head on a
 * profile; a news item still prints its three here.
 * -------------------------------------------------------------------------- */

.single-listing .sba-hero-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	margin-top: 32px;
}

/* The figures stretch to one height per row; the pills and, on a news
 * item, the buttons center on theirs. */
.single-listing .sba-hero-bar .lmb-calltoaction,
.single-listing .sba-hero-bar .quick-listing-actions > ul > li {
	align-self: center;
}

/* A news item has no quick actions, as style.css decided for the old
 * design; its cover actions stand in. */
.single-listing.type-news .sba-hero-bar .quick-listing-actions {
	display: none;
}

.single-listing .sba-hero-bar > .col-md-6,
.single-listing .sba-hero-bar .listing-main-buttons,
.single-listing .sba-hero-bar .listing-main-buttons > ul,
.single-listing .sba-hero-bar .container.qla-container,
.single-listing .sba-hero-bar .quick-listing-actions,
.single-listing .sba-hero-bar .quick-listing-actions > ul {
	display: contents;
}

/* Bootstrap's clearfix on the quick actions' container would put two empty
 * flex items, and two gaps, before the first figure or button. */
.single-listing .sba-hero-bar .container.qla-container::before,
.single-listing .sba-hero-bar .container.qla-container::after {
	display: none;
}

.single-listing .sba-hero-bar::before {
	content: "";
	order: 1;
	flex-basis: 100%;
	height: 0;
	margin: 8px 0;
}

/* A type without figures (an event) has nothing to break after. */
.single-listing .sba-hero-bar:not(:has(.price-or-date))::before {
	display: none;
}

.single-listing .sba-hero-bar li {
	margin: 0;
	padding: 0;
}

.single-listing .sba-hero-bar li.cts-prev,
.single-listing .sba-hero-bar li.cts-next {
	display: none;
}

/* The figures: the Industry hero's transparent facts. White at 5% under a
 * blur with a white hairline at 10%, 12px corners, the value at 30px (36px
 * from 1025px) and the caption at 14px, both left aligned. */
.single-listing .sba-hero-bar .price-or-date {
	order: 0;
	display: flex;
	flex: 1 1 calc(50% - 4px);
	flex-direction: column;
	padding: 16px 20px;
	border: 1px solid hsl(0 0% 100% / 0.1);
	border-radius: 12px;
	background-color: hsl(0 0% 100% / 0.05);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	text-align: left;
}

@media (min-width: 768px) {
	.single-listing .sba-hero-bar .price-or-date {
		flex: 0 1 auto;
		min-width: 200px;
		padding: 20px 24px;
	}
}

.single-listing .sba-hero-bar .price-or-date .value {
	order: 0;
	color: #fff;
	font-size: 30px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.1;
}

.single-listing .sba-hero-bar .price-or-date .lmb-label {
	order: 1;
	margin-top: 8px;
	color: hsl(0 0% 100% / 0.75);
	font-size: 14px;
	line-height: 1.375;
	white-space: normal;
	opacity: 1;
}

@media (min-width: 1025px) {
	.single-listing .sba-hero-bar .price-or-date .value {
		font-size: 36px;
	}
}

/* The cover action: the guide's primary button, which keeps its dark red on
 * photography. In the head on a profile (the large size, above); in the bar
 * on a news item, where the rules of its own section restyle it. */
.single-listing .sba-hero-bar .lmb-calltoaction {
	order: 2;
}

.single-listing .sba-hero-cta .lmb-calltoaction > a,
.single-listing .sba-hero-bar .lmb-calltoaction > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border-radius: var(--sba-radius-md);
	background: var(--sba-red-dark);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	transition: background-color var(--sba-duration-hover) ease;
}

.single-listing .sba-hero-cta .lmb-calltoaction > a:hover,
.single-listing .sba-hero-cta .lmb-calltoaction > a:focus,
.single-listing .sba-hero-bar .lmb-calltoaction > a:hover,
.single-listing .sba-hero-bar .lmb-calltoaction > a:focus {
	background: var(--sba-red-darker);
	color: #fff;
}

.single-listing .sba-hero-cta .lmb-calltoaction > a::after,
.single-listing .sba-hero-bar .lmb-calltoaction > a::after {
	display: none;
}

.single-listing .sba-hero-cta .lmb-calltoaction > a > i,
.single-listing .sba-hero-bar .lmb-calltoaction > a > i {
	margin: 0;
	font-size: 16px;
	line-height: 1;
}

/* In the head, the large size: 44px with 32px of side padding. After the
 * shared rule above, which it outranks only by order. */
.single-listing .sba-hero-cta .lmb-calltoaction > a {
	height: 44px;
	padding: 0 32px;
}

/* The quick actions, and a second or third cover action (a news item has
 * Feedback, Bookmark and Share): the guide's glass pill, white at 10% with
 * a white border at 40% and the blur, solid white on hover. One primary per
 * section. */
.single-listing .sba-hero-bar .quick-listing-actions > ul > li {
	order: 3;
}

.single-listing .sba-hero-bar .quick-listing-actions > ul > li > a,
.single-listing .sba-hero-bar .lmb-calltoaction ~ .lmb-calltoaction > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: auto;
	padding: 6px 16px;
	border: 1px solid hsl(0 0% 100% / 0.4);
	border-radius: 9999px;
	background-color: hsl(0 0% 100% / 0.1);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	transition:
		background-color var(--sba-duration-hover) ease,
		border-color var(--sba-duration-hover) ease,
		color var(--sba-duration-hover) ease;
}

.single-listing .sba-hero-bar .quick-listing-actions > ul > li > a:hover,
.single-listing .sba-hero-bar .quick-listing-actions > ul > li > a:focus,
.single-listing .sba-hero-bar .lmb-calltoaction ~ .lmb-calltoaction > a:hover,
.single-listing .sba-hero-bar .lmb-calltoaction ~ .lmb-calltoaction > a:focus {
	border-color: #fff;
	background-color: #fff;
	color: var(--sba-charcoal);
}

.single-listing .sba-hero-bar .quick-listing-actions > ul > li > a > i {
	padding: 0;
	color: inherit;
	font-size: 16px;
	line-height: 1;
	transition: none;
}

.single-listing .sba-hero-bar .quick-listing-actions > ul > li > a span {
	color: inherit;
}

.single-listing .sba-hero-bar .quick-listing-actions li a.bookmarked {
	border-color: #fff;
	background-color: #fff;
	color: var(--sba-red-dark);
}

.single-listing .sba-hero-bar .quick-listing-actions li a.bookmarked i::before {
	color: inherit;
}

/* --------------------------------------------------------------------------
 * Tabs: a hairline under the band, the active tab in dark red with a 2px
 * brand-red underline, left aligned.
 * -------------------------------------------------------------------------- */

.single-listing .profile-header {
	height: auto;
	margin-top: 0;
	border-bottom: 1px solid var(--sba-border);
	background: #fff;
	box-shadow: none;
	text-align: left;
}

.single-listing .profile-header .profile-menu {
	top: 0 !important;
}

.single-listing .profile-header .row {
	margin: 0;
}

.single-listing .profile-header .col-md-12 {
	padding: 0;
}

.single-listing .profile-header .profile-menu ul {
	justify-content: flex-start;
	gap: 32px;
	padding: 0;
}

.single-listing .profile-header .profile-menu ul::before,
.single-listing .profile-header .profile-menu ul::after {
	display: none;
}

/* The parent's carousel controls: invisible (opacity 0) but 25px wide over
 * each end of the list, where they swallowed clicks on the first tab once
 * the list was left aligned. The list scrolls natively instead. */
.single-listing .profile-header .profile-menu ul li.cts-prev,
.single-listing .profile-header .profile-menu ul li.cts-next {
	display: none;
}

.single-listing .profile-header .profile-menu ul li a {
	height: 48px;
	padding: 0;
	color: var(--sba-charcoal-light);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	transition: color var(--sba-duration-hover) ease;
}

.single-listing .profile-header .profile-menu ul li a:hover,
.single-listing .profile-header .profile-menu ul li.active a {
	color: var(--sba-red-dark);
}

.single-listing .profile-header .profile-menu ul li a::after {
	height: 2px;
	background: var(--sba-red);
}

/* The count of a tab: a 20px pill with the figure centered in it. The
 * parent fixes the pill at 18px, and with a 20px line the figure sat 2px
 * low inside it. */
.single-listing .profile-header .profile-menu ul li a .items-counter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--sba-muted);
	color: var(--sba-slate);
	font-size: 12px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
 * Content: the tabs' body on the cool surface, each block a quiet card.
 * -------------------------------------------------------------------------- */

.single-listing .tab-content.listing-tabs {
	background: var(--sba-surface-cool);
}

.single-listing .profile-body {
	padding: 32px 0 40px;
}

@media (min-width: 1025px) {
	.single-listing .profile-body {
		padding: 48px 0 64px;
	}
}

.single-listing .single-job-listing .element {
	margin-bottom: 24px !important;
	padding: 0;
	border: 1px solid hsl(220 13% 90% / 0.6);
	border-radius: var(--sba-radius);
	background: #fff;
	box-shadow: none;
}

/* Block heading: the card heading of the guide. The block icons stay hidden,
 * as style.css decided for the old design and the client confirmed on
 * September 25, 2026: with a tile on every card the page had too many. */

.single-listing .element .pf-head {
	padding: 24px 24px 0;
}

.single-listing .no-title .element .pf-head {
	display: none;
}

.single-listing .element .title-style-1 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
}

.single-listing .element .title-style-1 .title-style-1__heading,
.single-listing .element .title-style-1 h5 {
	margin: 0;
	padding: 0;
	color: var(--sba-charcoal);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

.single-listing .element .pf-body {
	padding: 16px 24px 24px;
	color: var(--sba-charcoal-light);
	font-size: 16px;
	line-height: 1.625;
}

.single-listing .no-title .element .pf-body,
.single-listing .description .element .pf-body {
	padding-top: 24px;
}

.single-listing .element .pf-body p {
	margin: 0 0 16px;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.single-listing .element .pf-body p:last-child {
	margin-bottom: 0;
}

/* Links that are rows and controls of a block. A link inside the copy of a
   text block is an inline link, see links.css. */
.single-listing .element:not(.wp-editor-content) .pf-body a:not(.buttons) {
	color: var(--sba-red-dark);
	font-weight: 500;
}

.single-listing .element:not(.wp-editor-content) .pf-body a:not(.buttons):hover {
	color: var(--sba-red-darker);
}

/* Details lists (website, email, contact person, address) */

/* The icon is centered on the first line of its row. The parent sized it as
 * a 40px disc and pushed the text 10px down to meet it, which left a 16px
 * glyph 5px above the text; the icon's box is one line of the text instead
 * (16px at 1.625), so a value that wraps keeps its icon on the first line. */
.single-listing .element .details-block-content > li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 6px 0;
}

.single-listing .element .details-block-content > li > i {
	display: flex;
	flex: 0 0 16px;
	align-items: center;
	justify-content: center;
	width: 16px;
	min-width: 16px;
	height: 26px;
	margin: 0;
	color: var(--sba-slate);
	font-size: 16px;
	line-height: 1;
}

.single-listing .element .details-block-content .wp-editor-content {
	margin-top: 0;
}

/* The event date block ("Event date"). The parent drew each date as a
 * timeline entry: a 2px red rule with a dot, a 28px calendar glyph in red
 * beside it and the calendar links as grey slabs. It is a details row here:
 * the guide's calendar-days in slate on the date's first line, the date in
 * medium weight, and the calendar links under it as small outline buttons.
 * Font Awesome glyphs, which the Lucide mapping does not reach, are redrawn
 * as the guide's icons: arrow-up-right for Google Calendar, which leaves the
 * site, download for the calendar file. The status of a recurring date
 * ("Upcoming", "Ongoing") is a chip, not a link. */

.single-listing .element .event-dates-timeline {
	margin: 0;
	padding: 0;
	border: 0;
}

/* The icon hangs in the row's 28px indent, so the date and the buttons
 * that wrap under it share one left edge. */
.single-listing .element .event-dates-timeline > li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 12px 0 12px 28px;
	border: 0;
	border-top: 1px solid var(--sba-border);
}

.single-listing .element .event-dates-timeline > li:first-child {
	padding-top: 0;
	border-top: 0;
}

.single-listing .element .event-dates-timeline > li:first-child > i {
	top: 0;
}

.single-listing .element .event-dates-timeline > li:last-child {
	padding-bottom: 0;
}

.single-listing .element .event-dates-timeline > li::before,
.single-listing .element .event-dates-timeline > li::after {
	content: none;
	display: none;
}

.single-listing .element .event-dates-timeline > li > i {
	position: absolute;
	top: 12px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 26px;
	margin: 0;
	transform: none;
	color: var(--sba-slate);
	font-size: 16px;
	line-height: 1;
}

.single-listing .element .event-dates-timeline i::before {
	content: "";
	display: block;
	flex: 0 0 1em;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("../icons/lucide/calendar-days.svg") center / contain no-repeat;
	mask: url("../icons/lucide/calendar-days.svg") center / contain no-repeat;
}

.single-listing .element .event-dates-timeline > li > span {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
}

.single-listing .element .event-dates-timeline > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius-sm);
	background: #fff;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}

.single-listing .element .event-dates-timeline > li > a:hover {
	border-color: var(--sba-charcoal);
	color: var(--sba-charcoal);
}

.single-listing .element .event-dates-timeline > li > a > i {
	position: static;
	display: inline-flex;
	width: 14px;
	height: 14px;
	margin: 0;
	color: inherit;
	font-size: 14px;
}

.single-listing .element .event-dates-timeline > li > a > i.fa-google::before {
	-webkit-mask-image: url("../icons/lucide/arrow-up-right.svg");
	mask-image: url("../icons/lucide/arrow-up-right.svg");
}

.single-listing .element .event-dates-timeline > li > a.add-to-i-cal > i::before {
	-webkit-mask-image: url("../icons/lucide/download.svg");
	mask-image: url("../icons/lucide/download.svg");
}

.single-listing .element .event-dates-timeline > li > a:has(> .fa-check) {
	border-color: transparent;
	background: var(--sba-muted);
	color: var(--sba-slate);
	pointer-events: none;
}

.single-listing .element .event-dates-timeline > li > a > i.fa-check {
	display: none;
}

.single-listing .element .event-dates-timeline > li.event-ended > span {
	color: var(--sba-slate);
	font-weight: 400;
}

/* Terms (Key business, Core competencies, Canton): chips without the
 * per-term icon. MyListing gives a term without an icon of its own a
 * bookmark, which the Lucide mapping paints as a heart; the block's own icon
 * in the heading says what the list is. The chip itself is drawn in
 * listing-cards.css, one rule for this page and the preview cards; what
 * follows is the list around it. */

#c27-single-listing .element .pf-body .details-list,
#c27-single-listing .element .pf-body .listing-details > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

#c27-single-listing .element .pf-body .details-list li,
#c27-single-listing .element .pf-body .listing-details li {
	display: block;
	width: auto;
	/* The parent gives a list of one to three items a third or half of the
	 * block as minimum width, so two chips stood half a card apart. */
	min-width: 0;
	margin: 0;
	padding: 0;
	white-space: normal;
}

#c27-single-listing .element .pf-body .details-list li a,
#c27-single-listing .element .pf-body .details-list li .terms-no-link,
#c27-single-listing .element .pf-body .listing-details li a,
#c27-single-listing .element .pf-body .listing-details li .terms-no-link {
	margin: 0;
}

#c27-single-listing .element .pf-body .details-list li i,
#c27-single-listing .element .pf-body .details-list li .term-icon,
#c27-single-listing .element .pf-body .listing-details li .cat-icon {
	display: none;
}

#c27-single-listing .element .pf-body .details-list li a span,
#c27-single-listing .element .pf-body .listing-details li .category-name {
	position: static;
	top: auto;
	width: auto;
	/* The parent keeps 44px free for the term icon, which is hidden here;
	 * "Preclinical Development" wrapped onto two lines in a chip. */
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	text-align: left;
	white-space: normal;
}

/* The host of an event and the company of a job or news item (related
 * listing blocks): the listing's logo as a tile beside the name. The parent
 * cropped the logo to a 28px circle inside a 40px one, which cut a wide logo
 * down to its middle letters; the tile shows it whole, as the hero's logo
 * tile does. A listing without a logo shows the name alone. */

.single-listing .element .event-host > a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.single-listing .element .event-host .avatar {
	position: relative;
	flex: 0 0 48px;
	float: none;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 4px;
	overflow: hidden;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius-sm);
	background: #fff;
}

.single-listing .element .event-host .avatar img {
	position: static;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: contain;
	transform: none;
}

.single-listing .element .event-host .host-name {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* An event's free-text host under its company, usually a co-host ("in
 * collaboration with ..."): the block's body type, 12px under the logo. */

.single-listing .element .pf-body p.sba-event-cohost {
	margin: 12px 0 0;
}

/* Facts & figures */

.single-listing .element .pf-body table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 20px;
}

.single-listing .element .pf-body table td,
.single-listing .element .pf-body table th {
	padding: 10px 0;
	border-top: 1px solid var(--sba-border);
	vertical-align: top;
}

.single-listing .element .pf-body table tr:first-child td,
.single-listing .element .pf-body table tr:first-child th {
	border-top: 0;
}

.single-listing .element .pf-body table th,
.single-listing .element .pf-body table td:first-child {
	padding-right: 16px;
	color: var(--sba-slate);
	font-weight: 400;
}

/* The insights accordion */

.single-listing .element .block-accordion .panel {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--sba-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.single-listing .element .block-accordion .panel:first-child {
	border-top: 0;
}

.single-listing .element .block-accordion .panel-heading {
	padding: 0;
	background: transparent;
}

/* A question is a control, not a link: charcoal, dark red on hover. The
 * selector has to outrank the block links' rule above. */
.single-listing .element .pf-body .block-accordion .panel-title a:not(.buttons) {
	color: var(--sba-charcoal);
}

.single-listing .element .pf-body .block-accordion .panel-title a:not(.buttons):hover {
	color: var(--sba-red-dark);
}

.single-listing .element .block-accordion .panel-title a {
	position: relative;
	display: block;
	margin-left: 0;
	padding: 12px 0 12px 28px;
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* The open/closed marker of the legacy Customizer CSS, which hung 7px above
 * the question's first line; it takes that line's box instead. */
.single-listing .element .block-accordion .panel-title a::before {
	top: 12px;
	left: 0;
	width: 16px;
	margin: 0;
	color: var(--sba-slate);
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
}

/* The answer: under its question, in the block's body type. The parent's
 * accordions.css, which loads after this file, set it at 13px and moved it
 * 15px to the left. */
.single-listing .element .block-accordion .panel-heading + .panel-collapse > .panel-body {
	position: static;
	padding: 0 0 16px 28px;
	border: 0;
	font-size: inherit;
	line-height: inherit;
}

/* The countdown of an event ("Event starts in"): a quiet card like the other
 * blocks, with days, hours and minutes as three figure tiles, the hero's
 * figures on a light ground. The parent painted the whole block in the
 * accent color with white type, of which the white captions were left on a
 * white card. */

.single-listing .element.countdown-box {
	background: #fff;
}

.single-listing .countdown-box .title-style-1 .title-style-1__heading,
.single-listing .countdown-box .title-style-1 h5 {
	color: var(--sba-charcoal);
	text-align: left;
}

.single-listing .countdown-box .countdown-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
}

.single-listing .countdown-box .countdown-list li {
	float: none;
	width: auto;
	margin: 0;
	padding: 16px 12px;
	border-radius: var(--sba-radius);
	background: var(--sba-surface-cool);
	text-align: center;
}

.single-listing .countdown-box .countdown-list li p {
	display: block;
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--sba-charcoal);
	font-size: 30px;
	font-weight: var(--sba-heading-weight) !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--sba-heading-tracking);
	line-height: 36px;
}

.single-listing .countdown-box .countdown-list li span {
	position: static;
	display: block;
	float: none;
	margin: 4px 0 0;
	color: var(--sba-slate);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-transform: none;
}

@media (min-width: 1025px) {
	.single-listing .countdown-box .countdown-list li p {
		font-size: 36px;
		line-height: 40px;
	}
}

/* Video block, one video. The parent draws a 16:9 box from padding-bottom
 * and lays the iframe over it, edge to edge of the card. Until a visitor
 * consents to marketing cookies, PrivacyBee hides the iframe and puts its
 * placeholder in the flow instead, with an inline width (the body's, its
 * padding included) and a fixed height: it ran past the card's right edge
 * and left the empty box under it. The video and the placeholder are now
 * one 16:9 box inside the card's padding; the placeholder grows past 16:9
 * where its text needs it, on phones. The parent's video-block.css prints
 * after this file, hence the block's class in each selector. */

.single-listing .element.video-block .pf-head {
	padding-bottom: 0;
}

.single-listing .element.video-block .pf-body:not(.has-carousel) {
	height: auto;
	padding: 16px 24px 24px;
}

.single-listing .element.video-block .pf-body:not(.has-carousel) iframe,
.single-listing .element.video-block .pf-body:not(.has-carousel) > .privacybee-iframe-placeholder {
	position: static;
	width: 100% !important;
	height: auto !important;
	min-height: auto !important;
	aspect-ratio: 16 / 9;
	border-radius: var(--sba-radius-md);
	vertical-align: top;
}

/* --------------------------------------------------------------------------
 * Similar listings ("You may also be interested in")
 *
 * A section of its own under the tabs: white with the hairline where it meets
 * the cool content band, the guide's 80px rhythm (112px from 1025px), and the
 * section head of the guide: the eyebrow "Keep browsing" (a delta in the
 * child's similar-listings.php), 16px below it the heading, left aligned at
 * 30px (36px from 768px), and 40px (48px) to the cards. The parent centered a 26px heading on the
 * page's grey and left 25px above it. The cards are a grid with the standard
 * cards' 24px gap; the parent places them with isotope, whose inline
 * positions the !important rules undo. The parent's single-listing.css sets
 * the top padding to 25px with !important, hence the one here.
 * -------------------------------------------------------------------------- */

.single-listing .similar-listings.i-section {
	margin: 0;
	padding: 80px 0 !important;
	border-top: 1px solid var(--sba-border);
	background: #fff;
}

.single-listing .similar-listings .section-title {
	margin: 0 0 40px;
	padding: 0;
	text-align: left;
}

.single-listing .similar-listings .sba-listing-eyebrow {
	margin: 0 0 16px;
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 20px;
}

.single-listing .similar-listings .section-title h2 {
	max-width: 48rem;
	margin: 0;
	text-wrap: balance;
	color: var(--sba-charcoal);
	font-size: 30px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 36px;
	text-align: left;
}

.single-listing .similar-listings .section-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	height: auto !important;
	margin: 0;
}

.single-listing .similar-listings .section-body::before,
.single-listing .similar-listings .section-body::after {
	content: none;
}

.single-listing .similar-listings .section-body > .grid-item {
	position: static !important;
	width: auto;
	min-width: 0;
	padding: 0;
	float: none;
	transform: none !important;
}

.single-listing .similar-listings .lf-item-container {
	margin-bottom: 0;
}

@media (min-width: 640px) {
	.single-listing .similar-listings .section-body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.single-listing .similar-listings .section-title h2 {
		font-size: 36px;
		line-height: 40px;
	}
}

@media (min-width: 1025px) {
	.single-listing .similar-listings.i-section {
		padding: 112px 0 !important;
	}

	.single-listing .similar-listings .section-title {
		margin-bottom: 48px;
	}

	.single-listing .similar-listings .section-body {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
 * Small screens
 * -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.single-listing .element .pf-head {
		padding: 20px 20px 0;
	}

	.single-listing .element .pf-body {
		padding: 12px 20px 20px;
	}

	.single-listing .no-title .element .pf-body,
	.single-listing .description .element .pf-body {
		padding-top: 20px;
	}
}

/* --------------------------------------------------------------------------
 * A news item
 *
 * An article, not a profile, and laid out as production has it since 2021
 * (style.css, "single listing news"): the title on a light field with the
 * cover actions beside it, then the date, the lead, the text in two columns
 * from 1201px and the company, flat on white rather than in cards, in the
 * page's 1400px box. What
 * changes is the type and the buttons, which are the guide's: the title is
 * the section heading (30px from 768px, 36px from 1025px, and 24px on
 * phones) rather than the display heading, since most news titles run to
 * three or four lines; the actions
 * are outline buttons with Share as the one primary, as production's red
 * Share button was. The hero is white too, a hairline under it.
 *
 * The selectors carry .type-news on the body class, which puts them above
 * style.css's ".single.type-news" grey background and the legacy Customizer CSS that
 * collapses the hero to height 0 below 1200px.
 * -------------------------------------------------------------------------- */

.single-listing.type-news .profile-cover.profile-cover-no-img {
	height: auto;
	min-height: 0;
	padding: 32px 0;
	border-bottom: 1px solid var(--sba-border);
	background: #fff;
	color: var(--sba-charcoal);
}

@media (min-width: 768px) {
	.single-listing.type-news .profile-cover.profile-cover-no-img {
		padding: 48px 0 40px;
	}
}

@media (min-width: 1025px) {
	.single-listing.type-news .profile-cover.profile-cover-no-img {
		padding: 64px 0 56px;
	}

	.single-listing.type-news .sba-hero {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 48px;
	}

	/* Bootstrap's clearfix pseudo-elements would be flex items. */
	.single-listing.type-news .sba-hero::before,
	.single-listing.type-news .sba-hero::after {
		display: none;
	}

	.single-listing.type-news .sba-hero-head {
		flex: 1 1 auto;
		min-width: 0;
	}
}

.single-listing.type-news .listing-main-info h1 {
	max-width: 56rem;
	color: var(--sba-charcoal);
	font-size: 24px;
	line-height: 1.25;
}

@media (min-width: 768px) {
	.single-listing.type-news .listing-main-info h1 {
		font-size: 30px;
		line-height: 1.2;
	}
}

@media (min-width: 1025px) {
	.single-listing.type-news .listing-main-info h1 {
		font-size: 36px;
	}
}

.single-listing.type-news .listing-main-info h2 {
	color: var(--sba-charcoal-light);
}

.single-listing.type-news .profile-name .edit-listing i {
	border-color: var(--sba-border);
	color: var(--sba-charcoal);
}

/* The actions: no figures and no quick actions, so no line break before
 * them; beside the title from 1025px, below it on smaller screens. */
.single-listing.type-news .sba-hero-bar {
	flex: 0 0 auto;
	margin-top: 24px;
}

.single-listing.type-news .sba-hero-bar::before {
	display: none;
}

@media (min-width: 1025px) {
	.single-listing.type-news .sba-hero-bar {
		flex-wrap: nowrap;
		margin-top: 0;
	}
}

/* Outline buttons, 40px high like the primary. */
.single-listing.type-news .sba-hero-bar .lmb-calltoaction > a,
.single-listing.type-news .sba-hero-bar .lmb-calltoaction ~ .lmb-calltoaction > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--sba-input);
	border-radius: var(--sba-radius-md);
	background: var(--sba-surface);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--sba-charcoal);
}

.single-listing.type-news .sba-hero-bar .lmb-calltoaction > a:hover,
.single-listing.type-news .sba-hero-bar .lmb-calltoaction > a:focus,
.single-listing.type-news .sba-hero-bar .lmb-calltoaction ~ .lmb-calltoaction > a:hover,
.single-listing.type-news .sba-hero-bar .lmb-calltoaction ~ .lmb-calltoaction > a:focus {
	border-color: var(--sba-input);
	background: var(--sba-accent);
	color: var(--sba-charcoal);
}

/* Share, the last action, is the primary. */
.single-listing.type-news .sba-hero-bar .lmb-calltoaction:last-child > a {
	border-color: var(--sba-red-dark);
	background: var(--sba-red-dark);
	color: #fff;
}

.single-listing.type-news .sba-hero-bar .lmb-calltoaction:last-child > a:hover,
.single-listing.type-news .sba-hero-bar .lmb-calltoaction:last-child > a:focus {
	border-color: var(--sba-red-darker);
	background: var(--sba-red-darker);
	color: #fff;
}

/* The article: flat on white, the blocks as paragraphs of one text. */
.single-listing.type-news .tab-content.listing-tabs {
	background: #fff;
}

/* The columns' 10px padding against the row's -15px margin would set the
 * text 5px to the left of the title. */
.single-listing.type-news .profile-body .row {
	margin-right: 0;
	margin-left: 0;
}

.single-listing.type-news .profile-body .row > [class*="col-"] {
	padding-right: 0;
	padding-left: 0;
}

.single-listing.type-news .profile-body {
	padding: 32px 0 48px;
}

@media (min-width: 1025px) {
	.single-listing.type-news .profile-body {
		padding: 40px 0 64px;
	}
}

.single-listing.type-news .single-job-listing .element {
	margin-bottom: 32px !important;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.single-listing.type-news .element .pf-head,
.single-listing.type-news .element .pf-body,
.single-listing.type-news .no-title .element .pf-body,
.single-listing.type-news .description .element .pf-body {
	padding: 0;
}

/* The details block has no title, only the icon the page hides. */
.single-listing.type-news .block-type-details .pf-head {
	display: none;
}

.single-listing.type-news .element .pf-head {
	margin-bottom: 12px;
}

.single-listing.type-news .element .title-style-1 .title-style-1__heading,
.single-listing.type-news .element .title-style-1 h5 {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 20px;
	color: var(--sba-slate);
}

/* The date: supporting information, slate at 14px. */
.single-listing.type-news .block-type-details .element {
	margin-bottom: 24px !important;
}

.single-listing.type-news .block-type-details .details-block-content > li {
	padding: 0;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

/* The icon box is one line of this row, 20px, not the 26px of a 16px row,
 * or the clock sits 3px below the text. */
.single-listing.type-news .block-type-details .details-block-content > li > i {
	height: 20px;
}

/* The lead: the guide's lead size, medium weight in charcoal, which keeps
 * the emphasis production gave it in bold. */
.single-listing.type-news .lead .pf-body {
	color: var(--sba-charcoal);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.625;
}

.single-listing.type-news .lead .pf-body p,
.single-listing.type-news .lead .pf-body li {
	font-size: inherit;
	line-height: inherit;
}

.single-listing.type-news .lead .pf-body ul {
	margin: 0;
	padding-left: 20px;
}

.single-listing.type-news .lead .pf-body li {
	margin-left: 0;
	padding-left: 4px;
}

.single-listing.type-news .lead .pf-body li + li {
	margin-top: 8px;
}

/* The cover image, for a news item that has one: left of the lead, set into
 * the lead's block by the child's content-blocks/text-block.php. Above the
 * lead on phones; beside it from 768px; from 1201px the two halves are the
 * text's two columns, so the picture stands over the left one. */
.single-listing.type-news .lead .element.has-cover {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.single-listing.type-news .lead .element.has-cover > .pf-head {
	display: none;
}

.single-listing.type-news .sba-news-lead-media {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--sba-radius);
	background-color: var(--sba-muted);
}

.single-listing.type-news .sba-news-lead-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.single-listing.type-news .lead .element.has-cover {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
		gap: 32px;
	}
}

@media (min-width: 1201px) {
	.single-listing.type-news .lead .element.has-cover {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
	}
}

/* The text: body size, two columns from 1201px as on production. */
.single-listing.type-news .news-content .pf-body,
.single-listing.type-news .news-content .pf-body p {
	color: var(--sba-charcoal-light);
	font-size: 16px;
	line-height: 1.625;
}

@media (min-width: 1201px) {
	.single-listing.type-news .news-content .pf-body {
		column-count: 2;
		column-gap: 48px;
	}
}

.single-listing.type-news .news-content .pf-body :is(h2, h3, h4, h5, strong) {
	color: var(--sba-charcoal);
}

.single-listing.type-news .news-content .pf-body :is(h2, h3, h4, h5) {
	margin: 24px 0 8px;
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.4;
	break-after: avoid;
}

.single-listing.type-news .news-content .pf-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sba-radius);
}

/* The company, as a hairline-topped footer of the article. */
.single-listing.type-news .block-type-related_listing .element {
	padding-top: 24px;
	border-top: 1px solid var(--sba-border);
}