/* =============================================================
   Edge Hub — Gallery page
   ============================================================= */

/* ---------- HERO: 4 vertical reels ---------- */
.gl-hero {
  padding-top: calc(var(--header-h) + clamp(64px, 7vw, 112px));
  padding-bottom: clamp(48px, 5vw, 80px);
  background: #FFFFFF;
}
.gl-hero-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(24px, 2.6vw, 40px);
}
.gl-kicker {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--edge-500);
}
.gl-hero-head h1 {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  letter-spacing: 0.02em;
  color: var(--navy-800);
}
.gl-hero-head .note {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(0.8rem, 0.9vw, 0.9rem);
  color: var(--ink-500);
}
.gl-reels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
.gl-reel {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(178deg, var(--navy-800) 0%, var(--navy-950) 100%);
  box-shadow: 0 28px 60px -36px rgba(14, 35, 72, 0.5);
}
.gl-reel iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.gl-yt-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  text-align: center;
}
.gl-yt-ph .ic {
  width: clamp(40px, 4vw, 56px);
  height: clamp(40px, 4vw, 56px);
  color: rgba(234, 240, 250, 0.85);
}
.gl-yt-ph .ic svg { width: 100%; height: 100%; display: block; }
.gl-yt-ph p {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  line-height: 1.8;
  color: var(--fg-on-navy-mut);
}
@media (max-width: 860px) {
  .gl-reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- MOVIE: main wide video ---------- */
.gl-movie {
  padding-block: clamp(72px, 8vw, 128px);
  background: var(--paper);
}
.gl-sec-head { margin-bottom: clamp(24px, 2.8vw, 44px); }
.gl-sec-head h2 {
  margin-top: 14px;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(1.7rem, 2.9vw, 2.6rem);
  letter-spacing: 0.02em;
  color: var(--navy-800);
}
.gl-movie-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(178deg, var(--navy-800) 0%, var(--navy-950) 100%);
  box-shadow: 0 32px 70px -40px rgba(14, 35, 72, 0.55);
}
.gl-movie-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- PHOTO STREAM ---------- */
.gl-stream {
  padding-block: clamp(72px, 8vw, 128px);
  background: #FFFFFF;
  overflow: hidden;
}
.gl-rows {
  display: grid;
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(28px, 3.2vw, 48px);
}
.gl-row {
  display: flex;
  gap: clamp(14px, 1.8vw, 24px);
  width: max-content;
  will-change: transform;
}
.gl-row--odd { margin-left: -9vw; }
.gl-row--even { margin-left: -3vw; }
.gl-photo {
  position: relative;
  width: clamp(240px, 24vw, 380px);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  flex-shrink: 0;
}
.gl-photo image-slot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}


/* ===== gallery v2: full-bleed reel wall + photo mosaic ===== */
.gl-hero{position:relative;padding:var(--header-h,108px) 0 0;background:var(--navy-950)}
.gl-hero .sv-inner{display:contents}
.gl-hero-overlay{position:absolute;top:var(--header-h,108px);left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px clamp(24px,4vw,72px) 0;pointer-events:none}
.gl-hero-overlay .gl-kicker{color:var(--edge-400)}
.gl-hero-overlay .note{font-family:var(--font-jp);font-size:.82rem;font-weight:600;color:var(--fg-on-navy-mut)}
.gl-reels{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;height:min(calc(100vh - var(--header-h,108px)),920px)}
.gl-reel{position:relative;overflow:hidden;border-radius:0;width:auto;height:100%;aspect-ratio:auto;min-width:0;background:var(--navy-900)}
.gl-reel+.gl-reel{border-left:1px solid rgba(180,195,222,.14)}
.gl-reel iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;aspect-ratio:9/16;min-width:100%;border:0}
.gl-reel .gl-yt-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.gl-mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(56px,6.2vw,96px);gap:clamp(10px,1.2vw,16px);margin-top:clamp(24px,2.6vw,40px)}
.gl-mosaic .gl-photo{position:relative;width:auto;height:auto;aspect-ratio:auto;border-radius:12px;overflow:hidden;box-shadow:0 16px 34px -24px rgba(14,35,72,.4)}
.gl-mosaic .gl-photo image-slot{position:absolute;inset:0;display:block;width:100%;height:100%}
.m1{grid-column:1/6;grid-row:1/5}.m2{grid-column:6/9;grid-row:1/5}.m3{grid-column:9/13;grid-row:1/3}.m4{grid-column:9/13;grid-row:3/5}
.m5{grid-column:1/5;grid-row:5/8}.m6{grid-column:5/8;grid-row:5/8}.m7{grid-column:8/13;grid-row:5/8}
.m8{grid-column:1/4;grid-row:8/10}.m9{grid-column:4/7;grid-row:8/10}.m10{grid-column:7/10;grid-row:8/10}.m11{grid-column:10/13;grid-row:8/10}
@media (max-width: 860px){
  .gl-reels{grid-template-columns:repeat(2,1fr);height:auto}
  .gl-reel{aspect-ratio:9/14}
  .gl-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(90px,22vw,150px)}
  .gl-mosaic .gl-photo{grid-column:auto;grid-row:auto}
  .m1{grid-column:1/3;grid-row:auto/span 2}
}


/* ===== mosaic v2: masonry columns, square corners, 28 photos ===== */
.gl-mosaic{display:block;columns:4 clamp(220px,22vw,340px);column-gap:clamp(10px,1.2vw,16px)}
.gl-mosaic .gl-photo{display:block;width:auto;height:auto;aspect-ratio:auto;margin:0 0 clamp(10px,1.2vw,16px);border-radius:0;overflow:hidden;break-inside:avoid;box-shadow:0 16px 34px -24px rgba(14,35,72,.4)}
.gl-mosaic .gl-photo img{display:block;width:100%;height:auto;transition:transform .5s var(--ease-out)}
.gl-mosaic .gl-photo:hover img{transform:scale(1.035)}
@media (max-width: 720px){.gl-mosaic{columns:2 150px}}

/* ===== youtube chrome cropping: no logo/share/controls, no hover UI ===== */
.gl-reel iframe{pointer-events:none;transform:translate(-50%,-50%) scale(1.38)}