/* ==========================================================================
   Event Photos 2026, served at /event-photos-2026/
   Sits on top of site.css: same tokens, same nav bar, same cursor. Only the
   grid and the lightbox are new.
   ========================================================================== */

/* The nav items are links here, not scroll buttons. */
.cxc-nav a.item{ text-decoration:none; }
.cxc-nav a.mark-link{ display:block; flex:none; line-height:0; }

/* ------------------------------------------------------------ heading -- */
.cxc-gallery .sec{ padding:8px 0 0; border-top:0; }
.cxc-gallery .lead a{ color:#32da80; }
.cxc-gallery .count{
  font-family:var(--cxc-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#93a9a0;
  margin:14px 0 0;
}

/* --------------------------------------------------------------- grid --
   Four columns of 3:2 tiles. A portrait photo takes two rows, so the grid
   stays aligned whichever way the camera was held. */
.cxc-gallery{ container-type:inline-size; }
.cxc-gallery .grid{
  --cols:4;
  --gap:8px;
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  /* Row height = a 3:2 tile at the current column width, so a portrait photo
     spanning two rows is always exactly two landscape tiles tall. */
  grid-auto-rows:calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * 2 / 3);
  grid-auto-flow:dense;
  gap:var(--gap);
  margin-top:18px;
}
.cxc-gallery .ph{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:3px;
  border:1px solid rgba(50,218,128,.14);
  background:rgba(10,29,37,.62);
  min-height:0;
  cursor:var(--cxc-cursor-link,pointer);
  transition:border-color .15s;
}
.cxc-gallery .ph.v{ grid-row:span 2; }
.cxc-gallery .ph img{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .35s ease;
}
.cxc-gallery .ph img.in{ opacity:1; }
.cxc-gallery .ph:hover,
.cxc-gallery .ph:focus-visible{ border-color:#32da80; }
.cxc-gallery .ph:focus-visible{ outline:2px solid #32da80; outline-offset:2px; }
.cxc-gallery .ph .n{
  position:absolute;
  right:6px; bottom:6px;
  font-family:var(--cxc-mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:#e7f0ec;
  background:rgba(7,20,27,.7);
  border:1px solid rgba(50,218,128,.25);
  border-radius:2px;
  padding:2px 5px;
  opacity:0;
  transition:opacity .15s;
}
.cxc-gallery .ph:hover .n{ opacity:1; }

@media (max-width:980px){ .cxc-gallery .grid{ --cols:3; } }
@media (max-width:620px){ .cxc-gallery .grid{ --cols:2; --gap:6px; } }

/* ------------------------------------------------------------ lightbox -- */
.cxc-lb{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(7,20,27,.94);
  display:grid;
  grid-template-rows:auto 1fr;
  font-family:var(--cxc-ui);
  font-weight:300;
}
.cxc-lb .bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px clamp(14px,3vw,24px);
  border-bottom:1px solid rgba(50,218,128,.18);
  background:rgba(7,20,27,.95);
}
.cxc-lb .cap{
  font-family:var(--cxc-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#32da80;
  margin-right:auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cxc-lb .cap b{ font-weight:600; color:#e7f0ec; }
.cxc-lb .btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:inherit;
  font-family:var(--cxc-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:transparent;
  color:#93a9a0;
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  padding:7px 10px;
  text-decoration:none;
  cursor:var(--cxc-cursor-link,pointer);
}
.cxc-lb .btn:hover{ color:#32da80; border-color:#32da80; }
.cxc-lb .btn.dl{ color:#32da80; border-color:rgba(50,218,128,.4); background:rgba(50,218,128,.08); }
.cxc-lb .stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:clamp(10px,2vw,24px);
  min-height:0;
  overflow:hidden;
  touch-action:pan-y;
}
.cxc-lb .stage img{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  background:#0a1d25;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  user-select:none;
  -webkit-user-drag:none;
  transition:opacity .2s;
}
.cxc-lb .arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  display:grid; place-items:center;
  background:rgba(7,20,27,.75);
  color:#32da80;
  border:1px solid rgba(50,218,128,.3);
  border-radius:50%;
  cursor:var(--cxc-cursor-link,pointer);
  font:inherit;
}
.cxc-lb .arrow:hover{ border-color:#32da80; background:rgba(50,218,128,.12); }
.cxc-lb .arrow.prev{ left:clamp(8px,2vw,24px); }
.cxc-lb .arrow.next{ right:clamp(8px,2vw,24px); }
.cxc-lb .loading{
  position:absolute;
  font-family:var(--cxc-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#93a9a0;
  pointer-events:none;
}
@media (max-width:620px){
  .cxc-lb .btn span{ display:none; }
  .cxc-lb .arrow{ width:38px; height:38px; }
}
body.cxc-lb-open{ overflow:hidden; }