/**
 * Portfolio rebuild: gerelateerde projecten (.pf-rebuild-related).
 * Tokens in lijn met templates/portfolio/assets/scss/_variables.scss.
 */

 .single-portfolio-dev div[data-elementor-type="single-post"]{
	overflow: hidden;
 }
 .single-portfolio-dev header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
 }

 .logged-in.single-portfolio-dev header{
	top: 32px;
 }

.pf-rebuild-related {
	--pf-text: #111;
	--pf-tag-bg: #E4CDFB;
	--pf-tag-border: rgb(17 17 17 / 12%);
	--pf-radius-tag: 999px;
	--pf-radius-card: clamp(1rem, 3vw, 1.5rem);
	--pf-slide-width: min(400px, 82vw);
	--pf-play: #bdfa45;
	background: transparent;
	color: var(--pf-text);
	margin: 0;
}

.pf-rebuild-related__title {
	font-size: 48px;
    font-weight: 400;
    margin: 0;
    padding-bottom: 32px;
	@media only screen and (max-width: 479px) {
		padding-bottom: 0;
	}
}

.pf-rebuild-related__stage {
	position: relative;
	padding-bottom: clamp(1rem, 3vw, 1.5rem);
	overflow: visible;
}

/* Swiper: horizontaal maskeren; wrapper-padding voor vaste nav onderaan (portfolio _swiper-buttons). */
.pf-rebuild-related__swiper {
	position: relative;
	overflow: visible;
}

.pf-rebuild-related__swiper .swiper-wrapper {
	padding-bottom: 64px;
	overflow: visible;
}

.pf-rebuild-related__swiper .swiper-slide {
	width: var(--pf-slide-width);
	height: auto;
	overflow: visible;
}

.pf-rebuild-related__swiper-nav.swiper-button-container {
	z-index: 15;
	justify-content: flex-start;
}

.pf-rebuild-related__swiper .swiper-button-prev,
.pf-rebuild-related__swiper .swiper-button-next {
	cursor: pointer;
}

.pf-rebuild-related__swiper .swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.pf-rebuild-related__swiper .swiper-button-prev:focus-visible,
.pf-rebuild-related__swiper .swiper-button-next:focus-visible {
	outline: 2px solid var(--pf-play);
	outline-offset: 3px;
}

.pf-rebuild-related__card {
	position: relative;
	display: block;
	width: 100%;
	overflow: visible;
}

.pf-rebuild-related__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: var(--pf-radius-card);
	overflow: hidden;
	background: #1a1a1a;
}

.pf-rebuild-related__card--no-thumb .pf-rebuild-related__frame {
	background: linear-gradient(160deg, rgb(237 191 253 / 20%), #e8e4e0);
}

.pf-rebuild-related__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pf-rebuild-related__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(255, 255, 255, 0.78) 0%,
		rgba(255, 255, 255, 0.18) 30%,
		rgba(255, 255, 255, 0.28) 70%
	);
	pointer-events: none;
}

.pf-rebuild-related__body {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px;
	color: #fff;
	pointer-events: none;
	gap: 32px;
}

.pf-rebuild-related__body a {
	pointer-events: auto;
	background-color: var(--e-global-color-fba1480);
    padding: 4px 4px 4px 16px;
    border-radius: 24px;
}

.pf-rebuild-related__body a svg path{
	stroke: #111;
}

/* Tags: zelfde basis als section.portfolio-intro */
.pf-rebuild-related__tags.portfolio-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-rebuild-related__tags .portfolio-tag-label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 6px 14px;
	font-size: clamp(14px, 2.2vw, 18px);
	line-height: 1.3;
	font-weight: 500;
	color: var(--pf-text);
	background: var(--pf-tag-bg);
	border: 1px solid var(--pf-tag-border);
	border-radius: var(--pf-radius-tag);
}

.pf-rebuild-related__mid {
	flex: 1;
	display: flex;
	align-items: flex-end;
	padding-bottom: 0.35rem;
}

