/* ── GALERIA PAGE ── (.gl- prefix; shared pieces live in ../portfolio.css) */

.gl-section {
  padding: 8px 0 clamp(88px, 12vw, 150px);
}

/* A stage holding a faint mosaic of empty frames, with the "coming soon"
   card resting in its middle. The mask fades the frames out towards the
   edges, so they read as a hint rather than as a broken grid. */
.gl-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(420px, 40vw, 500px);
}
.gl-mosaic {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 45%, transparent 100%);
  pointer-events: none;
}
.gl-mosaic span {
  border: 1px solid rgba(201,169,110,0.16);
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(250,247,242,0.05), rgba(250,247,242,0.01));
}
.gl-mosaic span:nth-child(n+5) { display: none; }
@media (min-width: 720px) {
  /* Tall frames at either side, four small ones between them. */
  .gl-mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; }
  .gl-mosaic span:nth-child(n+5) { display: block; }
  .gl-mosaic span:nth-child(1),
  .gl-mosaic span:nth-child(4) { grid-row: span 2; }
  .gl-mosaic span:nth-child(n+7) { display: none; }
}

.gl-empty {
  position: relative;
  width: 100%; max-width: 540px;
  padding: clamp(40px, 6vw, 56px) clamp(26px, 5vw, 52px);
  text-align: center;
  background: rgba(18,15,12,0.78);
  border: 1px solid rgba(201,169,110,0.22);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8);
}
.gl-empty::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,0.5), transparent);
}
.gl-empty-icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  border: 1px solid rgba(201,169,110,0.3); border-radius: 50%;
  background: rgba(201,169,110,0.07);
  color: var(--gold);
}
.gl-empty-icon .icon { width: 22px; height: 22px; }
.gl-empty-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.1vw, 36px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ivory);
}
.gl-empty-text {
  max-width: 400px;
  margin: 14px auto 0;
  font-size: 15px; font-weight: 300;
  line-height: 1.8; letter-spacing: 0.3px;
  color: rgba(250,247,242,0.66);
}