/* ══════════════════════════════════════════════
   ZANJI — PUBLIC / COMPONENTS
   Pills, buttons, ticker, modals, tabs, lightbox
   ══════════════════════════════════════════════ */

/* ── Pill button with circled arrow ─────────── */
.z-pill {
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:5px 5px 5px 20px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--z-body);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.z-pill-ico {
  width:34px; height:34px;
  border-radius:999px;
  display:grid; place-items:center;
  flex-shrink:0;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.z-pill-ico i { font-size:15px; line-height:1; }
.z-pill:hover .z-pill-ico { transform:translateX(3px); }

/* Ghost — over dark imagery */
.z-pill--ghost { background:rgba(242,237,228,.06); border-color:rgba(242,237,228,.16); color:var(--z-cream); }
.z-pill--ghost .z-pill-ico { background:var(--z-cream); color:var(--z-black); }
.z-pill--ghost:hover { background:var(--z-amber); border-color:var(--z-amber); color:var(--z-black); }
.z-pill--ghost:hover .z-pill-ico { background:var(--z-black); color:var(--z-amber); }

/* Light — cream chip */
.z-pill--light { background:var(--z-cream); color:var(--z-black); }
.z-pill--light .z-pill-ico { background:var(--z-black); color:var(--z-cream); }
.z-pill--light:hover { background:var(--z-amber); }

/* Dark — for use on amber / sun backgrounds */
.z-pill--dark { background:var(--z-sun-ink); color:var(--z-sun); }
.z-pill--dark .z-pill-ico { background:var(--z-sun); color:var(--z-sun-ink); }
.z-pill--dark:hover { background:#000; }

/* Outline on sun background */
.z-pill--sun { background:transparent; border-color:rgba(36,26,8,.35); color:var(--z-sun-ink); }
.z-pill--sun .z-pill-ico { background:var(--z-sun-ink); color:var(--z-sun); }
.z-pill--sun:hover { background:rgba(36,26,8,.08); border-color:var(--z-sun-ink); }

/* Amber solid */
.z-pill--amber { background:var(--z-amber); color:var(--z-black); }
.z-pill--amber .z-pill-ico { background:var(--z-black); color:var(--z-amber); }
.z-pill--amber:hover { background:var(--z-cream); }

/* ── Square buttons (legacy editorial style) ── */
.z-btn {
  display:inline-block;
  font-family:var(--z-body);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:.85rem 2rem;
  transition:background .2s, color .2s, border-color .2s;
}
.z-btn--solid { background:var(--z-amber); color:var(--z-black); }
.z-btn--solid:hover { background:var(--z-cream); }
.z-btn--outline { border:1px solid rgba(242,237,228,.4); color:var(--z-cream); }
.z-btn--outline:hover { border-color:var(--z-amber); color:var(--z-amber); }

/* ── Circular carousel controls ─────────────── */
.z-arrow-btn {
  width:38px; height:38px;
  border-radius:999px;
  display:grid; place-items:center;
  border:1px solid rgba(36,26,8,.3);
  background:transparent;
  color:var(--z-sun-ink);
  cursor:pointer;
  transition:background .2s, opacity .2s, border-color .2s;
}
.z-arrow-btn i { font-size:15px; line-height:1; }
.z-arrow-btn:hover { background:var(--z-sun-ink); color:var(--z-sun); border-color:var(--z-sun-ink); }
.z-arrow-btn:disabled { opacity:.3; cursor:default; }
.z-arrow-btn:disabled:hover { background:transparent; color:var(--z-sun-ink); }

.z-progress { position:relative; height:2px; width:150px; background:rgba(36,26,8,.2); overflow:hidden; }
.z-progress-bar { position:absolute; top:0; bottom:0; left:0; width:33%; background:var(--z-sun-ink); transition:width .3s ease, left .2s linear; }

/* ── Ticker tape ────────────────────────────── */
.ticker-wrap {
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid rgba(200,146,42,.2);
  border-bottom:1px solid rgba(200,146,42,.2);
  background:var(--z-ink);
  padding:.35rem 0;
}
.ticker-inner { display:inline-flex; animation:ticker 28s linear infinite; }
.ticker-wrap:hover .ticker-inner { animation-play-state:paused; }
@keyframes ticker { from { transform:translateX(0) } to { transform:translateX(-50%) } }
.ticker-item {
  padding:10px 40px;
  font-family:var(--z-display);
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(200,146,42,.65);
}
.ticker-dot { color:var(--z-amber); padding:0 6px; }

/* ── Modal ──────────────────────────────────── */
.z-modal {
  display:none;
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
  padding:1rem;
}
.z-modal.open { display:flex; animation:zFadeIn .2s ease; }
.z-modal-box {
  background:var(--z-ink);
  border:1px solid rgba(200,146,42,.2);
  width:100%; max-width:700px;
  max-height:90vh; overflow-y:auto;
  animation:zSlideUp .25s ease;
}

/* ── Filter tabs (gallery / videos) ─────────── */
.coll-tab,.cat-tab {
  font-family:var(--z-body);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.55rem 1.1rem;
  border:1px solid rgba(200,146,42,.15);
  border-radius:999px;
  color:rgba(242,237,228,.45);
  transition:all .2s;
  white-space:nowrap;
}
.coll-tab:hover,.cat-tab:hover { border-color:rgba(200,146,42,.5); color:var(--z-cream); }
.coll-tab.active,.cat-tab.active { background:var(--z-amber); border-color:var(--z-amber); color:var(--z-black); }

/* ── Lightbox ───────────────────────────────── */
.lightbox { display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.95); align-items:center; justify-content:center; }
.lightbox.open { display:flex; animation:zFadeIn .2s ease; }
.lightbox-img { max-width:90vw; max-height:90vh; object-fit:contain; animation:zSlideUp .25s ease; }
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(200,146,42,.15);
  border:1px solid rgba(200,146,42,.3);
  color:var(--z-amber);
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:999px;
  transition:background .2s;
}
.lightbox-nav:hover { background:rgba(200,146,42,.35); }
.lightbox-nav i { font-size:20px; line-height:1; }
#lb-prev { left:1.5rem; }
#lb-next { right:1.5rem; }