/* ══════════════════════════════════════════════
   ZANJI — PUBLIC / INNER PAGES
   Story · Events · Gallery · Videos · Contact
   ══════════════════════════════════════════════ */

/* ── Shared page hero ───────────────────────── */
.page-hero {
  position:relative;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--z-black);
  min-height:52vh;
  padding-top:calc(var(--z-nav-h) + 4rem);
}
.page-hero--tall { min-height:62vh; }
.page-hero-img {
  position:absolute; inset:0;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.2;
}
.page-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(13,11,8,1) 0%,rgba(13,11,8,.35) 100%);
}
.page-hero-inner {
  position:relative; z-index:2;
  max-width:var(--z-shell); margin:0 auto; width:100%;
  padding:0 1.25rem 3.5rem;
}
.page-hero-title {
  font-size:clamp(3rem,11vw,8.5rem);
  line-height:.88;
  color:var(--z-cream);
}
.page-hero-title em { font-style:normal; color:var(--z-amber); display:block; }

/* ── Story page ─────────────────────────────── */
.chapter-num {
  position:absolute; right:-1rem; top:-1rem;
  font-family:var(--z-display);
  font-size:clamp(6rem,15vw,12rem);
  line-height:.85;
  color:rgba(200,146,42,.07);
  pointer-events:none; user-select:none;
}
.pull-quote {
  border-left:3px solid var(--z-amber);
  padding:1.5rem 2rem;
  font-family:var(--z-body);
  font-style:italic;
  font-size:1.25rem;
  line-height:1.55;
  color:var(--z-cream);
  background:rgba(200,146,42,.04);
}
.timeline-dot { width:12px; height:12px; background:var(--z-amber); border-radius:50%; flex-shrink:0; margin-top:5px; }
.timeline-line { width:1px; background:rgba(200,146,42,.2); flex:1; margin:4px 0; }

/* ── Events page ────────────────────────────── */
.event-row {
  position:relative; overflow:hidden;
  border:1px solid rgba(200,146,42,.15);
  background:var(--z-ink);
  border-radius:4px;
  transition:border-color .25s;
}
.event-row::before {
  content:''; position:absolute; top:0; left:0;
  width:4px; height:0;
  background:var(--z-amber);
  transition:height .4s ease;
}
.event-row:hover { border-color:rgba(200,146,42,.4); }
.event-row:hover::before { height:100%; }

.event-featured-badge {
  background:var(--z-amber); color:var(--z-black);
  font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
}
.month-header {
  font-family:var(--z-display);
  font-size:clamp(3rem,8vw,6rem);
  line-height:1;
  color:rgba(200,146,42,.08);
  pointer-events:none; user-select:none;
}

/* Homepage-style event card (used on index) */
.event-card {
  position:relative; overflow:hidden;
  border:1px solid rgba(200,146,42,.15);
  background:var(--z-ink);
  border-radius:4px;
  transition:border-color .25s, transform .25s;
}
.event-card::before {
  content:''; position:absolute; top:0; left:0;
  width:3px; height:0;
  background:var(--z-amber);
  transition:height .35s ease;
}
.event-card:hover { border-color:rgba(200,146,42,.5); transform:translateX(4px); }
.event-card:hover::before { height:100%; }
.event-date-block { min-width:64px; text-align:center; }

/* ── Gallery page ───────────────────────────── */
.gallery-grid { columns:2; column-gap:.75rem; }
@media (min-width:768px)  { .gallery-grid { columns:3; } }
@media (min-width:1024px) { .gallery-grid { columns:4; } }
.gallery-item {
  break-inside:avoid;
  margin-bottom:.75rem;
  position:relative; overflow:hidden;
  border-radius:3px;
  cursor:pointer; display:block;
}
.gallery-item img { width:100%; display:block; transition:transform .5s ease; }
.gallery-item:hover img { transform:scale(1.04); }
.gallery-item-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(13,11,8,.9) 0%,transparent 60%);
  opacity:0; transition:opacity .3s;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1rem;
}
.gallery-item:hover .gallery-item-overlay { opacity:1; }
.gallery-placeholder {
  aspect-ratio:3/4;
  display:flex; align-items:center; justify-content:center;
  background:var(--z-warm);
  border:1px solid rgba(200,146,42,.08);
}

/* ── Videos page ────────────────────────────── */
.vid-card {
  background:var(--z-ink);
  border:1px solid rgba(200,146,42,.12);
  border-radius:4px;
  overflow:hidden; cursor:pointer;
  transition:border-color .25s, transform .25s;
}
.vid-card:hover { border-color:rgba(200,146,42,.4); transform:translateY(-4px); }
.vid-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--z-warm); }
.vid-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.vid-card:hover .vid-thumb img { transform:scale(1.05); }
.play-circle { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); }
.play-circle i { font-size:54px; line-height:1; color:var(--z-amber); transition:transform .2s; filter:drop-shadow(0 0 16px rgba(200,146,42,.5)); }
.vid-card:hover .play-circle i { transform:scale(1.15); }

.vid-hero-card { background:var(--z-ink); border:1px solid rgba(200,146,42,.2); border-radius:4px; overflow:hidden; cursor:pointer; }
.vid-hero-thumb { position:relative; aspect-ratio:16/7; overflow:hidden; background:var(--z-warm); }
.vid-hero-thumb img { width:100%; height:100%; object-fit:cover; opacity:.6; transition:opacity .4s; }
.vid-hero-card:hover .vid-hero-thumb img { opacity:.78; }

/* ── Contact page ───────────────────────────── */
.z-input {
  width:100%;
  background:rgba(242,237,228,.04);
  border:1px solid rgba(200,146,42,.2);
  border-radius:3px;
  color:var(--z-cream);
  font-family:var(--z-body);
  font-size:.85rem;
  padding:.875rem 1rem;
  outline:none;
  transition:border-color .2s, background .2s;
}
.z-input::placeholder { color:rgba(242,237,228,.25); }
.z-input:focus { border-color:var(--z-amber); background:rgba(242,237,228,.06); }
select.z-input option { background:var(--z-ink); color:var(--z-cream); }

.social-link {
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 0;
  border-bottom:1px solid rgba(200,146,42,.08);
  transition:color .2s;
}
.social-link:hover { color:var(--z-amber); }
.social-link i { font-size:18px; line-height:1; }
.social-link:last-child { border-bottom:none; }

/* Location detail rows (Boxicons) */
.loc-detail {
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  line-height:1.55;
}
.loc-detail--inline { display:inline-flex; align-items:center; gap:.4rem; }
.loc-detail-ico {
  font-size:14px;
  color:var(--z-amber);
  opacity:.65;
  flex-shrink:0;
  margin-top:.12em;
}
.loc-detail--inline .loc-detail-ico { margin-top:0; }
.loc-detail--link { transition:color .2s; }
.loc-detail--link:hover { color:var(--z-amber); }
.loc-detail--link:hover .loc-detail-ico { opacity:1; }

/* ── Social grid (legacy square grid) ───────── */
.social-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px; }
.social-item { aspect-ratio:1/1; position:relative; overflow:hidden; background:var(--z-ink); cursor:pointer; }
.social-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.social-item:hover img { transform:scale(1.08); }
.social-overlay {
  position:absolute; inset:0;
  background:rgba(13,11,8,.75);
  opacity:0; transition:opacity .3s;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1rem;
}
.social-item:hover .social-overlay { opacity:1; }