/*! Article components the block build renders itself.
 *
 *  The captured template supplies the layout; these are the pieces Elementor Pro
 *  drew with widgets that do not exist here — table of contents, share buttons,
 *  post navigation and the related-posts carousel. Numbers measured off
 *  production's article template.
 */

/* ------------------------------------------------------------ category eyebrow */

.hype-post-category {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--orange-text, #f7941d);
	text-decoration: none;
}

/* ---------------------------------------------------------------- post info */

.lg-post-info {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: #6b7280;
}

.lg-post-info a {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------- table of contents */

/* production: 305px wide, 12px radius, 20px 22px padding, 10px under the header */
.hype-toc {
	border-radius: 12px;
	padding: 20px 22px;
	background: #f9fafb;
}

/* Both side rails follow the reader down the article, pinned 150px from the top
 * — production does this with Elementor's sticky motion effect, which is JS and
 * did not survive the port.
 *
 * The sticky element has to be the *widget wrapper*, not the card inside it: a
 * sticky box travels only within its own parent, and the card's parent hugs the
 * card, so there was nowhere to travel. The wrappers' parents are the full-height
 * article columns, which is the range production scrolls through.
 *
 * Keyed to classes rather than element ids because the English and Bulgarian
 * article templates share none. */
@media (min-width: 1025px) {
	.lg-w-table-of-contents,
	.hype-cta-block {
		position: sticky;
		top: 150px;
	}
}

.hype-toc__header {
	padding-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--text, #4a4a5a);
}

.hype-toc__list {
	margin: 0;
	padding: 0 0 0 18px;
	list-style: decimal;
}

.hype-toc__item {
	margin: 0 0 8px;
	line-height: 1.45;
}

.hype-toc__item a {
	color: var(--text, #4a4a5a);
	text-decoration: none;
	font-size: 14px;
}

.hype-toc__item a:hover,
.hype-toc__item.is-active a {
	color: var(--blue-text, #3bb5e8);
}

/* Un-numbered and indented only when the entry is genuinely nested under an h2.
 * Keyed to --nested rather than --h3: most articles are written entirely in h3s,
 * where those h3s ARE the top level and production numbers them. */
.hype-toc__item--nested {
	list-style: none;
	padding-left: 10px;
	font-size: 13px;
}

/* -------------------------------------------------------------- share buttons */

.lg-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
	color: var(--text, #4a4a5a);
	text-decoration: none;
}

.lg-share-btn__icon::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: currentColor;
	/* Simple glyphs rather than a webfont: production uses Elementor's icon set,
	   which is not loaded here. */
	-webkit-mask:center / contain no-repeat;mask:center / contain no-repeat;
}

.lg-share-btn_facebook .lg-share-btn__icon::before {
	--hype-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 22v-9h3l.5-3.5H13V7.5c0-1 .3-1.7 1.8-1.7H17V2.7C16.6 2.6 15.4 2.5 14 2.5c-2.9 0-4.9 1.8-4.9 5V9.5H6V13h3.1v9H13z'/%3E%3C/svg%3E");-webkit-mask-image:var(--hype-mask);mask-image:var(--hype-mask);
}

.lg-share-btn_twitter .lg-share-btn__icon::before {
	--hype-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-7 8 8.2 12h-6.4l-5-7.3-5.8 7.3H2.9l7.5-8.6L2.5 2H9l4.6 6.7L18.9 2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--hype-mask);mask-image:var(--hype-mask);
}

.lg-share-btn_linkedin .lg-share-btn__icon::before {
	--hype-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5A2.5 2.5 0 1 1 2.5 6 2.5 2.5 0 0 1 4.98 3.5zM3 8.98h4V21H3zM9 8.98h3.8v1.64h.06A4.2 4.2 0 0 1 16.6 8.7c4 0 4.75 2.64 4.75 6.07V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95s-2.07 1.4-2.07 2.85V21H9z'/%3E%3C/svg%3E");-webkit-mask-image:var(--hype-mask);mask-image:var(--hype-mask);
}

.lg-share-btn_email .lg-share-btn__icon::before {
	--hype-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2zm10 8L3.5 6.5h17z'/%3E%3C/svg%3E");-webkit-mask-image:var(--hype-mask);mask-image:var(--hype-mask);
}

.lg-share-btn:hover {
	border-color: currentColor;
}

/* ------------------------------------------------------------ post navigation */

.lg-post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding: 12px 0;
}

.lg-post-navigation__link a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text, #4a4a5a);
	text-decoration: none;
	font-size: 14px;
}

.lg-post-navigation__next a {
	text-align: right;
}

.post-navigation__prev--label,
.post-navigation__next--label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #6D7687;
}

.post-navigation__arrow-wrapper {
	font-size: 22px;
	line-height: 1;
	color: #6D7687;
}

/* ----------------------------------------------------------- related articles */

