/**
 * Gallery Infinite Scroll with Simple Grid Styles
 * 
 * Styles for the infinite scroll loading states, status messages, and simple grid layout
 * 
 * @package Pellikano_Theme
 * @since 1.0.0
 */

/* Simple Grid Container */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 auto;
}

/* Gallery Item Styling */
.gallery-item {
  width: 100%;
  transition: opacity 0.5s ease-in-out;
}

.gallery-item > div {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Responsive grid columns */
@media (max-width: 1279px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Hide status messages by default */
.page-load-status {
  display: none;
  width: 100%;
  text-align: center;
  clear: both;
}

/* Show loading indicator when requesting new page */
.page-load-status.infinite-scroll-request {
  display: block;
}

/* Show "last page" message when all content is loaded */
.page-load-status.infinite-scroll-last {
  display: block;
}

/* Show error message if there's an issue */
.page-load-status.infinite-scroll-error {
  display: block;
}

/* Individual status message visibility */
.infinite-scroll-request,
.infinite-scroll-last,
.infinite-scroll-error {
  display: none;
}

/* Request (loading) state */
.page-load-status.infinite-scroll-request .infinite-scroll-request {
  display: block;
}

/* Last page state */
.page-load-status.infinite-scroll-last .infinite-scroll-last {
  display: block;
}

/* Error state */
.page-load-status.infinite-scroll-error .infinite-scroll-error {
  display: block;
}

/* Loading spinner animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.infinite-scroll-request svg {
  animation: spin 1s linear infinite;
}

/* Style for the pagination that will be hidden */
.pagination {
  transition: opacity 0.3s ease-in-out;
}

/* View more button styling */
.view-more-button {
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-more-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* End of content message styling */
.infinite-scroll-last {
  padding: 2rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: #6b7280;
}

/* Error message styling */
.infinite-scroll-error {
  padding: 2rem;
  font-size: 1rem;
  font-weight: 500;
  color: #ef4444;
}

/* Loading message styling */
.infinite-scroll-request {
  padding: 2rem;
  color: #6b7280;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .page-load-status {
    padding: 1rem;
  }

  .infinite-scroll-last,
  .infinite-scroll-error {
    font-size: 1rem;
  }

  .gallery-grid {
    margin-bottom: 24px;
  }
}