/* Gallery & stories — Multan Cycling Club */
.page-gallery{background:var(--bone)}
.gal-hero{background:var(--cobalt);color:var(--bone);border-bottom:var(--bw) solid var(--ink);
  padding:clamp(110px,16vh,180px) 0 clamp(50px,7vh,80px);position:relative;overflow:hidden}
.gal-hero::after{content:"";position:absolute;inset:0;opacity:.25;pointer-events:none;
  background-image:radial-gradient(rgba(255,244,227,.85) 1.6px,transparent 1.7px);background-size:18px 18px}
.gal-hero .wrap{position:relative;z-index:1}
.gal-hero__title{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;margin:.1em 0 .4em;
  font-size:clamp(2.8rem,9vw,7rem);text-shadow:5px 5px 0 var(--ink)}
.gal-hero__title em{font-style:italic;color:var(--lime)}
.gal-stats{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.gal-stats span{background:var(--lime);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:100px;
  padding:.4rem 1rem;font-family:var(--display);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.92rem;
  box-shadow:4px 4px 0 var(--ink)}
.gal-stats span:nth-child(2){background:var(--pink);color:var(--paper)}
.gal-stats span:nth-child(3){background:var(--sky)}

/* story highlights */
.stories{background:var(--bone);padding:clamp(28px,5vw,48px) 0 clamp(10px,2vw,20px);position:relative;z-index:1;isolation:isolate}
.stories__title{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  font-size:1rem;margin:0 0 1rem;color:#6B6459}
.stories__row{display:flex;gap:1.1rem;overflow-x:auto;padding:.4rem 0 1rem;scrollbar-width:none;
  margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);scroll-snap-type:x proximity}
.stories__row::-webkit-scrollbar{display:none}
.story{flex:0 0 auto;width:96px;display:grid;justify-items:center;gap:.5rem;background:none;border:0;padding:0;cursor:pointer;
  scroll-snap-align:start;font:inherit;color:inherit}
.story__ring{width:92px;height:92px;border-radius:50%;padding:4px;display:grid;place-items:center;
  background:conic-gradient(var(--lime),var(--pink),var(--tang),var(--sky),var(--lime));
  border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .25s var(--ease)}
.story:hover .story__ring,.story:focus-visible .story__ring{transform:translate(-3px,-3px) rotate(-3deg)}
.story__img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--paper);border:2px solid var(--ink)}
.story__name{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;
  line-height:1.15;text-align:center;max-width:96px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story__n{font-size:.68rem;color:#6B6459;letter-spacing:.1em}

/* filters */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 2.2rem;padding:0 0 .4rem;
  position:relative;z-index:2;isolation:isolate;min-height:48px}
.filters > *{position:relative!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;
  float:none!important;inset:auto!important}
.g-chip{position:relative;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;
  background:var(--paper);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:100px;padding:.5rem 1rem;
  min-height:44px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .18s var(--ease),background .2s}
.g-chip:hover{transform:translate(-2px,-2px)}
.g-chip[aria-selected="true"]{background:var(--ink);color:var(--lime)}
.g-chip b{opacity:.55;margin-left:.35rem;font-weight:700}

/* masonry grid */
.masonry{columns:4 260px;column-gap:1rem}
.tile{break-inside:avoid;margin:0 0 1rem;position:relative;display:block;width:100%;padding:0;border:var(--bw) solid var(--ink);
  border-radius:18px;overflow:hidden;background:var(--paper);box-shadow:5px 5px 0 var(--ink);cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.tile:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--ink)}
.tile img,.tile video{width:100%;display:block;background:var(--bone)}
.tile__meta{position:absolute;inset:auto 0 0;padding:.8rem;background:linear-gradient(transparent,rgba(18,16,14,.85));
  color:var(--bone);font-size:.84rem;text-align:left;opacity:0;transition:opacity .25s}
.tile:hover .tile__meta,.tile:focus-visible .tile__meta{opacity:1}
.tile__album{position:absolute;top:.6rem;left:.6rem;background:var(--lime);color:var(--ink);border:2.5px solid var(--ink);
  border-radius:100px;padding:.15rem .6rem;font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase}
.tile__play{position:absolute;top:50%;left:50%;translate:-50% -50%;width:58px;height:58px;border-radius:50%;
  background:var(--pink);border:var(--bw) solid var(--ink);display:grid;place-items:center;color:var(--paper);font-size:1.4rem;
  box-shadow:4px 4px 0 var(--ink)}
.empty{background:var(--paper);border:var(--bw) dashed var(--ink);border-radius:20px;padding:2rem;text-align:center}
.empty h3{font-size:1.5rem;margin-bottom:.4rem}
.empty p{color:#4A443D;margin:0}
.empty code{background:var(--lime);border:2px solid var(--ink);border-radius:6px;padding:.05rem .35rem;font-size:.9em}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(18,16,14,.94);display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:.5rem;padding:clamp(12px,3vw,32px)}
.lb[hidden]{display:none}
.lb__stage{margin:0;display:grid;place-items:center;gap:.8rem;max-height:92vh}
.lb__stage img,.lb__stage video{max-width:100%;max-height:78vh;border:var(--bw) solid var(--ink);border-radius:14px;background:#000}
.lb figcaption{color:var(--bone);text-align:center;max-width:70ch;font-size:.95rem}
.lb__nav,.lb__x{background:var(--lime);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:50%;
  width:56px;height:56px;font-size:2rem;line-height:1;cursor:pointer;box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center}
.lb__x{position:absolute;top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);background:var(--pink);color:var(--paper);font-size:1.7rem;z-index:2}
.lb__count{position:absolute;bottom:clamp(12px,3vw,26px);left:50%;translate:-50% 0;color:var(--bone);
  font-family:var(--display);letter-spacing:.2em;font-size:.86rem}

@media (max-width:820px){
  .masonry{columns:2 150px;column-gap:.7rem}
  .tile{margin-bottom:.7rem;border-radius:14px}
  .story{width:84px}.story__ring{width:80px;height:80px}
  .lb{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .lb__stage{grid-row:1}
  .lb__nav{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));width:60px;height:60px}
  .lb__prev{left:18px}.lb__next{right:18px}
  .lb__count{bottom:calc(36px + env(safe-area-inset-bottom))}
}
@media (max-width:480px){ .masonry{columns:2 120px} }

/* album header + richer empty state */
.album-head{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:flex-end;margin-top:.4rem;
  background:var(--paper);border:var(--bw) solid var(--ink);border-radius:20px;padding:1.3rem 1.4rem;
  box-shadow:var(--shadow);margin-bottom:1.6rem;position:relative;z-index:2;isolation:isolate;clear:both}
.album-head h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1;margin:0 0 .5rem}
.album-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 .5rem}
.album-head__count{font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;color:#6B6459}
.album-head__blurb{margin:0;color:#4A443D;max-width:62ch}
.album-head__actions{display:flex;flex-wrap:wrap;gap:.6rem}
.empty__icon{font-size:2.2rem;display:block;margin-bottom:.4rem}
.empty__how{margin-top:.8rem;font-size:.9rem;color:#6B6459}
@media (max-width:760px){.album-head__actions{width:100%}.album-head__actions .btn{flex:1 1 100%}}

/* belt: never let homepage .chip absolute leak onto gallery filters */
.page-gallery .chip,.page-gallery .g-chip{position:relative!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important}