/**
 * AR Gallery Filter Pro
 * Frontend Styles
 */

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/

:root{
	--agfp-primary:#1f1f1f;
	--agfp-secondary:#6b6b6b;
	--agfp-border:#d8d3cc;
	--agfp-background:#f8f6f2;
	--agfp-white:#ffffff;
	--agfp-radius:8px;
	--agfp-transition:.3s ease;
}

/*--------------------------------------------------------------
# Wrapper
--------------------------------------------------------------*/

.agfp-wrapper{
	max-width:1400px;
	margin:0 auto;
	padding:40px 20px;
}

/*--------------------------------------------------------------
# Filter
--------------------------------------------------------------*/

.agfp-filter-wrapper{
	margin-bottom:60px;
}

.agfp-filter-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px;
}

.agfp-filter-item label{
	display:block;
	margin-bottom:10px;
	font-size:12px;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:1.5px;
	color:var(--agfp-secondary);
}

.agfp-filter-item select {
    width: 100%;
    height: 44px;
    padding: 0 42px 0 16px;
    border: 1px solid #d8d0c7;
    background: #fff;
    color: #3b342d;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

.agfp-filter-item select:hover{

	border-color:#888;

}

.agfp-filter-item select:focus{

	border-color:#111;

}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.agfp-filter-footer{

	display:flex;

	align-items:center;

	justify-content:space-between;

	margin-top:25px;

	padding-top:20px;

	border-top:1px solid #ececec;

}

.agfp-results-count{

	font-size:13px;

	font-weight:600;

	letter-spacing:1px;

	text-transform:uppercase;

}

.agfp-reset{

	background:none;

	border:none;

	cursor:pointer;

	font-size:13px;

	font-weight:600;

	text-transform:uppercase;

}

.agfp-reset:hover{

	text-decoration:underline;

}

/*--------------------------------------------------------------
# Grid
--------------------------------------------------------------*/

.agfp-grid{

	display:grid;

	grid-template-columns:repeat(4,1fr);

	gap:40px;

}

/*--------------------------------------------------------------
# Card
--------------------------------------------------------------*/

.agfp-card{

	display:block;

	text-decoration:none;

	color:inherit;

	transition:.35s ease;

}

.agfp-card:hover{

	transform:translateY(-6px);

}

/*--------------------------------------------------------------
# Image
--------------------------------------------------------------*/

.agfp-image{

	overflow:hidden;

	border-radius:12px;

	background:#f3f3f3;

}

.agfp-image img{

	width:100%;

	aspect-ratio:4/5;

	object-fit:cover;

	display:block;

	transition:.5s ease;

}

.agfp-card:hover .agfp-image img{

	transform:scale(1.05);

}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

.agfp-content{

	padding-top:22px;

}

.agfp-week{

	font-size:12px;

	font-weight:600;

	letter-spacing:2px;

	text-transform:uppercase;

	color:#7a6d63;

	margin-bottom:12px;

}

.agfp-title{

	font-size:32px;

	line-height:1.2;

	font-weight:500;

	margin:0 0 15px;

}

.agfp-meta{

	font-size:12px;

	font-weight:600;

	letter-spacing:2px;

	text-transform:uppercase;

	color:#777;

}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width:1024px){

	.agfp-filter-grid{

		grid-template-columns:repeat(2,1fr);

	}

	.agfp-grid{

		grid-template-columns:repeat(2,1fr);

	}

}

@media (max-width:767px){

	.agfp-filter-grid{

		grid-template-columns:1fr;

	}

	.agfp-grid{

		grid-template-columns:1fr;

	}

	.agfp-filter-footer{

		flex-direction:column;

		align-items:flex-start;

		gap:15px;

	}

	.agfp-title{

		font-size:24px;

	}

}

.agfp-grid{

	position:relative;

	transition:.3s ease;

}

.agfp-loading{

	opacity:.4;

	pointer-events:none;

}
.agfp-category{
	font-size:12px;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:2px;
	color:#b46a4a;
	margin-bottom:12px;
}

.agfp-title{
	margin:0 0 15px;
	font-size:34px;
	line-height:1.2;
	font-weight:500;
}

.agfp-meta{
	font-size:12px;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:2px;
	color:#777;
}

.agfp-meta span{
	display:inline-block;
}


/*==================================================
Sticky Filter
==================================================*/

.agfp-gallery-section{
	position:relative;
}

.agfp-filter-sticky{
	position:sticky;
	top:0;
	z-index:999;
	background:#f8f6f2;
	padding:20px 0;
	border-bottom:1px solid #e4ddd3;
}