/*
Theme Name: MM Foto
Text Domain: mmfoto
Version: 1.2
Requires at least: 6.9.0
Tested up to: 6.9.0
Requires PHP: 8.4.x
Description: Template is created using Bootstrap 5 nad jQuery.
Tags: one-column, custom-background, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, theme-options
Author: MM Foto
*/

/*
dark:  #393B45;
middle: #6E7889;
light: #D8D9DE;
*/

.img-fluid {
	width: 100%;
}

.link {
	text-decoration: none;
}

/*
	MENU
*/
nav {
	-webkit-box-shadow: 0 0 30px 1px rgba(0,0,0,0.8);
	box-shadow: 0 0 30px 1px rgba(0,0,0,0.8);
	z-index: 10000;
}
.navbar-brand img { margin: 0 5px 0 0; height: 36px; }
.navbar-brand span { line-height: 40px; vertical-align: middle; } 
.navbar-nav .active i,
.navbar-nav .active span {
	color: orange;
}

.main-container { margin-top: 66px; }

/*
	POSTS
*/
.post {

}
.post-header {
	position: relative;
}
.headerHasImage {}
.headerHasNoImage { background-color: #393B45; }

.post-title {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	z-index: 100;
}
.featuredImage {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.thumbTrue h1, .thumbTrue .date {
	text-shadow: 1px 1px 1px #000000;
	color: #fff;
}
.thumbFalse h1, .thumbFalse .date {
	color: #000;
}
.post-content, .post-footer {
	background-color: #1F1F1F;
	z-index: 1;
	position: relative;
	color: #fff;
}
.post-content p {
	font-size: 1.2em;
}

img[class^="wp-image-"] {
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.no-posts {
	padding: 20px;
}

/*
	MASONRY
*/
.masonry-content {
	background-color: #1F1F1F;
	column-gap: 10px;
	padding: 10px;
}
.masonry-item {
	margin: 10px 0;
	display: grid;
	grid-template-rows: 1fr auto;
	break-inside: avoid;
}
.masonry-item:first-child {
	margin-top: 0;
}
.masonry-item:last-child {
	margin-bottom: 0;
}

/*
	CARD
*/
.card {
	background-color: transparent !important;
}
.card-hover {
	border-top: 1px solid rgba(255, 255, 255, 0);
	background-color: rgba(255, 255, 255, 0);
	width: 100%;
	position: absolute;
	bottom: 0;
	visibility: hidden;
	opacity: 0;
	transition: 0.5s;
	backdrop-filter: blur(6px);
	-webkit-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}
.card:hover .card-hover {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	visibility: visible;
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 0 0 10px 10px;
}
.card-hover .date {
	font-size: 12px;
	color: #fff;
}
.card-hover h4 {
	color: #fff;
	text-shadow: 1px 1px 1px #000000;
}

.card-image img {
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

footer {
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0.5) 0%,
		rgba(0,0,0,0.35) 30%,
		rgba(0,0,0,0.15) 60%,
		rgba(0,0,0,0) 100%
	);
	/* background-color: #1C1C1C; */
	padding: 50px;
}

footer .copyright { 
	padding: 24px;
	color: #787878;
}


/*
	MEDIA
*/
@media screen and ( max-width: 575.98px ) {
	.masonry-content { column-count: 1; }
	.post-header { height: 150px; }
	.featuredImage { height: 150px; }
}

@media screen and ( min-width: 576px ) {
	.masonry-content { column-count: 1; }
	.post-header { height: 150px; }
	.featuredImage { height: 150px; }
}

@media screen and ( min-width: 768px ) {
	.masonry-content { column-count: 2; }
	.post-header { height: 150px; }
	.featuredImage { height: 150px; }
}

@media screen and ( min-width: 992px ) {
	.masonry-content { column-count: 3; }
	.post-header { height: 300px; }
	.featuredImage { height: 300px; }
}

@media screen and ( min-width: 1200px ) {
	.masonry-content { column-count: 4; }
	.post-header { height: 300px; }
	.featuredImage { height: 300px; }
}

@media screen and ( min-width: 1400px ) {
	.masonry-content { column-count: 4; }
	.post-header { height: 300px; }
	.featuredImage { height: 300px; }
}