/* QB - Partners Logos — grid + slider
 * QB Studio — qusai.dev
 * Brand: Staitieh Decoration (blue #125BA8) — Plus Jakarta Sans
 */
.qb-pl{
	--qb-pl-accent:#125BA8;
	--qb-pl-tile-bg:#FFFFFF;
	--qb-pl-line:#E4EAF1;
	--qb-pl-radius:18px;
	--qb-pl-tile-h:132px;
	--qb-pl-tile-w:190px;
	--qb-pl-logo-h:74px;
	--qb-pl-gap:30px;
	--qb-pl-speed:38s;
	--qb-pl-idle-op:.72;
	position:relative;width:100%;
	font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.qb-pl *{box-sizing:border-box;}

/* ---- Header ---- */
.qb-pl__head{display:flex;flex-direction:column;margin-bottom:34px;}
.qb-pl__eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--qb-pl-accent);margin-bottom:12px;}
.qb-pl__mark{display:inline-block;width:24px;height:3px;border-radius:3px;background:var(--qb-pl-accent);}
.qb-pl__head[style*="center"] .qb-pl__eyebrow{justify-content:center;}
.qb-pl__title{margin:0;font-size:clamp(26px,3.4vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:#14181D;}
.qb-pl__title-hl{color:var(--qb-pl-accent);}

/* ---- Shared tile ---- */
.qb-pl__tile{
	position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-decoration:none;overflow:hidden;
	transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .3s ease,background .3s ease;
}
.qb-pl__media{flex:1 1 auto;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;}
.qb-pl__name{
	display:block;width:100%;margin-top:10px;text-align:center;
	font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:#14181D;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	transition:color .3s ease;
}
.qb-pl__tile:hover .qb-pl__name{color:var(--qb-pl-accent);}
.qb-pl__logo{
	display:block;max-width:82%;max-height:var(--qb-pl-logo-h);width:auto;height:auto;object-fit:contain;
	transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .45s ease,opacity .45s ease;
}
/* grayscale + dim until hover */
.qb-pl.is-grayscale .qb-pl__logo{filter:grayscale(1);opacity:var(--qb-pl-idle-op);}
.qb-pl.is-grayscale .qb-pl__tile:hover .qb-pl__logo{filter:grayscale(0);opacity:1;}
.qb-pl:not(.is-grayscale) .qb-pl__logo{opacity:var(--qb-pl-idle-op);}
.qb-pl:not(.is-grayscale) .qb-pl__tile:hover .qb-pl__logo{opacity:1;}

/* tile styles */
.qb-pl.tile-card .qb-pl__tile{background:var(--qb-pl-tile-bg);border:1px solid var(--qb-pl-line);border-radius:var(--qb-pl-radius);}
.qb-pl.tile-soft .qb-pl__tile{background:#F4F7FB;border:1px solid transparent;border-radius:var(--qb-pl-radius);}
.qb-pl.tile-plain .qb-pl__tile{background:transparent;border-radius:var(--qb-pl-radius);}

/* hover fx */
.qb-pl.fx-lift .qb-pl__tile:hover,
.qb-pl.fx-both .qb-pl__tile:hover{transform:translateY(-6px);box-shadow:0 22px 44px -24px rgba(18,91,168,.5);border-color:rgba(18,91,168,.35);}
.qb-pl.tile-plain.fx-lift .qb-pl__tile:hover,
.qb-pl.tile-plain.fx-both .qb-pl__tile:hover{background:#F4F7FB;box-shadow:none;}
.qb-pl.fx-zoom .qb-pl__tile:hover .qb-pl__logo,
.qb-pl.fx-both .qb-pl__tile:hover .qb-pl__logo{transform:scale(1.09);}

/* ============ GRID ============ */
.qb-pl__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:stretch;}
.qb-pl--grid .qb-pl__tile{height:var(--qb-pl-tile-h);padding:18px;}
.qb-pl--grid .qb-pl__tile.has-name{height:auto;min-height:var(--qb-pl-tile-h);padding:20px 18px;}
.qb-pl--grid .qb-pl__tile.has-name .qb-pl__media{min-height:calc(var(--qb-pl-logo-h) + 20px);}

/* plain dividers */
.qb-pl--grid.tile-plain.has-dividers .qb-pl__grid{gap:0;}
.qb-pl--grid.tile-plain.has-dividers .qb-pl__tile{border-radius:0;box-shadow:inset -1px -1px 0 var(--qb-pl-line);}

/* ============ SLIDER (marquee) ============ */
.qb-pl__slider{display:flex;flex-direction:column;gap:var(--qb-pl-gap);overflow:hidden;}
.qb-pl--slider.edge-fade .qb-pl__slider{
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.qb-pl__marquee{overflow:hidden;}
.qb-pl__track{display:flex;align-items:center;gap:var(--qb-pl-gap);width:max-content;will-change:transform;}
.qb-pl__marquee[data-dir="rtl"] .qb-pl__track{animation:qbPlScrollLeft var(--qb-pl-speed) linear infinite;}
.qb-pl__marquee[data-dir="ltr"] .qb-pl__track{animation:qbPlScrollRight var(--qb-pl-speed) linear infinite;}
@keyframes qbPlScrollLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes qbPlScrollRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.qb-pl--slider.pause-hover .qb-pl__slider:hover .qb-pl__track{animation-play-state:paused;}

.qb-pl--slider .qb-pl__tile{flex:0 0 var(--qb-pl-tile-w);height:var(--qb-pl-tile-h);padding:16px 22px;}
.qb-pl--slider.tile-plain .qb-pl__tile{flex-basis:calc(var(--qb-pl-tile-w) - 24px);}

/* ---- Entrance ---- */
.qb-pl-anim{opacity:0;transform:translateY(22px);}
.qb-pl-anim.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 45ms);}
.qb-pl.no-anim .qb-pl-anim{opacity:1;transform:none;transition:none;}
/* slider tiles must never stay hidden (they scroll) */
.qb-pl--slider .qb-pl__tile.qb-pl-anim{opacity:1;transform:none;transition:none;}
.qb-pl--slider .qb-pl__tile.qb-pl-anim .qb-pl__logo{}

.qb-pl-empty{padding:32px;text-align:center;color:#8a94a1;border:1px dashed var(--qb-pl-line);border-radius:14px;}

/* ---- Responsive ---- */
@media(max-width:1024px){
	.qb-pl{--qb-pl-tile-h:118px;--qb-pl-logo-h:62px;--qb-pl-tile-w:168px;}
}
@media(max-width:767px){
	.qb-pl{--qb-pl-tile-h:104px;--qb-pl-logo-h:54px;--qb-pl-tile-w:150px;--qb-pl-gap:16px;}
	.qb-pl__head{margin-bottom:24px;}
	.qb-pl--slider.edge-fade .qb-pl__slider{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
}
@media(max-width:480px){
	.qb-pl{--qb-pl-tile-h:92px;--qb-pl-logo-h:46px;}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
	.qb-pl-anim{opacity:1 !important;transform:none !important;transition:none !important;}
	.qb-pl__tile,.qb-pl__logo{transition:none;}
	.qb-pl__track{animation:none !important;transform:none !important;}
	.qb-pl__marquee{overflow-x:auto;scrollbar-width:none;}
	.qb-pl__marquee::-webkit-scrollbar{display:none;}
}