.pf-rebuild-related__card-title {
	margin: 0;
	font-size: 26px !important; 
	font-weight: 500 !important;
	line-height: 38px !important;
	color: #111;
}

.pf-rebuild-related__foot {
	margin-top: auto;
}
.pf-rebuild-related__foot .pf-rebuild-related__cta-text{
	font-size: 18px;
	line-height: 28px;
	font-weight: 500;
}

.pf-rebuild-related__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: #fff;
	font-weight: 500;
	font-size: clamp(0.85rem, 2vw, 1rem);
	letter-spacing: 0.02em;
}

.pf-rebuild-related__cta:hover {
	opacity: 0.92;
}

.pf-rebuild-related__cta-icon {
	display: flex;
	line-height: 0;
	color: #fff;
}

.pf-rebuild-related__cta-icon svg {
	width: 32px;
	height: 32px;
}

@media (prefers-reduced-motion: reduce) {
	.pf-rebuild-related__swiper .swiper-button-prev,
	.pf-rebuild-related__swiper .swiper-button-next {
		transition: none;
	}
}

/**
 * ACF-gallerij shortcode [portfolio_gallerij]: horizontale strook, portrait 9:16, beige achtergrond.
 */
.pf-rebuild-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 24px;
	column-gap: 24px;
	
	@media only screen and (min-width: 480px) and (max-width: 1024px) {
		grid-template-columns: repeat(2, 1fr);
	}
	
	@media only screen and (max-width: 479px) {
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap: 16px;
		column-gap: 16px;
	}
}

.pf-rebuild-gallery img.smiley-media-gallery {
    position: absolute;
    width: 128px;
    bottom: -64px;
    transform: rotate(12deg);
	@media only screen and (max-width: 479px) {
		width: 64px;
		bottom: -32px;
	}
}

.pf-rebuild-gallery__item {
	aspect-ratio: 9 / 16;
	border-radius: 32px;
	overflow: hidden;
	@media only screen and (max-width: 479px) {
		border-radius: 16px;
	}
}

.pf-rebuild-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pf-rebuild-gallery__video {
	background: #000;
}

.portfolio-categories {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

.portfolio-categories span {
	color: var(--e-global-color-3a2fbcf);
	background-color: rgba(255, 255, 255, 0.08);
	padding: 8px 18px;
	border-radius: 24px;
	font-size: 16px;
}

.portfolio-meta-wrapper {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.portfolio-meta-wrapper .portfolio-tag-groups {
	display: flex;
	gap: 24px;
	flex-direction: column;
}
.portfolio-meta-wrapper .portfolio-tag-groups .tag-item-group {
	display: flex;
	color: #fff;
	flex-direction: column;
	gap: 8px;
}

.portfolio-meta-wrapper .portfolio-tag-groups .tag-item-group .tag-values {
	display: flex;
	color: #fff;
	font-size: 16px;
}


.pf-rebuild-related__stage.pf-gallery-wrapper,
.pf-rebuild-related__stage.pf-gallery-wrapper .swiper{
	overflow: visible !important;

}
.pf-rebuild-related__stage.pf-gallery-wrapper .swiper-wrapper {
	padding-bottom: 64px;
}
.pf-gallery-is-locked .swiper-wrapper {
	padding-bottom: 0 !important;
}


.pf-rebuild-related__frame{
	overflow: visible !important;
	background-color: transparent;
	background: transparent;
}
.pf-rebuild-related__stage.pf-gallery-wrapper .swiper-wrapper .swiper-slide{
	overflow: visible !important;
}

.pf-rebuild-related__stage.pf-gallery-wrapper .swiper-wrapper article img,
.pf-rebuild-related__stage.pf-gallery-wrapper .swiper-wrapper article video{
	border-radius: 24px;
	overflow: hidden;
}

.pf-rebuild-related__stage.pf-gallery-wrapper .swiper-button-lock{
	display: none;
}
img.pf-gallery-sticker {
	z-index: 999;
	display: block;
	position: absolute;
	bottom: -50px;
	right: 20px;
	width: 100px;
	transform: rotate(15deg);
}