/**
 * Portfolio styles (grid, expand/collapse, singles, media).
 * Loaded via bookcase-portfolio handle (Teil 3) and as dependency of the portfolio gallery block.
 *
 * Konflikt-Referenz (verbindlich):
 * - Container-Höhe: transition height 1.5s ease-in-out
 * - Thumbnail-Fade: translateY(30px) scale(.95) → scale(1)
 * - .portfoliocontent margin: var(--space-3xl) (style.css)
 */

/* ------------------------------------------------------------------
   1. Grid / Masonry
   ------------------------------------------------------------------ */

.hand-pointer {
	order: 2;
	margin-left: auto;
	margin-right: auto;
	padding: 0.75em 0 3.8em 0;
}

.subheadline {
	order: 2;
	font-size: 1.2em;
	line-height: 1.35em;
	font-family: var(--bookcase-font-light) !important;
	margin: 0 0 0.7em 0;
	padding: 0 3em;
	hyphens: auto;
	text-wrap: balance;
}

.subheadline2,
.cta-footer {
	font-size: 1.2em;
	line-height: 1.35em;
	letter-spacing: 0.008em;
	font-family: var(--bookcase-font-light) !important;
	margin: 1em 0 1.7em;
	text-wrap: balance;
}

.cta-footer {
	order: 5;
	padding: 0 3em;
}

.cta-footer-btn {
	order: 5;
	font-size: 1.23em;
	line-height: 1.33em;
	font-family: var(--bookcase-font-button) !important;
	margin: 0 0 6em;
}

.cta-footer-innerbtn {
	scale: 1.4;
	rotate: -5deg;
	transition: transform 0.1s ease;
}

.cta-footer-innerbtn:hover {
	transform: scale(1.1);
}

.bookcase-masonry-container {
	order: 3;
	width: 100%;
	max-width: 100%;
	margin: 0 auto 1em auto;
	transition: height 1.5s ease-in-out;
}

.bookcase-masonry-container .grid-sizer,
.bookcase-masonry-container .item {
	width: 19.5%;
}

.bookcase-masonry-container .grid-sizer,
.bookcase-masonry-container .gutter-sizer {
	visibility: hidden;
}

.bookcase-masonry-container .gutter-sizer {
	width: 7.3%;
}

.floatLeft {
	float: left;
}

/* ------------------------------------------------------------------
   2. Expand / Collapse / Hover
   ------------------------------------------------------------------ */

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.wp-post-image {
	height: auto;
	width: 100%;
}

.img_wrapper {
	width: unset !important;
	height: unset !important;
	overflow: hidden;
	text-align: center;
	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.05)) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
	outline: 70px rgba(255, 255, 255, 0) solid;
}

.hoverInfo {
	font-family: var(--bookcase-font-body) !important;
	color: #222222;
	margin: 1.2em auto 0.5em auto;
	line-height: 1.5em;
	text-align: center;
	width: 97%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	max-height: 4.6em;
	font-weight: bold;
	letter-spacing: 0.08em;
	font-size: 0.9em !important;
	hyphens: auto;
	hyphenate-limit-chars: auto 3;
	hyphenate-limit-lines: 4;
}

.hoverTag {
	color: #222222;
	margin: -0.3em auto 0 auto;
	opacity: 0;
	text-align: center;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 0.58em;
	text-transform: uppercase;
	letter-spacing: 0.236em;
}

.item {
	float: left;
	margin: 0 0 3em 0;
	position: relative;
	max-width: 100%;
	animation: fadeIn 1s ease-in;
}

.item .portfoliopreload img {
	image-rendering: -webkit-optimize-contrast;
}

.postphoto {
	height: 100%;
	position: relative;
}

.loader,
.videoloader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -26px 0 0 -26px;
	border: 6px solid rgba(203, 203, 203, 0.5);
	border-top-color: white;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	z-index: 10;
	display: none;
}

.videoloader {
	width: 60px;
	height: 60px;
	margin: -36px 0 0 -36px;
	display: block;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.thumb {
	display: block !important;
	width: 100%;
	min-height: 15.4em;
}

.xout {
	text-align: center;
	width: 12em;
	margin: 0 auto 3em auto;
}

.xout #cross {
	animation: rollInC 0.24s;
	transform-origin: center;
}

