/* ==========================================================================
   Post Single Page Styles
   ========================================================================== */

/* Variables
   ========================================================================== */
body {
	--post-m: 1.8rem;
}

/* Breadcrumbs
   ========================================================================== */
@media screen and (min-width: 1026px) {
	section.post-breadcrumbs {
		padding-top: 1rem;
		padding-bottom: 3rem;
	}
}

/* Hero
   ========================================================================== */
.post-hero {
	padding-bottom: var(--gap-xs2);
}
@media screen and (min-width: 1026px) {
	.post-hero h1 {
		padding-right: var(--gap-xs);
	}
}

.post-hero__inner {
	padding-top: var(--gap-xl3);
}
@media screen and (max-width: 1025px) {
	.post-hero__inner {
		padding-top: 14rem;
	}
}
@media screen and (min-width: 1026px) {
/*	.post-hero__media {
		aspect-ratio: 450 / 325;
	}
*/
}
.post-hero__image {
	object-fit: cover;
	width: 100%;
	transform: translateZ(0);
}
@media screen and (min-width: 1026px) {
	.post-hero__meta {
		padding-top: var(--gap-xs3);
	}
}

/* Content Section
   ========================================================================== */
@media screen and (max-width: 1025px) {
	.post-content-section {
		padding-top: 2rem;
	}
}
@media screen and (min-width: 1026px) {
	.post-content-section {
		padding-top: 4rem;
	}
	.post-content-grid .post-sidebar {
		grid-column: 1 / 4;
		padding-top: 10px;
	}

	.post-content-grid .post-content {
		grid-column: 5 / 12;
		display: grid;
		grid-template-columns: var(--grid-7);
		column-gap: var(--grid-gap);
		align-content: start;
	}
}

.post-content-grid .post-content > * {
	grid-column: span 6;
}

.post-content-grid .post-content > .cta-block {
	grid-column: span 6 !important;
}

.post-content-grid .post-content > figure {
	grid-column: span 7;
	margin:var(--gap-xs4) 0;
}

.post-content-grid .post-content > figure img {
	object-fit: cover;
	max-height: 650px;
	transform: translateZ(0);
	border-radius: var(--radius-l);
	width: auto;
}

.post-content-grid .post-content > figure figcaption {
	padding-left: 120px;
	font-style: italic;
}

.post-content > :last-child {
	margin-bottom: 0 !important;
}

/* Table of Contents
   ========================================================================== */

@media screen and (min-width: 1026px) {
	.post-toc {
		position: sticky;
		top: 120px;
		--toc-line-top: 0px;
		--toc-line-height: 21px;
	}

	.post-toc__list {
		position: relative;
		margin: 0 !important;
		padding-left: 30px !important;
	}

	.post-toc__list::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 1px;
		background: var(--primary-ultra-light);
	}

	.post-toc__list::after {
		content: "";
		position: absolute;
		left: -1px;
		top: var(--toc-line-top);
		height: var(--toc-line-height);
		width: 3px;
		background: var(--primary);
		transition:
			top 0.3s ease,
			height 0.3s ease;
	}

	.post-toc__item span {
		position: relative;
		left: 0;
		transition: 0.2s ease-out;
	}

	.post-toc__item.is-active span {
		left: 12px;
	}
}
@media screen and (max-width: 1025px) {
	.post-toc__list {
		display: flex !important;
		flex-direction: row !important;
		overflow: scroll !important;
		position: relative;
		width: 100vw;
		left: calc(var(--gutter) * -1);
		padding-left: var(--gutter) !important;
		padding-right: var(--gutter) !important;
		padding-bottom: 35px !important;
		gap: 4rem !important;
		/* Hide scrollbar - Firefox */
		scrollbar-width: none;
		/* Hide scrollbar - IE/Edge */
		-ms-overflow-style: none;
	}
	/* Hide scrollbar - WebKit (Chrome, Safari, Edge) */
	.post-toc__list::-webkit-scrollbar {
		display: none;
	}
	.post-toc__list {
		white-space: nowrap;
	}
	/* Left fade */
	.post-toc .highlight::before {
		content: "";
		position: absolute;
		top: 25px;
		left: calc(var(--gutter) * -1);
		width: 10vw;
		height: 100%;
		background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
		z-index: 9;
		pointer-events: none;
	}
	/* Right fade */
	.post-toc .highlight::after {
		content: "";
		position: absolute;
		top: 25px;
		right: calc(var(--gutter) * -1);
		width: 10vw;
		height: 100%;
		background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
		z-index: 9;
		pointer-events: none;
	}
	.post-toc__item {
		list-style: none;
		position: relative;
	}
	.post-toc__item::after {
		content: "";
		position: absolute;
		right: -25px;
		background: var(--primary);
		border-radius: 50vmax;
		width: 6px;
		height: 6px;
		top: 50%;
		transform: translateY(-50%);
	}
	.post-toc__list > li:last-child::after {
		display: none;
	}
	.post-toc .highlight.highlight {
		display: block;
		padding-bottom: var(--gap-xs6);
		position: relative;
	}
}
.post-toc .highlight {
	display: none;
}

.post-toc__link {
	color: var(--base) !important;
	text-decoration: underline !important;
	text-decoration-color: transparent !important;
	transition: 0.2s ease-out;
	position: relative;
	left: 0;
	outline: none !important;
}
@media screen and (max-width: 1025px) {
	.post-toc__link.post-toc__link.post-toc__link.post-toc__link.post-toc__link {
		text-decoration: none !important;
	}
}

.post-toc__link.post-toc__link:is(:hover, :focus-visible) {
	text-decoration-color: var(--base) !important;
}

/* Sidebars
   ========================================================================== */
.case-sidebar {
	padding: var(--gap-xs4);
}
.case-sidebar__logo {
	max-width: 160px;
	margin: 0 auto;
}
@media screen and (max-width: 1025px) {
	.case-sidebar,
	.event-sidebar,
	.post-contacts {
		margin-bottom: var(--gap-xs4);
	}
	.post-sidebar .post-contacts {
		display: none;
	}
	.post-contacts {
		margin-top: var(--gap-xs3);
	}
	.post-contacts .contact-person__image-wrapper {
		min-height: var(--card-image-size);
		min-width: var(--card-image-size);
		max-height: var(--card-image-size);
		max-width: var(--card-image-size);
		position: relative;
		overflow: hidden;
		border-radius: var(--radius-s);
	}
}
@media screen and (min-width: 1026px) {
	.post-sidebar .post-contacts {
		display: flex !important;
	}
	.post-contacts {
		display: none !important;
	}
}

.event-sidebar {
	padding: var(--gap-xs5);
}

.post-contacts {
	padding: var(--gap-xs4);
}

@media screen and (max-width: 1025px) {
	.post-contacts {
		padding: var(--gap-xs5);
	}
}