/* ===== GALLERY PAGE SPECIFIC STYLES ===== */
/* This file contains styles specific to the gallery page layout and components */

/* ===== CUSTOM TEXT SELECTION HIGHLIGHT ===== */
::selection {
  background-color: rgba(252, 163, 17, 0.3); /* Light orange with transparency */
  color: #14213d; /* Dark blue text for better readability */
}

::-moz-selection {
  background-color: rgba(252, 163, 17, 0.3); /* Light orange with transparency for Firefox */
  color: #14213d; /* Dark blue text for better readability */
}

/* ===== GALLERY PAGE HEADER STYLES ===== */
/* Gallery page header section */
.gallery-header-section {
  background-color: #eae9e9; /* Solid background instead of gradient */
  padding: var(--spacing-3xl) 0; /* Large vertical padding */
  text-align: center; /* Center text alignment */
  position: relative; /* For decorative elements */
}

/* Gallery header wrapper */
.gallery-header-wrapper {
  max-width: var(--container-lg); /* Large container width */
  margin: 0 auto; /* Center container */
  padding: 0 var(--spacing-lg); /* Horizontal padding */
}

/* Gallery page title */
.gallery-page-title {
  font-size: var(--font-5xl); /* Extra large font size */
  font-weight: 800; /* Extra bold font weight */
  color: var(--primary-color); /* Primary color instead of gradient */
  margin-bottom: var(--spacing-lg); /* Bottom margin */
}

/* Gallery page subtitle */
.gallery-page-subtitle {
  font-size: var(--font-xl); /* Large font size */
  color: var(--text-secondary); /* Secondary text color */
  max-width: 600px; /* Maximum width for readability */
  margin: 0 auto; /* Center horizontally */
  line-height: 1.6; /* Comfortable line height */
}

/* ===== GALLERY FILTER SECTION STYLES ===== */
/* Filter section container */
.gallery-filter-section {
  padding: var(--spacing-2xl) 0; /* Large vertical padding */
  background-color: var(--background-color); /* Background color */
  border-bottom: 1px solid var(--border-color); /* Bottom border */
}

/* Filter wrapper */
.gallery-filter-wrapper {
  max-width: var(--container-lg); /* Large container width */
  margin: 0 auto; /* Center container */
  padding: 0 var(--spacing-lg); /* Horizontal padding */
  display: flex; /* Flexbox layout */
  justify-content: center; /* Center buttons */
  gap: var(--spacing-md); /* Space between buttons */
  flex-wrap: wrap; /* Allow wrapping on small screens */
}

/* Gallery filter buttons */
.gallery-filter-button {
  background-color: var(--surface-color); /* Surface background */
  color: var(--text-secondary); /* Secondary text color */
  border: 1px solid var(--border-color); /* Border */
  padding: var(--spacing-sm) var(--spacing-lg); /* Padding */
  border-radius: var(--radius-full); /* Pill shape */
  font-size: var(--font-base); /* Base font size */
  font-weight: 500; /* Medium font weight */
  font-family: 'Bodoni Moda', serif; /* Ensure Bodoni Moda font */
  cursor: pointer; /* Pointer cursor */
  transition: all 0.15s ease; /* Faster transitions */
  text-transform: capitalize; /* Capitalize text */
}

.gallery-filter-button:hover {
  background-color: var(--primary-color); /* Primary background on hover */
  color: white; /* White text on hover */
  border-color: var(--primary-color); /* Primary border on hover */
  transform: translateY(-1px); /* Subtle lift on hover */
}

/* Active filter button */
.gallery-filter-button.filter-active {
  background-color: var(--primary-color); /* Primary background */
  color: white; /* White text */
  border-color: var(--primary-color); /* Primary border */
  box-shadow: var(--shadow-medium); /* Medium shadow */
}

/* ===== GALLERY GRID SECTION STYLES ===== */
/* Gallery grid section container */
.gallery-grid-section {
  padding: var(--spacing-3xl) 0; /* Large vertical padding */
  background-color: var(--background-color); /* Background color */
}

/* Gallery grid wrapper */
.gallery-grid-wrapper {
  max-width: var(--container-xl); /* Extra large container width */
  margin: 0 auto; /* Center container */
  padding: 0 var(--spacing-lg); /* Horizontal padding */
  display: grid; /* Grid layout */
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Responsive grid */
  gap: var(--spacing-2xl); /* Large gap between items */
  min-height: 50vh; /* Prevent layout jumps during filtering */
}

/* ===== GALLERY ITEM STYLES ===== */
/* Individual gallery item container */
.gallery-item-container {
  position: relative; /* For image positioning */
  border-radius: var(--radius-xl); /* Large rounded corners */
  overflow: hidden; /* Hide overflow for rounded corners */
  background-color: var(--surface-color); /* Surface background */
  box-shadow: var(--shadow-light); /* Light shadow */
  transition: all 0.3s ease; /* Smooth transitions */
  opacity: 1; /* Default opacity */
  transform: scale(1); /* Default scale */
  cursor: pointer; /* Indicate clickable */
  will-change: transform; /* Optimize for animations */
}

