/* Gallery page — Figma: Desktop 93:189 · Tablet 93:168 · Mobile 93:5 */

/* ---------- 01 header ---------- */
.g-head { position: relative; padding-top: 136px; padding-bottom: 28px; } /* + 4 px tabs padding = 32 */
.g-head::after { /* soft fade into the page colour, like the Figma "Fade" layer */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 21, 20, 0) 0%, var(--bg-base) 100%);
}
.g-head .container { position: relative; z-index: 1; }
.g-tabs { margin-top: 32px; }
/* centred when it fits, scrollable from the start edge when it doesn't */
.g-tabs.tabs--center { justify-content: flex-start; }
.g-tabs .tab:first-child { margin-left: auto; }
.g-tabs .tab:last-child { margin-right: auto; }
.g-tabs .tab span { margin-right: -.3em; } /* no trailing letter-spacing: underline = text width, like Figma */
@media (max-width: 767px) {
  .g-tabs { margin-top: 11px; }
  .g-tabs .tab { padding-top: 21px; } /* 44 px tap target, text stays in place */
}

/* ---------- 02 featured coverflow ---------- */
.g-featured { position: relative; padding-top: 40px; padding-bottom: var(--section-pad); }
.g-featured__stage { overflow-x: clip; overflow-y: visible; padding-block: 60px; margin-block: -60px; } /* room for the shadow */
.g-featured .coverflow { --cf-w: 220px; --cf-h: 240px; --cf-step: 100px; }
.g-featured .coverflow__item { background: var(--bg-raised); }
.g-featured .coverflow__item[aria-hidden="false"] { cursor: zoom-in !important; }
.g-featured__meta { display: flex; flex-direction: column; align-items: center; }
.g-featured__meta .t-h4 { margin-top: 28px; }
.g-pager { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.g-pager__arrow {
  width: 44px; height: 44px; margin: -15px -17px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-primary);
  font-size: 13px; line-height: 18px; font-weight: 400; transition: color .2s;
}
.g-pager__arrow--prev { color: var(--text-secondary); }
.g-pager__arrow:hover { color: var(--text-primary); }
.g-pager .pager { gap: 16px; }
.g-pager .t-label { letter-spacing: .36em; margin-right: -.36em; }

/* ---------- 03 masonry grid ---------- */
.g-grid-section { padding-bottom: var(--section-pad); }
.g-grid {
  --n: 2;                    /* columns of the breakpoint grid (all photos) */
  --c: 2;                    /* columns actually used (fewer for small filtered sets) */
  --gap: 16px;
  display: grid; align-items: start; justify-content: center;
  grid-template-columns: repeat(var(--c), calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)));
  column-gap: var(--gap);
  transition: opacity .25s ease;
}
.g-grid.is-fading { opacity: 0; }
.g-col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; min-height: 0; } /* height = its aspect-ratio (set in JS) */
.g-item {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  flex: var(--grow, 1) 1 auto; min-height: 0; /* basis = height from aspect-ratio */
  background: var(--bg-raised); border-radius: var(--radius); box-shadow: var(--shadow-raised);
  overflow: hidden;
}
.g-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.g-item::after { content: ""; position: absolute; inset: 0; background: var(--bg-base); opacity: 0; transition: opacity .3s; pointer-events: none; }
@media (hover: hover) {
  .g-item:hover img { transform: scale(1.03); }
  .g-grid:hover .g-item:not(:hover)::after { opacity: .25; }
}
.g-item:focus-visible { outline-offset: 3px; }
/* no-JS fallback: a plain 2 / 3 column list */
.g-grid:not(.is-ready) { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); row-gap: var(--gap); }
.g-grid:not(.is-ready) .g-item { aspect-ratio: 4 / 5; }

/* ---------- 04 follow ---------- */
.g-follow { padding-top: 72px; padding-bottom: var(--section-pad); }
.g-follow__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.g-follow__inner .t-h3 { margin-top: 10px; }
.g-follow__inner [data-g-socials], .g-follow__inner .socials { margin-top: 24px; }
.g-follow .socials svg { display: block; }
@media (max-width: 767px) {
  .g-follow .socials a { padding: 14px; margin: -14px; } /* 44 px tap targets */
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 72px 16px; background: rgba(12, 11, 10, .94);
  opacity: 0; transition: opacity .3s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; max-height: 100%; margin: 0; }
.lightbox__img {
  max-width: min(100%, 1600px); max-height: calc(100vh - 176px); max-height: calc(100dvh - 176px);
  width: auto; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow-raised);
  transition: opacity .25s ease; user-select: none; -webkit-user-drag: none; touch-action: pan-y;
}
.lightbox__img.is-loading { opacity: 0; }
.lightbox__count { letter-spacing: .36em; }
.lightbox__close, .lightbox__nav {
  position: absolute; width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--text-primary); font-size: 18px; line-height: 1;
  opacity: .75; transition: opacity .2s;
}
.lightbox__close:hover, .lightbox__nav:hover { opacity: 1; }
.lightbox__close { top: 16px; right: 12px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 4px; }
.lightbox__nav--next { right: 4px; }
@media (max-width: 767px) {
  .lightbox__nav { top: auto; bottom: 12px; transform: none; }
  .lightbox__nav--prev { left: calc(50% - 64px); }
  .lightbox__nav--next { right: calc(50% - 64px); }
}

/* ---------- tablet ---------- */
@media (min-width: 768px) {
  .g-head { padding-top: 184px; padding-bottom: 44px; }
  .g-head::after { height: 140px; }
  .g-tabs { margin-top: 32px; }
  .g-tabs .tab { padding-top: 0; }
  .g-featured { padding-top: 48px; }
  .g-featured .coverflow { --cf-w: 380px; --cf-h: 340px; --cf-step: 175px; }
  .g-featured__meta .t-h4 { margin-top: 32px; }
  .g-pager { gap: 24px; margin-top: 28px; }
  .g-pager__arrow { font-size: 16px; line-height: 26px; margin: -9px -14px; }
  .g-grid { --n: 2; --gap: 16px; }
  .g-follow { padding-top: 0; }
  .lightbox { padding: 72px 80px; }
  .lightbox__nav--prev { left: 16px; }
  .lightbox__nav--next { right: 16px; }
  .lightbox__close { top: 20px; right: 20px; }
}

/* ---------- desktop ---------- */
@media (min-width: 1200px) {
  .g-head { padding-top: 208px; padding-bottom: 52px; }
  .g-featured { padding-top: 0; }
  .g-featured .coverflow { --cf-w: 440px; --cf-h: 420px; --cf-step: 260px; }
  .g-featured__meta .t-h4 { margin-top: 40px; }
  .g-pager { gap: 32px; margin-top: 24px; }
  .g-pager__arrow { font-size: 13px; line-height: 18px; margin: -13px -15px; }
  .g-grid { --n: 3; --gap: 24px; }
  .g-follow { padding-top: 128px; background: radial-gradient(60% 75% at 50% 50%, var(--bg-glow) 0%, var(--bg-base) 100%); }
  .g-follow__inner [data-g-socials], .g-follow__inner .socials { margin-top: 34px; }
  .lightbox { padding: 80px 120px; }
  .lightbox__nav { width: 64px; height: 64px; font-size: 22px; }
  .lightbox__nav--prev { left: 32px; }
  .lightbox__nav--next { right: 32px; }
  .lightbox__close { top: 32px; right: 32px; }
}