/* QB - Fahwa Projects — widget
 * QB Studio — qusai.dev
 */
.qb-fp{
	--qb-fp-accent:#C8973B;
	--qb-fp-ink:#1A1A1A;
	--qb-fp-cols:3;
	--qb-fp-gap:22px;
	--qb-fp-radius:16px;
	--qb-fp-h:300px;
	position:relative;width:100%;
}

/* Header */
.qb-fp__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap;}
.qb-fp__mark{display:block;width:46px;height:6px;border-radius:6px;background:var(--qb-fp-accent);position:relative;margin-bottom:14px;}
.qb-fp__mark::before{content:"";position:absolute;top:0;inset-inline-start:-16px;width:10px;height:6px;border-radius:6px;background:var(--qb-fp-accent);opacity:.55;}
.qb-fp__title{margin:0;font-size:44px;line-height:1.05;font-weight:800;letter-spacing:-.02em;color:var(--qb-fp-ink);}
.qb-fp__title-hl{color:var(--qb-fp-accent);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:600;}
.qb-fp__viewall{
	display:inline-flex;align-items:center;gap:8px;
	padding:12px 22px;border-radius:999px;border:1.5px solid rgba(0,0,0,.18);
	color:var(--qb-fp-ink);font-size:14px;font-weight:600;text-decoration:none;
	transition:all .25s ease;white-space:nowrap;
}
.qb-fp__viewall svg{transition:transform .25s ease;}
.qb-fp__viewall:hover{border-color:var(--qb-fp-accent);color:var(--qb-fp-accent);}
.qb-fp__viewall:hover svg{transform:translate(2px,-2px);}

/* Filter chips */
.qb-fp__filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.qb-fp__chip{
	border:1.5px solid rgba(0,0,0,.12);background:transparent;
	padding:9px 18px;border-radius:999px;cursor:pointer;
	font-size:13.5px;font-weight:600;color:#555;
	transition:all .22s ease;
}
.qb-fp__chip:hover{border-color:var(--qb-fp-accent);color:var(--qb-fp-ink);}
.qb-fp__chip.is-active{background:var(--qb-fp-accent);border-color:var(--qb-fp-accent);color:#fff;box-shadow:0 8px 18px rgba(200,151,59,.3);}

/* Viewport */
.qb-fp__viewport{position:relative;}

/* Grid + featured share item styling */
.qb-fp--grid .qb-fp__grid,
.qb-fp--featured .qb-fp__grid{display:grid;gap:var(--qb-fp-gap);}
.qb-fp--grid .qb-fp__grid{grid-template-columns:repeat(var(--qb-fp-cols),minmax(0,1fr));}
.qb-fp--featured .qb-fp__grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:var(--qb-fp-h);}

/* Slider */
.qb-fp--slider .qb-fp__grid{
	display:flex;gap:var(--qb-fp-gap);overflow-x:auto;
	scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none;
}
.qb-fp--slider .qb-fp__grid::-webkit-scrollbar{display:none;}
.qb-fp--slider .qb-fp__item{
	flex:0 0 calc((100% - (var(--qb-fp-cols) - 1) * var(--qb-fp-gap)) / var(--qb-fp-cols));
	scroll-snap-align:start;height:var(--qb-fp-h);
}

/* Card */
.qb-fp__item{
	position:relative;display:block;overflow:hidden;
	border-radius:var(--qb-fp-radius);
	background:#1a1a1a;text-decoration:none;
	min-height:var(--qb-fp-h);
	box-shadow:0 10px 30px rgba(20,20,20,.10);
	transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.qb-fp--grid .qb-fp__item,.qb-fp--slider .qb-fp__item{height:var(--qb-fp-h);}
.qb-fp__item:hover{transform:translateY(-6px);box-shadow:0 26px 52px rgba(20,20,20,.22);}
.qb-fp__media{position:absolute;inset:0;}
.qb-fp__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.qb-fp__img--ph{background:linear-gradient(135deg,#243244,#c8973b);}
.qb-fp__item:hover .qb-fp__img{transform:scale(1.08);}
.qb-fp__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,12,.86) 0%,rgba(10,10,12,.35) 42%,rgba(10,10,12,0) 70%);transition:opacity .35s ease;}
.qb-fp__item:hover .qb-fp__scrim{opacity:.96;}
.qb-fp__c{position:absolute;inset-inline:0;bottom:0;padding:26px 26px 24px;z-index:2;}
.qb-fp__c-cat{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--qb-fp-accent);margin-bottom:8px;}
.qb-fp__c-title{margin:0;color:#fff;font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.2;transform:translateY(4px);transition:transform .35s ease;}
.qb-fp__item:hover .qb-fp__c-title{transform:translateY(0);}
.qb-fp__arrow{
	position:absolute;top:18px;inset-inline-end:18px;z-index:3;
	width:40px;height:40px;border-radius:50%;
	background:rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#fff;
	display:flex;align-items:center;justify-content:center;
	opacity:0;transform:translateY(-6px) scale(.9);
	transition:all .35s ease;
}
[dir="rtl"] .qb-fp__arrow svg{transform:scaleX(-1);}
.qb-fp__item:hover .qb-fp__arrow{opacity:1;transform:none;background:var(--qb-fp-accent);}

/* Filtering states */
.qb-fp__item.is-hidden{display:none;}
.qb-fp__item.is-filtering{opacity:0;transform:scale(.96);}

/* Nav arrows (slider) */
.qb-fp__nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:5;
	width:48px;height:48px;border:0;border-radius:50%;background:var(--qb-fp-accent);color:#fff;
	display:flex;align-items:center;justify-content:center;cursor:pointer;
	box-shadow:0 10px 24px rgba(200,151,59,.35);transition:transform .2s ease,filter .2s ease,opacity .2s ease;
}
.qb-fp__nav:hover{filter:brightness(1.06);transform:translateY(-50%) scale(1.06);}
.qb-fp__nav:disabled{opacity:.4;cursor:default;}
.qb-fp__nav--prev{inset-inline-start:-24px;}
.qb-fp__nav--next{inset-inline-end:-24px;}
[dir="rtl"] .qb-fp__nav svg{transform:scaleX(-1);}

/* Entrance */
.qb-fp-anim{opacity:0;transform:translateY(26px);}
.qb-fp-anim.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 80ms);}

.qb-fp-empty{padding:40px;text-align:center;color:#888;border:1px dashed #ccc;border-radius:12px;}

/* Responsive */
@media(max-width:1024px){
	.qb-fp__title{font-size:34px;}
	.qb-fp__nav--prev{inset-inline-start:-8px;}
	.qb-fp__nav--next{inset-inline-end:-8px;}
	.qb-fp--featured .qb-fp__grid{grid-auto-rows:calc(var(--qb-fp-h) * .8);}
}
@media(max-width:767px){
	.qb-fp__title{font-size:27px;}
	.qb-fp__head{align-items:flex-start;}
	/* featured collapses to single column stack */
	.qb-fp--featured .qb-fp__grid{grid-template-columns:1fr;grid-auto-rows:var(--qb-fp-h);}
	.qb-fp--featured .qb-fp__item{grid-column:1 !important;grid-row:auto !important;}
	.qb-fp__c-title{font-size:19px;}
	.qb-fp__nav{width:42px;height:42px;}
}
@media (prefers-reduced-motion: reduce){
	.qb-fp-anim{opacity:1;transform:none;transition:none;}
	.qb-fp__item,.qb-fp__img,.qb-fp__arrow,.qb-fp__c-title{transition:none;}
}