.xout:hover #cross {
	animation: rollOutC 0.24s forwards;
}

@keyframes rollInC {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(90deg);
	}
}

@keyframes rollOutC {
	from {
		transform: rotate(90deg);
	}
	to {
		transform: rotate(0deg);
	}
}

.bookcase-masonry-container .xout svg,
.bookcase-masonry-container #close-button {
	max-width: 216px;
	height: auto;
	display: block;
}

.thumbnailContainer {
	max-width: 500px;
	max-height: 500px;
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.bookcase-masonry-container .thumbnailContainer.animate-fade {
	opacity: 0;
	transform: translateY(30px) scale(0.95);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.bookcase-masonry-container .thumbnailContainer.fade-in {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.item .postphoto {
	transform-origin: 50% -13%;
	transition: transform 0.3s ease;
}

.item:hover .postphoto {
	transform: scale(0.9);
	transition: transform 0.22s ease;
}

.item .hoverTag {
	transform: scale(1.2);
	opacity: 0;
	transition: transform 0.18s ease-in-out, opacity 0.18s ease-in-out;
}

.item:hover .hoverTag {
	transform: scale(1.1);
	opacity: 1;
}

.posttext {
	float: left;
	max-height: 12400px;
	width: 100% !important;
	height: auto !important;
	z-index: 10000 !important;
	display: block;
}

.bookcase-masonry-container .posttext {
	width: 100%;
	padding: 20px 0;
}

.fiftyfive {
	margin: 0 auto 1em auto !important;
	width: calc(100px + 62%);
	text-align: justify !important;
	text-align-last: center;
}

/* ------------------------------------------------------------------
   3. Detail content (grid expand + singles)
   ------------------------------------------------------------------ */

.largeport {
	max-width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	display: block;
	margin: 0 auto;
}

.pics {
	margin: 0 !important;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-between;
	align-content: space-between;
	column-gap: 1em;
	row-gap: 1em;
	align-items: baseline;
}

.smallPortfolio {
	flex: 1 0 46%;
}

.projectfullwidth {
	width: 100% !important;
	margin: unset;
}

.bookcase-masonry-container .posttext .pics {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-between;
	align-content: space-between;
	row-gap: 1em;
	align-items: baseline;
	margin: 0 !important;
}

.bookcase-masonry-container .posttext .pics .smallPortfolio {
	flex: 1 0 46%;
}

.bookcase-masonry-container .posttext .pics .largeport {
	max-width: 100%;
}

.portfoliocontent {
	margin: 0 auto var(--space-3xl);
	text-align: center;
	width: calc(100px + 61%);
	float: unset !important;
}

.portfoliocontent p {
	text-align: center;
	text-wrap: unset;
}

@media screen and (min-width: 768px) {
	.portfoliocontent p {
		text-align: justify;
		text-align-last: center;
	}
}

.portfoliocontent p a {
	text-decoration: underline;
}

.portfoliocontent h2 {
	font-size: clamp(1.65rem, 1.38rem + 1.05vw, 2.625rem);
	line-height: var(--leading-portfolio-h2);
	margin: var(--space-xs) 0 var(--space-md);
}

.portfoliocontent h6,
blockquote {
	padding-top: var(--space-xl);
	font-family: var(--bookcase-font-light) !important;
	font-size: 1.2em;
	line-height: 1.4em;
}

.portfoliocontent ul {
	width: 90%;
	font-size: 0.84em !important;
	line-height: 1.9em;
	display: inline-block;
	margin: 0;
	padding: 0 0 2.6em 0;
}

.portfoliocontent li {
	display: inline;
}

.portfoliocontent li::before {
	content: ' ';
}

.portfoliocontent li::after {
	content: ' ';
	white-space: normal;
	word-spacing: 1em;
	letter-spacing: 0;
	background-size: 1em 1em;
	background-repeat: no-repeat;
	background-position: center 96%;
	opacity: 1;
	background-image: radial-gradient(circle, black, black 7%, transparent 15%, transparent 100%, black 45%, black 48%, transparent 55%);
}

.btn-underscore a {
	font-family: var(--bookcase-font-button) !important;
	font-size: 0.75em !important;
	text-transform: uppercase !important;
	height: 2.12em;
	font-weight: bold;
	letter-spacing: 0.255em;
	display: inline-block;
	transform: translateY(0) !important;
	transition: transform 0.3s ease;
}

.btn-underscore a:hover::before {
	transform: scaleX(1);
}

.btn-underscore a::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	bottom: -0.05em;
	background-color: #222222;
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.btn-underscore a:hover {
	transform: translateY(-4px) !important;
}

.process-hl {
	margin: 0.55em 0 0.05em 0;
}

/* ------------------------------------------------------------------
   4. Media (video, loaders)
   ------------------------------------------------------------------ */

video {
	height: auto;
	width: 100%;
	top: 0;
	clip-path: inset(1% 0.5% 1% 0.5% round 0.3em);
}

#videodiv {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 1;
	box-sizing: border-box;
}

.videocontainer {
	position: relative;
	margin: 0 auto;
	cursor: default;
}

.videocontainer:has(.btnVideo) {
	cursor: pointer;
}

.videocontainer:last-child {
	margin: 0 auto 2.5em auto;
}

.videocontainer img,
.videocontainer iframe {
	clip-path: inset(0.08% 0.2% 0.2% 0.2% round 0.3em);
}

.bookcase-masonry-container .posttext .pics .videocontainer {
	display: block;
	position: relative;
	margin: 0 auto 0 auto;
}

.bookcase-masonry-container .posttext .pics .videocontainer:last-child {
	margin: 0 auto 2.5em auto;
}

.bookcase-masonry-container .posttext .pics .videocontainer img {
	clip-path: inset(0.08% 0.2% 0.2% 0.2% round 0.3em);
}

/* ------------------------------------------------------------------
   5. Responsive (portfolio only)
   ------------------------------------------------------------------ */

@media screen and (max-width: 1280px) and (min-width: 523px) {
	.bookcase-masonry-container > .item:nth-child(6):last-child {
		display: none !important;
	}
}

@media screen and (max-width: 1280px) {
	.bookcase-masonry-container .grid-sizer,
	.bookcase-masonry-container .item {
		width: 26%;
	}

	.bookcase-masonry-container .gutter-sizer {
		width: 11%;
	}

	.hoverInfo {
		-webkit-line-clamp: 3;
	}
}

@media screen and (max-width: 1080px) {
	.bookcase-masonry-container {
		width: 82%;
		margin: 0 auto 0 auto;
	}
}

@media screen and (max-width: 1023px) {
	.bookcase-masonry-container {
		width: 82%;
		margin: 0 auto;
	}

	.item {
		max-width: 120%;
		margin: 0 0 1em 0;
	}

	.projectfullwidth {
		width: 120% !important;
		margin: 0 -10%;
	}

	.img_wrapper {
		filter: unset;
	}

	.posttext {
		z-index: 1 !important;
	}
}

@media screen and (max-width: 902px) {
	.hoverInfo {
		-webkit-line-clamp: 4;
	}
}

@media screen and (max-width: 768px) {
	.bookcase-masonry-container .posttext .pics .smallPortfolio {
		flex: 0 0 80%;
	}

	.bookcase-masonry-container .posttext .pics .videocontainer {
		margin-bottom: 3em;
	}
}

@media screen and (max-width: 522px) {
	.subheadline {
		margin: 0 0 0.6em 0;
		padding: 0 1em;
	}

	.cta-footer-innerbtn {
		scale: 1.1;
	}

	.bookcase-masonry-container {
		width: 84%;
		margin: 0 auto;
	}

	.bookcase-masonry-container .grid-sizer,
	.bookcase-masonry-container .item {
		width: 43%;
	}

	.bookcase-masonry-container .gutter-sizer {
		width: 14%;
	}

	.thumb {
		min-height: 14.2em;
	}
}