/* ===== RESPONSIVE HERO PHOTO GALLERY ===== */
/* This file fixes the mobile responsiveness issues with the hero photo collage */

/* Mobile First Approach - Override the complex grid layout on small screens */

/* Mobile phones (up to 480px) */
@media (max-width: 480px) {
  .hero-photo-collage {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .collage-item {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100%;
    height: 80px;
    flex-shrink: 0;
  }

  /* Show only the first 6 images on mobile to avoid overcrowding */
  .collage-item:nth-child(n+7) {
    display: none;
  }

  .collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-sm);
  }

  /* Reduce hover effects on mobile */
  .collage-item:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Small tablets (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .hero-photo-collage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    padding: 8px;
  }

  /* Simplified positioning for tablet */
  .collage-item {
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* First 3 items take full width */
  .collage-item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .collage-item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .collage-item:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .collage-item:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .collage-item:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .collage-item:nth-child(6) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  .collage-item:nth-child(7) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .collage-item:nth-child(8) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  .collage-item:nth-child(9) {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }

  /* Hide extra items on tablet */
  .collage-item:nth-child(n+10) {
    display: none;
  }

  .collage-item img {
    border-radius: var(--radius-md);
  }
}

/* Large tablets (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-photo-collage {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    padding: 10px;
  }

  /* Reset all specific positioning */
  .collage-item {
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* Let items flow naturally in a 4x3 grid */
  .collage-item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; }
  .collage-item:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
  .collage-item:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; }
  .collage-item:nth-child(4) { grid-column: 4 / 5; grid-row: 1 / 2; }
  .collage-item:nth-child(5) { grid-column: 1 / 2; grid-row: 2 / 3; }
  .collage-item:nth-child(6) { grid-column: 2 / 3; grid-row: 2 / 3; }
  .collage-item:nth-child(7) { grid-column: 3 / 4; grid-row: 2 / 3; }
  .collage-item:nth-child(8) { grid-column: 4 / 5; grid-row: 2 / 3; }
  .collage-item:nth-child(9) { grid-column: 1 / 2; grid-row: 3 / 4; }
  .collage-item:nth-child(10) { grid-column: 2 / 3; grid-row: 3 / 4; }
  .collage-item:nth-child(11) { grid-column: 3 / 4; grid-row: 3 / 4; }
  .collage-item:nth-child(12) { grid-column: 4 / 5; grid-row: 3 / 4; }

  /* Hide extra items */
  .collage-item:nth-child(n+13) {
    display: none;
  }
}

/* Extra enhancements for better mobile experience */
@media (max-width: 768px) {
  /* Reduce hero content padding on mobile */
  .hero-content {
    padding: var(--spacing-8) var(--spacing-4);
  }

  .hero-title {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: var(--spacing-6);
  }

  /* Adjust hero collage overlay for better text readability on mobile */
  .hero-collage-overlay {
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.7) 100%
    );
  }

  /* Reduce animation intensity on mobile for better performance */
  .collage-item {
    transition: none;
  }

  .floating-leaves {
    display: none; /* Hide floating leaves on mobile for better performance */
  }
}

/* Landscape mobile phones */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-photo-collage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
  }

  .collage-item {
    grid-column: unset !important;
    grid-row: unset !important;
    height: auto;
  }

  /* Show 8 items in landscape */
  .collage-item:nth-child(n+9) {
    display: none;
  }
}

/* Improve touch targets on mobile */
@media (max-width: 768px) {
  .hero .btn {
    padding: var(--spacing-4) var(--spacing-6);
    font-size: 1.1rem;
    min-height: 44px; /* Minimum touch target size */
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .collage-item img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}