/**
 * Teknofest 2025 Gallery - Premium Design
 * ========================================
 * Uses design tokens from design-tokens.css
 */

/* ==================== GALLERY SECTION ==================== */

#teknofest2025 {
  /* Base section styles from base.css */
  max-width: var(--container-max-width);

  /* Premium border */
  border: 3px solid var(--color-primary);

  /* Enhanced entrance animation */
  animation: fadeInUp var(--duration-slow) var(--ease-out);
}

#teknofest2025 h2 {
  /* Base h2 styles from base.css */
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-8);
  letter-spacing: var(--letter-spacing-wide);
}

/* ==================== GALLERY GRID ==================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-8);
  padding: var(--space-4);
}

/* ==================== GALLERY IMAGES ==================== */

.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;

  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border-accent);

  /* Premium shadows */
  box-shadow: var(--shadow-lg);

  cursor: pointer;
  transition: var(--transition-smooth);

  /* Entrance animation */
  animation: scaleIn var(--duration-slow) var(--ease-out);
  animation-fill-mode: both;
}

/* Stagger animation for gallery images */
.gallery img:nth-child(1) {
  animation-delay: 0.05s;
}

.gallery img:nth-child(2) {
  animation-delay: 0.1s;
}

.gallery img:nth-child(3) {
  animation-delay: 0.15s;
}

.gallery img:nth-child(4) {
  animation-delay: 0.2s;
}

.gallery img:nth-child(5) {
  animation-delay: 0.25s;
}

.gallery img:nth-child(6) {
  animation-delay: 0.3s;
}

.gallery img:nth-child(7) {
  animation-delay: 0.35s;
}

.gallery img:nth-child(8) {
  animation-delay: 0.4s;
}

.gallery img:nth-child(9) {
  animation-delay: 0.45s;
}

.gallery img:nth-child(10) {
  animation-delay: 0.5s;
}

.gallery img:nth-child(11) {
  animation-delay: 0.55s;
}

.gallery img:nth-child(12) {
  animation-delay: 0.6s;
}

.gallery img:nth-child(13) {
  animation-delay: 0.65s;
}

.gallery img:nth-child(14) {
  animation-delay: 0.7s;
}

.gallery img:nth-child(15) {
  animation-delay: 0.75s;
}

/* Premium hover effect */
.gallery img:hover {
  transform: scale(1.08) translateY(-5px);
  border-color: var(--color-primary);
  box-shadow:
    var(--shadow-premium-hover),
    var(--shadow-glow-primary);
  filter: var(--filter-brightness-hover) var(--filter-saturate-hover);
  z-index: 10;
}

/* ==================== MODAL OVERLAY ==================== */

.modal {
  display: none;
  position: fixed;
  inset: 0;

  /* Premium dark backdrop with strong blur */
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  z-index: var(--z-modal);

  /* Fade in animation when shown */
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==================== MODAL INNER CONTAINER ==================== */

.modal-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
}

/* ==================== MODAL IMAGE ==================== */

.modal img,
.modal-content {
  max-width: 85vw;
  max-height: 75vh;

  border-radius: var(--radius-xl);

  /* Premium shadows */
  box-shadow:
    var(--shadow-premium),
    0 0 50px rgba(255, 193, 7, 0.3);

  object-fit: contain;

  /* Scale in animation */
  animation: scaleIn var(--duration-slow) var(--ease-bounce);

  /* Subtle border glow */
  border: 2px solid var(--glass-border);
}

/* ==================== CLOSE BUTTON ==================== */

.close {
  position: absolute;
  top: var(--space-10);
  right: var(--space-12);

  font-size: 3rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);

  cursor: pointer;

  /* Premium shadow */
  text-shadow: var(--text-shadow-lg);

  transition: var(--transition-normal);

  /* Add background for better visibility */
  width: var(--space-16);
  height: var(--space-16);

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--glass-bg-hover);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
}

.close:hover {
  color: var(--color-primary-light);
  transform: rotate(90deg) scale(1.2);
  background: none;
  color: var(--color-bg-primary);
  box-shadow: var(--shadow-glow-primary-hover);
}

/* ==================== NAVIGATION ARROWS ==================== */

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  font-size: 4rem;
  padding: var(--space-5);
  color: var(--color-primary);

  cursor: pointer;
  user-select: none;

  /* Premium shadow */
  text-shadow: var(--text-shadow-lg);

  transition: var(--transition-normal);

  /* Add background */
  background: var(--glass-bg-hover);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);

  width: var(--space-16);
  height: var(--space-16);

  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow:hover {
  color: var(--color-primary-light);
  transform: translateY(-50%) scale(1.3);
  background: none;
  color: var(--color-bg-primary);
  box-shadow: var(--shadow-glow-primary-hover);
}

.arrow.left {
  left: var(--space-8);
}

.arrow.right {
  right: var(--space-8);
}

/* ==================== RESPONSIVE DESIGN ==================== */

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-5);
  }

  .gallery img {
    height: 180px;
  }

  .modal img,
  .modal-content {
    max-width: 92vw;
    max-height: 70vh;
  }

  .arrow {
    font-size: 3rem;
    width: var(--space-12);
    height: var(--space-12);
  }

  .close {
    font-size: 2.5rem;
    width: var(--space-12);
    height: var(--space-12);
    top: var(--space-6);
    right: var(--space-6);
  }

  .modal-inner {
    padding: var(--space-10);
  }
}

@media (max-width: 480px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-4);
  }

  .gallery img {
    height: 140px;
  }

  .arrow {
    font-size: 2.5rem;
    width: var(--space-10);
    height: var(--space-10);
  }

  .arrow.left {
    left: var(--space-4);
  }

  .arrow.right {
    right: var(--space-4);
  }

  .close {
    font-size: 2rem;
    width: var(--space-10);
    height: var(--space-10);
    top: var(--space-4);
    right: var(--space-4);
  }

  .modal-inner {
    padding: var(--space-6);
  }

  .modal img,
  .modal-content {
    max-width: 95vw;
    max-height: 65vh;
  }
}

/* ==================== GRID OPTIMIZATION ==================== */

/* Ensure last row items don't stretch */
@media (min-width: 769px) {
  .gallery::after {
    content: "";
    flex: auto;
  }
}