/* ========== Gallery & Video Pages (Premium Cinematic UI) ========== */

.gallery-series {
  margin-bottom: 4rem;
}
.gallery-series-head {
  margin-bottom: 2rem;
  text-align: center;
}
.gallery-series-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-weight: 600;
}
.gallery-series-head p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.gallery-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.8rem;
}
.gallery-item {
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.gallery-item:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  background: var(--bg-elevated);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Premium Image Zoom Effect on Hover */
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item figcaption {
  padding: 1.2rem 1rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  text-align: center;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 2; /* Keeps text above the zoomed image */
}

/* Placeholder for upcoming gallery items */
.gallery-item.placeholder {
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
}
.gallery-item.placeholder img {
  opacity: 0.15;
  filter: grayscale(100%);
}

/* ========== Video Page ========== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.video-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.video-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.video-thumb {
  position: relative;
  background: var(--bg-elevated);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-thumb video {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.6s ease;
}
/* Subtle zoom on video hover */
.video-card:hover .video-thumb video {
  transform: scale(1.03);
}
/* Cinematic Play Button Overlay */
.video-thumb::after {
  content: '▶';
  position: absolute;
  width: 54px;
  height: 54px;
  background: rgba(5, 5, 5, 0.6);
  backdrop-filter: blur(4px);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  padding-left: 4px; /* Centers the play triangle visually */
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--transition);
  pointer-events: none;
}
.video-card:hover .video-thumb::after {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 20px var(--accent-glow);
}

.video-info {
  padding: 1.5rem;
}
.video-info h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.3;
}
.video-info p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* Shared Buttons on Pages */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border: 1px solid var(--border-strong);
  border-radius: 30px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  transition: all var(--transition);
}
.btn-ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 4px 15px var(--accent-glow);
  transform: translateY(-2px);
}

/* Category-first Pinterest-style media index */
.media-category-filter { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.media-filter { border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); border-radius:999px; padding:8px 14px; cursor:pointer; transition:all .18s ease; }
.media-filter:hover, .media-filter.active { background:var(--accent); border-color:var(--accent); color:#111; }
.gallery-grid, .video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; align-items:start; }
.media-pin { break-inside:avoid; background:var(--bg-card); border:1px solid var(--border); border-radius:18px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.media-pin:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow); }
.media-pin-link { display:block; color:inherit; text-decoration:none; }
.media-pin-visual { position:relative; background:var(--bg-secondary); overflow:hidden; }
.media-pin-visual img, .media-pin-visual video { width:100%; height:auto; min-height:180px; max-height:440px; object-fit:cover; display:block; }
.media-pin-type { position:absolute; top:10px; right:10px; border:1px solid var(--border-strong); border-radius:999px; padding:5px 9px; background:rgba(0,0,0,.62); color:#fff; font-size:.72rem; }
.media-pin-copy { padding:14px 15px 16px; }
.media-pin-category { color:var(--accent); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.media-pin-copy h3 { margin:6px 0 7px; font-family:var(--font-display); color:var(--text-primary); font-size:1.1rem; line-height:1.35; }
.media-pin-copy p { margin:0; color:var(--text-secondary); font-size:.88rem; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.media-empty { min-height:180px; display:grid; place-items:center; color:var(--accent); font-family:var(--font-display); font-size:2rem; }
.reader-back { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--bg-secondary); color:var(--text-primary); border-radius:999px; padding:9px 14px; margin-bottom:24px; cursor:pointer; font-weight:600; }
.reader-back:hover { background:var(--accent); color:#111; border-color:var(--accent); }
.related-section { margin-top:42px; padding-top:28px; border-top:1px solid var(--border); }
.related-heading { color:var(--text-primary); font-family:var(--font-display); font-size:1.3rem; margin-bottom:16px; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.related-card { display:block; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--bg-secondary); color:inherit; text-decoration:none; }
.related-card:hover { border-color:var(--accent); }
.related-card img, .related-placeholder { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--bg-elevated); }
.related-placeholder { display:grid; place-items:center; color:var(--accent); font-family:var(--font-display); font-size:1.5rem; }
.related-card-body { display:block; padding:9px 10px 11px; }
.related-card-body strong { display:block; color:var(--text-primary); font-size:.87rem; line-height:1.35; }
.related-card-body small { display:block; color:var(--text-muted); margin-top:5px; font-size:.72rem; }
@media (max-width:600px) { .gallery-grid, .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .media-pin-copy { padding:10px; } .media-pin-copy h3 { font-size:.95rem; } .media-pin-copy p { font-size:.78rem; } .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }