/* =========================================================
   SP Filterable Portfolio — styles
   ======================================================= */

.spfp-wrap{
	--spfp-gold:#d8a93c;
	--spfp-gold-soft:#fdf6e7;
	--spfp-dark:#1c1c1c;
	--spfp-muted:#5f6368;
	--spfp-border:#e7e7ea;
}

/* ---------- Filters ---------- */
.spfp-filters{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	justify-content:center;
	margin-bottom:48px;
}
.spfp-filter{
	font:600 15px/1 inherit;
	font-family:inherit;
	color:var(--spfp-dark);
	background:#fff;
	border:1px solid var(--spfp-border);
	border-radius:8px;
	padding:16px 28px;
	cursor:pointer;
	transition:all .25s ease;
	box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.spfp-filter:hover,
.spfp-filter.is-active{
	background:var(--spfp-gold);
	border-color:var(--spfp-gold);
	color:#fff;
}
.spfp-count{font-weight:inherit;}

/* ---------- Grid ---------- */
.spfp-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:40px;
}
.spfp-card{
	background:#fff;
	border-radius:12px;
	overflow:hidden;
	box-shadow:0 6px 24px rgba(0,0,0,.07);
	cursor:pointer;
	display:flex;
	flex-direction:column;
	opacity:1;
	transform:scale(1);
	transition:opacity .35s ease, transform .35s ease, box-shadow .3s ease;
}
.spfp-card:hover{box-shadow:0 14px 36px rgba(0,0,0,.13);}
.spfp-card.spfp-hide{display:none;}
.spfp-card.spfp-anim-out{opacity:0;transform:scale(.94);}
.spfp-card.spfp-anim-in{opacity:0;transform:scale(.94);}

/* ---------- Card media ---------- */
.spfp-card-media{
	position:relative;
	height:320px;
	overflow:hidden;
}
.spfp-card-media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .6s ease;
}
.spfp-card:hover .spfp-card-media img{transform:scale(1.06);}

.spfp-card-badge{
	position:absolute;
	top:18px;
	right:18px;
	z-index:2;
	background:var(--spfp-gold);
	color:#fff;
	font-size:12px;
	font-weight:700;
	letter-spacing:.06em;
	padding:8px 14px;
	border-radius:6px;
}

.spfp-card-overlay{
	position:absolute;
	inset:0;
	background:rgba(20,20,20,.55);
	color:#fff;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:10px;
	opacity:0;
	transition:opacity .3s ease;
}
.spfp-card-overlay span{
	font-size:14px;
	font-weight:600;
	letter-spacing:.14em;
}
.spfp-card:hover .spfp-card-overlay{opacity:1;}