.gallery-item-container:hover {
  transform: translateY(-4px) scale(1.02); /* Reduced lift and scale for subtlety */
  box-shadow: var(--shadow-large); /* Larger shadow on hover */
}

/* Gallery item image wrapper */
.gallery-item-image-wrapper {
  position: relative; /* For image positioning */
  overflow: hidden; /* Hide overflow */
  height: 300px; /* Fixed height */
  width: 100%; /* Ensure full width */
  display: block; /* Block display */
}

/* Gallery item image */
.gallery-item-image {
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  object-fit: cover; /* Cover the container */
  transition: transform 0.3s ease; /* Faster image transition */
}

.gallery-item-container:hover .gallery-item-image {
  transform: scale(1.03); /* Subtle scale effect on hover */
}

/* Gallery item hover overlay */
.gallery-item-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 33, 61, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.gallery-item-container:hover .gallery-item-hover-overlay {
  opacity: 1;
}

/* Gallery hover text */
.gallery-hover-text {
  color: white;
  font-size: var(--font-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 2px solid white;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transform: translateY(10px);
  transition: transform 0.3s ease;
}

.gallery-item-container:hover .gallery-hover-text {
  transform: translateY(0);
}

/* ===== GALLERY CTA SECTION STYLES ===== */
/* Gallery call-to-action section */
.gallery-cta-section {
  background-color: var(--primary-color); /* Solid background */
  padding: var(--spacing-3xl) 0; /* Large vertical padding */
  text-align: center; /* Center text */
  color: white; /* White text */
  position: relative; /* For decorative elements */
  overflow: hidden; /* Hide overflow */
}

/* Gallery CTA background pattern */
.gallery-cta-section::before {
  content: ""; /* Empty content */
  position: absolute; /* Absolute positioning */
  top: 0; /* Top alignment */
  left: 0; /* Left alignment */
  right: 0; /* Right alignment */
  bottom: 0; /* Bottom alignment */
  background: #de5409;
  opacity: 80; /* Very subtle opacity */
}

/* Gallery CTA wrapper */
.gallery-cta-wrapper {
  max-width: var(--container-lg); /* Large container width */
  margin: 0 auto; /* Center container */
  padding: 0 var(--spacing-lg); /* Horizontal padding */
  position: relative; /* Above background pattern */
  z-index: 1; /* Above background */
}

/* Gallery CTA heading */
.gallery-cta-heading {
  font-size: var(--font-4xl); /* Large font size */
  font-weight: 700; /* Bold font weight */
  color: white; /* White text */
  margin-bottom: var(--spacing-lg); /* Bottom margin */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle text shadow */
}

/* Gallery CTA description */
.gallery-cta-description {
  font-size: var(--font-xl); /* Large font size */
  color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
  margin-bottom: var(--spacing-2xl); /* Large bottom margin */
  max-width: 600px; /* Maximum width for readability */
  margin-left: auto; /* Center horizontally */
  margin-right: auto; /* Center horizontally */
  line-height: 1.6; /* Comfortable line height */
}

/* Gallery CTA button */
.gallery-cta-button {
  display: inline-flex; /* Inline flex */
  align-items: center; /* Center alignment */
  justify-content: center; /* Center content */
  padding: var(--spacing-lg) var(--spacing-2xl); /* Large padding */
  background-color: white; /* White background */
  color: var(--primary-color); /* Primary text color */
  font-weight: 600; /* Semi-bold font */
  font-size: var(--font-lg); /* Large font size */
  border: none; /* No border */
  border-radius: var(--radius-xl); /* Extra large rounded corners */
  text-decoration: none; /* No underline */
  cursor: pointer; /* Pointer cursor */
  transition: all var(--transition-fast); /* Smooth transitions */
  box-shadow: var(--shadow-large); /* Large shadow */
}

.gallery-cta-button:hover {
  background-color: var(--surface-color); /* Surface background on hover */
  color: var(--primary-color); /* Maintain primary text color */
  transform: translateY(-3px); /* Lift effect on hover */
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}

/* ===== FILTER FUNCTIONALITY STYLES ===== */
/* Hidden items during filtering */
.gallery-item-container.filter-hidden {
  opacity: 0; /* Fade out */
  transform: scale(0.95); /* Subtle scale down */
  pointer-events: none; /* Disable interactions */
}

/* Animation for showing items */
.gallery-item-container.filter-show {
  opacity: 1; /* Fade in */
  transform: scale(1); /* Normal scale */
  pointer-events: auto; /* Enable interactions */
}

/* Filter transition animation */
.gallery-item-container {
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Smooth filter transitions */
}

/* ===== RESPONSIVE DESIGN FOR GALLERY PAGE ===== */
/* Tablet styles */
@media (max-width: 768px) {
  /* Header adjustments */
  .gallery-page-title {
    font-size: var(--font-4xl); /* Smaller title */
  }

  .gallery-page-subtitle {
    font-size: var(--font-lg); /* Smaller subtitle */
  }

  /* Filter adjustments */
  .gallery-filter-wrapper {
    gap: var(--spacing-sm); /* Reduced gap */
  }

  .gallery-filter-button {
    padding: var(--spacing-xs) var(--spacing-md); /* Reduced padding */
    font-size: var(--font-sm); /* Smaller font */
  }

  /* Grid adjustments */
  .gallery-grid-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Smaller minimum width */
    gap: var(--spacing-xl); /* Reduced gap */
  }

  /* Item adjustments */
  .gallery-item-image-wrapper {
    height: 250px; /* Reduced height */
  }

  /* CTA adjustments */
  .gallery-cta-heading {
    font-size: var(--font-3xl); /* Smaller heading */
  }

  .gallery-cta-description {
    font-size: var(--font-lg); /* Smaller description */
  }
}

