/* Public Gallery (Stage 3B). Loaded ONLY by gallery.php, after stage1-tb.css.
   Scope: Gallery content and its lightbox. The shared header/footer and the accepted Stage 1 geometry
   (stage1-tb.css, body.tb-page-gallery) are not touched. New class names (gl-*) only.
   Layout: justified rows (tile width proportional to the image's own aspect ratio, so photos are not cropped),
   panoramic images as full-width rows, portrait fallback, native <dialog> lightbox. Tokens mirror the Events page. */
:root{
  --gl-display:"TB Exo 2","Exo 2","Inter",sans-serif;
  --gl-ui:"TB Inter","Inter","Segoe UI",Arial,sans-serif;
  --gl-line:rgba(255,40,55,.30);--gl-line-strong:rgba(255,70,85,.72);
  --gl-surface:rgba(10,4,6,.94);--gl-text2:#c9c1c3;
  --gl-gap:clamp(10px,1.4vw,20px);
}
body.tb-page-gallery{isolation:isolate;font-family:var(--gl-ui)}
.gl-stage{position:fixed;inset:0;z-index:-1;background:#070305 url(/assets/images/menu/cinematic-neon-bowling-lounge.jpg) 50% 30%/cover;pointer-events:none}
.gl-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 38% at 18% 10%,rgba(255,16,37,.16),transparent 70%),linear-gradient(180deg,rgba(7,3,5,.55),rgba(7,3,5,.86) 420px,rgba(7,3,5,.94))}
.gl-wrap{width:min(100% - 64px,1320px);margin-inline:auto}
@media (max-width:900px){.gl-wrap{width:min(100% - 32px,1320px)}}
.gl-main{padding:0 0 56px}
[id^="item-"]{scroll-margin-top:calc(var(--header-height) + 20px)}

