/**
 * Portfolio Gallery Block - view styles
 * Portiert aus masonry-gallery-block.css (.mgb-* → .bookcase-*)
 */

.bookcase-gallery-wrapper {
	margin: 2.5em 0;
}

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

.bookcase-notice {
	padding: 20px;
	background-color: #f0f0f0;
	border-left: 4px solid #0073aa;
	margin: 20px 0;
	font-size: 14px;
	color: #333;
}

.wp-block-bookcase-portfolio-gallery {
	min-height: 100px;
}

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

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

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

.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 0 0 0 !important;
}

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

.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(.08% .2% .2% .2% round .3em);
}

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

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

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

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

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

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

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

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

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

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

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

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