/* ============================================================
   GALLERY SECTIONS — Digital, Paintings, Photography
   ============================================================ */

/* Shared Section Styles */
.art-section {
  position: relative;
  padding: var(--section-padding) 0;
  transition: background 0.6s ease, color 0.6s ease;
  overflow: hidden;
}
.art-section::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* ── Digital Art Section ── */
.section-digital {
  background: linear-gradient(135deg, #0a0e27 0%, #0d1137 50%, #131852 100%);
  --s-accent: #00d4ff;
  --s-accent2: #8b5cf6;
  --s-text: #e0e7ff;
  --s-muted: #7c8db5;
  --s-card-bg: rgba(0,212,255,0.05);
  --s-card-border: rgba(0,212,255,0.12);
}
.section-digital::before {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='60' height='60' fill='none' stroke='rgba(0,212,255,0.04)' stroke-width='0.5'/%3E%3C/svg%3E");
}
.section-digital h2,
.section-digital h3 { font-family: 'Space Grotesk', sans-serif; color: var(--s-text); }
.section-digital p { color: var(--s-muted); }
.section-digital .section-label {
  background: rgba(0,212,255,0.1);
  border-color: rgba(0,212,255,0.2);
  color: #00d4ff;
}

/* ── Paintings Section ── */
.section-paintings {
  background: linear-gradient(135deg, #1a1410 0%, #231c14 50%, #2a2118 100%);
  --s-accent: #d4a574;
  --s-accent2: #c8956c;
  --s-text: #f5e6d3;
  --s-muted: #a08b76;
  --s-card-bg: rgba(212,165,116,0.05);
  --s-card-border: rgba(212,165,116,0.12);
}
.section-paintings::before {
  background: radial-gradient(ellipse at 20% 50%, rgba(212,165,116,0.06) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(200,149,108,0.04) 0%, transparent 60%);
  opacity: 1;
}
.section-paintings h2,
.section-paintings h3 { font-family: 'Cormorant Garamond', serif; color: var(--s-text); }
.section-paintings p { color: var(--s-muted); }
.section-paintings .section-label {
  background: rgba(212,165,116,0.1);
  border-color: rgba(212,165,116,0.2);
  color: #d4a574;
}

/* ── Photography Section ── */
.section-photography {
  background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0a0a0a 100%);
  --s-accent: #ffffff;
  --s-accent2: #888;
  --s-text: #e0e0e0;
  --s-muted: #777;
  --s-card-bg: rgba(255,255,255,0.03);
  --s-card-border: rgba(255,255,255,0.08);
}
.section-photography::before {
  /* Film grain */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.5;
}
.section-photography h2,
.section-photography h3 { font-family: 'Syne', sans-serif; color: var(--s-text); }
.section-photography p { color: var(--s-muted); }
.section-photography .section-label {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

/* ============================================================
   GALLERY GRID
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}
.gallery-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--s-card-bg, var(--glass-bg));
  border: 1px solid var(--s-card-border, var(--glass-border));
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.gallery-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  border-color: var(--s-accent, var(--accent));
}
.card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-card:hover .card-image img { transform: scale(1.08); }

/* Targeted Cure specific styling */
.gallery-card.targeted-cure-card .card-image img {
  object-fit: contain;
  padding: 40px;
  box-sizing: border-box;
}

/* Sacred Textures specific styling */
.gallery-card.sacred-textures-card .card-image {
  background-color: #0a0a0a;
}
.gallery-card.sacred-textures-card .card-image img {
  object-fit: contain;
  padding: 20px;
  max-height: 85vh;
  box-sizing: border-box;
}
.card-image .gradient-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-image .gradient-placeholder i {
  font-size: 2.5rem;
  opacity: 0.3;
  color: var(--s-accent, var(--accent));
}
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
  opacity: 0;
  transition: opacity var(--transition);
}
.gallery-card:hover .card-overlay { opacity: 1; }
.card-body {
  padding: 20px;
}
.card-category {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-accent, var(--accent));
  margin-bottom: 8px;
}
.card-body h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  transition: color var(--transition-fast);
}
.gallery-card:hover .card-body h3 { color: var(--s-accent, var(--accent)); }
.card-body p {
  font-size: 0.875rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-date {
  font-size: 0.75rem;
  color: var(--s-muted, var(--text-secondary));
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.card-tags span {
  font-size: 0.65rem;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--s-muted, var(--text-secondary));
}

/* ============================================================
   IMAGE SLIDER — Card & Modal
   ============================================================ */

/* ── Card-Level Mini Slider ── */
.card-slider {
  position: relative;
  width: 100%;
  height: 100%;
}
.card-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.card-slide.active {
  position: relative;
  opacity: 1;
}
.card-slide {
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-slide img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.card-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
.card-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.card-dot.active {
  background: #fff;
  transform: scale(1.25);
}
.card-dot:hover {
  background: rgba(255,255,255,0.5);
}

/* ── Modal Slider ── */
.modal-slider {
  position: relative;
  width: 100%;
  max-height: 80vh;
  border-radius: var(--radius-md);
  overflow: hidden;
  user-select: none;
  cursor: grab;
}
.modal-slider:active { cursor: grabbing; }
.slider-track {
  position: relative;
  width: 100%;
  height: 80vh;
}
.modal-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 80vh;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
}
.modal-slide.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
.modal-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Sacred Textures Modal Slide specific styling */
.modal-slide.sacred-textures-modal-slide {
  background-color: #050505;
}
.modal-slide.sacred-textures-modal-slide img.sacred-textures-img {
  object-fit: contain;
  padding: 20px;
  max-height: 85vh;
  box-sizing: border-box;
}
.slide-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.9);
  text-align: center;
}

/* ── Video Slides ── */
.card-slide video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #1a1a1a;
}
.modal-slide--video {
  background: #1a1a1a;
}
.modal-slide--video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Dynamic Sync Caption — fade-swap transition */
.modal-sync-title,
.modal-sync-desc {
  transition: opacity 0.5s ease;
}
.modal-sync-title.fade-swap,
.modal-sync-desc.fade-swap {
  opacity: 0;
}

/* Slider Arrows — minimalist */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}
.slider-prev { left: 12px; }
.slider-next { right: 12px; }
.slider-arrow:hover {
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-50%) scale(1.08);
}
.slider-arrow:active { transform: translateY(-50%) scale(0.95); }

/* Video Mute Button */
.slider-mute-btn {
  position: absolute;
  bottom: 25px;
  right: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}
.slider-mute-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  transform: scale(1.08);
}
.slider-mute-btn:active { transform: scale(0.95); }

/* Slider Dots — minimal */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.slider-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.slider-dot.active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.3);
}
.slider-dot:hover {
  background: rgba(255,255,255,0.4);
}

/* Photography — editorial full-bleed variant */
.section-photography .gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}
.section-photography .card-image { aspect-ratio: 3/2; }
.section-photography .gallery-card {
  border: none;
  border-radius: var(--radius-sm);
}
.section-photography .card-image img { filter: grayscale(30%) contrast(1.1); }
.section-photography .gallery-card:hover .card-image img {
  filter: grayscale(0%) contrast(1);
}

/* Masonry variant for paintings */
.section-paintings .gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.section-paintings .gallery-card {
  border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 16px; }
  .section-photography .gallery-grid { grid-template-columns: 1fr; }
}