/* ---------- Card body ---------- */
.spfp-card-body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1;}
.spfp-card-title{
	margin:0 0 16px;
	font-size:24px;
	font-weight:700;
	color:var(--spfp-dark);
	line-height:1.3;
}
.spfp-card-meta{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	margin-bottom:18px;
}
.spfp-chip{
	background:#f5f5f7;
	color:var(--spfp-muted);
	font-size:14px;
	padding:8px 16px;
	border-radius:6px;
}
.spfp-card-desc{
	margin:0 0 22px;
	color:var(--spfp-muted);
	font-size:15.5px;
	line-height:1.65;
}
.spfp-card-tags{
	margin-top:auto;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.spfp-tag{
	font-size:13px;
	color:var(--spfp-gold);
	background:var(--spfp-gold-soft);
	border:1px solid #f0e2c4;
	padding:8px 14px;
	border-radius:6px;
}

/* =========================================================
   POPUP
   ======================================================= */
.spfp-modal{
	position:fixed;
	inset:0;
	z-index:99999;
	background:rgba(10,10,10,.85);
	display:none;
	align-items:center;
	justify-content:center;
	padding:30px;
}
.spfp-modal.is-open{display:flex;}
.spfp-modal-box{
	position:relative;
	background:#fff;
	width:100%;
	max-width:1300px;
	max-height:90vh;
	border-radius:14px;
	overflow:hidden;
	display:grid;
	grid-template-columns:1.55fr 1fr;
	animation:spfpPop .28s ease;
}
@keyframes spfpPop{
	from{opacity:0;transform:scale(.96) translateY(12px);}
	to{opacity:1;transform:scale(1) translateY(0);}
}

.spfp-modal-close{
	position:absolute;
	top:16px;
	right:18px;
	z-index:5;
	width:38px;
	height:38px;
	border:none;
	border-radius:50%;
	background:#fff;
	color:#222;
	font-size:15px;
	cursor:pointer;
	box-shadow:0 2px 10px rgba(0,0,0,.15);
	transition:transform .2s ease;
}
.spfp-modal-close:hover{transform:rotate(90deg);}

/* ---------- Left: slider ---------- */
.spfp-modal-slider{
	position:relative;
	background:#111;
	min-height:420px;
}
.spfp-slides{position:absolute;inset:0;}
.spfp-slide{
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity .35s ease;
	pointer-events:none;
}
.spfp-slide.is-active{opacity:1;pointer-events:auto;}
.spfp-slide img{width:100%;height:100%;object-fit:cover;display:block;}

.spfp-arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:4;
	width:44px;
	height:44px;
	border:none;
	border-radius:50%;
	background:rgba(255,255,255,.92);
	color:#222;
	font-size:18px;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .2s ease, transform .2s ease;
}
.spfp-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08);}
.spfp-prev{left:18px;}
.spfp-next{right:18px;}

.spfp-counter{
	position:absolute;
	left:50%;
	bottom:16px;
	transform:translateX(-50%);
	z-index:4;
	background:rgba(0,0,0,.6);
	color:#fff;
	font-size:13px;
	padding:6px 14px;
	border-radius:20px;
}

/* ---------- Right: content ---------- */
.spfp-modal-content{
	padding:44px 40px 36px;
	overflow-y:auto;
	max-height:90vh;
}
.spfp-modal-title{
	margin:0 0 18px;
	font-size:27px;
	font-weight:700;
	color:#1c1c1c;
	line-height:1.3;
}
.spfp-modal-meta{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:10px;
	margin-bottom:22px;
}
.spfp-modal-desc{
	margin:0 0 26px;
	color:#555;
	font-size:15px;
	line-height:1.75;
}
.spfp-modal-cats-wrap{margin-bottom:26px;}
.spfp-modal-cats-label{
	display:block;
	margin-bottom:12px;
	font-size:15px;
	color:#1c1c1c;
}
.spfp-modal-cats{display:flex;flex-wrap:wrap;gap:8px;}
.spfp-modal-cat{
	font-size:13px;
	color:var(--spfp-gold,#d8a93c);
	background:#fdf6e7;
	border:1px solid #f0e2c4;
	padding:7px 14px;
	border-radius:6px;
}

/* ---------- Thumbnails ---------- */
.spfp-thumbs{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.spfp-thumb{
	width:64px;
	height:50px;
	border-radius:6px;
	overflow:hidden;
	cursor:pointer;
	border:2px solid transparent;
	padding:0;
	background:none;
	transition:border-color .2s ease, opacity .2s ease;
	opacity:.85;
}
.spfp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.spfp-thumb:hover{opacity:1;}
.spfp-thumb.is-active{
	border-color:var(--spfp-gold,#d8a93c);
	opacity:1;
}

/* No-scroll body when popup open */
body.spfp-noscroll{overflow:hidden;}

/* =========================================================
   Responsive
   ======================================================= */
@media (max-width:1024px){
	.spfp-modal-box{grid-template-columns:1.2fr 1fr;}
}
@media (max-width:767px){
	.spfp-grid{grid-template-columns:1fr;}
	.spfp-modal{padding:14px;}
	.spfp-modal-box{
		grid-template-columns:1fr;
		max-height:94vh;
		overflow-y:auto;
		display:flex;
		flex-direction:column;
	}
	.spfp-modal-slider{min-height:280px;height:300px;flex:none;}
	.spfp-modal-content{padding:26px 22px;max-height:none;}
}