/* ---- introduction: same system as Events ---- */
.gl-hero{padding:clamp(28px,4.4vw,64px) 0 clamp(20px,2.4vw,32px)}
.gl-eyebrow{margin:0;font:700 12px var(--gl-ui);letter-spacing:.18em;text-transform:uppercase;color:#ff6b76}
.gl-title{margin:8px 0 0;font:italic 900 clamp(44px,6vw,96px)/.95 var(--gl-display);letter-spacing:-.02em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 rgba(90,0,12,.85),0 0 24px rgba(255,16,37,.28);padding-right:.1em}
.gl-rule{width:64px;height:3px;border-radius:3px;margin:16px 0;background:#ff1025;box-shadow:0 0 10px #ff1025,0 0 22px rgba(255,16,37,.55)}
.gl-sub{margin:0;max-width:640px;font:400 clamp(15px,1.3vw,17px)/1.55 var(--gl-ui);color:var(--gl-text2)}
.gl-empty{margin:clamp(24px,3vw,44px) 0 0;padding:44px 22px;border:1px dashed var(--gl-line);border-radius:18px;background:var(--gl-surface);color:var(--gl-text2);text-align:center}

/* ---- justified rows: each row's tiles share one height because width is proportional to the image's own aspect ratio (--ar), so photos are not cropped ---- */
.gl-grid{display:grid;gap:var(--gl-gap);margin-top:clamp(8px,1vw,16px)}
.gl-row{display:flex;gap:var(--gl-gap);width:100%;margin-inline:auto;max-width:calc(560px*var(--sumar,3))}
.gl-tile{position:relative;flex:var(--ar) 1 0;min-width:0;aspect-ratio:var(--ar);border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#240810,#0c0507);border:1px solid var(--gl-line);box-shadow:0 18px 40px rgba(0,0,0,.42)}
/* every row is capped at a 560px height (max-width = 560px x the row's summed aspect ratios, --sumar): a lone image or a pair of portraits never becomes a wall; panoramic and normal landscape rows are unaffected */
.gl-open{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:zoom-in;font:inherit}
.gl-open img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gl-open img[hidden]{display:none}
.gl-open:hover img{transform:scale(1.035)}
.gl-open:focus-visible{outline:3px solid #ff6b76;outline-offset:-3px;border-radius:18px}
.gl-ph{position:absolute;inset:0;display:grid;place-items:center;color:#ff6b76}
.gl-ph[hidden]{display:none}
.gl-ph svg{width:56px;height:56px;opacity:.7}
.gl-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;padding:48px clamp(14px,1.6vw,22px) clamp(12px,1.4vw,18px);background:linear-gradient(180deg,transparent,rgba(7,3,5,.78) 45%,rgba(7,3,5,.94));pointer-events:none}
.gl-cap strong{font:italic 900 clamp(17px,1.5vw,22px)/1.08 var(--gl-display);text-transform:uppercase;letter-spacing:-.005em;color:#fff;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.gl-cap em{font:500 clamp(13px,1vw,14.5px)/1.4 var(--gl-ui);font-style:normal;color:#e6dfe0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}

/* ---- tablet: pairs stay pairs; a row of three becomes one wide image over two ---- */
@media (max-width:1100px){
  .gl-row{flex-wrap:wrap}
  .gl-row>.gl-tile{flex:1 1 calc(50% - var(--gl-gap)/2);aspect-ratio:16/10}
  .gl-row[data-n="3"]>.gl-tile:first-child{flex-basis:100%;aspect-ratio:19/10}
  .gl-row[data-n="1"]>.gl-tile{flex:1 1 100%;aspect-ratio:var(--ar)}
  .gl-open img{object-position:50% 45%}
  /* portrait fallback: a row that contains a portrait image keeps every tile at its own aspect ratio (no 16:10 / 19:10 forcing, no crop) */
  .gl-row[data-p]{flex-wrap:nowrap}
  .gl-row[data-p]>.gl-tile,.gl-row[data-p][data-n="3"]>.gl-tile:first-child{flex:var(--ar) 1 0;aspect-ratio:var(--ar)}
  /* three across is too narrow for a portrait on a tablet: the first two share a line, the third sits under them at its own ratio (capped at 560px tall, centred) */
  .gl-row[data-p][data-n="3"]{display:grid;grid-template-columns:calc((100% - var(--gl-gap))*var(--c1)) minmax(0,1fr)}
  .gl-row[data-p][data-n="3"]>.gl-tile:nth-child(3){grid-column:1/-1;justify-self:center;width:min(100%,calc(560px*var(--ar)));flex:none}
}
/* ---- mobile: one column at each image's own aspect ratio (no crop) ---- */
@media (max-width:700px){
  .gl-row,.gl-row[data-p],.gl-row[data-p][data-n="3"]{display:flex;flex-direction:column;max-width:none}
  .gl-row>.gl-tile,.gl-row[data-n="3"]>.gl-tile:first-child,.gl-row[data-n="1"]>.gl-tile{flex:none;width:100%;aspect-ratio:var(--ar);margin:0;border-radius:16px}
  .gl-row[data-n="1"]>.gl-tile{flex:none}
  .gl-row[data-p]>.gl-tile,.gl-row[data-p][data-n="3"]>.gl-tile:first-child,.gl-row[data-p][data-n="3"]>.gl-tile:nth-child(3){flex:none;width:100%;aspect-ratio:var(--ar)}
  /* tall portraits on a phone: width limited so a tile is never taller than ~68% of the screen height */
  .gl-row>.gl-tile--portrait{width:min(100%,calc(68dvh*var(--ar)));margin-inline:auto}
  .gl-cap{padding-top:36px}
  /* a panoramic image is only ~115px tall on a phone: keep it uncropped and put its caption on a strip below instead of over the photo */
  .gl-row>.gl-tile--wide{aspect-ratio:auto;display:grid}
  .gl-tile--wide .gl-open{position:static;display:grid;height:auto}
  .gl-tile--wide .gl-open img{height:auto;aspect-ratio:var(--ar)}
  .gl-tile--wide .gl-cap{position:static;padding:12px 14px 14px;background:rgba(10,4,6,.96)}
  .gl-tile--wide .gl-ph{position:relative;inset:auto;aspect-ratio:var(--ar)}
}

/* ---- lightbox ---- */
html:has(dialog.gl-lb[open]){overflow:hidden}
.gl-lb{width:min(96vw,1360px);max-width:none;height:min(94vh,980px);max-height:94vh;margin:auto;padding:0;overflow:hidden;color:#fff;background:#070305;border:1px solid var(--gl-line-strong);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 40px rgba(255,16,37,.14)}
.gl-lb::backdrop{background:rgba(4,2,4,.88)}
.gl-lb__frame{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%;padding:16px clamp(14px,2vw,28px) clamp(14px,1.6vw,22px);gap:14px}
.gl-lb__stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1.4vw,18px);min-height:0}
.gl-lb__fig{position:relative;margin:0;min-height:0;height:100%;display:grid;place-items:center;border-radius:14px;overflow:hidden}
.gl-lb__fig img{border-radius:14px;display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.gl-lb__fig img[hidden]{display:none}
.gl-lb__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;padding:0 14px;color:#fff;font:700 14px var(--gl-ui);background:rgba(255,16,37,.16);border:1px solid var(--gl-line-strong);border-radius:999px;cursor:pointer}
.gl-lb__btn[hidden]{display:none}
.gl-lb__btn svg{width:22px;height:22px;flex:none}
.gl-lb__btn:hover{background:rgba(255,16,37,.32)}
.gl-lb__btn:focus-visible{outline:3px solid #ff6b76;outline-offset:2px}
.gl-lb__nav{padding:0;width:52px;height:52px;border-radius:50%}
.gl-lb__close{position:absolute;top:14px;right:clamp(14px,2vw,28px);z-index:3;background:rgba(7,3,5,.82)}
.gl-lb__copy{display:grid;gap:4px;padding:2px 4px 0;max-height:26vh;overflow:auto}
.gl-lb__copy h2{margin:0;font:italic 900 clamp(22px,2.4vw,34px)/1.05 var(--gl-display);text-transform:uppercase;overflow-wrap:anywhere}
.gl-lb__copy p{margin:0;color:var(--gl-text2);font:400 15.5px/1.5 var(--gl-ui);overflow-wrap:anywhere}
.gl-lb__copy .gl-lb__count{color:#ff8d95;font:700 12px var(--gl-ui);letter-spacing:.16em}
.gl-lb__copy h2:empty,.gl-lb__copy p:empty{display:none}
@media (min-width:1101px){
  /* desktop: the photo is positioned inside the (definite-height) figure so tall portraits shrink to fit instead of overflowing it */
  .gl-lb__fig{position:relative;grid-column:2}
  .gl-lb__prev{grid-column:1}
  .gl-lb__next{grid-column:3}
  .gl-lb__fig img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%}
}
@media (max-width:1100px){
  /* tablet + phone: previous / next move to a full-width bar under the photo so the photo can use the whole dialog width */
  .gl-lb__frame{padding-top:68px;grid-template-rows:auto auto;align-content:center}
  .gl-lb__stage{grid-template-columns:1fr 1fr;gap:10px}
  .gl-lb__fig{grid-column:1/-1;grid-row:1;height:auto;min-height:200px}
  .gl-lb__fig img{max-height:58dvh}
  .gl-lb__prev,.gl-lb__next{width:100%;height:52px;border-radius:14px}
  .gl-lb__prev{grid-column:1;grid-row:2}
  .gl-lb__next{grid-column:2;grid-row:2}
  .gl-lb__copy{max-height:30vh}
}
@media (max-width:700px){
  .gl-lb{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border-width:0}
  .gl-lb__frame{padding:68px 12px 12px;gap:12px}
  .gl-lb__close{top:10px;right:10px;width:48px;padding:0}
  .gl-lb__close span{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}