/* ============================================================
   GALLERY.CSS — drawing and photography page.
   Loads after site.css.
   ============================================================ */

/* ---------- HERO ---------- */
.g-hero { padding:56px 0 40px; position:relative; overflow:hidden; }
.g-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 380px at 76% 4%, rgba(232,130,61,.14), transparent 62%),
             radial-gradient(560px 420px at 4% 94%, rgba(61,110,119,.20), transparent 60%);
}
.g-hero .inner { position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center; }
.g-hero h1 {
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:clamp(2.2rem,5.2vw,3.6rem); line-height:1.03;
  text-transform:uppercase; margin:14px 0 18px;
}
.g-hero h1 span { color:var(--amber); }
.g-hero p { color:#CFC7B8; max-width:52ch; }
.g-hero .note {
  margin-top:22px; font-size:.87rem; color:var(--muted);
  border-left:3px solid var(--teal); padding:10px 0 10px 16px; max-width:52ch;
}

/* viewfinder frame, same language as the homepage hero */
.g-frame {
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--panel); box-shadow:var(--shadow); aspect-ratio:4/3;
}
.g-frame img { width:100%; height:100%; object-fit:cover; }
.g-frame .scrim {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,12,10,.8) 0%, transparent 46%);
}
.g-corner { position:absolute; width:24px; height:24px; border:2px solid rgba(232,130,61,.9); }
.g-corner.tl { top:13px; left:13px; border-right:0; border-bottom:0; }
.g-corner.tr { top:13px; right:13px; border-left:0; border-bottom:0; }
.g-corner.bl { bottom:13px; left:13px; border-right:0; border-top:0; }
.g-corner.br { bottom:13px; right:13px; border-left:0; border-top:0; }
.g-frame .meta {
  position:absolute; bottom:16px; left:48px; right:48px;
  display:flex; justify-content:space-between; gap:12px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.63rem;
  letter-spacing:.14em; color:#CFC7B8;
}

/* ---------- CONTROLS ---------- */
.g-controls {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:6px 0 30px;
}
.g-tab {
  background:var(--panel); border:1px solid var(--line); color:var(--muted);
  padding:9px 18px; border-radius:999px; font-size:.84rem;
  font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.08em;
  text-transform:uppercase; transition:.2s;
}
.g-tab:hover { color:var(--text); }
.g-tab[aria-pressed="true"] { border-color:var(--amber); color:var(--amber); background:var(--panel-2); }
.g-count {
  margin-left:auto; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* ---------- GRID ---------- */
.g-grid {
  columns:4; column-gap:18px; padding-bottom:20px;
}
.g-item {
  break-inside:avoid; margin-bottom:18px; position:relative;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--panel-2); cursor:pointer;
  transition:border-color .2s ease, transform .2s ease;
}
.g-item:hover { border-color:var(--amber); transform:translateY(-3px); }
.g-item.hide { display:none; }
.g-item img { width:100%; display:block; }

.g-overlay {
  position:absolute; inset:auto 0 0 0; padding:26px 16px 14px;
  background:linear-gradient(to top, rgba(13,12,10,.92), transparent);
  opacity:0; transition:opacity .25s ease;
}
.g-item:hover .g-overlay,
.g-item:focus-visible .g-overlay { opacity:1; }
.g-overlay .title { font-size:.94rem; font-weight:600; }
.g-overlay .cat {
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-top:3px;
}

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position:fixed; left:0; right:0; top:0;
  height:100vh; height:100dvh; z-index:120;
  display:none; place-items:center;
  background:rgba(8,7,6,.95);
  padding:
    max(20px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}
.lightbox.open { display:grid; }
.lightbox-inner {
  position:relative; display:grid; place-items:center;
  max-width:min(1100px,100%); max-height:100%;
}
.lightbox img {
  max-width:100%; max-height:calc(100dvh - 170px);
  width:auto; height:auto; object-fit:contain;
  border-radius:10px; background:var(--panel);
}
.lightbox-info {
  margin-top:16px; text-align:center;
}
.lightbox-info .title { font-size:1rem; font-weight:600; }
.lightbox-info .cat {
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--amber); margin-top:4px;
}
.lightbox-close, .lightbox-nav {
  position:absolute; z-index:3;
  background:rgba(22,20,15,.92); border:1px solid var(--line); color:var(--text);
  border-radius:50%; display:grid; place-items:center; line-height:1;
  transition:border-color .2s ease, color .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { border-color:var(--amber); color:var(--amber); }
.lightbox-close { top:-50px; right:0; width:40px; height:40px; font-size:1rem; }
.lightbox-nav { top:50%; transform:translateY(-50%); width:46px; height:46px; font-size:1.6rem; }
.lightbox-nav.prev { left:-62px; }
.lightbox-nav.next { right:-62px; }

/* ---------- CTA BAND ---------- */
.band { border-top:1px solid var(--line); background:var(--panel); }
.band-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap; padding:54px 0;
}
.band h2 {
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.2rem); text-transform:uppercase; line-height:1.1;
}
.band p { color:var(--muted); margin-top:10px; max-width:50ch; }
.band-actions { display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px) { .g-grid { columns:3; } }
@media (max-width:1000px) {
  .g-hero .inner { grid-template-columns:1fr; gap:34px; }
}
@media (max-width:760px) {
  .g-grid { columns:2; column-gap:14px; }
  .g-item { margin-bottom:14px; }
  /* the arrows have no room outside the image on a phone */
  .lightbox-nav.prev { left:6px; }
  .lightbox-nav.next { right:6px; }
  .lightbox-close { top:6px; right:6px; background:rgba(22,20,15,.96); }
  .lightbox-inner { width:100%; }
}
@media (max-width:420px) {
  .g-grid { columns:1; }
  .g-count { margin-left:0; width:100%; }
}

/* overlay is hover-only on desktop; on touch there is no hover, so show it */
@media (hover:none) {
  .g-overlay { opacity:1; background:linear-gradient(to top, rgba(13,12,10,.86), transparent); }
}