/* home.css — pulp/comic hero styling + general helpers */
:root { --hero-h: 72vh; }

/* === Base / global === */
body {
  background:#062343;
  color:#fff;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  margin: 0;
}

/* utilities */
.underline\/50 { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.aspect-video { position: relative; padding-bottom: 56.25%; height: 0; }
.aspect-video > * { position: absolute; inset: 0; width: 100%; height: 100%; }

/* === HERO === */
.hero-wrap {
  position: relative;
  height: var(--hero-h);
  min-height: 460px;
  overflow: hidden; /* keep bg/overlays clipped */
}
.hero-bg {
  position:absolute; inset:0;
  background-position:center;
  background-size:cover;
  filter: brightness(.65) contrast(1.2) saturate(1.1);
  z-index: 0; /* back */
}
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,136,0,.35), rgba(6,35,67,.65));
  mix-blend-mode: overlay;
  z-index: 1; /* over bg, under content */
}
.hero-overlay::before {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(0,0,0,.15) 1px, transparent 1px);
  background-size: 6px 6px;
  opacity:.25;
}
.hero-overlay::after {
  content:""; position:absolute; inset:0;
  background: url('/wp-content/uploads/2025/01/pulp-texture.png') repeat;
  mix-blend-mode: multiply;
  opacity:.2;
}
.hero-wrap .relative {
  position: relative;
  z-index: 3;            /* top layer for logo/text/CTAs */
  text-align: center;
  padding: 0 1rem;
}
.hero-wrap h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  margin-top: 1.5rem;
}
.hero-wrap p {
  color: #d1d5db;
  max-width: 40rem;
  margin: 1rem auto 0;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease-in-out;
}
.btn-primary { background: #ff8800; color: #000; }
.btn-secondary { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); color: #fff; }
.btn:hover { opacity: .85; }

/* Cards & sections */
.card { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; }
.section { padding: 2.5rem 1rem; }
.section h2 { font-weight: 800; font-size: 1.5rem; }

/* Coming Up grid */
.next-grid { display: grid; gap: .75rem; }
@media (min-width: 640px){ .next-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px){ .next-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Reviews block (text over small images) */
.review { position: relative; overflow:hidden; border-radius: 1rem; }
.review img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: brightness(.7) saturate(1.1); }
.review::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.65)); }
.review > .inner { position:relative; z-index:2; padding: 1rem; }


/* Gallery hover effect */
.gallery-item img {
  transition: transform .25s ease, filter .25s ease;
  cursor: zoom-in;
}
.gallery-item:hover img {
  transform: scale(1.02);
  filter: brightness(1.05) contrast(1.05);
}

/* Lightbox image cursor */
#dj-lightbox-img { cursor: zoom-out; }

/* Gallery hover effect */
.gallery-item img {
  transition: transform .25s ease, filter .25s ease;
  cursor: zoom-in;
}
.gallery-item:hover img {
  transform: scale(1.02);
  filter: brightness(1.05) contrast(1.05);
}

/* Lightbox image cursor */
#dj-lightbox-img { cursor: zoom-out; }



/* Footer CTA strip */
.cta-strip { background: rgba(0,0,0,.45); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); padding: 1rem; }

#popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  z-index: 9998;
}
#popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #0b1020;
  color: #f7f7fa;
  border: 2px solid #FF8800;
  border-radius: 14px;
  padding: 28px 26px;
  width: 90%; max-width: 480px;
  display: none;
  z-index: 9999;
}
#popup h2 {
  font-family: 'Cinzel', serif;
  color: #FF8800;
  font-size: 1.8rem;
  margin-top: 0;
}
#popup button#popup-close {
  position: absolute;
  top: 12px; right: 14px;
  border: none; background: transparent;
  font-size: 1.6rem; font-weight: bold;
  color: #fff; cursor: pointer;
}