/* =========================================================
   Gallery page — extra styles on top of home.css
   ========================================================= */

/* ---------- Hero (compact: the photos are the show) ---------- */
.g-hero { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.g-hero::after { content: ""; position: absolute; right: -140px; top: -180px; width: 520px; height: 520px; border-radius: 50%; border: 2px solid rgba(216, 176, 81, .22); pointer-events: none; }
.g-hero__inner { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 16px; }
.g-hero h1 { font-size: clamp(32px, 4vw, 50px); font-weight: 900; text-wrap: balance; }
.g-hero__sub { font-size: 17px; color: #D5DDEE; max-width: 640px; }

/* ---------- Filter chips (stick under the header) ---------- */
.g-filterbar { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.g-filters { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; }
.g-filters::-webkit-scrollbar { display: none; }
.g-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .15s, border-color .15s; }
.g-chip:hover { border-color: var(--navy); }
.g-chip small { font-size: 12px; font-weight: 700; color: var(--body); background: var(--soft); border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.g-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.g-chip[aria-pressed="true"] small { background: var(--gold); color: var(--ink); }
.g-chip--photo:not([aria-pressed="true"]) { background: var(--gold-wash); }

/* ---------- Groups + grid ---------- */
.g-body { padding-top: 40px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 44px; }
.g-section { font-size: clamp(26px, 3vw, 34px); font-weight: 900; margin-bottom: -20px; }
.g-group { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 150px; }
.g-group__head { display: flex; align-items: baseline; gap: 10px; }
.g-group__head h3 { font-size: 20px; font-weight: 800; }
.g-group__head span { font-size: 14px; font-weight: 700; color: var(--gold-text); }
.g-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.g-grid--video { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.g-grid--photo { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.g-tile { width: 100%; padding: 0; border: 0; background: #fff; border-radius: 18px; overflow: hidden; cursor: pointer; text-align: left; display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--line), 0 0 0 1px var(--line); transition: transform .2s, box-shadow .2s; color: var(--ink); font: inherit; }
.g-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.g-thumb { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; background: var(--navy-deep); overflow: hidden; }
.g-tile--photo .g-thumb { aspect-ratio: 4 / 3; background: var(--ph); }
.g-thumb video, .g-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.g-tile:hover .g-thumb video, .g-tile:hover .g-thumb img { transform: scale(1.04); }
.g-thumb.is-missing img { display: none; }
.g-play { position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); transition: transform .15s; }
.g-play svg { margin-left: 3px; }
.g-tile:hover .g-play { transform: scale(1.08); }
.g-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; }
.g-meta b { font-size: 15px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-meta em { flex: none; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--gold-soft); color: #7A5A12; }
.g-tile--photo .g-meta em { background: var(--soft); color: var(--body); }

/* ---------- CTA ---------- */
.g-cta { background: var(--navy); color: #fff; border-radius: 28px; padding: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.g-cta h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 900; }
.g-cta p { color: #D5DDEE; margin-top: 6px; }
.g-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Full-screen viewer ---------- */
.g-viewer { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: #0B1330; color: #fff; }
.g-viewer[open] { display: flex; flex-direction: column; }
.g-viewer::backdrop { background: rgba(9, 15, 34, .9); }
.g-viewer__top, .g-viewer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px max(16px, env(safe-area-inset-left, 0px)); }
.g-viewer__top { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.g-viewer__bottom { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.g-viewer__count { font-size: 14px; font-weight: 700; color: var(--muted-on-dark); font-variant-numeric: tabular-nums; }
.g-viewer__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.g-viewer__stage video, .g-viewer__stage img { max-width: 100%; max-height: 100%; border-radius: 12px; background: #000; object-fit: contain; }
.g-viewer__stage video { width: min(100%, 1200px); }
.g-viewer button { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.g-viewer button:hover { background: rgba(255, 255, 255, .22); }
.g-viewer__caption { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.g-viewer__title { font-size: 17px; }
.g-viewer__badge { font-size: 13px; color: var(--gold); font-weight: 700; }
.g-viewer__badge:empty { display: none; }

@media (max-width: 640px) {
  .g-hero__inner { padding-top: 32px; padding-bottom: 36px; }
  .g-filterbar { top: calc(76px + env(safe-area-inset-top, 0px)); }
  .g-grid--video { grid-template-columns: 1fr; }
  .g-grid--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .g-tile--photo .g-meta { padding: 8px 10px; }
  .g-tile--photo .g-meta b { font-size: 13px; }
  .g-tile--photo .g-meta em { display: none; }
  .g-cta { padding: 28px 22px; }
  .g-viewer__stage { padding: 0; }
  .g-viewer__stage video, .g-viewer__stage img { border-radius: 0; }
}