/**
 * Gallery Styles - Image Gallery Components
 * Reusable gallery styles for BRWS website
 * BRWS Website - 2025
 */

/* === Fruits Gallery Components === */

/**
 * Fruits gallery container
 * Centered vertical layout for image galleries
 * Used in fruits.php
 */
.fruits-gallery-container {
  width: 54%;
  margin: 0 auto;
  padding: 10px 4px;
  text-align: center;
}

.fruits-gallery-instruction {
  font-family: Century Gothic, Arial, sans-serif;
  font-size: 14px;
  color: #790000;
  text-align: center;
  margin-bottom: var(--spacing-2);
}

.fruits-gallery-item {
  text-align: center;
  margin-bottom: 15px;
}

.fruits-gallery-item a {
  display: inline-block;
  transition: transform var(--transition-base) var(--transition-ease),
              box-shadow var(--transition-base) var(--transition-ease);
}

.fruits-gallery-item a:hover,
.fruits-gallery-item a:focus {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.fruits-gallery-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Mobile: Full width gallery */
@media (max-width: 767px) {
  .fruits-gallery-container {
    width: 98%;
    padding: var(--spacing-2);
  }
}

/* === Lemongrass Gallery Components === */

/**
 * Lemongrass page background
 * Background grass image positioned at center bottom
 */
.lemongrass-page {
  background: url(../images/grass.webp) no-repeat center bottom;
  background-size: contain;
}

/**
 * Lemongrass gallery container
 * Centered vertical layout matching fruits gallery
 * Used in lemongrass.php
 */
.lemongrass-gallery-container {
  width: 54%;
  margin: 0 auto;
  padding: 10px 4px;
  text-align: center;
}

.lemongrass-gallery-item {
  text-align: center;
  margin-bottom: 15px;
}

.lemongrass-gallery-item a {
  display: inline-block;
  transition: transform var(--transition-base) var(--transition-ease),
              box-shadow var(--transition-base) var(--transition-ease);
}

.lemongrass-gallery-item a:hover,
.lemongrass-gallery-item a:focus {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lemongrass-gallery-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.lemongrass-gallery-item h1 {
  text-align: center;
  margin: 0;
}

/* Mobile: Full width gallery */
@media (max-width: 767px) {
  .lemongrass-gallery-container {
    width: 98%;
    padding: var(--spacing-2);
  }
}

/* === Sandhya Pradip Product Row === */

/**
 * Three-column product image row
 * Used in sandhya_pradip.php for displaying product variations
 * Desktop: 3 images side-by-side with gaps and borders
 * Mobile: Stacked vertically
 */
.sandhya-product-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  margin: 0 auto;
  max-width: 100%;
}

.sandhya-product-item {
  flex: 0 0 193px;
  width: 193px;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffc98c;
  padding: 10px;
  box-sizing: border-box;
}

.sandhya-product-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-base) var(--transition-ease),
              opacity var(--transition-base) var(--transition-ease);
}

.sandhya-product-item a:hover,
.sandhya-product-item a:focus {
  transform: scale(1.05);
  opacity: 0.9;
}

.sandhya-product-item img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: block;
}

/* Mobile: Full width items */
@media (max-width: 767px) {
  .sandhya-product-row {
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--spacing-3);
  }

  .sandhya-product-item {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 165px;
  }
}

/* === Mos Spray Gallery Components === */

/**
 * Mos spray gallery container
 * Flexible grid layout for product images and information
 * Used in mos_spray.php
 */
.mosspray-gallery-container {
  width: 100%;
}

.mosspray-gallery-row {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-bottom: var(--spacing-2);
}

.mosspray-gallery-row-two-col {
  grid-template-columns: 1fr 1fr;
}

.mosspray-gallery-row-single {
  grid-template-columns: 1fr;
}

.mosspray-gallery-item {
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mosspray-gallery-item a {
  display: inline-block;
}

.mosspray-gallery-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Mobile: Stack gallery items vertically */
@media (max-width: 767px) {
  .mosspray-gallery-row-two-col {
    grid-template-columns: 1fr;
  }
}