/* ==========================================================
   About: photos from the first summit (mosaic)
   ========================================================== */
.gallery{margin-top:56px}
.gal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.gal-head h3{font-size:clamp(22px,2.4vw,28px)}
.gal-head .lead{margin-top:6px;font-size:16px}
.gal-year{flex:none;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--teal-ink);background:color-mix(in srgb,var(--teal) 14%,transparent);border-radius:999px;padding:8px 14px}

/* The highlights video: a wide card with a big play button over the poster.
   The cover button hides once it starts, leaving the normal video controls. */
.gal-video{position:relative;margin:22px 0 0;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#0A1B22;box-shadow:0 26px 50px -30px rgba(8,30,38,.85)}
.gal-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0A1B22}
.gal-video.is-playing video{object-fit:contain}
.gv-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;border:0;margin:0;cursor:pointer;color:#fff;font:inherit;text-align:center;background:linear-gradient(180deg,rgba(8,30,38,.12) 0%,rgba(8,30,38,.35) 45%,rgba(8,30,38,.82) 100%)}
.gv-play{position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:var(--teal);box-shadow:0 14px 34px -8px rgba(22,166,161,.75);transition:transform .2s,background .2s}
.gv-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid rgba(255,255,255,.55);animation:gv-pulse 2.2s ease-out infinite}
.gv-play svg{width:38px;height:38px;fill:#fff;margin-inline-start:5px}
[dir="rtl"] .gv-play svg{margin-inline-start:0;margin-inline-end:5px}
.gv-cover:hover .gv-play,.gv-cover:focus-visible .gv-play{transform:scale(1.08);background:var(--teal-ink)}
.gv-cover:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.gv-text{display:flex;flex-direction:column;align-items:center;gap:6px}
.gv-kicker{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border-radius:999px;padding:6px 12px}
.gv-text b{font-size:clamp(20px,2.6vw,30px);font-weight:800;line-height:1.2;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.gv-text small{font-size:14px;font-weight:600;opacity:.85}
.gal-video.is-playing .gv-cover,.gal-video.is-auto .gv-cover{display:none}
.gal-video.is-auto video{cursor:pointer}
/* While it plays muted on its own: a big "Tap for sound" button */
.gv-sound{position:absolute;inset-inline-end:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:12px 20px 12px 16px;background:var(--teal);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 12px 28px -10px rgba(8,30,38,.8);transition:transform .15s,background .15s;animation:gv-nudge 2.6s ease-in-out infinite}
.gv-sound svg{width:22px;height:22px;flex:none}
.gv-sound:hover,.gv-sound:focus-visible{background:var(--teal-ink);transform:scale(1.05)}
.gv-sound:focus-visible{outline:3px solid #fff;outline-offset:2px}
.gv-sound[hidden]{display:none}
@keyframes gv-nudge{0%,80%,100%{transform:scale(1)}90%{transform:scale(1.07)}}
@keyframes gv-pulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.gv-play::before,.gv-sound{animation:none}}

/* The layout follows the number of photos (data-count, set by gallery.js), so
   any number looks planned: 1 a wide banner, 2 halves, 3 one big beside two,
   4 a 2×2, 5 one big beside a 2×2, 6+ rows of three with the last row filled.
   Every tile has a fixed shape and the photo is cropped to it (object-fit),
   so a tall, wide or tiny upload can never change the layout. */
.gal-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:22px;list-style:none;padding:0}
.gal-grid li{margin:0;min-width:0;grid-column:span 2}
.gal-grid li.span-3{grid-column:span 3}
.gal-grid li.span-6{grid-column:span 6}
.gal-grid li.span-6 .gal-item{aspect-ratio:3/1}
.gal-grid[data-count="1"] li{grid-column:span 6}
.gal-grid[data-count="1"] .gal-item{aspect-ratio:21/9}
.gal-grid[data-count="2"] li,.gal-grid[data-count="4"] li{grid-column:span 3}
.gal-grid[data-count="3"] li:first-child{grid-column:span 4;grid-row:span 2}
.gal-grid[data-count="5"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.gal-grid[data-count="5"] li{grid-column:span 1}
.gal-grid[data-count="5"] li:first-child{grid-column:span 2;grid-row:span 2}
/* The big photo fills the two rows the small ones set */
.gal-grid[data-count="3"] li:first-child .gal-item,
.gal-grid[data-count="5"] li:first-child .gal-item{aspect-ratio:auto;height:100%}
.gal-item{position:relative;display:block;width:100%;aspect-ratio:3/2;overflow:hidden;margin:0;border-radius:var(--r-lg);background:var(--surface-2);box-shadow:0 18px 34px -28px rgba(8,30,38,.7)}
.gal-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal-cap{position:absolute;inset:auto 0 0;padding:34px 16px 14px;color:#fff;font-size:14px;font-weight:600;text-align:start;line-height:1.3;background:linear-gradient(180deg,transparent,rgba(8,30,38,.78))}
.gal-grid[data-count="1"] .gal-cap,.gal-grid[data-count="3"] li:first-child .gal-cap,.gal-grid[data-count="5"] li:first-child .gal-cap{font-size:16px;padding-inline:20px}


/* Phone: one row that scrolls sideways, every photo the same size */
@media (max-width:860px){
  .gallery{margin-top:44px}
  .gal-video{margin-top:18px}
  .gv-play{width:72px;height:72px}
  .gv-play svg{width:30px;height:30px}
  .gv-cover{gap:12px}
}
@media (max-width:520px){
  .gv-kicker{display:none}
  .gv-sound{inset-inline-end:10px;bottom:10px;padding:9px 14px 9px 12px;font-size:13px}
  .gv-sound svg{width:18px;height:18px}
  .gv-play{width:60px;height:60px}
  .gv-play::before{inset:-7px}
  .gv-play svg{width:26px;height:26px}
  .gv-text b{font-size:17px}
  .gv-text small{font-size:13px}
  .gal-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-inline:-24px;padding-inline:24px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gal-grid::-webkit-scrollbar{display:none}
  .gal-grid li{flex:0 0 78vw;max-width:360px;scroll-snap-align:start}
  .gal-grid .gal-cap{font-size:14px!important;padding-inline:16px!important}
  .gal-grid .gal-item{aspect-ratio:3/2!important;height:auto!important}
  .gal-grid[data-count="1"] li{flex-basis:100%;max-width:none}
}