/* =========================================================
   Gallery Page — loaded ONLY when the Gallery template is active.
   Uses the theme's existing CSS variables (--ie-primary, --ie-accent,
   --ie-radius, --ie-shadow, --ie-muted) so it always matches whatever
   brand colors are set in the Customizer, with zero extra config.
   ========================================================= */

.ie-showcase-hero{padding:70px 0 40px;}
.ie-showcase-hero h1{font-size:42px;margin-top:8px;}
.ie-showcase-intro{max-width:700px;margin:14px auto 0;color:var(--ie-muted);}

.ie-showcase{padding:20px 0 70px;}
.ie-showcase + .ie-showcase{padding-top:0;}

/* ---------- shared tile look ---------- */
.ie-showcase-cell{border-radius:var(--ie-radius);overflow:hidden;box-shadow:var(--ie-shadow);}
.ie-showcase-item{
	display:block;width:100%;height:100%;padding:0;margin:0;border:none;background:#1a1d24;
	cursor:pointer;position:relative;font:inherit;color:inherit;text-align:left;
}
.ie-showcase-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.ie-showcase-item:hover img{transform:scale(1.06);}
.ie-showcase-item:focus-visible{outline:3px solid var(--ie-accent);outline-offset:-3px;}

.ie-showcase-video{aspect-ratio:16/10;background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:center;}
.ie-showcase-play{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ie-primary);
	display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px;
	box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .25s;
}
.ie-showcase-item:hover .ie-showcase-play{transform:translate(-50%,-50%) scale(1.1);}
.ie-showcase-play-lg{width:78px;height:78px;font-size:28px;}
.ie-showcase-caption{
	position:relative;z-index:1;width:100%;padding:10px 14px;background:linear-gradient(transparent,rgba(0,0,0,.75));
	color:#fff;font-size:13px;font-weight:600;
}

/* ---------- GRID ---------- */
.ie-showcase-grid{
	display:grid;gap:22px;
	grid-template-columns:repeat(var(--ie-sc-cols,4),1fr);
}
.ie-showcase-grid .ie-showcase-cell{aspect-ratio:4/3;}
.ie-showcase-grid .ie-showcase-item,.ie-showcase-grid .ie-showcase-item img{height:100%;}

/* ---------- MASONRY (pure CSS, no JS layout cost) ---------- */
.ie-showcase-masonry{column-count:var(--ie-sc-cols,4);column-gap:22px;}
.ie-showcase-masonry .ie-showcase-cell{break-inside:avoid;margin-bottom:22px;}
.ie-showcase-masonry .ie-showcase-item{aspect-ratio:auto;}

/* ---------- CAROUSEL ---------- */
.ie-showcase-carousel-wrap{position:relative;display:flex;align-items:center;gap:10px;}
.ie-showcase-carousel{
	display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
	padding:4px 2px 14px;-webkit-overflow-scrolling:touch;
}
.ie-showcase-carousel::-webkit-scrollbar{height:6px;}
.ie-showcase-carousel::-webkit-scrollbar-thumb{background:var(--ie-accent);border-radius:6px;}
.ie-showcase-carousel .ie-showcase-cell{flex:0 0 clamp(220px,32vw,360px);aspect-ratio:4/3;scroll-snap-align:start;}
.ie-showcase-car-btn{
	flex-shrink:0;width:44px;height:44px;border-radius:50%;border:1px solid #e2e2e2;background:#fff;
	font-size:20px;cursor:pointer;box-shadow:var(--ie-shadow);color:var(--ie-primary);
}
.ie-showcase-car-btn:hover{background:var(--ie-primary);color:#fff;}
@media(max-width:700px){.ie-showcase-car-btn{display:none;}}

/* ---------- SPOTLIGHT ---------- */
.ie-showcase-spotlight{display:grid;grid-template-columns:2.4fr 1fr;gap:22px;align-items:start;}
.ie-showcase-spotlight-main{border-radius:var(--ie-radius);overflow:hidden;box-shadow:var(--ie-shadow);background:#1a1d24;position:relative;aspect-ratio:16/9;}
.ie-showcase-spotlight-main img{width:100%;height:100%;object-fit:cover;display:block;}
.ie-showcase-spotlight-poster{width:100%;height:100%;background-size:cover;background-position:center;position:relative;cursor:pointer;}
.ie-showcase-spotlight-caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 18px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:14px;}
.ie-showcase-spotlight-rail{display:flex;flex-direction:column;gap:12px;max-height:420px;overflow-y:auto;}
.ie-showcase-rail-item{
	border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;padding:0;
	aspect-ratio:16/10;background:#1a1d24;background-size:cover;background-position:center;position:relative;
}
.ie-showcase-rail-item img{width:100%;height:100%;object-fit:cover;display:block;}
.ie-showcase-rail-item.is-active{border-color:var(--ie-accent);}
.ie-showcase-rail-item .ie-showcase-play{width:34px;height:34px;font-size:13px;}
@media(max-width:800px){
	.ie-showcase-spotlight{grid-template-columns:1fr;}
	.ie-showcase-spotlight-rail{flex-direction:row;overflow-x:auto;overflow-y:visible;max-height:none;}
	.ie-showcase-rail-item{flex:0 0 120px;}
}

/* ---------- responsive column collapse for grid/masonry ---------- */
@media(max-width:900px){
	.ie-showcase-grid,.ie-showcase-masonry{--ie-sc-cols:2 !important;}
}
@media(max-width:520px){
	.ie-showcase-grid,.ie-showcase-masonry{--ie-sc-cols:1 !important;}
}

/* ---------- LIGHTBOX ---------- */
.ie-showcase-lightbox{
	position:fixed;inset:0;background:rgba(10,10,12,.94);z-index:9999;
	display:none;align-items:center;justify-content:center;flex-direction:column;padding:30px;
}
.ie-showcase-lightbox.is-open{display:flex;}
.ie-showcase-lb-stage{max-width:min(1100px,92vw);max-height:78vh;width:100%;display:flex;align-items:center;justify-content:center;}
.ie-showcase-lb-stage img,.ie-showcase-lb-stage video,.ie-showcase-lb-stage iframe{
	max-width:100%;max-height:78vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.ie-showcase-lb-stage iframe{width:min(900px,90vw);aspect-ratio:16/9;height:auto;}
.ie-showcase-lb-caption{color:#fff;margin-top:16px;font-size:14px;text-align:center;max-width:700px;min-height:1em;}
.ie-showcase-lb-close{position:absolute;top:18px;right:24px;background:none;border:none;color:#fff;font-size:34px;cursor:pointer;line-height:1;}
.ie-showcase-lb-nav{
	position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);color:#fff;
	border:none;width:50px;height:50px;border-radius:50%;font-size:26px;cursor:pointer;
}
.ie-showcase-lb-nav:hover{background:rgba(255,255,255,.25);}
.ie-showcase-lb-prev{left:18px;}
.ie-showcase-lb-next{right:18px;}
@media(max-width:600px){
	.ie-showcase-lb-nav{width:40px;height:40px;font-size:20px;}
	.ie-showcase-lb-close{top:10px;right:14px;font-size:28px;}
}

@media(prefers-reduced-motion:reduce){
	.ie-showcase-item img,.ie-showcase-play{transition:none;}
}