/* ============ W DENTAL — Smile Gallery (gallery pages only) ============ */

/* Hero (reuses .hero; shorter than the full-height home hero) */
.gl-hero{min-height:560px}
.gl-hero .hero-img{object-position:center 35%}

/* Gallery grid */
.gl-gallery{background:#fff;padding:54px 0 96px}
.gl-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.gl-filter{background:none;border:1px solid #e0e0e0;border-radius:30px;padding:9px 22px;
  font-family:var(--sans);font-size:14.5px;color:#5c5c5c;cursor:pointer;transition:.2s}
.gl-filter:hover{border-color:var(--black);color:var(--black)}
.gl-filter.is-active{background:var(--black);border-color:var(--black);color:#fff}

.gl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.gl-item{display:block}

/* before/after slider (reuses .ba; taller card for the grid) */
.gl-ba{aspect-ratio:16 / 9;border-radius:14px;background:linear-gradient(135deg,#3a3a3a,#1c1c1c)}
.gl-ba .ba-before{clip-path:inset(0 50% 0 0)}

/* tag strip across the bottom of each slider */
.gl-tags{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.gl-tags span{flex:1;min-width:0;text-align:center;color:#fff;font-size:12.5px;
  padding:11px 8px;border-left:1px solid rgba(255,255,255,.16);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-tags span:first-child{border-left:none}

@media(max-width:760px){
  .gl-grid{grid-template-columns:1fr}
}
/* mobile: category filters scroll horizontally (finger swipe) instead of wrapping */
@media(max-width:768px){
  .gl-filters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-bottom:32px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gl-filters::-webkit-scrollbar{display:none}
  .gl-filter{flex:0 0 auto;white-space:nowrap}
}