/*
 Theme Name:     Andrea Barbieri 2024 Hillmann
 Description:    Custom theme for andreabarbieri.net. Home page boxes like on Hans Hillmann's website
 Author:         Andrea Barbieri
 Author URI:     www.andreabarbieri.net
 Template:       twentytwentyfour
*/



/* Masonry, Infinite Scroll */
/* fluid 2 columns mobile / 3 columns desktop */
.grid-sizer,
.grid-item { 
	width: 48%; 
}
.grid-item { 
	margin-bottom: min(calc((1280px / 100) * 2), (calc((100vw - var(--wp--style--root--padding-right) - var(--wp--style--root--padding-left))) / 100 * 2)); 
}
.gutter-sizer { width: 3%; }
/* 2 columns wide */
.grid-item--width2 { width: 100%; }

@media (min-width:1024px) {
	.grid-sizer,
	.grid-item { 
		width: 31.33%; 
	}
	.grid-item { 
		margin-bottom: min(calc((1280px / 100) * 3), (calc((100vw - var(--wp--style--root--padding-right) - var(--wp--style--root--padding-left))) / 100 * 3)); 
	}
	.gutter-sizer { width: 3%; }
	/* 2 columns wide */
	.grid-item--width2 { width: 65.67%; }
}

:root {
	--color-dark-bkgr: rgb(72,72,72);
	--color-dark-bkgr-opaque: rgba(72,72,72,0.8);
	--color-black-opaque: rgba(0, 0, 0, 0.9);
	--color-off-white: rgb(231,231,231);
	--transition-opacity-front-page: opacity .3s ease-out;
}


/* HOME */

.front-query {
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	max-width: var(--wp--style--global--wide-size) !important;
	padding: 0;
}

.nav-previous, .nav-next {display:none;}

.grid-sizer,
.gutter-sizer, 
.post-container { list-style: none; }

.post-container {
	color:white;
	text-align:center;
	overflow: hidden;
	border-radius: 12px;
}

.post-container::before {
	content: '';
	position: absolute;
	z-index: 9;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	background: var(--color-black-opaque);
	transition: var(--transition-opacity-front-page);
}

@media (min-width:1024px) {
	.post-container:hover::before {opacity:0.9;}
	.post-container:hover .post-info {opacity: 1;}
}

.post-trigger {
	position:relative;
	overflow:hidden;
	display: block;
	cursor:pointer;
}

.post-container figure {
	margin:0;
	font-size:0;
	position:relative;
	z-index:8;
}

.post-container img {
	width:100%;
	height:auto;
	border-radius: 12px 12px 0 0;
}

.post-info {
	color:var(--color-off-white);
	position:absolute;
	opacity:0;
	z-index:11;
	top:0;
	left:0;
	width:100%;
	border-radius: 0 0 12px 12px;
	padding: 0.66rem;
	width: 100%;
	box-sizing: border-box;
	padding:1rem;
	transition: var(--transition-opacity-front-page);
}


/* SINGLE */

img {
	max-width:100%;
	height:auto;
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
/* 	max-width: var(--wp--style--global--wide-size); */
}