/* Mobile styles */
@media (max-width: 480px) {
  /* Further mobile adjustments */
  .gallery-header-section {
    padding: var(--spacing-2xl) 0; /* Reduced padding */
  }

  .gallery-page-title {
    font-size: var(--font-3xl); /* Smaller title */
  }

  .gallery-page-subtitle {
    font-size: var(--font-base); /* Base font size */
  }

  .gallery-filter-wrapper {
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center buttons */
  }

  .gallery-filter-button {
    width: 200px; /* Fixed width for consistency */
    text-align: center; /* Center text */
  }

  .gallery-grid-wrapper {
    grid-template-columns: 1fr; /* Single column */
    gap: var(--spacing-lg); /* Reduced gap */
  }

  .gallery-item-image-wrapper {
    height: 200px; /* Further reduced height */
  }

  .gallery-cta-heading {
    font-size: var(--font-2xl); /* Smaller heading */
  }

  .gallery-cta-button {
    padding: var(--spacing-md) var(--spacing-xl); /* Reduced padding */
    font-size: var(--font-base); /* Base font size */
  }
}

/* ===== ANIMATION ENHANCEMENTS ===== */
/* Simple fade in animation for all gallery items */
.gallery-item-container {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Simple fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0; /* Start transparent */
    transform: translateY(20px); /* Start slightly below */
  }
  to {
    opacity: 1; /* End opaque */
    transform: translateY(0); /* End at normal position */
  }
}

/* Filter transition animation */
.gallery-item-container {
  transition: opacity var(--transition-normal), transform var(--transition-normal); /* Smooth filter transitions */
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .gallery-item-container {
    animation: none; /* Disable animations */
  }

  .gallery-item-container:hover {
    transform: none; /* Disable hover transforms */
  }

  .gallery-item-image {
    transition: none; /* Disable image transitions */
  }
}

/* ===== IMAGE POPUP MODAL STYLES ===== */
/* Popup overlay covering the entire screen */
.image-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.image-popup-overlay.active {
  display: flex;
  opacity: 1;
}

/* Main popup container */
.image-popup-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  width: 1200px;
  background-color: var(--surface-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.8);
  transition: transform var(--transition-normal);
}

.image-popup-overlay.active .image-popup-container {
  transform: scale(1);
}

/* Close button */
.image-popup-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  line-height: 1;
  z-index: 10001;
  transition: all 0.2s ease;
}

.image-popup-close:hover {
  background-color: var(--accent-color);
  transform: scale(1.05);
}

/* Popup content layout */
.image-popup-content {
  display: flex;
  height: 80vh;
  max-height: 600px;
}

/* Left side - Image */
.image-popup-left {
  flex: 1;
  background-color: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.popup-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
}

/* Right side - Description */
.image-popup-right {
  flex: 0 0 400px;
  background-color: var(--primary-color);
  color: white;
  padding: var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.popup-content-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-lg);
}

.popup-title {
  font-size: var(--font-3xl);
  font-weight: 700;
  color: var(--accent-color);
  margin: 0;
  line-height: 1.2;
}

.popup-description {
  font-size: var(--font-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.popup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.popup-tag {
  background-color: var(--accent-color);
  color: var(--primary-color);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile responsive design */
@media (max-width: 768px) {
  .image-popup-container {
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
  }

  .image-popup-content {
    flex-direction: column;
    height: auto;
    max-height: 95vh;
  }

  .image-popup-left {
    flex: 0 0 50%;
    min-height: 300px;
  }

  .image-popup-right {
    flex: 1;
    padding: var(--spacing-lg);
  }

  .popup-title {
    font-size: var(--font-2xl);
  }

  .popup-description {
    font-size: var(--font-base);
  }
}