/* production: four 313px cards across the 1280px rail, 20px apart */
.hype-related {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.hype-related__card {
	display: block;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	color: inherit;
	text-decoration: none;
}

.hype-related__thumb {
	display: block;
	aspect-ratio: 311 / 160;
	overflow: hidden;
}

.hype-related__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Category eyebrow above the card title. Measured off production:
 * 10px / 600 / 0.5px tracking / uppercase / rgb(26,143,186). */
.hype-related__eyebrow {
	display: block;
	padding: 12px 16px 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #16779B;
}

.hype-related__eyebrow + .hype-related__title {
	padding-top: 4px;
}

.hype-related__title {
	margin: 0;
	padding: 12px 16px 6px;
	font-family: var(--font-display, inherit);
	font-size: 16px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--navy, #0b1d2e);
}

.hype-related__excerpt {
	margin: 0;
	padding: 0 16px 16px;
	font-size: 14px;
	line-height: 1.6;
	color: #6b7280;
}

@media (max-width: 1024px) {
	.hype-related {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Below 768 production shows one card at a time in a swipeable carousel, so the
   block is 397px tall. Stacking four cards instead made it 1686px against
   production's 548px — the single biggest mobile difference on the page. A
   scroll-snap row gets the same height and the same gesture without a slider. */
@media (max-width: 767px) {
	.hype-related {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.hype-related::-webkit-scrollbar {
		display: none;
	}

	.hype-related__card {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}
}

/* ------------------------------------------------------------- article body */

/* Production leaves the browser's top margin on body lists (18.75px = 1.25em of
   the 15px root); the block build's reset removed it, so every list sat tight
   against the paragraph above it. */
.hype-article-body .entry-content > ul,
.hype-article-body .entry-content > ol {
	margin-top: 18.75px;
}


/* ================================================== article layout v2 (2026-09-23)
 *
 *  Desktop: section ticks | reading column | note rail. The TOC card is gone —
 *  one tick per h2 (hype_post_ticks) takes 40px instead of 290px.
 *
 *  Notes: an article marks a line with <mark class="hype-hl" data-n="N"> (or a
 *  table row with <tr class="hype-hl-row" data-n="N">) and puts
 *  <aside class="hype-note" id="hype-note-N"> right after that paragraph/table.
 *  Desktop: the note opens in the rail next to its line while the line is on
 *  screen; the rail's CTA card steps aside meanwhile. Mobile/tablet: the note
 *  unfolds under its paragraph, its space reserved so nothing jumps.
 *  Hidden until the script marks them (is-on, is-seen, has-note — added by
 *  assets/js/pages/single-post.js; whitelist them in LiteSpeed UCSS on prod),
 *  so a deferred script never shows every note at once.
 */

/* ------------------------------------------------------------ section ticks */

.hype-ticks {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 8px;
}

.hype-tick {
	position: relative;
	display: block;
	width: 40px;
	height: 14px;
	text-decoration: none;
}

.hype-tick::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: #c9d3da;
	transition: width .35s, background-color .35s;
}

.hype-tick.is-on::before {
	width: 40px;
	background: var(--orange, #f7941d);
}

.hype-tick:hover::before {
	background: var(--navy, #0b1d2e);
}

.hype-tick span {
	position: absolute;
	left: 52px;
	top: -4px;
	z-index: 5;
	padding: 0 10px;
	border: 1px solid #e3eaee;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(11, 29, 46, .08);
	font: 600 12px/22px var(--font-display, Manrope, sans-serif);
	color: var(--navy, #0b1d2e);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-4px);
	transition: opacity .2s, transform .2s;
}

.hype-tick:hover span,
.hype-tick:focus-visible span {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------- grid */

@media (min-width: 1025px) {
	/* !important + body classes: theme.css pins the English grid (.lg-e-2c9df8f)
	   to 180px|1fr|264px with !important; this has to outrank it. */
	body.wp-theme-hype.single-post .lg-w.hype-article-grid {
		grid-template-columns: 40px minmax(0, 680px) minmax(260px, 360px) !important;
		column-gap: 48px !important;
		max-width: none !important;
	}

	.lg-psingle .lg-w.hype-article-grid > .lg-w {
		grid-column: auto;
	}

	.lg-psingle .lg-w.hype-article-body p,
	.lg-psingle .lg-w.hype-article-body ul,
	.lg-psingle .lg-w.hype-article-body ol {
		font-size: 18px;
		line-height: 1.75;
	}

	/* the rail's CTA card steps aside while a note is open */
	.hype-article-grid .hype-cta-block {
		transition: opacity .3s, visibility .3s;
	}

	.hype-article-grid.has-note .hype-cta-block {
		opacity: 0;
		visibility: hidden;
	}
}

/* highlight + note styles live in components/scroll-notes.css (shared with pages) */


/* long source URLs / DOIs must wrap, or the Sources list widens the page on phones (2026-09-23) */
.hype-article-body li,
.hype-article-body p {
	overflow-wrap: anywhere;
}


/* the section-name tooltip on the ticks must sit ABOVE the article text: the sticky ticks
   column comes first in the grid, so without its own z-index the text column paints over it (2026-09-23) */
.hype-article-grid > .lg-w:has(.hype-ticks-wrap),
.hype-article-grid > .lg-w:first-child {
	z-index: 30;
}

.hype-tick span {
	z-index: 31;
	background: #fff;
	opacity: 0;
}

.hype-tick:hover span,
.hype-tick:focus-visible span {
	opacity: 1;
}