/* ============================================================
   OVLAY — Community gallery page
   Shares design tokens from ../styles.css
   ============================================================ */

.cg-body { background: var(--cream); min-height: 100vh; }

/* ---- top bar (same family as legal pages) ---- */
.cg-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 4vw, 48px);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--hair-soft);
}
.cg-nav .home { display: flex; align-items: center; gap: 11px; }
.cg-nav .orb-mini { width: 32px; height: 32px; border-radius: 50%; background: url('../assets/orb-mark.png') center/cover no-repeat; }
.cg-nav .word { height: 21px; width: auto; }
.cg-nav-right { display: flex; align-items: center; gap: 16px; }
.cg-nav .back { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--ink-soft); transition: color .25s; }
.cg-nav .back:hover { color: var(--ink); }
.cg-nav .back svg { width: 16px; height: 16px; }

/* ---- header ---- */
.cg-head { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 7vw, 84px) 28px clamp(20px, 3vw, 30px); }
.cg-head .tag { display:inline-flex; align-items:center; gap:9px; margin-bottom: 16px; }
.cg-head .live-dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.62 0.16 28); position: relative; }
.cg-head .live-dot::after { content:""; position:absolute; inset:-5px; border-radius:50%; background: oklch(0.62 0.16 28 / .5); animation: livePulse 1.8s var(--ease) infinite; }
@keyframes livePulse { 0%{transform:scale(.5);opacity:.9} 100%{transform:scale(1.9);opacity:0} }
.cg-head h1 { font-family:'Schibsted Grotesk', sans-serif; font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing:-0.03em; line-height:1.04; }
.cg-head p { color: var(--ink-soft); font-size: 1.1rem; margin-top: 12px; max-width: 560px; text-wrap: pretty; }

/* ---- tabs ---- */
.cg-tabs { max-width: var(--maxw); margin: 8px auto 0; padding: 0 28px; display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
.cg-tab {
  border: 1px solid var(--hair); background: var(--paper); color: var(--ink-2);
  border-radius: 999px; padding: 10px 20px; font-size: .96rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .25s var(--ease); display:inline-flex; align-items:center; gap:8px;
}
.cg-tab svg { width: 16px; height: 16px; }
.cg-tab:hover { border-color: var(--bronze-light); }
.cg-tab.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cg-count { margin-left: auto; color: var(--ink-faint); font-size: .9rem; }

/* ---- grid ---- */
.cg-grid {
  max-width: var(--maxw); margin: 0 auto; padding: 30px 28px clamp(80px, 12vw, 130px);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 26px;
}
.cg-card {
  cursor: pointer; position: relative; opacity: 0; transform: translateY(16px);
  animation: cgIn .6s var(--ease-out) forwards;
}
@keyframes cgIn { to { opacity:1; transform:none; } }
@keyframes imgFade { from { opacity:0; } to { opacity:1; } }

/* ---- iPhone bezel (matches the demo phone) ---- */
.cg-phone {
  position: relative; aspect-ratio: 1170/2532;
  background: #0b0a09; padding: 5%;
  border-radius: 15% / 6.4%;
  box-shadow: var(--sh-md), inset 0 0 0 1.5px rgba(255,255,255,.07);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.cg-card:hover .cg-phone { transform: translateY(-6px); box-shadow: var(--sh-lg), inset 0 0 0 1.5px rgba(255,255,255,.07); }
.cg-phone::before { /* dynamic island */
  content:""; position:absolute; top:3.4%; left:50%; transform:translateX(-50%);
  width:30%; aspect-ratio:3.05/1; background:#000; border-radius:999px; z-index:6;
}
.cg-thumb {
  position: relative; width:100%; height:100%;
  border-radius: 11% / 5%; overflow: hidden;
  background: var(--cream-3);
}
.cg-thumb img { position:absolute; inset:0; width: 100%; height: 100%; object-fit: cover; display:block; opacity: 1; z-index:2; animation: imgFade .5s var(--ease); }
.cg-thumb img.loaded { opacity: 1; }
.cg-thumb .ph { position:absolute; inset:0; z-index:0; background: linear-gradient(160deg, var(--cream-3), var(--cream-2)); transition: opacity .4s var(--ease); }
.cg-thumb .ph.gone { opacity: 0; }
.cg-thumb .ring { position:absolute; inset:0; z-index:3; border-radius: 11% / 5%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); pointer-events:none; }

/* status bar on the phone */
.cg-sb { position:absolute; top:0; left:5%; right:5%; height:7.4%; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:0 8%; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45); }
.cg-sb .t { font-family:var(--sf); font-size:.6rem; font-weight:600; padding-top:.55em; }
.cg-sb .i { display:flex; align-items:center; gap:3px; padding-top:.55em; }
.cg-sb .i svg { height:.55rem; width:auto; display:block; }

/* trending badge — on the phone, below the status bar */
.cg-trend {
  position:absolute; top:9.5%; left:9%; z-index:5;
  display:inline-flex; align-items:center; gap:5px;
  background: var(--bronze-grad); color:#fff; font-size:.64rem; font-weight:700;
  letter-spacing:.04em; padding:4px 9px; border-radius:999px; box-shadow: var(--sh-sm);
}
.cg-trend svg { width:11px; height:11px; }

