/* [tm_logo_gallery] on Sample Work - includes/portfolio/logo-gallery.php. Palette and type scale only. */
.tm-lg{position:relative;font-family:Poppins,sans-serif}
.tm-lg button{all:unset;box-sizing:border-box;cursor:pointer}
.tm-lg button:focus-visible{outline:3px solid #F57B20;outline-offset:3px}

/* The pages: a scroll-snap row, one page per view. JS groups the logos. */
.tm-lg-view{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:0}
.tm-lg-view::-webkit-scrollbar{display:none}
.tm-lg-track{display:flex}
.tm-lg-page{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:2px}
.tm-lg .tm-lg-item{display:block;aspect-ratio:4/3;background:#fff;border:1px solid #E1E4ED;border-radius:14px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.tm-lg .tm-lg-item:hover{transform:translateY(-3px);border-color:#B9CEFF;box-shadow:0 14px 30px rgba(27,33,80,.12)}
/* Absolute so the theme image rule (height:auto) cannot make the square logo taller than its tile. */
.tm-lg .tm-lg-item{position:relative}
.tm-lg .tm-lg-item img{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none;object-fit:contain!important;padding:6px}

/* Arrows and dots */
.tm-lg-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.tm-lg .tm-lg-prev,.tm-lg .tm-lg-next{width:44px;height:44px;border-radius:50%;background:#283071;color:#fff;display:grid;place-items:center;transition:background .2s ease,opacity .2s ease}
.tm-lg .tm-lg-prev:hover,.tm-lg .tm-lg-next:hover{background:#F57B20}
.tm-lg .tm-lg-prev[disabled],.tm-lg .tm-lg-next[disabled]{opacity:.3;cursor:default;background:#283071}
.tm-lg svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.tm-lg-prev svg,.tm-lg-bprev svg{transform:rotate(180deg)}
.tm-lg-dots{display:flex;gap:8px}
.tm-lg .tm-lg-dot{width:10px;height:10px;border-radius:50%;background:#E1E4ED;transition:background .2s ease,width .2s ease}
.tm-lg .tm-lg-dot.on{background:#F57B20;width:26px;border-radius:5px}

/* Lightbox */
.tm-lg-box{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow:hidden}
.tm-lg-box::backdrop{background:rgba(27,33,80,.82)}
.tm-lg-box[open]{display:grid;place-items:center}
.tm-lg-box figure{margin:0;background:#fff;border-radius:18px;padding:22px 22px 18px;width:min(460px,86vw);box-shadow:0 30px 70px rgba(0,0,0,.35);text-align:center}
.tm-lg-box figure img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.tm-lg .tm-lg-x{position:fixed;top:18px;right:18px;width:46px;height:46px;border-radius:50%;background:#fff;color:#283071;display:grid;place-items:center}
.tm-lg .tm-lg-bprev,.tm-lg .tm-lg-bnext{position:fixed;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;background:#fff;color:#283071;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.tm-lg .tm-lg-bprev{left:max(16px,calc(50% - 360px))}
.tm-lg .tm-lg-bnext{right:max(16px,calc(50% - 360px))}
.tm-lg .tm-lg-x:hover,.tm-lg .tm-lg-bprev:hover,.tm-lg .tm-lg-bnext:hover{background:#F57B20;color:#fff}
.tm-lg-pos{position:fixed;bottom:22px;left:0;right:0;margin:0;text-align:center;color:#B9CEFF;font-size:14px}

@media (max-width:767px){
	.tm-lg-page{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
	.tm-lg .tm-lg-item:hover{transform:none;box-shadow:none}
	.tm-lg .tm-lg-bprev,.tm-lg .tm-lg-bnext{top:auto;bottom:14px;margin-top:0;width:46px;height:46px}
	.tm-lg .tm-lg-bprev{left:16px}.tm-lg .tm-lg-bnext{right:16px}
	.tm-lg-pos{bottom:28px}
}
@media (prefers-reduced-motion:reduce){.tm-lg *{transition:none!important}}

/* Website cards (#tmpSites) on phones: one swipe row, one card per view, same nav as the logos. */
.tm-sw-nav{display:none}
@media (max-width:767px){
	#tmp .grid.tm-sw{display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:0;padding:2px}
	#tmp .grid.tm-sw::-webkit-scrollbar{display:none}
	#tmp .grid.tm-sw > *{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
	.tm-sw-nav{display:block}
}