/* Gallery page (Life at HCET): filters, mosaic grid, smooth reveal, viewer */
.gl { --gl-navy:#0a2d6e; --gl-deep:#061a40; --gl-soft:#e8eefb; --gl-line:#dbe3f3; --gl-ink:#16233f; --gl-mute:#5b6a88;
  background:#f5f8fe; padding-bottom:72px; color:var(--gl-ink); }
.gl *, .gl *::before, .gl *::after { box-sizing:border-box; }
.gl-wrap { width:min(1240px, 100% - 32px); margin-inline:auto; }

/* ── sticky filter bar ── */
.gl-bar { position:sticky; top:0; z-index:30; background:rgba(245,248,254,.92); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--gl-line); padding:14px 0 10px; transition:box-shadow .25s; }
.gl-bar.is-stuck { box-shadow:0 10px 26px -18px rgba(6,26,64,.55); }
.gl-bar__in { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.gl-tabs { position:relative; display:inline-flex; background:#fff; border:1px solid var(--gl-line); border-radius:999px; padding:4px; box-shadow:0 6px 18px -14px rgba(6,26,64,.5); }
.gl-tab { position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; border:0; background:none; padding:9px 18px; border-radius:999px;
  font:600 .92rem/1 inherit; font-family:inherit; color:var(--gl-mute); cursor:pointer; transition:color .25s; }
.gl-tab svg { width:16px; height:16px; fill:currentColor; }
.gl-tab b { font-weight:700; font-size:.72rem; background:var(--gl-soft); color:var(--gl-navy); border-radius:999px; padding:3px 8px; transition:background .25s, color .25s; }
.gl-tab:hover { color:var(--gl-navy); }
.gl-tab.is-on { color:#fff; }
.gl-tab.is-on b { background:rgba(255,255,255,.2); color:#fff; }
.gl-tabs__glow { position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:0; border-radius:999px; background:linear-gradient(135deg,var(--gl-navy),#1747a8);
  box-shadow:0 8px 18px -8px rgba(10,45,110,.8); transition:transform .35s cubic-bezier(.3,.8,.3,1), width .35s cubic-bezier(.3,.8,.3,1); }
.gl-search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--gl-line); border-radius:999px; padding:0 16px; min-width:min(320px,100%); flex:0 1 340px; transition:border-color .2s, box-shadow .2s; }
.gl-search:focus-within { border-color:var(--gl-navy); box-shadow:0 0 0 4px rgba(10,45,110,.12); }
.gl-search svg { width:20px; height:20px; fill:var(--gl-mute); flex:none; }
.gl-search input { border:0; outline:0; background:none; width:100%; padding:11px 0; font:500 .95rem inherit; font-family:inherit; color:var(--gl-ink); }

.gl-chips { display:flex; gap:8px; overflow-x:auto; padding:12px 0 4px; scrollbar-width:thin; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.gl-chips::-webkit-scrollbar { height:6px; } .gl-chips::-webkit-scrollbar-thumb { background:#c9d4ec; border-radius:6px; }
.gl-chip { flex:none; border:1px solid var(--gl-line); background:#fff; color:#34436a; border-radius:999px; padding:8px 15px; font:600 .85rem/1 inherit; font-family:inherit; cursor:pointer;
  transition:transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s; white-space:nowrap; }
.gl-chip small { opacity:.65; font-weight:700; margin-left:5px; }
.gl-chip:hover { transform:translateY(-2px); border-color:var(--gl-navy); color:var(--gl-navy); box-shadow:0 8px 16px -12px rgba(10,45,110,.7); }
.gl-chip.is-on { background:var(--gl-navy); border-color:var(--gl-navy); color:#fff; }

.gl-status { margin:22px 0 14px; color:var(--gl-mute); font-size:.92rem; min-height:1.3em; }
.gl-status b { color:var(--gl-navy); }

/* ── mosaic grid ── */
.gl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows:200px; grid-auto-flow:dense; gap:14px; transition:opacity .25s, transform .25s; }
.gl-grid.is-swap { opacity:0; transform:translateY(8px); }
@media (min-width:900px) {
  .gl-item.is-big { grid-column:span 2; grid-row:span 2; }
  .gl-item.is-wide { grid-column:span 2; }
}
@media (max-width:640px) { .gl-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:10px; } }

.gl-item { position:relative; display:block; padding:0; border:0; border-radius:16px; overflow:hidden; cursor:pointer; background:linear-gradient(110deg,#e4eaf7 30%,#f3f6fd 50%,#e4eaf7 70%); background-size:200% 100%;
  animation:glIn .55s cubic-bezier(.2,.8,.2,1) both, glShimmer 1.4s linear infinite; animation-delay:calc(var(--i,0) * 45ms), 0s;
  box-shadow:0 10px 24px -18px rgba(6,26,64,.6); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; contain:layout paint; text-align:left; font:inherit; }
.gl-item.is-loaded { animation:glIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 45ms); background:#dfe6f5; }
.gl-item:hover, .gl-item:focus-visible { transform:translateY(-5px) scale(1.012); box-shadow:0 22px 34px -20px rgba(6,26,64,.75); outline:0; z-index:2; }
.gl-item:focus-visible { box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--gl-navy); }
.gl-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); filter:blur(8px);
  transition:opacity .6s ease, transform 1s cubic-bezier(.2,.8,.2,1), filter .6s ease; }
.gl-item.is-loaded img { opacity:1; transform:scale(1); filter:none; }
.gl-item:hover img { transform:scale(1.07); }
.gl-item__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,26,64,0) 45%,rgba(6,26,64,.82)); opacity:.0; transition:opacity .35s; }
.gl-item:hover .gl-item__shade, .gl-item:focus-visible .gl-item__shade { opacity:1; }
.gl-item__txt { position:absolute; left:0; right:0; bottom:0; padding:14px 15px; color:#fff; transform:translateY(12px); opacity:0; transition:transform .35s, opacity .35s; }
.gl-item:hover .gl-item__txt, .gl-item:focus-visible .gl-item__txt { transform:none; opacity:1; }
.gl-item__txt strong { display:block; font-size:.95rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gl-item__txt span { display:block; font-size:.74rem; opacity:.82; margin-top:3px; letter-spacing:.03em; }
@media (hover:none) { .gl-item__shade { opacity:.55; } .gl-item__txt { opacity:1; transform:none; } .gl-item__txt span { display:none; } }
.gl-item__tag { position:absolute; top:10px; left:10px; background:rgba(6,26,64,.72); backdrop-filter:blur(6px); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border-radius:999px; }
.gl-item__play { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.gl-item__play i { width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.94); display:grid; place-items:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.55); transition:transform .3s; position:relative; }
.gl-item__play i::after { content:''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(255,255,255,.6); animation:glPulse 2s ease-out infinite; }
.gl-item__play svg { width:26px; height:26px; fill:var(--gl-navy); margin-left:3px; }
.gl-item:hover .gl-item__play i { transform:scale(1.12); }

@keyframes glIn { from { opacity:0; transform:translateY(22px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes glShimmer { to { background-position:-200% 0; } }
@keyframes glPulse { 0% { transform:scale(.9); opacity:.9; } 100% { transform:scale(1.45); opacity:0; } }

/* skeletons while a new filter loads */
.gl-skel { border-radius:16px; background:linear-gradient(110deg,#e4eaf7 30%,#f3f6fd 50%,#e4eaf7 70%); background-size:200% 100%; animation:glShimmer 1.3s linear infinite; }

/* ── bottom: loading, end, empty ── */
.gl-more { display:flex; justify-content:center; align-items:center; padding:34px 0 8px; min-height:80px; }
.gl-spin { width:34px; height:34px; border-radius:50%; border:3px solid #cfd9f0; border-top-color:var(--gl-navy); animation:glSpin .8s linear infinite; opacity:0; transition:opacity .2s; }
.gl-more.is-loading .gl-spin { opacity:1; }
@keyframes glSpin { to { transform:rotate(360deg); } }
.gl-end { color:var(--gl-mute); font-weight:600; font-size:.9rem; padding:8px 18px; border-radius:999px; background:#fff; border:1px solid var(--gl-line); }
.gl-btn { border:0; cursor:pointer; background:var(--gl-navy); color:#fff; font:600 .92rem inherit; font-family:inherit; padding:11px 22px; border-radius:999px; transition:background .2s, transform .2s; }
.gl-btn:hover { background:var(--gl-deep); transform:translateY(-2px); }
.gl-empty { text-align:center; padding:70px 16px; color:var(--gl-mute); animation:glIn .5s both; }
.gl-empty svg { width:64px; height:64px; fill:#b8c6e6; }
.gl-empty h3 { color:var(--gl-deep); margin:14px 0 6px; font-size:1.3rem; }
.gl-empty .gl-btn { margin-top:14px; }

/* ── viewer ── */
.gl-lb { position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; }
.gl-lb[hidden] { display:none; }
.gl-lb__bg { position:absolute; inset:0; background:rgba(4,12,32,.94); backdrop-filter:blur(8px); animation:glFade .3s both; }
.gl-lb__fig { position:relative; margin:0; width:min(1100px, 92vw); height:min(76vh, 760px); display:flex; align-items:center; justify-content:center; animation:glZoom .4s cubic-bezier(.2,.8,.2,1) both; }
.gl-lb__fig img, .gl-lb__fig iframe { max-width:100%; max-height:100%; border:0; border-radius:12px; box-shadow:0 30px 70px -20px rgba(0,0,0,.7); background:#000; }
.gl-lb__fig img { object-fit:contain; animation:glFade .35s both; }
.gl-lb__fig iframe { width:100%; height:100%; }
.gl-lb__fig .gl-lb__spin { position:absolute; width:40px; height:40px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; animation:glSpin .8s linear infinite; }
.gl-lb__fig.is-left img, .gl-lb__fig.is-left iframe { animation:glLeft .35s both; }
.gl-lb__fig.is-right img, .gl-lb__fig.is-right iframe { animation:glRight .35s both; }
.gl-lb__cap { position:absolute; left:0; right:0; bottom:0; padding:18px 20px 22px; text-align:center; color:#fff; display:flex; flex-direction:column; gap:3px; align-items:center; }
.gl-lb__cap b { font-size:1.05rem; } .gl-lb__cap span { font-size:.82rem; opacity:.75; } .gl-lb__cap em { font-style:normal; font-size:.76rem; opacity:.6; letter-spacing:.08em; }
.gl-lb__x, .gl-lb__nav { position:absolute; z-index:3; border:0; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; border-radius:50%; width:48px; height:48px; display:grid; place-items:center; transition:background .2s, transform .2s; }
.gl-lb__x svg, .gl-lb__nav svg { width:26px; height:26px; fill:currentColor; }
.gl-lb__x { top:18px; right:18px; } .gl-lb__prev { left:18px; top:50%; margin-top:-24px; } .gl-lb__next { right:18px; top:50%; margin-top:-24px; }
.gl-lb__x:hover, .gl-lb__nav:hover { background:rgba(255,255,255,.28); transform:scale(1.08); }
@media (max-width:640px) { .gl-lb__nav { width:42px; height:42px; } .gl-lb__prev { left:6px; } .gl-lb__next { right:6px; } .gl-lb__fig { height:64vh; } }
@keyframes glFade { from { opacity:0; } to { opacity:1; } }
@keyframes glZoom { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:none; } }
@keyframes glLeft { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:none; } }
@keyframes glRight { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:none; } }
html.gl-lock, html.gl-lock body { overflow:hidden; }

@media (prefers-reduced-motion:reduce) {
  .gl *, .gl *::before, .gl *::after { animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; }
}

html.gl-lock #hxc, html.gl-lock .hx-progress { display:none !important; }
/* the viewer sits in <body>, so it needs the page colours itself */
.gl-lb { --gl-navy:#0a2d6e; font-family:inherit; }