/* styles.css - Non-critical styles loaded after initial render */

/* Gallery image styles */
.gallery-image {
  height: auto;
  display: block;
  margin-bottom: 0.25rem;
  opacity: 30%;
  transition: opacity 0.5s ease;
}

.overlay-image-container {
  position: relative;
  display: inline-block; /* Change to inline-block to properly size based on content */
  margin-bottom: var(--spacing-unit);
  padding-right: 12px; /* Add padding to accommodate number */
  padding-bottom: 12px; /* Add padding to accommodate number */
}

.overlay-image {
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
  margin: 0;
  height: auto; /* Ensure proper aspect ratio */
  width: 100%; /* Ensure image takes full width of container */
}

/* Ensure images maintain their aspect ratio */
picture {
  display: inline-block;
}

picture img {
  max-width: 100%;
  height: auto;
}

/* Improved placeholder styling */
.image-placeholder {
  background-color: #f0f0f0;
  background-image: linear-gradient(110deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  display: inline-block;
  height: 0;
  padding-bottom: 66.67%;
  position: relative;
  border-radius: 4px;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Position the number next to the image, outside the bottom right corner */
.image-number {
  position: absolute;
  right: -12px; /* Position outside the right edge */
  bottom: -12px; /* Position outside the bottom edge */
  background: white;
  width: var(--number-size);
  height: var(--number-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgb(255, 0, 0);
  font-weight: bold;
  border: 1px solid black;
  transition: background-color 0.3s ease;
  z-index: 2; /* Ensure number stays above image */
}

.image-number:hover {
  background-color: #f0f0f0;
}

/* Painting positions */
.painting-position-1 {
  align-self: flex-start;
  margin-left: 10%;
  margin-top: 1.25rem;
}

.painting-position-2 {
  align-self: flex-start;
  margin-left: 15%;
  margin-top: 15vh;
}

.painting-position-3 {
  align-self: flex-start;
  margin-left: 8%;
  margin-top: 2.5vh;
}

.painting-position-4 {
  align-self: flex-start;
  margin-left: 10%;
  margin-top: 25vh;
}

.painting-position-5 {
  align-self: flex-start;
  margin-left: 6%;
  margin-top: 12.5vh;
}

.painting-position-6 {
  align-self: flex-start;
  margin-left: 25%;
  margin-top: 15vh;
}

.painting-position-7 {
  align-self: flex-start;
  margin-left: 1%;
  margin-top: 5vh;
}

.painting-position-8 {
  align-self: flex-start;
  margin-left: 1%;
  margin-top: 1.25vh;
}

.painting-position-9 {
  align-self: flex-start;
  margin-left: 3%;
  margin-top: 12.5vh;
}

/* Bottom section styles */
#bottom-link {
  padding: 1.25rem;
  width: 90%;
  margin-top: 2rem;
  position: relative; /* Make it a positioning context for the titles list */
  display: flex;
  justify-content: space-between; /* Spread sea-rock image and titles list */
  align-items: flex-start;
}

#bottom-link a {
  display: inline-block;
  max-width: 40%;
}

#bottom-link img {
  max-width: 130%;
  height: auto;
}

#image-list {
  position: static; /* Remove absolute positioning */
  width: 50%; /* Take up half the space in the flex container */
  padding: 0;
  padding-right: 1.5rem; /* Add some padding to push it further right */
  text-align: right; /* Align text to the right within its container */
  font-family: Arial, Helvetica, sans-serif;
  z-index: 10;
}

#image-list h2 {
  margin-bottom: 1.25rem;
}

#image-list ol {
  list-style-type: none;
  text-align: left;
}

#image-list li {
  margin-bottom: 0.9375rem;
  position: relative;
  padding-left: 2.5rem;
  display: flex;
  align-items: center;
  counter-increment: none;
}

#image-list .number-link {
  position: absolute;
  left: 0;
  width: var(--number-size);
  height: var(--number-size);
  background: white;
  border-radius: 50%;
  border: 1px solid black;
  color: rgb(255, 0, 0);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.9375rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

#image-list .number-link:hover {
  background-color: #f0f0f0;
}

/* Add some space between the number and the title */
#image-list span {
  margin-left: 0.3125rem;
}

/* anchor for titles list */
#titles {
  position: relative;
  top: -5vh;
  visibility: hidden;
}

#bottom-images {
  display: flex;
  padding: 1.25rem;
  gap: 1.25rem;
}

#bottom-rachel {
  width: 60%;
  position: relative;
  cursor: pointer;
}

#bottom-rachel img {
  width: 100%;
  height: auto;
  display: block;
}

#rachel-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

#bottom-right-images {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#bottom-purple-swirl, #bottom-chest {
  width: 25%;
}

#bottom-images img {
  width: 100%;
  height: auto;
}

.contact-info {
  display: flex;
  justify-content: space-between;
  padding: 1.25rem;
  margin-top: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.2em;
  color: red;
}

.contact-info a {
  text-decoration: none;
  color: red;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* Error fallback styling */
.error-fallback {
  background-color: #f8f8f8;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  position: relative;
}

/* Media Queries */
@media (min-width: 768px) {
  :root {
    --spacing-unit: 1.5rem;
  }
  
  #image-list {
    width: 45%;
  }
}

@media (min-width: 1024px) {
  :root {
    --spacing-unit: 2rem;
  }
  
  #image-list {
    width: 40%;
  }
}