/* caption below the phone */
.cg-cap { margin-top: 15px; padding: 0 2px; }
.cg-cap-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cg-cap-row b { font-family:'Schibsted Grotesk', sans-serif; font-weight:600; font-size:1.05rem; line-height:1.2; color: var(--ink); }
.cg-likes { display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; font-size:.84rem; font-weight:700; color: var(--ink-soft); padding-top:1px; }
.cg-likes svg { width:13px; height:13px; fill: oklch(0.66 0.19 24); stroke: oklch(0.66 0.19 24); }
.cg-cap .auth { display:block; font-size:.84rem; color: var(--bronze-dark); font-weight:600; margin-top:2px; }

/* ---- skeleton ---- */
.cg-skel .cg-phone { box-shadow: var(--sh-sm); }
.cg-skel .cg-phone::before { display:none; }
.cg-skel .sk { position:absolute; inset:0; background: linear-gradient(110deg, var(--cream-3) 30%, var(--cream-2) 50%, var(--cream-3) 70%); background-size: 220% 100%; animation: sksh 1.3s linear infinite; }
@keyframes sksh { to { background-position: -220% 0; } }

/* ---- states ---- */
.cg-state { max-width: 520px; margin: 40px auto; text-align:center; padding: 50px 28px; }
.cg-state .ic { width: 60px; height:60px; border-radius:18px; display:grid; place-items:center; margin:0 auto 18px; background: linear-gradient(150deg, rgba(214,181,126,.22), rgba(124,88,48,.14)); color: var(--bronze-dark); }
.cg-state .ic svg { width:30px; height:30px; }
.cg-state h3 { font-family:'Schibsted Grotesk'; font-size:1.5rem; margin-bottom:8px; }
.cg-state p { color: var(--ink-soft); }
.cg-state .btn { margin-top: 20px; }

/* ---- lightbox ---- */
.cg-lb { position: fixed; inset:0; z-index: 200; display:none; align-items:center; justify-content:center; padding: 28px; }
.cg-lb.open { display:flex; }
.cg-lb-back { position:absolute; inset:0; background: rgba(12,9,6,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade .3s ease; }
@keyframes fade { from { opacity:0; } }
.cg-lb-panel {
  position: relative; z-index:2; width: min(940px, 100%); max-height: 90vh; overflow:auto;
  background: var(--paper); border-radius: 28px; box-shadow: var(--sh-lg);
  display: grid; grid-template-columns: auto 1fr; gap: 0;
  animation: lbIn .4s var(--ease-out);
}
@keyframes lbIn { from { opacity:0; transform: translateY(20px) scale(.98); } }
.cg-lb-shots { display:flex; gap:14px; padding: 26px; background: var(--cream-2); border-radius: 28px 0 0 28px; align-items:center; }
.cg-shot { width: 168px; aspect-ratio: 9/19.5; border-radius: 22px; overflow:hidden; background:#0b0a09; box-shadow: var(--sh-md); position:relative; flex:0 0 auto; }
.cg-shot img { width:100%; height:100%; object-fit:cover; }
.cg-shot .cg-di { top:3.5%; width:34%; box-shadow:none; }
.cg-shot-sb { position:absolute; top:0; left:0; right:0; height:6.2%; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:0 9% 0 11%; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.cg-shot-sb .t { font-family:var(--sf); font-size:.62rem; font-weight:600; padding-top:.3em; }
.cg-shot-sb .i { display:flex; align-items:center; gap:3px; padding-top:.3em; }
.cg-shot-sb .i svg { height:.58rem; width:auto; display:block; }
.cg-shot-lbl { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:5; font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); padding:3px 10px; border-radius:999px; }
.cg-lb-info { padding: 30px 32px; display:flex; flex-direction:column; }
.cg-lb-close { position:absolute; top:16px; right:16px; z-index:5; width:38px; height:38px; border-radius:50%; border:none; background: var(--cream-2); color: var(--ink); cursor:pointer; display:grid; place-items:center; transition: background .25s, transform .25s; }
.cg-lb-close:hover { background: var(--cream-3); transform: rotate(90deg); }
.cg-lb-close svg { width:18px; height:18px; }
.cg-lb-info h2 { font-family:'Schibsted Grotesk'; font-size:1.7rem; letter-spacing:-0.02em; }
.cg-lb-info .by { color: var(--bronze-dark); font-weight:600; margin-top:4px; }
.cg-lb-info .by .date { color: var(--ink-faint); font-weight:500; }
.cg-lb-prompt { margin-top:18px; color: var(--ink-2); font-style:italic; line-height:1.5; border-left:3px solid var(--bronze-light); padding-left:14px; text-wrap:pretty; }
.cg-lb-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.cg-lb-tags span { font-size:.82rem; font-weight:600; color: var(--ink-2); background: var(--cream-2); border:1px solid var(--hair); border-radius:999px; padding:6px 12px; }
.cg-lb-likes { margin-top:auto; padding-top:22px; display:flex; align-items:center; gap:9px; color: var(--ink); font-weight:700; }
.cg-lb-likes svg { width:20px; height:20px; fill: oklch(0.66 0.19 24); stroke: oklch(0.66 0.19 24); }
.cg-lb-likes small { color: var(--ink-faint); font-weight:500; }

@media (max-width: 680px) {
  .cg-lb-panel { grid-template-columns: 1fr; max-height: 92vh; }
  .cg-lb-shots { border-radius: 28px 28px 0 0; justify-content:center; }
  .cg-shot { width: 132px; }
  .cg-nav .back span { display:none; }
}

[hidden] { display:none !important; }
.lang-en .fr { display:none; }
.lang-fr .en { display:none; }